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?