BlueBox Production
Open editor
Studio Games Shader Graph Bluegent Rupor Open the editor
Tools

Shader Graph

A node-based GLSL editor that runs in a browser tab. Build a fragment shader out of nodes, watch it render live on a plane or a 3D primitive, and take the finished GLSL with you. It works backwards too: paste a shader and it comes apart into nodes.

Open the editor Source on GitHub
Shader Graph editor: node palette on the left, the graph in the middle, live WebGL preview and generated GLSL on the right
Node palette, graph, live preview and the GLSL it produces — all in one screen.
01 / What it does

Nodes in, GLSL out

Drag a node out of the palette, pull a link from one socket to another, and the shader recompiles as you go. No project to set up, no build step, no account.

67 nodes

Coordinates, uniforms, constants, the whole working set of maths and vector operations, noise, colour, logic and textures.

Live 3D preview

A plane, or a sphere, cube, torus, cylinder, capsule and floor — raymarched SDFs, so no geometry and no 3D library is involved.

Import and export

Copy the generated GLSL out, or paste an existing shader in and watch it come apart into a graph you can edit.

19 worked examples

Gradients, rings, plasma, clouds, cells — then explosion, fire, smoke, lightning, portal, shield and stars. Load one and take it apart.

02 / How it works

Everything happens in your tab

The editor is a static page. Your graph is compiled to GLSL in the browser and handed straight to WebGL — no server does any of the work, and nothing you build is uploaded anywhere.

  • Nothing leaves the browser

    Your graph is kept in the tab's own local storage, so a reload does not lose it — and it never reaches us.

  • Textures stay local too

    Drop an image straight onto the preview to fill u_tex0 or u_tex1. The file is read in the browser, not uploaded.

  • Search from a link

    Pull a connection into empty space, type two letters, and the node appears already wired up.

  • Every node explains itself

    Hover it, press the ? in its header, or select it and read the panel on the left.

An explosion effect built as a node graph, rendering in the live preview
One of the effect examples, opened as a graph.
Pasted GLSL being parsed back into a node graph
Import: paste GLSL, get nodes back.
03 / Details

Under the hood

Built withReact · React Flow · Vite
RenderingRaw WebGL, no 3D library
OutputGLSL ES 1.00 / 3.00
RunsFully client-side
LicenceMIT

Shader Graph is open source by anomal3 and hosted here as a ready-to-use build. The source, issues and licence live on GitHub.

Open it and start pulling links

It loads in about a second. Load an example, break it, and watch the GLSL on the right change as you go.

Open the editor GitHub