A Shader, Explained

Gyroid Marcher

An infinite black-and-white lattice, flown through in twenty lines of code.

A genuine three-dimensional scene — depth, surfaces, a camera gliding forward — conjured from about twenty lines. There are no models and no triangles. Instead a ray is fired through every pixel and marched forward until it bumps into a surface defined purely by arithmetic. The surface here is a gyroid: an endless, smooth lattice that fills all of space.

▶ Marching a ray into the scene → technical explainer

Raymarching walks a point along the ray in steps. Each step asks the map function “how far to the nearest surface?” and advances by (a fraction of) that distance — big leaps through empty space, tiny creeps near a surface. When the steps shrink below a threshold, we’ve arrived.

for (float i=0.; i<90. && dd>.001 && d<2.; i++) {
    d += dd;
    p += rd*d;
    dd = map(p)*.02;
}

The speed 1.00 control sets how fast the camera flies along the lattice; lens 1.00 tightens or widens the lens.

▶ The field: a gyroid, modulated → technical explainer

The whole world is one function. Its core is the gyroid — dot(sin(p), cos(p.zxy)) — a single expression that carves a smooth, three-way-symmetric lattice out of empty space. This shader nests one gyroid inside another and multiplies in high-frequency sine waves, so the lattice ripples and shears as you move through it.

#define gyr(p) dot(sin(p.xyz), cos(p.zxy))

It isn’t a true distance field — the values are only roughly proportional to real distance — which is why the march takes cautious 0.02-scaled steps instead of full ones.

▶ Lighting with no lights

Once a ray lands, the surface normal is found by sampling the field a few times around the hit point and taking the difference — the gradient. This shader skips real lighting entirely and just reads two components of that gradient straight into brightness, then fades anything the ray never reached.

vec3 n = norm(p);
float bw = n.x + n.y;
bw *= SS(.9, .15, 1./d);   // fog out the far distance

shaders /image.glsl
↗ Shadertoy
#define SS(a,b,c) smoothstep(a-b,a+b,c)
#define gyr(p) dot(sin(p.xyz),cos(p.zxy))   // a gyroid: a smooth, infinite 3D lattice
#define T iTime

// The world is one big distance-ish function: nested gyroids modulated by sine
// waves and time. It isn't a true distance field — it just has to be small near
// surfaces and large away from them, which is enough to march through.
float map(in vec3 p) {
   
   return (1. + .2*sin(p.y*600.)) *
   gyr(( p*(10.) + .8*gyr(( p*8. )) )) *
   (1.+sin(T+length(p.xy)*10.)) +
   .3 * sin(T*.15 + p.z * 5. + p.y) *
   (2.+gyr(( p*(sin(T*.2+p.z*3.)*350.+250.) )));
   
}

// Surface normal by finite differences: sample the field a few times around p
// and take the gradient. (Left un-normalized on purpose — it doubles as shading.)
vec3 norm(in vec3 p) {
   float m = map(p);
   vec2 d = vec2(.06+.06*sin(p.z),0.);
   return map(p)-vec3(
       map(p-d.xyy),map(p-d.yxy),map(p-d.yyx)
   );
}

void mainImage( out vec4 color, in vec2 coord ) {
   vec2 uv = coord/R.xy;
   vec2 uvc = (coord-R.xy/2.)/R.y;
   float d = 0.;
   float dd = 1.;
   vec3 p = vec3(0.,0.,T*0.25*1.00);            // camera flies along +z
   vec3 rd = normalize(vec3(uvc.xy,1.00));        // ray for this pixel

   
   for (float i=0.;i<90. && dd>.001 && d < 2.;i++) {
       d += dd;                 // advance along the ray
       p += rd*d;
       dd = map(p)*.02;         // next step = (a fraction of) the field value
   }
   

   
   vec3 n = norm(p);
   float bw = n.x+n.y;          // fake lighting straight from the gradient
   bw *= SS(.9,.15,1./d);       // fade out whatever the ray never reached
   color = vec4(vec3(bw),1.0);
   
}
