Discard pixels below 0 — TSL

Questions
1

Hello,

I just started dipping my toes into TSL; however,

I am having issues with “discard” in the following code below:
Is there something I am doing wrong…?

const waterWaveCoords = vec3(uv().mul(5), time.mul(0.001));
const waterWaveFractal = mx_fractal_noise_float(waterWaveCoords, 3, 19, 10);

const ripple = waterWaveFractal.lessThan(0.0).discard();

const oceanFinalColour = oceanSurfaceColour.add(ripple);
this.oceanMaterial.colorNode = vec4(oceanFinalColour, 0.9);
2

I can’t tell what’s wrong with your code,

You use it like I do in this example.

Maybe your error is something else.

1 Like
3

Hi @seanwasere ,

I went in Your Three.js Shading Language Tutorials and got Your example Lighting 3D SDFs

I could not find where are defined the geometries and positions of the Sphere and Box meshes.
I will be happy if You teach me how to find them!

4

There is a difference. You apply discard in the function directly on fragmentNode (and it works), whereas the author applies it on colorNode (and it doesn’t work). :thinking:

5

Good point, can a color Node ever be less than 0.0?

1 Like
6

Change this,

const ripple = waterWaveFractal.lessThan(0.0).discard();

to this:

const ripple = waterWaveFractal
ripple.lessThan(0.0).discard(); // (don't save `discard` node to a var)

Full snippet:

const waterWaveCoords = vec3(uv().mul(5), time.mul(0.001));
const waterWaveFractal = mx_fractal_noise_float(waterWaveCoords, 3, 19, 10);

const ripple = waterWaveFractal
ripple.lessThan(0.0).discard();

const oceanFinalColour = oceanSurfaceColour.add(ripple); // adding the discard node here didn't make sense
this.oceanMaterial.colorNode = vec4(oceanFinalColour, 0.9);

But now ripple is redundant, so just this:

const waterWaveCoords = vec3(uv().mul(5), time.mul(0.001));
const waterWaveFractal = mx_fractal_noise_float(waterWaveCoords, 3, 19, 10);

waterWaveFractal.lessThan(0.0).discard();

const oceanFinalColour = oceanSurfaceColour.add(waterWaveFractal);
this.oceanMaterial.colorNode = vec4(oceanFinalColour, 0.9);

Alternatively:

const waterWaveCoords = vec3(uv().mul(5), time.mul(0.001));
const waterWaveFractal = mx_fractal_noise_float(waterWaveCoords, 3, 19, 10);

If( waterWaveFractal.lessThan(0.0), () => {
  Discard()
})

const oceanFinalColour = oceanSurfaceColour.add(waterWaveFractal);
this.oceanMaterial.colorNode = vec4(oceanFinalColour, 0.9);