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

Questions
, , , ,
1

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
image1920×1026 101 KB

Result:
image
image632×581 65.4 KB

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;
2

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