Water silhouette shader using GLSL

Question

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

Answer 1

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.

Answer 2

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.