In this lesson we’re going to look at using the math operators. Try changing the value and changing the operator to see the affect, using the CodePen embed below. Then click the js button.
Slide down to the tsl function. It is very similar to part 1. The GUI can switch the operation and the value. In both cases the actual updating is in the updateTSL function. We use a switch statement. In each case we use the operation string value to select an operation to apply. Take for example ‘add’. When this is selected, we set
material.colorNode = positionLocal.add(value);Adding the current value of options.value to the positionLocal value.
TSL math operations can be chained.
You’ll find a list of all math functions here. With ThreeJS WebGPU still being a work in progress, docs are sparse. The wiki on mrdoob’s GitHub is the best you’ll find at the time of writing.
In case you need some incentive to keep learning. Here is a CodePen remix of an example from the excellent tsl-textures repo, by Pavel Boytchev @PavelBoytchev. Over the next few lessons you’ll have the knowledge to create your own shaders that are equally impressive.
In the next lesson we’ll start to move the vertices around.