# How to hide part of material based on vertex position with the new webgpu node materials?

**URL:** <https://discourse.threejs.org/t/how-to-hide-part-of-material-based-on-vertex-position-with-the-new-webgpu-node-materials/66658>\
**Category:** Questions\
**Tags:** node-material, webgpu, materials, tsl, shaders\
**Created:** [June 10, 2024, 9:37pm UTC](https://discourse.threejs.org/t/how-to-hide-part-of-material-based-on-vertex-position-with-the-new-webgpu-node-materials/66658 "2024-06-10T21:37:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Schmitz](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tom\_Schmitz](https://discourse.threejs.org/u/Tom_Schmitz)\
**Post date:** [June 10, 2024, 9:37pm UTC](https://discourse.threejs.org/t/how-to-hide-part-of-material-based-on-vertex-position-with-the-new-webgpu-node-materials/66658/1 "2024-06-10T21:37:12Z")

</div>

Hi,

I’m quite new to the WebGPU node materials and trying to figure out how to hide part of a material (change opacity) based on the vertex position.

**Bellow a screenshot of a shader graph (external tool) of what I’m trying to achieve:**

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/2/a246990eb6b364de1a8b2291251ac3f064c509a0.jpeg)  
**Result:**  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/d/3dacf31f9767c2b24a35578e138dc5626c947dbb.jpeg)

I have been going through the node examples, but I can quite seem to figure it out, any help would be much appreciated.

Here is what I’ve got so far, but I think I’m quite a bit off 😄

```js
const material = new MeshStandardNodeMaterial();
const opacityControl = tslFn(() => {
	if (positionLocal.x > 0) {
		return float(1)
	}
	return float(0)
}) 
material.opacityNode = opacityControl()
material. Transparent = true;

```

---

<div class="post-metadata">

**Author:** ![Tom\_Schmitz](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tom\_Schmitz](https://discourse.threejs.org/u/Tom_Schmitz)\
**Post date:** [June 12, 2024, 10:58am UTC](https://discourse.threejs.org/t/how-to-hide-part-of-material-based-on-vertex-position-with-the-new-webgpu-node-materials/66658/2 "2024-06-12T10:58:28Z")

</div>

Just found a solution for this. Here is an example code snippet of how I managed to achieve it.

```javascript
const material = new MeshStandardNodeMaterial();
const limitPosition = tslFn( ( ) => {
    const limit = 1;
    const result = positionLocal.toVec3().toVar();
    const opacity = float(1).toVar()

    If( result.x.greaterThan( limit ), () => {
         opacity.a = float(0)
    });

    return opacity.a;
} );

material.opacityNode = limitPosition( );
material.transparent = true;

```

Link to relevant documentation: [Three.js Shading Language · mrdoob/three.js Wiki · GitHub](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language#position)