RenderLab — A Render Graph Lab in Your Browser — PRKL Interactive

← back

RenderLab is a browser-based render graph laboratory — a place to prototype rendering<br>techniques and whole rendering stacks by wiring shader, geometry, and resource nodes into a<br>live graph and watching the result in the viewport.

It runs entirely in the browser (on WebGL2), and is designed around two audiences:

The technical artist sketching a rendering technique who wants to see it on screen without standing up an engine,

and the graphics programmer prototyping a stack, who wants raw control over shaders, render<br>targets, and draw order without an abstraction fighting them.

Early alpha. RenderLab is open and free to use right now, with the limitations described<br>at the bottom of this post (most notably: cloud storage is read-only during alpha — your work<br>lives in local browser storage and exports). Expect rough edges; feedback is welcome.

→ Open RenderLab

Render graphs

The render graph is the core of the tool. You build a directed graph of nodes — shaders, draw<br>calls, geometry sources, assets, render targets — and connect them. The graph is the program:<br>RenderLab walks it every frame and executes the rendering you described.

This maps directly onto how rendering actually works. A node produces outputs (a populated render<br>target, a uniform value, a mesh); you connect those outputs to the inputs of downstream nodes;<br>shared render targets let one pass feed the next. There is no hidden frame loop and no opinion<br>about what kind of renderer you are building — forward, deferred, a post-processing chain, a<br>single screen-space experiment — it is all just nodes and connections.

render-graph-overview.png

Three graphs ship as live presets you can open, inspect, and fork:

PBR — physically based rendering driven by<br>the glTF model node.

Water — custom shaders combined with the<br>built-in geometry nodes.

Geometry Script — a procedural mesh<br>generated in Lua and drawn through the graph.

Integrated IDE

Everything you write — GLSL shaders and Lua geometry scripts alike — is edited inside<br>an integrated IDE built on Monaco (the editor that powers VS Code), and it behaves the way<br>you expect a real editor to behave.

Full GLSL and Lua language integration — code completion, hover, and inline error<br>diagnostics ("squigglies") as you type.

Errors surface everywhere they're relevant. A shader, graph, or geometry-script error shows<br>up in three places at once: marked on the graph node it belongs to, listed in the error<br>output with clickable links that jump you straight to the offending line, and underlined in<br>the editor itself.

A general UX bar set by VS Code — multiple files, fast navigation, keyboard-first.

The point is that when something is broken you are never hunting for where. The graph tells you<br>which node, the error list tells you which line, and the editor takes you there.

Inspector

The Inspector gives you RenderDoc-style frame inspection , in the browser. Select any node in<br>the graph and you get its full history for the frame: every draw call it issued, the input<br>uniforms as they were bound, and the output targets it wrote — captured as they were at any<br>point during graph execution.

inspector-drawcalls.png

Because the graph executes deterministically, the inspector is an honest record of what the GPU<br>was actually told to do, in order. It is the difference between "the output looks wrong" and<br>"this draw call bound the wrong target."

Built-in geometry nodes

Not every mesh needs a model file or a script. Built-in geometry nodes hand you parametric<br>primitives — plane, sphere, cube, cylinder, cone, torus — each with adjustable parameters,<br>ready to draw through the graph straight away.

The Water preset is built on these: a<br>built-in surface drawn with custom shaders through raw Model nodes. Primitives are the quick<br>path to "something on screen" — and the starting point you customize from.

→ Open the Water preset

Geometry scripts

When a primitive isn't enough, drop to a geometry script. Geometry scripts let you write<br>parametrized, procedural mesh geometry in Lua and feed the result straight into a draw call.<br>You expose parameters, generate vertex attributes and indices in code, and the graph treats the<br>output like any other mesh.

geometry-script-mesh.png

The Geometry Script preset is a live, working example — open it to see the script, its<br>parameters, and the mesh it produces, then change the numbers and watch it rebuild.

→ Open the Geometry Script preset

glTF-specialized render nodes

Plug a .glb model into the glTF shader node and you get full access to the model's embedded<br>textures and material attributes , with glTF semantics respected throughout — the node<br>understands the format rather than handing you an undifferentiated blob.

You can render with the built-in glTF shader , or fork it and modify it freely — it is just<br>a shader you now own. The PBR preset is the live example: a glTF model rendered through the<br>built-in...