Fluorite
Concepts

Textures

Use images, videos and the webcam in a graph, and let your app swap them.

Texture nodes bring an image, a video or the webcam into your graph as a vec4 colour. Manage your images and videos from the editor's asset library.

Images

  • Upload an image file, or
  • Import from Unsplash: search and pick one.

Either way it's saved with the shader and works in embeds with no extra setup.

Video

Upload an mp4, webm or mov (up to 25 MB) to a texture node. Videos loop, muted, while the shader is on screen. Anything you can do with an image works with a video.

Webcam

Add Webcam from the picker to use the viewer's camera. The browser asks for permission once, and the video never leaves the device. It isn't mirrored; add Flip X for a mirror view.

Previews outside the editor and embeds, like shader cards and community pages, show a placeholder photo instead of asking for the camera.

A webcam can't be a shader input.

Let your app supply the image

Expose a texture as an input and your app can pass any image or video URL:

import noiseUrl from "./noise.png";

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

Leave it out to use the image you uploaded.

Privacy

Your files are private until you publish the shader; after that they're public, like the shader itself. Draft previews with a preview token can load them too.

On this page