As we learn TSL together I’ve set myself the challenge of reproducing the lava ball example that you can see below. It will need to adjust the vertices of the modelled geometry. In this lesson we’ll look at doing just that.
In the CodePen example below. Drag the delta slider and see how the cube becomes a sphere. Then click the JS button. Notice the tsl imports:
- positionGeometry – is the modelled position. It differs from positionLocal which is after morphing.
- normalGeometry – is the modelled normal.
- mix – is a tsl version of GLSL mix the HLSL equivalent is lerp. It creates a linear interpolation of parameters one and two based on the value of the third parameter. If parameter three is 0 the result will be simply parameter one. If parameter three is 1 then the result will be parameter two. If parameter three is between 0 and 1 then the result will be a blend of parameters one and two.
- Fn – is a TSL function interface. We’ll learn more about this as the course progresses.
- select – is the TSL tenary solution, ie. you can choose between two options based on a boolean.
- uniform – is the way we use uniforms in TSL. If you’re new to shaders a uniform is used to pass variable data between the CPU and the GPU. A uniform holds its value throughout a frame render.
Now slide down to the tsl function.
In this example we create a cube not a sphere. It is one unit long in the x, y and z axes. Each dimension is divided into 16 segments. Try clicking wireframe in the gui to see how the cube is made of many triangles.
Notice deltaUniform = uniform(0). This creates a uniform which we can use in our shader. Then we define a function that uses the TSL interface Fn. It receives and object as a parameter, with a single property outputNormal. We will use this to select between returning a normal or a position value. As we blend from a cube to a sphere the positions of each vertex will change but so will the normal. Instead of being perpendicular to the cube face, the normal radiate out from the sphere centre. For a sphere with the centre 0,0,0 the normal is simply the vertex position normalized.
Position pos is the linear interpolation, mix, of positionGeometry and the sphereNormal multiplied by a radius, in this case we use 0.6 to give a pleasing size when related to a cube of width, height and depth 1. Total volume looks to stay roughly the same as you change the delta value using the gui. Notice how the mix third parameter is deltaUniform.
We get a blend of the modelled normal, normalGeometry and the calculated sphereNormal again based on the value of deltaUniform.
Finally in the TSL Fn function we use select to choose to return either the calculated normal value, norm or the calculated position value, pos.
So far we have only set the colorNode for a material. Here we set the positionNode to the return value from our custom spherize function with outputNormal set to false and normalNode to the return value from our custom spherize function with outputNormal set to true.
In the GUI we use the onChange event for delta to update the value property of deltaUniform.
Now we are able to change the vertex and normal values let’s move these over time. That will be the subject of the next lesson.