How to clip multiple tiled textures to polygon in Webgl / opengl I have a bunch of planes each with their own texture in a grid. Currently I am rendering these as separate planes, each with their own texture, although I could use a single plane with multiple faces.



Each color is a texture.

I have a polygon mesh with arbitrary shape that is parallel to these planes:



This shape could be completely contained within one of the planes, or larger.

I would like to texture the polygon with the overlapping textures of the planes:



How do I accomplish this clipping of the textures in three js / WebGl?

I am also open to any other WebGL solutions.

A few ideas I had:


Subdivide the polygon into faces that correspond with the overlapping planes. Then texture these faces using UV coords. I know I can get this to work, but it seems like too complicated of a solution.
Apply multiple textures to the polygon and use UV coordinates to distribute them. -- Im not sure this is possible without subdividing?


Any other ideas? Can this be accomplished with blending modes?
Quick idea:


render platforms color to screen quad
render mesh and platforms to screen quad, but as a mask. For example mesh is white, rest is black. 
in another pass sample these textures and if mask is white, color it with sample from first texture. Render to screen.