This is my frst attempt on GPU renderer and TSL (Three.js Shading Language)
Result
What I learned
Got my hands wet with some TSL concepts:
Nodes in TSL gives access to different parts of the mesh. And using time is how we modify things.
- Here I am using the MeshStandardNodeMaterial and directly manipulating the color node:
// pulse = sin(time * 2.0) * 0.5 + 0.5 const pulse = time.mul(2.0).sin().mul(1).add(0.5); const colorA = color(0xff0000); // Red const colorB = color(0x0000ff); // Blue material.colorNode = mix(colorA, colorB, pulse); - And this i how the shape is shifting using position node:
// Displace vertices based on their local Y position + Time const wave = positionLocal.y.add(time).cos().mul(0.2); material.positionNode = positionLocal.add(vec3(0, wave, 0));