# Maskpass for terrain

**URL:** <https://discourse.threejs.org/t/maskpass-for-terrain/45883>\
**Category:** Questions\
**Tags:** post-processing\
**Created:** [December 16, 2022, 1:08pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883 "2022-12-16T13:08:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dsu](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dsu](https://discourse.threejs.org/u/dsu)\
**Post date:** [December 16, 2022, 1:08pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/1 "2022-12-16T13:08:49Z")

</div>

I use the polygon region, and now I just need to do slope analysis on the ground of this region. First, I thought of masking the polygon with a maskpass. After passing maskpass, I get something like the following. But I only want the surface part. Is there any way to keep the slope analysis for the part attached to the ground and give up the rest?

My current effect looks like this

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/0/d02fe98e3f04f89e53408d3d4f00fe0ab9cc750e.jpeg)

main code:

```javascript
const clearPass = new ClearPass();
composer.addPass(clearPass);

composer.addPass(tintPass); // A post-processor to calculate the global slope analysis results

const maskPass = new MaskPass(engine); // The engine contains the custom mask polygon
composer.addPass(maskPass);

const texturePass = new TexturePass(engine); // Here I've changed the texturepass code slightly to pass tDiffuse, map globally, to engine
composer.addPass(texturePass);

const clearMask = new ClearMaskPass();
composer.addPass(clearMask);

composer.addPass(outputPass)

```

I wanted to do it in a post-processing way because I used other frameworks based on three.js, which was cheaper for me.  
I want to get a topographic map of the ground, and now I have a stencil buffer, and I can change the maskpass or whatever to get what I want

---

<div class="post-metadata">

**Author:** ![dsu](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dsu](https://discourse.threejs.org/u/dsu)\
**Post date:** [December 16, 2022, 3:03pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/2 "2022-12-16T15:03:12Z")

</div>

Is there a friend who knows and can help to answer the question?

---

<div class="post-metadata">

**Author:** ![Omar\_Shehata](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omar_shehata/32/43576_2.png) [@Omar\_Shehata](https://discourse.threejs.org/u/Omar_Shehata)\
**Post date:** [December 17, 2022, 2:34pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/3 "2022-12-17T14:34:49Z")

</div>

I’m not sure I fully understand what effect you’re trying to achieve. Is the issue that the current implementation will render the slope on the sky as well as the ground, and you’d like to only be the ground?

If so, I would think one way to do that is to render a buffer that is black for sky and white for ground, and then pass that as an input to your slope post process so it knows where the sky is.

Also, if you’re able to post a minimal example others can run I think that will help others understand & help you out faster.

---

<div class="post-metadata">

**Author:** ![dsu](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dsu](https://discourse.threejs.org/u/dsu)\
**Post date:** [December 18, 2022, 3:12pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/4 "2022-12-18T15:12:41Z")

</div>

I have released a small demo, which probably reappears the problem I encountered. What I want is the result of the slope of the box surrounding the part that is attached to the ground. Could you please help to see what can be done.

> **[GitHub - JackXie60/maskpass-demo at master](https://github.com/JackXie60/maskpass-demo/tree/master)**
>
> master

---

<div class="post-metadata">

**Author:** ![Omar\_Shehata](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omar_shehata/32/43576_2.png) [@Omar\_Shehata](https://discourse.threejs.org/u/Omar_Shehata)\
**Post date:** [December 18, 2022, 5:16pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/5 "2022-12-18T17:16:21Z")

</div>

So the current demo you posted looks like it’s just showing a static image through the movable box. It sounds like what you want is to show the normals of the terrain through that.

To do that, first you need to render the terrain with the normals, using this ThreeJS material: [three.js docs](https://threejs.org/docs/?q=Normal#api/en/materials/MeshNormalMaterial)

Once you get that working, you can apply the dynamic mask to the scene that contains the terrain.

---

<div class="post-metadata">

**Author:** ![dsu](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dsu](https://discourse.threejs.org/u/dsu)\
**Post date:** [December 19, 2022, 12:50am UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/6 "2022-12-19T00:50:08Z")

</div>

So the question is how do I get this mask? The maskpass I used was passed into a box, and the result after my mask was also surrounded by a box, which could not achieve the effect of sticking to the ground. This is also what bothers me

---

<div class="post-metadata">

**Author:** ![Omar\_Shehata](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/omar_shehata/32/43576_2.png) [@Omar\_Shehata](https://discourse.threejs.org/u/Omar_Shehata)\
**Post date:** [December 20, 2022, 5:12pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/7 "2022-12-20T17:12:44Z")

</div>

Ok, I see what you mean. Instead of displaying the slope within the area of the box, you want to display the slope within the area of the entire ground?

If that’s all you need, I think this can all be done much simpler in a single pass by just assigning to your terrain mesh the MeshNormalMaterial, assuming the terrain is made of one or more meshes. That way it applies only to the ground. Have you tried that?

---

<div class="post-metadata">

**Author:** ![dsu](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dsu](https://discourse.threejs.org/u/dsu)\
**Post date:** [December 21, 2022, 7:33am UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/8 "2022-12-21T07:33:57Z")

</div>

What I need is the terrain where the terrain intersects the box，Will using MeshNormalMaterial achieve my desired effect without using a mask？Could you please give me a minimal example to help me understand your implementation？

---

<div class="post-metadata">

**Author:** ![dsu](https://avatars.discourse-cdn.com/v4/letter/d/6bbea6/32.png) [@dsu](https://discourse.threejs.org/u/dsu)\
**Post date:** [December 21, 2022, 2:57pm UTC](https://discourse.threejs.org/t/maskpass-for-terrain/45883/9 "2022-12-21T14:57:51Z")

</div>

I see someone who has similar problems with me, and you have answers. I don’t use cesium.js now, but I have implemented the ground rendering, so I want to get local material should I also let the ground rendering support the map, and then pass in the normalMap,I think it should work.

> **[Globe Materials，How to specify an area？](https://community.cesium.com/t/globe-materials-how-to-specify-an-area/8224)**
>
> This effect is very good： But I don't want it to participate globally, just in the designated area.How can I achieve it?