3

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.

textures

Each color is a texture.

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

polygon

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:

overlap

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?

roob
  • 131
  • 4
  • Simplest solution would be to render the polygon and map the screen coordinates of the polygon to your desired texture coordinates in fragment shader – JarkkoL Oct 05 '16 at 03:09
  • sure if there was only one texture. How would this work with more than one texture like I specified? – roob Oct 05 '16 at 08:23
  • You just put the textures into a texture array or atlas – JarkkoL Oct 05 '16 at 11:14

1 Answers1

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.
mdkdy
  • 2,169
  • 1
  • 12
  • 19