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


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:


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 :smile:

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

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

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