Lumen Shader

What You're Looking At

Lumen Shader is an interactive digital art playground with five different scenes. You might be looking at an intricate floating sculpture, light rippling like water, or a glowing cloud that seems to stretch into the distance. Each is an artwork created with code and drawn on your screen as you explore it.

The opening scene looks like a sculpted object with folds, ridges, and smaller shapes growing out of larger ones. Bright edges and shaded hollows make it feel solid enough to touch. Other scenes are more like looking through water or into an imagined landscape. When animated, their shapes, colours, or viewpoint shift over time.

The word “shader” refers to the small program that draws the image. The text beside the artwork is that program: the instructions responsible for what you see. You can enjoy the scenes without reading or understanding any of it.

Five Ways to Build an Image

Each of the five scenes explores a different way of turning maths into something visible:

• Quantum Mandelbulb is a three-dimensional fractal. Repeating a calculation creates an intricate form with folds and smaller details nested inside larger ones. Shading gives that mathematical shape the appearance of a solid object.
• Bioluminescent Caustics creates flowing bands of colour and bright ripples reminiscent of light moving through water. Layered wave functions distort one another to produce that fluid appearance.
• Gyroid Hyperspace Lattice is a repeating surface of curved passages and openings. A single mathematical relationship defines the structure, creating the impression of travelling through an elaborate three-dimensional space.
• Harmonic Quantum Interference combines circular waves. Where they overlap, they reinforce or cancel one another, producing bands and patterns that change as the waves move.
• Prismatic Volumetric Nebula builds the appearance of luminous clouds in space. It accumulates colour through a calculated volume, giving the clouds a sense of thickness and depth.

These are visual experiments inspired by natural forms and mathematical structures. Their names describe the imagery; the scenes are artistic interpretations rather than scientific simulations.

What Is a Fragment Shader?

Imagine a television screen made of millions of tiny coloured lights. To create an image, something has to decide which colour each light should be. A fragment shader is a small recipe for making that decision. In Lumen, it uses things like position on the screen, time, and the chosen settings to work out the colour.

Your computer's graphics processor, or GPU, can run that recipe for many parts of the image in parallel. Think of a large team of painters following the same instructions, each responsible for a tiny part of the canvas. Their combined work becomes the scene you see. Repeating the process with a changing time value gives the scene movement.

How Can There Be a 3D Shape Without a 3D Model?

Many games describe objects using a mesh: a surface assembled from small triangles, rather like a paper model made from thousands of folded pieces. Lumen's fractal and lattice scenes describe their shapes with mathematical rules instead.

To find out what those shapes look like, the shader uses raymarching. Imagine sending an invisible probe from your viewpoint into the scene for each part of the image. At each stop, it asks: “How far away is the nearest surface?” In open space it can take a large step. As it approaches a shape, it takes smaller steps until it is close enough to count as touching it.

The shader then works out the colour and lighting at that point. Doing this across the image reveals a solid-looking object, complete with bright edges and shaded folds. The nebula uses a related approach, gathering colour through layers of cloud rather than stopping at a solid surface.

What Is a Signed Distance Field?

A signed distance field, or SDF, is one way to answer that “How far away?” question. Imagine a sphere surrounded by invisible measuring marks. Anywhere outside it has a positive distance to its surface. On the surface the distance is zero, and inside it the distance is negative. A formula provides that measurement wherever you ask.

That means a simple rule can describe a whole shape. For a sphere, you measure the distance from its centre and subtract its radius. Changing the radius changes the sphere; combining rules can join shapes, cut holes, or repeat them through space.

Lumen uses this broader idea of describing space through distance calculations. Complex forms such as the Mandelbulb use an estimate of the distance, rather than an exact measurement. The formula lets the renderer calculate detail at different scales, although screen resolution, calculation precision, and the amount of work done per frame still limit what you can see.

What This Makes Possible

• Complex shapes from compact instructions. The folds of the fractal and the passages of the lattice come from code. The browser can build their appearance without downloading a detailed model of every surface. The trade-off is that it has to calculate the image as you view it.
• Sound that changes the image. Lumen's optional synthesiser generates sound inside the browser. The demo measures that sound and feeds a changing value into the visual recipe, allowing shapes and patterns to respond to it.
• An experiment you can take away. A still image can be saved as a PNG, and the shader code can be downloaded as a .frag file. A standalone HTML version can also be copied to keep the animated scene outside the studio.

The code beside the artwork is the recipe behind all of this. It makes the connection visible: a few written rules become something that looks like sculpture, water, or a cloud of light.