TSL Discard() not discarding?

Questions
,
1

I’m trying to port a WebGLRenderer shader patch from onBeforeCompile to TSL nodes for WebGPURenderer, but no luck yet.

Here’s the old code, working:

			// threeMat is a MeshPhysicalMaterial
			threeMat.onBeforeCompile = (params, renderer) => {
				params.fragmentShader = params.fragmentShader.replace(
					/*glsl*/ `vec4 diffuseColor = vec4( diffuse, opacity );`,
					/*glsl*/ `vec4 diffuseColor = vec4( diffuse, opacity );
						float edgePos = vMapUv.x;
						float pixelWidth = fwidth(edgePos);
						float fade = pixelWidth * 1.5;
						float alphaFactor = smoothstep(-fade, 0.0, edgePos);

						diffuseColor.a *= alphaFactor;

						if (diffuseColor.a <= 0.0) discard;
					`,
				)
			}

Here’s the new code, not working:

			const antiAliasClippingNode = Fn(() => {
				const mapUv = uv()
				const edgePos = mapUv.x
				const pixelWidth = fwidth(edgePos)
				const fade = pixelWidth.mul(1.5)
				const alphaFactor = smoothstep(fade.negate(), 0.0, edgePos)

				If(diffuseColor.a.mul(alphaFactor).lessThanEqual(0.0), () => Discard())

				return alphaFactor
			})

			// threeMat is now a MeshPhysicalNodeMaterial
			threeMat.opacityNode = antiAliasClippingNode()

Is there anything obviously wrong?

Before screenshot (expected):

Screenshot 2025-12-18 at 1.10.58 PM
Screenshot 2025-12-18 at 1.10.58 PM1920×1183 290 KB

After screenshot (not working):

Screenshot 2025-12-18 at 1.13.44 PM
Screenshot 2025-12-18 at 1.13.44 PM1752×1178 235 KB

The reason I’m clipping is so that I can show multiple materials on the same mesh. I translate the texture, and clip/antialias/discard the pixels for the material that should be on top.

In this case the black material should be on top, and when clipped, it should show the teal wood material.

I feel like I missing something small, but not obvious. :thinking:

2

comment hidden (turned out unrelated)

1 Like
3

comment hidden (turned out unrelated)

4

comment hidden (turned out unrelated)

5

comment hidden (turned out unrelated)

6

I’ve verified that this TSL code (I put 1337 in there to make it easy to find),

			const antiAliasClippingNode = Fn(() => {
				const mapUv = uv()
				const edgePos = mapUv.x
				const pixelWidth = fwidth(edgePos)
				const fade = pixelWidth.mul(1.5)
				const alphaFactor = smoothstep(fade.negate(), 0, edgePos)

				If(diffuseColor.a.mul(alphaFactor).lessThanEqual(0.1337), () => Discard())

				return alphaFactor
			})

does produce this output code:

	nodeVar1 = smoothstep( ( - ( fwidth( nodeVarying5.x ) * 1.5 ) ), 0.0, nodeVarying5.x );

	if ( ( ( DiffuseColor.w * nodeVar1 ) <= 0.1337 ) ) {

		discard;
		discard;
		

	}

so the real question is, why aren’t fragments being discarded?

Am I using the wrong TSL equivalent for the old vMapUv perhaps?