How to use Discard in TSL;

Questions
1

I have this line of code: if (gl_fragColor. a<=0.0) discard; I haven’t found the ‘discard’ function in the documentation. How can I translate it into ‘tsl’?

2

image
image2101×1101 48.6 KB

3

The below PR should fix the issue in the TSL Transpiler:

You can write the statement like so:

import { Discard, If } from 'three/tsl';

If( gl_FragColor.a.lessThanEqual( 0.0 ), () => {

	Discard();

} );

A more compact option without the If statement is:

gl_FragColor.a.lessThanEqual( 0.0 ).discard();
3 Likes
4

Not getting it to work, so guess Im doing something wrong.

Anyone that can point me in the right direction ?

const scene = new THREE.Scene();


const sphere = new THREE.SphereGeometry(2, 15, 15, 0);

const material = new MeshStandardNodeMaterial({
  color: new THREE.Color("yellow"),
  side: THREE.DoubleSide,
});

const test = uniform(2); // force it to discard
material.outputNode = Fn(() => {
  test.greaterThan(0.0).discard(); // its not triggering
  return output;
})();

const cubeMesh = new THREE.Mesh(sphere, material);

scene.add(cubeMesh);

Tried to look at this one, and saw thy used outputNode
three.js/examples/webgpu_tsl_angular_slicing.html at master · mrdoob/three.js

Sample of issue
index.js - nodebox - CodeSandbox

5

Fixed it, sorry, my bad :blush:
I just had to fix my import path.

btw, tsl feel very nice. Even though I Im really lost :rofl: