Threenix Background Node
Add one scene-level TSL background through scene.backgroundNode using the bundled assets/BackgroundNode.tsx reference.
Workflow
- Read the target repository's local instructions and inspect the existing Canvas, scene composition, and package versions.
- Confirm the target uses
@react-three/fiber/webgpuwithuseLocalNodes. If it has a WebGL Canvas, stop and explain that migrating renderers is out of scope. - Copy
assets/BackgroundNode.tsxinto the target's scene component location. Keep the component local to the Canvas and render it once as a child of that Canvas. - Replace only the example TSL graph inside
createBackgroundNodewith the requested visual. Keep the graph inthree/tsl, return it asbackgroundNode, and preserve<primitive attach="backgroundNode" object={backgroundNode} />. - Reuse the scene's existing textures, uniforms, and shared nodes where they fit. Use
useLocalNodesfor component-local node graphs; do not add a full-screen mesh, a second Canvas, raw GLSL, or a postprocessing pass just to draw the background. - Add only missing dependencies required by the existing R3F WebGPU setup. Do not add controls, UI, fallback renderers, or a texture pipeline unless the requested look requires one.
- Run the target repository's narrowest type-check or build covering the scene and report any unresolved compatibility issue.