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:

  1. 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.
  2. 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?

  • $\begingroup$ Simplest solution would be to render the polygon and map the screen coordinates of the polygon to your desired texture coordinates in fragment shader $\endgroup$
    – JarkkoL
    Oct 5, 2016 at 3:09
  • $\begingroup$ sure if there was only one texture. How would this work with more than one texture like I specified? $\endgroup$
    – roob
    Oct 5, 2016 at 8:23
  • $\begingroup$ You just put the textures into a texture array or atlas $\endgroup$
    – JarkkoL
    Oct 5, 2016 at 11:14

1 Answer 1


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.