I have this problem to solve using Cocos2d-x 3.x: In my game there is water represented by rectangle texture, modified by the code on the go. I also have a character moving around, rotating etc.

I would like to achieve silhouette effect when he goes into the water - so if pixel of character texture is not transparent and pixel of water texture is not transparent, color should be changed lets say to gray. I would like it to work as fragment shader added to character sprite.

The problem is that I have no idea how to go from character UV coords to water texture coords (positions, rotations and dimensions of textures are different). I am also not sure the approach proposed by me is the correct one, maybe there is better way to do it?

Could you please give me some thought how it should be done? Any code is welcome too!

Edit: here is a visualization, red triangle is character, it changes color as it submerges player submerges into water

  • \$\begingroup\$ Could you provide a screenshot of the kind of effect you are looking for? \$\endgroup\$
    – fintelia
    Aug 11, 2014 at 22:09
  • \$\begingroup\$ you want the effect to be permanent on the object you're sinking? you dip it then take it out and it's supposed to be "wet"? \$\endgroup\$
    – dreta
    Aug 12, 2014 at 12:11
  • \$\begingroup\$ no, it shouldnt change the object, all I need is a silhouette underwater ;) \$\endgroup\$
    – Siegfried
    Aug 12, 2014 at 12:49
  • \$\begingroup\$ This sort of rendering issue is exactly what stencil buffers are for. \$\endgroup\$ Aug 12, 2014 at 13:04

2 Answers 2


I would implement it as a multipass algorithm, a bit similar to shadow maps. You render the character to a frame buffer, color(RGBA) and depth(Z). Now you simply apply the frame buffer to the regular buffer (with depth). Then you render the watter, you sample from the frame buffer. If the value A=0, you render the watter normally. If A!=0 and Z>=current depth, you take RGB and do whatever effect you want to do.


An easy way would be to first render the object and then render the water using multiplicative rendering (i.e. modulate the frame buffer color with water color). Not quite sure if it gives you the result you want though (you could test it in Photoshop for example). If you want more control you would have to first render the object, copy the result to a texture and then render the water using the texture as an input for the water fragment shader that does some custom color composition with it.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .