js
Allows the result of a JavaScript code snippet, executed every frame on the CPU, to be seamlessly injected into the GPU shader.
Core Advantages
Its core value is tightly coupling a value's 'JS calculation logic' with its 'point of use' in the shader. This greatly simplifies passing data from JS state (like mouse position or UI sliders) to the GPU, avoiding the boilerplate of manually creating and updating uniforms.
Common Uses
Creating self-driving simple animations (e.g., using `performance.now()`)
Implementing real-time user interaction (e.g., tracking mouse position)
Connecting to external data sources (e.g., audio visualization)
Integrating with debugging tools (e.g., parameters controlled by lil-gui)
How to adjust
Adjusted by changing the external JavaScript variables that its `src` code depends on. For example, adding a sine wave perturbation to the `mousePos` variable in your main JS code will cause the spotlight driven by `js('mousePos')` to jitter while following the mouse, without any changes to the TSL code itself.
Code Examples
1// Assume 'mousePos' is a Vector2 variable being updated in real-time in JS
2const mouseNode = js('mousePos').xy;
3
4// Create a circular spotlight based on the fragment's distance to the mouse
5const dist = mouseNode.distance(uv());
6const spotlight = smoothstep(0.5, 0.1, dist);