Shader inputs

Turn any value node (float, vec2, vec3, vec4, color, bool, uint) or texture node into a shader input, and your app can change it by name, without opening the editor or publishing again.

<Shader
  id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
  inputs={{ speed: 2, tint: [0.1, 0.6, 0.8] }}
/>

Exposing one

Click the export arrow in the node's header and give it a name: letters, digits and underscores, unique in the shader.

The node's current value becomes the default, so every input is optional.

Values

Textures

A texture input takes any image URL, from your app or anywhere else:

import noiseUrl from "./noise.png";

<Shader
  id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
  inputs={{ noise: noiseUrl }}
/>;

Leave it out to use the image you uploaded in the editor.

Live values

Changing an input is instant, so you can drive it from a slider, the scroll position or the cursor:

const [speed, setSpeed] = useState(1);

<Shader id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21" inputs={{ speed }} />;

Names must match exactly; unknown names are ignored.