When working with shaders in TSL (Three.js Shader Language), controlling how colors blend, how reflections behave, and how UV coordinates are manipulated can dramatically enhance your visual output. This article provides an overview of essential functions for blending, reflection, and UV mapping in TSL.
Blend Modes
Blend modes are used to mix two colors in various ways, often to simulate lighting effects or color adjustments. The blendBurn(a, b) function returns the burn blend mode, which darkens the base color to reflect the blend color. blendDodge(a, b) provides the dodge blend mode, lightening the base color. The blendOverlay(a, b) function combines multiply and screen modes depending on the base color, useful for adding contrast. blendScreen(a, b) applies a brightening effect by inverting, multiplying, and inverting again. Finally, blendColor(a, b) performs a standard color blend, effectively overlaying the blend color on top of the base.
Reflection Utilities
Reflection utilities are key for rendering reflective or glossy materials. The reflectView function calculates the reflection direction in view space, which is essential for screen-space effects or stylized materials. Once you have that reflection vector, reflectVector can transform it into world space, allowing it to interact with global lighting or environment maps correctly.
UV Utilities
UV utilities allow you to manipulate how textures are applied to 3D surfaces. matcapUV provides a set of UV coordinates specifically designed for matcap textures, which simulate complex lighting with a single image. The rotateUV(uv, rotation, centerNode = vec2(0.5)) function rotates UV coordinates around a specified center point, which is helpful for dynamic texture effects. To create a bulging or spherical distortion, spherizeUV(uv, strength, centerNode = vec2(0.5)) modifies the UVs accordingly. For sprite animation, spritesheetUV(count, uv = uv(), frame = float(0)) calculates the correct UV mapping based on the number of frames and the current frame index. Additionally, equirectUV(direction = positionWorldDirection) computes UVs suitable for equirectangular environment mapping, which is common in skyboxes and reflection probes.
Example: Using a Matcap Texture
To use a matcap texture, you can import the necessary utilities from TSL and apply them as follows:
import { texture, matcapUV } from ‘three/tsl’;
const matcap = texture(matcapMap, matcapUV);
This code samples the matcapMap using the precomputed matcapUV, allowing you to easily achieve a stylized, shaded look that responds to the surface’s orientation.
These tools provide a flexible foundation for building advanced shaders in TSL, enabling you to focus on creating visually compelling effects with less boilerplate code. Whether you’re developing realistic materials or experimenting with stylized visuals, TSL’s built-in functions give you the control and precision needed for high-quality rendering.