Masking part of a mesh using another mesh

Hi all - I'm working if some folk could help me out with some suggestions on how to achieve a particular effect. Please excuse my horrendous MS Paint drawings to illustrate the problem!

My game is a simple 2D sidescrolling game, where I have a partially transparent mesh representing the ocean:



The ocean is dynamic, so the mesh updates every frame based on some sine wave functions to give a sort of randomized wave-y effect.

I also have a solid mesh representing an island:



The ocean is currently drawn in front of the island, so you get a composite image like this:



My aim is to create a simple underwater caustic effect - I basically want to draw a texture over the part of the image where both the island and the ocean meet - ie the shaded area marked here:



My current implementation basically steps along the ocean at set step rate, queries the current height of the ocean and the height of the island at each point, and then manually generates a separate caustic mesh which is overlayed on top. This seems horribly inefficient (I'm aiming for mobile devices and its the #1 performance hog according to the profiler) - I'm sure there must be a much nearer shader-based way of doing this, but my non-graphics programmer brain isn't totally sure of how to go about it.

Any help much appreciated!

 

I'd say using the stencil buffer is the way to go. Basic steps:

1. Mark the island while rendering it with stencil mask 1
2. Mark the water while rendering it with stencil mask 2
3. Render the caustic effect where the stencil buffer equals 3 (binary or of 1 and 2)

 

Excellent, thank you