<p>Quick idea:</p>

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

CC BY-SA 3.0
2016-10-09T10:48:16.933Z
2016-10-09T10:48:16.933Z
mdkdy
<p>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.</p>

<p><a href="https://i.sstatic.net/sgSuH.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/sgSuH.png" alt="textures"></a></p>

<p>Each color is a texture.</p>

<p>I have a polygon mesh with arbitrary shape that is parallel to these planes:</p>

<p><a href="https://i.sstatic.net/FdGTj.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/FdGTj.png" alt="polygon"></a></p>

<p>This shape could be completely contained within one of the planes, or larger.</p>

<p>I would like to texture the polygon with the overlapping textures of the planes:</p>

<p><a href="https://i.sstatic.net/gsaSF.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/gsaSF.png" alt="overlap"></a></p>

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

<p>I am also open to any other WebGL solutions.</p>

<p>A few ideas I had:</p>

<ol>
<li>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.</li>
<li>Apply multiple textures to the polygon and use UV coordinates to distribute them. -- Im not sure this is possible without subdividing?</li>
</ol>

<p>Any other ideas? Can this be accomplished with blending modes?</p>

CC BY-SA 3.0
2016-10-05T03:09:20.103Z
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
CC BY-SA 3.0
2016-10-05T08:23:08.357Z
sure if there was only one texture. How would this work with more than one texture like I specified?
roob
CC BY-SA 3.0
2016-10-05T11:14:38.860Z
You just put the textures into a texture array or atlas
JarkkoL
<rendering><webgl><clipping><masking>
How to clip multiple tiled textures to polygon in Webgl / opengl
roob
# How to clip multiple tiled textures to polygon in Webgl / opengl

(Asked by: username_0 on 2016-10-04)

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](https://i.sstatic.net/sgSuH.png)](https://i.sstatic.net/sgSuH.png)

Each color is a texture.

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

[![polygon](https://i.sstatic.net/FdGTj.png)](https://i.sstatic.net/FdGTj.png)

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](https://i.sstatic.net/gsaSF.png)](https://i.sstatic.net/gsaSF.png)

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?

**Tags:** rendering, webgl, clipping, masking

> **Comments:**
> **username_1**: Simplest solution would be to render the polygon and map the screen coordinates of the polygon to your desired texture coordinates in fragment shader  
> **username_0**: sure if there was only one texture. How would this work with more than one texture like I specified?  
> **username_1**: You just put the textures into a texture array or atlas  

---

## 1 answers

### Answer by username_2 on 2016-10-09. Score: 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.


---

