Lumen Shader

Shortening the Distance Between Code and Image

A fragment shader describes how each pixel should look, but reading the source alone gives little sense of the image it will produce. Small changes to a field, colour calculation, or camera position can transform the result. Lumen Shader places the code beside its output so those relationships can be explored directly.

The workspace combines an editable GLSL source panel with a WebGL viewport. Visitors can begin with an existing effect, adjust its parameters, and then change the expressions underneath it. The aim is to make experimentation available without first assembling a rendering application.

Starting From a Working Effect

Five presets provide different entry points: a Mandelbulb fractal, bioluminescent caustics, a gyroid lattice, harmonic interference, and a volumetric nebula. Each supplies its own shader source and three labelled parameters. Selecting a preset restores its code and default values, while the reset control returns an edited shader to that starting point.

The split layout keeps the editor and viewport together on wider screens and stacks them on smaller ones. A canvas-only view gives the image more space. Reusable snippets offer starting points for rotations, distance functions, smooth unions, and colour palettes; inserting one adds source code rather than automatically wiring it into the effect.

Editing With Immediate Feedback

Source edits are passed to the browser's shader compiler. If compilation or linking fails, the studio displays the diagnostic and retains the last successful program. This lets a visitor correct an incomplete expression without immediately losing the working image.

Parameter sliders update uniforms directly. The renderer also supplies elapsed time, pointer position, resolution, and an audio value. Each preset decides how to use those inputs, so pointer movement and parameter changes have different effects across the collection.

Animation starts paused in the embedded studio. Play advances shader time, and the reset-time control returns it to zero. Optional sound comes from an internal oscillator-based synthesiser; its analysed output drives the audio uniform. The demo does not listen to the microphone.

Taking an Experiment Away

The viewport can save a PNG snapshot, and the editor can download the current fragment shader. The HTML export copies a standalone rendering page containing the current source and parameter values. That export includes pointer interaction and animation, but does not reproduce the studio controls or its audio synthesiser.

Edits stay in the open page and reset on reload. Downloading or copying an experiment is therefore the way to keep it; there is no account, cloud library, or collaborative editing service behind the demo.

A Small Graphics Workbench

React manages editor state and controls, while WebGL compiles GLSL and draws a fullscreen quad. The shaders produce their imagery procedurally. Resolution scaling gives visitors a way to trade image detail against rendering cost, which varies with the preset, browser, and device.

The displayed frame rate describes the render loop. CPU submission timing measures the JavaScript work around issuing a frame, rather than completed GPU execution. This is an exploratory graphics tool, with compiler feedback and export paths, rather than a performance benchmark or a full shader debugging environment.