# How to use stencil test

**URL:** <https://discourse.threejs.org/t/how-to-use-stencil-test/70283>\
**Category:** Questions\
**Tags:** materials\
**Created:** [September 4, 2024, 12:54pm UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283 "2024-09-04T12:54:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![fengfengmomo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fengfengmomo/32/49882_2.png) [@fengfengmomo](https://discourse.threejs.org/u/fengfengmomo)\
**Post date:** [September 4, 2024, 12:54pm UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/1 "2024-09-04T12:54:07Z")

</div>

Hello! everyone!  
I want to make a affect like cesium ground line/surface, like this  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/5/1570be98b31b87b0a9e68ea738e9b66038bfee15.jpeg)

how to do it? Is there any idea or document

---

<div class="post-metadata">

**Author:** ![fengfengmomo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fengfengmomo/32/49882_2.png) [@fengfengmomo](https://discourse.threejs.org/u/fengfengmomo)\
**Post date:** [September 4, 2024, 2:15pm UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/2 "2024-09-04T14:15:54Z")

</div>

i had see this link [Add Stencil Parameter to Materials by gkjohnson · Pull Request #15611 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/pull/15611)

and i have write code like it ,but it not work.  
code: [stencil test (codepen.io)](https://codepen.io/FengFengmomo/pen/dyBKeGR?editors=0010)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [September 4, 2024, 2:43pm UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/3 "2024-09-04T14:43:04Z")

</div>

`stencil` is disabled by default since r163 (you seem to be using r168) - [related](https://github.com/mrdoob/three.js/pull/27900). You have to enable it manually in WebGLRenderer constructor `new WebGLRenderer({ stencil: true, /* ... */ })`.

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [September 4, 2024, 3:43pm UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/4 "2024-09-04T15:43:29Z")

</div>

> [@Stencil projection demo](https://discourse.threejs.org/t/stencil-projection-demo/63889):
>
> I had an interview recently and we discussed how would one project this spline representing a vehicles trajectory onto uneven terrain. I proposed something like stencil shadows instead of textures. This is a demo of that - there is a spline that can be moved, it’s above the terrain, and it projects a shadow basically. It’s not the whole stencil shadow algorithm since it doesn’t compute any contours and such, but the way it writes to stencil is borrowed from there. [Link](https://codesandbox.io/p/sandbox/three-js-forked-jnk3w8)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [September 5, 2024, 1:42am UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/5 "2024-09-05T01:42:58Z")

</div>

material:  
depthFunc : THREE.GreaterDepth  
side: THREE.BackSide  
on a blue cube gets you most of the way to your screenshot.  
No stencil required.  
Greater depth means it will render only when its obscured by/behind the terrain…  
BackSide, means you’ll only see the back faces of the cube when it renders behind the scenery, which prevents the issue of the camera clipping through the blue box and making it disappear.

---

<div class="post-metadata">

**Author:** ![fengfengmomo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fengfengmomo/32/49882_2.png) [@fengfengmomo](https://discourse.threejs.org/u/fengfengmomo)\
**Post date:** [September 5, 2024, 8:00am UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/6 "2024-09-05T08:00:52Z")

</div>

i’ll have a try

---

<div class="post-metadata">

**Author:** ![fengfengmomo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fengfengmomo/32/49882_2.png) [@fengfengmomo](https://discourse.threejs.org/u/fengfengmomo)\
**Post date:** [September 5, 2024, 8:07am UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/7 "2024-09-05T08:07:57Z")

</div>

i have try it, and it see normal behind the terrain, but it will been saw in other direction

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/c/8c85d45a4550d0113f3cd0ae0e0d10a5b82e9074.png)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/7/47dfac4a28b93b26dd08636bebc5915737430606.png)

it will not meet my require, because i want it stick ground only, and geometry not be saw in other direction. But i have admit it , its very instresting!

---

<div class="post-metadata">

**Author:** ![fengfengmomo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fengfengmomo/32/49882_2.png) [@fengfengmomo](https://discourse.threejs.org/u/fengfengmomo)\
**Post date:** [September 5, 2024, 9:47am UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/8 "2024-09-05T09:47:52Z")

</div>

Wow ! it’s amazing!  
How does it work? when i remove code ‘scene.add(firstPass)’ , i think it will display here too, but it is not.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/1/b1822cfaec781a3299a6ed8c209e69706e8d9314.jpeg)

and i have a question, it’s shadow color depend on plane color, right? it means that threre only one shadow color even two different curve.

---

<div class="post-metadata">

**Author:** ![fengfengmomo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fengfengmomo/32/49882_2.png) [@fengfengmomo](https://discourse.threejs.org/u/fengfengmomo)\
**Post date:** [September 5, 2024, 10:18am UTC](https://discourse.threejs.org/t/how-to-use-stencil-test/70283/9 "2024-09-05T10:18:23Z")

</div>

i have done it , here is demo result  
[stencil test (codepen.io)](https://codepen.io/FengFengmomo/pen/dyBKeGR?editors=0010)  
main reference: [Add Stencil Parameter to Materials by gkjohnson · Pull Request #15611 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/pull/15611)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/7/a70902dcf28a8752e6d4fb311da707ee86bc74e1.png)