# Vibe Cybernoid Visual Effects Tutorial & Reference

This document inventories every HTML file in `/var/www/vibe.cybernoid.xyz`, groups duplicates or near-duplicates, and provides a consolidated tutorial/reference for each unique visual effect. It focuses on shader-driven visuals (WebGPU WGSL and WebGL GLSL), while also noting CSS-only or UI-only pages.

Date compiled: 2026-02-05

## 1) Full HTML Inventory (all files)

- neon_terrain_v0_0_9.html
- 3d.html
- the_triad_lecture-v1_2_0.html
- zai-webgpu-001.html
- zai-webgpu-002.html
- index.html
- the_triad_lecture-v1_1_0.html
- lowpoly_demoscene_world_v0_2_4.html
- g3d.html
- lowpoly_demoscene_world_v0_2_2.html
- krysztaly-czasu-landing-v0_1_0.html
- obj-3d-001.html
- 3d2.html
- lowpoly_demoscene_world_v0_2_6.html
- neon_terrain_v0_0_6.html
- lowpoly_demoscene_world_v0_2_5.html
- gemini/landing-v0_0_2.html
- gemini/landing-v0_0_5.html
- gemini/landing-v0_0_1.html
- gemini/math-odyssey-dynamic-v1_0_2.html
- gemini/landing-v0_0_4.html
- gemini/landing-v0_0_3.html
- gemini/terminal.html
- lowpoly_demoscene_world_v0_2_3.html
- browser_feature_probe_v0_1_0.html
- 3dplay/index.html
- synapse/index.html
- html/walker.html
- html/3d.html
- html/terrain.html
- html/webgpu2.html
- html/terrain2.html
- html/webgpu.html
- html/runtime/runtime42.html
- html/runtime/runtime2.html
- html/runtime/runtime7.html
- html/runtime/runtime1.html
- html/runtime/runtime5.html
- html/runtime/runtime4.html
- html/runtime/runtime6.html
- html/runtime/runtime8.html
- html/runtime/runtime9.html
- html/runtime/runtime10.html
- html/runtime/runtime82.html
- html/engine/engine6.html
- html/engine/engine4.html
- html/engine/engine.html
- html/engine/engine7.html
- html/engine/engine3.html
- html/engine/engine2.html
- html/engine/engine5.html
- html/engine/engine8.html

## 2) Dedupe Map (duplicates and near-duplicates)

Canonical files are the recommended references for each family. Files listed under a canonical entry are duplicates or very similar versions unless noted.

- 3d.html (canonical for the Effect Gallery) == 3d2.html == html/3d.html (identical files)
- html/webgpu2.html (canonical for the Effect Composer UI) ~= html/webgpu.html (same core effect set, older UI)
- lowpoly_demoscene_world_v0_2_6.html (canonical for lowpoly world) == lowpoly_demoscene_world_v0_2_5.html (identical)
- lowpoly_demoscene_world_v0_2_6.html ~= lowpoly_demoscene_world_v0_2_2.html / v0_2_3 / v0_2_4 (same world; v0_2_3 and v0_2_4 include a custom HDR GLSL post pass, later versions use built-in ACES)
- neon_terrain_v0_0_9.html (canonical) ~= neon_terrain_v0_0_6.html (same neon terrain, earlier)
- html/walker.html (canonical Surreal Walker) ~= html/terrain2.html ~= html/terrain.html (same concept, earlier tuning)
- the_triad_lecture-v1_2_0.html (canonical) ~= the_triad_lecture-v1_1_0.html (earlier version)
- html/runtime/runtime10.html (canonical runtime) ~= html/runtime/runtime9.html / runtime8.html / runtime82.html / runtime7.html / runtime6.html / runtime5.html / runtime4.html / runtime42.html / runtime2.html / runtime1.html (same runtime evolution)
- html/engine/engine8.html (canonical engine) ~= html/engine/engine7.html / engine6.html / engine5.html / engine4.html / engine3.html / engine2.html / engine.html (same engine evolution)
- gemini/landing-v0_0_5.html (canonical static landing) ~= gemini/landing-v0_0_4.html / v0_0_2 / v0_0_1 (similar static pages)
- gemini/landing-v0_0_3.html is unique (real WebGPU shader background)

Everything else is unique or materially different and is documented below.

## 3) Visual Effects Reference

### 3.1 WebGPU (WGSL) Effects

#### Aethelgard Fog (gemini/landing-v0_0_3.html)

Effect: full-screen animated fog/nebula using fBm noise in WGSL.
Pipeline: WebGPU full-screen triangle, uniform buffer for time/resolution, single render pipeline.

WGSL shader (vertex + fragment):

```wgsl
struct Uniforms {
    time : f32,
    resolution : vec2f,
};
@group(0) @binding(0) var<uniform> uniforms : Uniforms;

@vertex
fn vs_main(@builtin(vertex_index) vertexIndex : u32) -> @builtin(position) vec4f {
    var pos = array<vec2f, 3>(
        vec2f(-1.0, -3.0),
        vec2f(3.0, 1.0),
        vec2f(-1.0, 1.0)
    );
    return vec4f(pos[vertexIndex], 0.0, 1.0);
}

fn random2d(st: vec2f) -> f32 {
    return fract(sin(dot(st.xy, vec2f(12.9898,78.233))) * 43758.5453123);
}

fn noise(st: vec2f) -> f32 {
    let i = floor(st);
    let f = fract(st);
    let u = f * f * (3.0 - 2.0 * f);
    return mix( mix( random2d( i + vec2f(0.0,0.0) ),
                     random2d( i + vec2f(1.0,0.0) ), u.x),
                mix( random2d( i + vec2f(0.0,1.0) ),
                     random2d( i + vec2f(1.0,1.0) ), u.x), u.y);
}

fn fbm(st_in: vec2f) -> f32 {
    var st = st_in;
    var value: f32 = 0.0;
    var amplitude: f32 = 0.5;
    for (var i = 0; i < 5; i++) {
        value += amplitude * noise(st);
        st *= 2.0;
        amplitude *= 0.5;
        let c = cos(0.5); let s = sin(0.5);
        st = vec2f(st.x * c - st.y * s, st.x * s + st.y * c);
    }
    return value;
}

@fragment
fn fs_main(@builtin(position) pos : vec4f) -> @location(0) vec4f {
    let uv = (pos.xy * 2.0 - uniforms.resolution) / min(uniforms.resolution.x, uniforms.resolution.y);
    let t = uniforms.time * 0.1;

    var q = vec2f(0.0);
    q.x = fbm( uv + 0.00*t);
    q.y = fbm( uv + vec2f(1.0));

    var r = vec2f(0.0);
    r.x = fbm( uv + 1.0*q + vec2f(1.7,9.2)+ 0.15*t );
    r.y = fbm( uv + 1.0*q + vec2f(8.3,2.8)+ 0.126*t);

    let f = fbm(uv + r);

    let dark_base = vec3f(0.1, 0.12, 0.14);
    let mid_tone = vec3f(0.25, 0.22, 0.2);
    let highlight = vec3f(0.4, 0.38, 0.35);

    var color = mix(dark_base, mid_tone, clamp((f*f)*4.0,0.0,1.0));
    color = mix(color, highlight, clamp(length(q),0.0,1.0));
    color = mix(color, dark_base, clamp(length(r.x),0.0,1.0));

    let vignette = 1.0 - smoothstep(0.5, 1.5, length(uv));
    color *= vignette;

    return vec4f(color, 1.0);
}
```

#### Lowpoly Demoscene WebGPU Post Stub (lowpoly_demoscene_world_v0_2_6.html and earlier)

Note: This WGSL is a string stub only (not executed). It represents a simple exposure/tone mapping pass.

```wgsl
@group(0) @binding(0) var postSampler : sampler;
@group(0) @binding(1) var postTexture : texture_2d<f32>;

struct VSOut {
  @builtin(position) pos : vec4<f32>,
  @location(0) uv : vec2<f32>,
};

@fragment
fn main(input : VSOut) -> @location(0) vec4<f32> {
  let uv = input.uv;
  var color = textureSample(postTexture, postSampler, uv).rgb;
  let exposure = 1.25;
  color = color * exposure / (1.0 + color * exposure);
  return vec4(color, 1.0);
}
```

### 3.2 Demoscene Effect Gallery / Composer (3d.html, html/webgpu2.html)

The gallery/composer provides a library of WebGL effects powered by Three.js + EffectComposer. The main unique shaders are documented below. Variants (GRID/TOTEM/WARP, etc.) reuse the same shaders with toggles.

#### Cyber Tunnel (GLSL)

Used by: TUNNEL / GRID / TOTEM variants

Vertex shader:

```glsl
varying vec2 vUv;
varying vec3 vPos;
uniform float uTime;
void main() {
  vUv = uv;
  vPos = position;
  vec3 pos = position;
  float twist = sin(pos.z * 0.1 + uTime * 0.5) * 5.0;
  pos.x += cos(pos.z * 0.05 + uTime) * 10.0;
  pos.y += sin(pos.z * 0.05 + uTime) * 10.0;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
```

Fragment shader:

```glsl
varying vec2 vUv;
varying vec3 vPos;
uniform float uTime;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uBeat;
void main() {
  float gridX = step(0.95, fract(vUv.x * 20.0 + uTime * 0.2));
  float gridY = step(0.95, fract(vUv.y * 4.0));
  float lightPulse = sin(vUv.y * 20.0 - uTime * 5.0);
  lightPulse = smoothstep(0.8, 1.0, lightPulse);
  float fog = smoothstep(200.0, 50.0, abs(vPos.z));
  vec3 baseColor = mix(uColor1, uColor2, sin(vUv.x * 3.14 + uTime));
  vec3 finalColor = baseColor * (gridX + gridY * 0.5);
  finalColor += uColor2 * lightPulse * uBeat * 2.0;
  gl_FragColor = vec4(finalColor, fog);
}
```

#### Cybernoid Tunnel (GLSL)

Used by: CYBERNOID / WARP variants

Vertex shader:

```glsl
varying vec2 vUv;
varying vec3 vPos;
uniform float uTime;
void main() {
  vUv = uv;
  vPos = position;
  vec3 pos = position;
  float twist = sin(pos.z * 0.05 + uTime * 0.2) * 20.0;
  pos.x += cos(pos.z * 0.02 + uTime * 0.5) * 15.0 + twist;
  pos.y += sin(pos.z * 0.03 + uTime * 0.3) * 15.0 + twist;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
```

Fragment shader:

```glsl
varying vec2 vUv;
varying vec3 vPos;
uniform float uTime;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uBeat;
void main() {
  float gridX = step(0.97, fract(vUv.x * 24.0 + uTime * 0.1));
  float gridY = step(0.97, fract(vUv.y * 4.0));
  float lightPulse = sin(vUv.y * 10.0 - uTime * 8.0);
  lightPulse = smoothstep(0.9, 1.0, lightPulse);
  float fog = smoothstep(400.0, 50.0, abs(vPos.z));
  vec3 baseColor = mix(uColor1, uColor2, sin(vUv.x * 3.14 + uTime));
  vec3 finalColor = baseColor * (gridX + gridY * 0.5);
  finalColor += uColor2 * lightPulse * uBeat * 3.0;
  gl_FragColor = vec4(finalColor, fog);
}
```

#### Hologram Shell (GLSL)

Used by: CYBERNOID / HOLOGRAM variants

Vertex shader (noise displacement):

```glsl
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPos;
uniform float uTime;
uniform float uDisplace;

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
float snoise(vec3 v) {
    const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 = v - i + dot(i, C.xxx) ;
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy;
    vec3 x3 = x0 - D.yyy;
    i = mod289(i);
    vec4 p = permute( permute( permute(
                i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
            + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
            + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
    float n_ = 0.142857142857;
    vec3  ns = n_ * D.wyz - D.xzx;
    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );
    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);
    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );
    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));
    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
}

void main() {
  vUv = uv;
  vNormal = normal;
  float noiseVal = snoise(position * 0.1 + uTime * 0.5);
  vec3 newPos = position + normal * (noiseVal * uDisplace * 5.0);
  if (uDisplace > 0.8) {
      newPos.x += snoise(vec3(uTime * 10.0, position.y, position.z)) * 2.0;
  }
  vPos = newPos;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}
```

Fragment shader:

```glsl
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPos;
uniform float uTime;
uniform vec3 uColor;
uniform float uOpacity;
void main() {
  float scan = sin(vPos.y * 2.0 - uTime * 5.0) * 0.5 + 0.5;
  float scanLine = step(0.5, scan);
  vec3 viewDir = vec3(0.0, 0.0, 1.0);
  float rim = 1.0 - abs(dot(vNormal, viewDir));
  rim = pow(rim, 3.0);
  float grid = step(0.9, fract(vUv.x * 20.0)) + step(0.9, fract(vUv.y * 20.0));
  vec3 finalColor = uColor * (rim + grid * 0.5 + scanLine * 0.2);
  gl_FragColor = vec4(finalColor, uOpacity * (0.3 + rim));
}
```

#### Effect Starter (Morphing Tunnel + RGB Shift)

Used by: PRIMER preset

Morphing tunnel vertex shader:

```glsl
varying vec2 vUv;
varying vec3 vPos;
uniform float uTime;
uniform float uMorph;
void main() {
  vUv = uv;
  vPos = position;
  vec3 pos = position;
  float wobble = mix(2.0, 12.0, uMorph);
  float twist = sin(pos.z * 0.04 + uTime * 0.7) * (6.0 * uMorph);
  pos.x += cos(pos.z * 0.05 + uTime) * wobble + twist;
  pos.y += sin(pos.z * 0.05 + uTime) * wobble + twist * 0.35;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
```

Morphing tunnel fragment shader:

```glsl
varying vec2 vUv;
varying vec3 vPos;
uniform float uTime;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uBeat;
uniform float uMorph;
void main() {
  float gridX = step(0.95, fract(vUv.x * mix(14.0, 28.0, uMorph) + uTime * 0.2));
  float gridY = step(0.95, fract(vUv.y * mix(2.5, 6.0, uMorph)));
  float lightPulse = sin(vUv.y * 20.0 - uTime * 5.0);
  lightPulse = smoothstep(0.8, 1.0, lightPulse);
  float fog = smoothstep(200.0, 50.0, abs(vPos.z));
  vec3 baseColor = mix(uColor1, uColor2, sin(vUv.x * 3.14159 + uTime) * 0.5 + 0.5);
  vec3 finalColor = baseColor * (gridX + gridY * 0.5);
  finalColor += uColor2 * lightPulse * uBeat * 2.0;
  float alpha = mix(0.4, 1.0, uMorph) * fog;
  gl_FragColor = vec4(finalColor, alpha);
}
```

RGB shift postprocess (used for glitch hits):

```glsl
uniform sampler2D tDiffuse;
uniform float amount;
uniform float angle;
uniform float time;
varying vec2 vUv;

float rand(vec2 co){
  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 offset = amount * vec2(cos(angle), sin(angle));
  float scanline = sin(vUv.y * 800.0 + time * 10.0) * 0.04;
  vec4 cr = texture2D(tDiffuse, vUv + offset + vec2(0.0, scanline * rand(vec2(time))));
  vec4 cga = texture2D(tDiffuse, vUv);
  vec4 cb = texture2D(tDiffuse, vUv - offset);
  float noise = rand(vUv * time) * 0.05;
  gl_FragColor = vec4(cr.r, cga.g, cb.b, cga.a) + vec4(noise);
}
```

#### Neon Genesis Core (GLSL)

Used by: NEON preset

Vertex shader (noise-displaced icosahedron):

```glsl
uniform float uTime;
uniform float uBass;
varying vec2 vUv;
varying float vDisplacement;

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
float snoise(vec3 v) {
  const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
  const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
  vec3 i = floor(v + dot(v, C.yyy));
  vec3 x0 = v - i + dot(i, C.xxx);
  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min(g.xyz, l.zxy);
  vec3 i2 = max(g.xyz, l.zxy);
  vec3 x1 = x0 - i1 + C.xxx;
  vec3 x2 = x0 - i2 + C.yyy;
  vec3 x3 = x0 - D.yyy;
  i = mod289(i);
  vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0)));
  float n_ = 0.142857142857;
  vec3 ns = n_ * D.wyz - D.xzx;
  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_);
  vec4 x = x_ * ns.x + ns.yyyy;
  vec4 y = y_ * ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);
  vec4 b0 = vec4(x.xy, y.xy);
  vec4 b1 = vec4(x.zw, y.zw);
  vec4 s0 = floor(b0) * 2.0 + 1.0;
  vec4 s1 = floor(b1) * 2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));
  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
  vec3 p0 = vec3(a0.xy, h.x);
  vec3 p1 = vec3(a0.zw, h.y);
  vec3 p2 = vec3(a1.xy, h.z);
  vec3 p3 = vec3(a1.zw, h.w);
  vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
  p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
  vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
  m = m * m;
  return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
}

void main() {
  vUv = uv;
  float noise = snoise(position * 1.4 + uTime * 0.4);
  vDisplacement = noise;
  float spike = snoise(position * 3.2 + uTime) * uBass * 2.0;
  vec3 newPos = position + normal * (noise * 0.24 + spike);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}
```

Fragment shader:

```glsl
uniform float uTime;
varying vec2 vUv;
varying float vDisplacement;
void main() {
  vec3 colorA = vec3(0.0, 0.95, 1.0);
  vec3 colorB = vec3(1.0, 0.0, 1.0);
  float mixVal = smoothstep(-0.2, 0.5, vDisplacement);
  vec3 finalColor = mix(colorA, colorB, mixVal);
  float scan = sin(vUv.y * 120.0 + uTime * 6.0) * 0.08;
  gl_FragColor = vec4(finalColor + scan, 1.0);
}
```

#### Synapse Core (GLSL)

Used by: HYPERSTATE / DRIFT variants

Vertex shader:

```glsl
uniform float uTime;
uniform float uBass;
varying float vN;
void main() {
  vN = sin(position.x * 0.35 + uTime) + cos(position.y * 0.2 + uTime * 1.5);
  vec3 displaced = position + normal * (vN * 1.5 + uBass * 8.0);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(displaced, 1.0);
}
```

Fragment shader:

```glsl
uniform vec3 uColor;
varying float vN;
void main() {
  float pulse = smoothstep(0.0, 1.0, abs(vN));
  gl_FragColor = vec4(uColor * (pulse + 0.35), 1.0);
}
```

#### Ember Ritual (GLSL, fullscreen)

Used by: EMBER RITUAL preset (webgpu2.html and 3d.html internal effect)

Vertex shader:

```glsl
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = vec4(position, 1.0);
}
```

Fragment shader:

```glsl
precision highp float;
uniform float uTime;
uniform vec2 uResolution;
varying vec2 vUv;

float hash21(vec2 p) {
  p = fract(p * vec2(234.34, 435.345));
  p += dot(p, p + 34.345);
  return fract(p.x * p.y);
}

float noise(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  float a = hash21(i);
  float b = hash21(i + vec2(1.0, 0.0));
  float c = hash21(i + vec2(0.0, 1.0));
  float d = hash21(i + vec2(1.0, 1.0));
  vec2 u = f * f * (3.0 - 2.0 * f);
  return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}

float fbm(vec2 p) {
  float v = 0.0;
  float a = 0.5;
  mat2 m = mat2(1.6, 1.2, -1.2, 1.6);
  for (int i = 0; i < 4; i++) {
    v += a * noise(p);
    p = m * p;
    a *= 0.55;
  }
  return v;
}

vec2 rotate(vec2 p, float a) {
  float s = sin(a);
  float c = cos(a);
  return mat2(c, -s, s, c) * p;
}

void main() {
  vec2 uv = vUv;
  vec2 p = uv - 0.5;
  p.x *= uResolution.x / max(uResolution.y, 1.0);
  float t = uTime;

  float ground = smoothstep(0.6, 0.2, uv.y);
  float radius = length(p);
  float ritualRing = exp(-radius * 4.0);
  float concentric = 0.35 + 0.25 * sin(radius * 24.0 - t * 2.0);
  float runes = smoothstep(0.0, 1.0, concentric) * ritualRing;
  float baseGlow = pow(ritualRing, 1.2) * 1.6;
  float emberPulse = baseGlow * (0.7 + 0.3 * sin(t * 2.0));

  vec3 floorCol = mix(vec3(0.05, 0.15, 0.16), vec3(1.05, 0.55, 0.12), ground);
  floorCol += vec3(1.0, 0.45, 0.08) * (emberPulse + runes * 0.6);

  vec2 smokeUv = p * 2.1;
  smokeUv.y += 0.25;
  smokeUv = rotate(smokeUv, 0.25 * sin(t * 0.3));
  float swirl = fbm(smokeUv * 1.4 + vec2(0.0, t * 0.12));
  float plume = fbm(rotate(smokeUv, 0.7) * 1.2 + vec2(t * 0.05, -t * 0.03));
  float pillar = smoothstep(0.25, 0.6, swirl + plume * 0.6);
  float taper = exp(-radius * 1.8);
  float smokeAmount = pillar * taper;

  vec3 smokeCol = mix(vec3(0.0, 0.45, 0.65), vec3(0.18, 0.95, 1.0), clamp(swirl * 0.7 + 0.3, 0.0, 1.0));
  smokeCol *= 0.9 + 0.1 * sin(t * 0.7 + radius * 12.0);

  vec3 color = floorCol + smokeCol * smokeAmount * 1.8;

  float emberNoise = fbm(p * 14.0 + vec2(t * 0.4, -t * 0.3));
  float sparks = step(0.985, fract(emberNoise + hash21(p * 120.0 + t))) * baseGlow;
  color += vec3(1.2, 0.65, 0.2) * sparks;

  float vignette = smoothstep(1.0, 0.35, radius);
  color *= vignette;

  gl_FragColor = vec4(color, 1.0);
}
```

#### Prismatic Nebula (No custom shader)

This effect uses standard Three.js materials + bloom to render glowing shards (MeshStandardMaterial) and starfield points (PointsMaterial). The visual impact comes from lighting, emissive materials, and palette cycling, not custom GLSL.

### 3.3 Runtime / Engine Shader Modules

#### CYBERNOID Player Runtime (html/runtime/runtime10.html)

This runtime exposes shader code on the UI and swaps between effect presets. Unique shaders here include point-sprite vortex, hologram core, and RGB shift.

Tunnel vortex (point sprites):

```glsl
uniform float uTime;
uniform float uIntensity;
uniform float uRadius;

attribute float aSeed;
varying float vGlow;

void main(){
  vec3 p = position;

  float t = uTime * 0.85 + aSeed * 6.2831853;
  float swirl = sin(t) * 0.8 + cos(t * 1.4) * 0.6;

  float r = uRadius + (sin(aSeed * 12.0 + uTime) * 8.0);
  float ang = aSeed * 6.2831853 * 12.0 + uTime * 1.2;

  p.x = cos(ang) * r + swirl * 4.0;
  p.y = sin(ang) * r + cos(t) * 3.0;
  p.z = -mod(uTime * 70.0 + aSeed * 1200.0, 1200.0);

  vGlow = 0.25 + 0.75 * abs(sin(t)) * uIntensity;

  vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
  gl_PointSize = 2.0 + 7.0 * vGlow;
  gl_Position = projectionMatrix * mvPosition;
}
```

```glsl
varying float vGlow;
void main(){
  vec2 uv = gl_PointCoord - 0.5;
  float d = length(uv);
  float a = smoothstep(0.5, 0.0, d);
  vec3 col = mix(vec3(0.1, 0.9, 1.0), vec3(1.0, 0.2, 1.0), vGlow);
  gl_FragColor = vec4(col, a * (0.25 + 0.75 * vGlow));
}
```

Hologram core (wireframe-ish pulse):

```glsl
uniform float uTime;
uniform float uPulse;

varying vec3 vPos;
varying float vPulse;

void main(){
  vPos = position;
  float wobble = sin(uTime * 1.7 + position.y * 0.25) * 0.18;
  vec3 p = position + normal * wobble * (0.4 + 1.2 * uPulse);
  vPulse = uPulse;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}
```

```glsl
uniform float uTime;
uniform float uPulse;

varying vec3 vPos;
varying float vPulse;

float hash(vec2 p){
  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
}

void main(){
  float scan = sin((vPos.y * 0.12) + uTime * 9.0) * 0.15;
  float n = hash(vPos.xy * 0.4 + uTime * 0.2);

  vec3 base = mix(vec3(0.05, 0.9, 1.0), vec3(1.0, 0.25, 1.0), 0.35 + 0.65 * vPulse);
  base += vec3(scan * 0.25) + vec3(n * 0.10);

  float edge = smoothstep(10.0, 3.0, length(vPos.xy));
  float alpha = 0.20 + 0.55 * edge + 0.25 * vPulse;

  gl_FragColor = vec4(base, alpha);
}
```

RGB shift postprocess (runtime variant):

```glsl
uniform sampler2D tDiffuse;
uniform float uTime;
uniform float uAmount;

varying vec2 vUv;

float rand(vec2 co){
  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main(){
  vec2 uv = vUv;
  float scan = sin(uv.y * 900.0 + uTime * 16.0) * 0.003;
  float amt = uAmount + scan;

  vec4 cr = texture2D(tDiffuse, uv + vec2( amt, 0.0));
  vec4 cg = texture2D(tDiffuse, uv);
  vec4 cb = texture2D(tDiffuse, uv - vec2( amt, 0.0));
  float noise = rand(uv * uTime) * 0.05;
  gl_FragColor = vec4(cr.r, cg.g, cb.b, 1.0) + vec4(noise, noise, noise, 0.0);
}
```

#### AI Demoscene Engine (html/engine/engine8.html)

The engine is a JSON-driven library of the same shader families (Ember Ritual, Cyber Tunnel, Neon Spikes, Synapse Pulse, Hologram Shell). Use it as a catalog for consistent parameter naming and effect swapping.

#### SYNAPSE Show (synapse/index.html)

Custom shader in this show is the core pulse (very similar to Synapse Core above), plus an RGB shift post pass. The rest uses Three.js standard materials and particle systems.

### 3.4 Terrain and Environment Shaders

#### Neon Terrain (neon_terrain_v0_0_9.html)

Vertex shader (simplex noise elevation):

```glsl
varying vec2 vUv;
varying float vElevation;
varying vec2 vGridPos;

uniform float uTime;
uniform float uSpeed;

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
float snoise(vec2 v) {
    const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439);
    vec2 i  = floor(v + dot(v, C.yy) );
    vec2 x0 = v - i + dot(i, C.xx);
    vec2 i1;
    i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
    vec4 x12 = x0.xyxy + C.xxzz;
    x12.xy -= i1;
    i = mod289(i);
    vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 ));
    vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
    m = m*m ;
    m = m*m ;
    vec3 x = 2.0 * fract(p * C.www) - 1.0;
    vec3 h = abs(x) - 0.5;
    vec3 ox = floor(x + 0.5);
    vec3 a0 = x - ox;
    m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
    vec3 g;
    g.x  = a0.x  * x0.x  + h.x  * x0.y;
    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
    return 130.0 * dot(m, g);
}

void main() {
    vUv = uv;

    float forwardMove = uTime * uSpeed; 
    vec2 worldPos = vec2(position.x * 0.1, (position.y + forwardMove) * 0.1);

    vGridPos = vec2(position.x, position.y + forwardMove);

    float n = snoise(worldPos * 0.4);
    float ridges = 1.0 - abs(snoise(worldPos * 0.7));
    ridges = pow(ridges, 3.0);

    float valleyMask = smoothstep(3.0, 25.0, abs(position.x));
    float mask = smoothstep(0.1, 0.5, n) * valleyMask;
    float elevation = mask * ridges * 35.0;

    vec3 newPos = position;
    newPos.z += elevation; 

    vElevation = elevation;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}
```

Fragment shader:

```glsl
varying vec2 vUv;
varying float vElevation;
varying vec2 vGridPos;

void main() {
    float gridSize = 2.0;

    vec2 grid = abs(fract(vGridPos / gridSize - 0.5) - 0.5) / fwidth(vGridPos / gridSize);
    float line = min(grid.x, grid.y);
    float gridIntensity = 1.0 - min(line, 1.0);

    vec3 floorColor = vec3(0.0, 0.02, 0.05);
    vec3 lineColor = vec3(0.0, 0.8, 1.0);
    vec3 peakColor = vec3(0.6, 0.9, 1.0);

    float heightFactor = smoothstep(0.0, 25.0, vElevation);

    vec3 finalColor = mix(floorColor, vec3(0.0, 0.1, 0.2), heightFactor);

    float lineBrightness = 0.2 + heightFactor * 0.8;
    finalColor = mix(finalColor, lineColor, gridIntensity * lineBrightness);

    if (vElevation > 20.0) {
         float peakHighlight = smoothstep(20.0, 35.0, vElevation);
         finalColor = mix(finalColor, peakColor, peakHighlight * 0.3);
    }

    float scan = sin(vGridPos.y * 0.2) * 0.05;
    finalColor += vec3(0.0, 0.1, 0.1) * scan;

    gl_FragColor = vec4(finalColor, 1.0);
}
```

#### Surreal Walker Digital Terrain (html/walker.html)

Vertex shader (grid peaks and road mask):

```glsl
varying vec3 vPos;
varying float vScrollZ;
varying float vHeight;

uniform float uTime;
uniform float uSpeed;

void main() {
  vec3 p = position;
  float scrollZ = p.z - (uTime * uSpeed);

  vec2 coord = vec2(p.x, scrollZ) * 0.035;
  float shape = abs(sin(coord.x)) * abs(cos(coord.y));
  float h = pow(shape, 2.5);

  float roadMask = smoothstep(12.0, 70.0, abs(p.x));
  float finalHeight = h * roadMask * 70.0;
  p.y += finalHeight;

  vPos = p;
  vScrollZ = scrollZ;
  vHeight = finalHeight;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}
```

Fragment shader:

```glsl
varying vec3 vPos;
varying float vScrollZ;
varying float vHeight;

void main() {
  float gridSize = 8.0;

  vec2 gridCoord = vec2(vPos.x, vScrollZ) / gridSize;
  vec2 f = fract(gridCoord);
  float thickness = 0.03;

  float xLine = step(1.0 - thickness, f.x) + step(f.x, thickness);
  float zLine = step(1.0 - thickness, f.y) + step(f.y, thickness);
  float grid = max(xLine, zLine);
  float vertexDot = xLine * zLine;

  vec3 colorBg = vec3(0.0, 0.0, 0.0);
  vec3 colorGrid = vec3(0.0, 1.0, 1.0);
  vec3 colorDot = vec3(1.0, 1.0, 1.0);

  vec3 heightTint = mix(colorGrid, vec3(0.8, 0.0, 1.0), smoothstep(20.0, 70.0, vHeight));
  vec3 finalColor = colorBg;
  finalColor = mix(finalColor, heightTint, grid);
  finalColor += colorDot * vertexDot * 2.0;

  float dist = length(vPos.xz);
  float fogFactor = exp(-dist * 0.012);
  finalColor *= fogFactor;

  gl_FragColor = vec4(finalColor, 1.0);
}
```

#### The Triad Lecture (the_triad_lecture-v1_2_0.html)

Main crystal vertex shader (noise + twist):

```glsl
varying vec2 vUv;
varying float vDistortion;
varying vec3 vNormal;
varying float vY;

uniform float uTime;
uniform float uBeat;
uniform float uComplexity; 

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
float snoise(vec3 v) {
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 = v - i + dot(i, C.xxx) ;
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );
    vec3 x1 = x0 - i1 + C.xxx;
    vec3 x2 = x0 - i2 + C.yyy;
    vec3 x3 = x0 - D.yyy;
    i = mod289(i);
    vec4 p = permute( permute( permute(
                i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
            + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
            + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
    float n_ = 0.142857142857;
    vec3  ns = n_ * D.wyz - D.xzx;
    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
    vec4 x_ = floor(j * ns.z);
    vec4 y_ = floor(j - 7.0 * x_ );
    vec4 x = x_ *ns.x + ns.yyyy;
    vec4 y = y_ *ns.x + ns.yyyy;
    vec4 h = 1.0 - abs(x) - abs(y);
    vec4 b0 = vec4( x.xy, y.xy );
    vec4 b1 = vec4( x.zw, y.zw );
    vec4 s0 = floor(b0)*2.0 + 1.0;
    vec4 s1 = floor(b1)*2.0 + 1.0;
    vec4 sh = -step(h, vec4(0.0));
    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
    vec3 p0 = vec3(a0.xy,h.x);
    vec3 p1 = vec3(a0.zw,h.y);
    vec3 p2 = vec3(a1.xy,h.z);
    vec3 p3 = vec3(a1.zw,h.w);
    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
    p0 *= norm.x;
    p1 *= norm.y;
    p2 *= norm.z;
    p3 *= norm.w;
    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
    m = m * m;
    return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
}

mat4 rotationMatrix(vec3 axis, float angle) {
    axis = normalize(axis);
    float s = sin(angle);
    float c = cos(angle);
    float oc = 1.0 - c;
    return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
                oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
                oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
                0.0,                                0.0,                                0.0,                                1.0);
}

void main() {
    vUv = uv;
    vNormal = normal;

    float noise = snoise(position * (0.8 + uComplexity * 0.5) + uTime * 0.3);
    float steppedNoise = floor(noise * 4.0) / 4.0; 
    float spike = pow(uBeat, 2.0) * 0.4;
    vDistortion = steppedNoise + spike;

    vec3 pos = position + normal * (vDistortion * uComplexity);

    if (uComplexity > 1.2) {
        float angle = pos.y * sin(uTime) * 0.5;
        mat4 rot = rotationMatrix(vec3(0.0, 1.0, 0.0), angle);
        vec4 twistedPos = rot * vec4(pos, 1.0);
        pos = twistedPos.xyz;
    }

    vY = pos.y;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
```

Main crystal fragment shader (grid + scanlines):

```glsl
varying vec2 vUv;
varying float vDistortion;
varying vec3 vNormal;
varying float vY;

uniform float uTime;
uniform vec3 uColorA;
uniform vec3 uColorB;
uniform float uWireframeMode; 

void main() {
    vec3 lightDir = normalize(vec3(1.0, 2.0, 1.0));
    float diff = max(dot(vNormal, lightDir), 0.0);

    float scan = sin(vY * 20.0 - uTime * 5.0);
    float scanBright = smoothstep(0.8, 1.0, scan);

    float gridScale = 30.0;
    float grid = max(
        step(0.9, sin(vUv.x * gridScale)), 
        step(0.9, sin(vUv.y * gridScale))
    );

    vec3 baseColor = mix(uColorA, uColorB, vDistortion + diff * 0.3);

    if (uWireframeMode > 0.5) {
        baseColor = vec3(0.0);
        baseColor += uColorB * grid;
        baseColor += uColorA * scanBright;
    } else {
        vec3 viewDir = normalize(vec3(0.0, 0.0, 1.0));
        float fresnel = pow(1.0 - max(dot(vNormal, viewDir), 0.0), 3.0);
        baseColor += uColorA * fresnel * 2.0;
        baseColor += vec3(1.0) * scanBright * 0.2;
    }

    gl_FragColor = vec4(baseColor, 1.0);
}
```

Terrain vertex shader:

```glsl
varying vec2 vUv;
varying float vHeight;
uniform float uTime;
uniform float uBeat;

float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); }

void main() {
    vUv = uv;
    vec2 movingUv = uv;
    movingUv.y += uTime * 0.1;

    float distFromCenter = abs(uv.x - 0.5) * 2.0;
    float height = sin(movingUv.y * 10.0) * sin(movingUv.x * 10.0);
    float path = smoothstep(0.2, 0.5, distFromCenter);

    vHeight = height * path * 2.0 + (uBeat * path * 0.2);

    vec3 pos = position;
    pos.z += vHeight;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}
```

Terrain fragment shader:

```glsl
varying vec2 vUv;
varying float vHeight;
uniform float uTime;
uniform vec3 uColorA;

void main() {
    float scrollY = vUv.y + uTime * 0.1;
    float gridX = step(0.98, fract(vUv.x * 40.0));
    float gridY = step(0.98, fract(scrollY * 40.0));

    float grid = max(gridX, gridY);

    float dist = distance(vUv, vec2(0.5, 0.5));
    float alpha = 1.0 - smoothstep(0.3, 0.5, dist);

    vec3 color = uColorA * grid;
    color += vec3(vHeight * 0.2);

    gl_FragColor = vec4(color, grid * alpha);
}
```

Post-processing fragment shader (shockwave + glitch + chromatic aberration):

```glsl
uniform sampler2D tDiffuse;
uniform float uTime;
uniform float uBeat;
uniform float uGlitchIntensity;
uniform float uShockwave;
varying vec2 vUv;

float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); }

void main() {
    vec2 uv = vUv;
    vec2 center = vec2(0.5, 0.5);
    float dist = distance(uv, center);

    float wave = uShockwave;
    float ringWidth = 0.1;

    if (wave > 0.0) {
        float ring = smoothstep(wave - ringWidth, wave, dist) * smoothstep(wave + ringWidth, wave, dist);
        uv -= (uv - center) * ring * 0.05 * uGlitchIntensity; 
    }

    if (uGlitchIntensity > 0.5) {
        float block = floor(uv.y * 20.0);
        float noise = rand(vec2(block, floor(uTime * 10.0)));
        if(noise > 0.9) {
            uv.x += (noise - 0.5) * 0.05;
        }
    }

    float shift = 0.002 + (uBeat * 0.01) + (uShockwave * 0.02);

    vec4 r = texture2D(tDiffuse, uv + vec2(shift, 0.0));
    vec4 g = texture2D(tDiffuse, uv);
    vec4 b = texture2D(tDiffuse, uv - vec2(shift, 0.0));

    vec3 color = vec3(r.r, g.g, b.b);

    float scanline = sin(uv.y * 800.0) * 0.1;
    color -= scanline;

    if (uBeat > 0.95) color += vec3(0.05);

    gl_FragColor = vec4(color, 1.0);
}
```

Post vertex shader (full-screen quad):

```glsl
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
```

#### Lowpoly Demoscene HDR Post Pass (lowpoly_demoscene_world_v0_2_3.html / v0_2_4.html)

This is the GLSL post pass that handles exposure/contrast/saturation, vignette, chromatic aberration, and grain.

Vertex shader:

```glsl
varying vec2 vUv;
void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
```

Fragment shader:

```glsl
uniform sampler2D tDiffuse;
uniform float exposure;
uniform float contrast;
uniform float saturation;
uniform float vignette;
uniform float aberration;
uniform float time;
varying vec2 vUv;

float rand(vec2 co) {
  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

void main() {
  vec2 uv = vUv;
  vec2 center = vec2(0.5);
  vec2 dir = uv - center;

  vec2 ab = dir * aberration;
  float r = texture2D(tDiffuse, uv + ab).r;
  float g = texture2D(tDiffuse, uv).g;
  float b = texture2D(tDiffuse, uv - ab).b;
  vec3 color = vec3(r, g, b);

  color *= exposure;
  color = pow(color, vec3(contrast));
  color = color / (1.0 + color);

  float luma = dot(color, vec3(0.2126, 0.7152, 0.0722));
  color = mix(vec3(luma), color, saturation);

  float dist = length(dir);
  float vig = smoothstep(1.2, vignette, dist);
  color *= (1.0 - vig * 0.7);

  float grain = rand(uv * 800.0 + time * 60.0) - 0.5;
  color += grain * 0.02;

  gl_FragColor = vec4(color, 1.0);
}
```

### 3.5 Raymarching / Procedural Math Shaders

The following three files are full-screen raymarching demos. Each implements signed-distance fields (SDFs) and a ray-march loop inside the fragment shader.

#### Procedural Odyssey (g3d.html)

Vertex shader:

```glsl
attribute vec2 position;
void main() {
    gl_Position = vec4(position, 0.0, 1.0);
}
```

Fragment shader:

```glsl
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;

#define PI 3.14159265359
#define MAX_STEPS 100
#define SURF_DIST 0.001
#define MAX_DIST 100.0

mat2 rot(float a) {
    float s = sin(a);
    float c = cos(a);
    return mat2(c, -s, s, c);
}

vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
    return a + b * cos(6.28318 * (c * t + d));
}

float smin(float a, float b, float k) {
    float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
    return mix(b, a, h) - k * h * (1.0 - h);
}

float sdBox(vec3 p, vec3 b) {
    vec3 q = abs(p) - b;
    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

float sdOctahedron(vec3 p, float s) {
    p = abs(p);
    return (p.x + p.y + p.z - s) * 0.57735027;
}

float sceneGeometric(vec3 p) {
    vec3 p_orig = p;
    p.z = mod(p.z, 4.0) - 2.0; 
    p.xy *= rot(p_orig.z * 0.2 + u_time * 0.5);

    float angle = atan(p.y, p.x);
    float radius = length(p.xy);
    float sectors = 6.0 + sin(u_time * 0.2) * 2.0;
    angle = mod(angle, 2.0 * PI / sectors) - PI / sectors;
    p.xy = vec2(cos(angle), sin(angle)) * radius;

    p.x -= 1.5;
    return sdBox(p, vec3(0.5, 0.1, 0.8)) - 0.1;
}

float sceneGyroid(vec3 p) {
    p *= 0.8;
    p.xy *= rot(u_time * 0.1);
    p.z += u_time;
    float scale = 1.5;
    float d = dot(sin(p * scale), cos(p.zxy * scale)) / scale;
    float core = length(cross(sin(p), cos(p))) - 0.5;
    return smin(d, core, 0.5);
}

float sceneFractal(vec3 p) {
    p.z -= u_time * 2.0;
    float s = 1.0;
    for(int i=0; i<5; i++) {
        p = abs(p) - vec3(0.5, 1.2, 0.8);
        p.xy *= rot(0.5);
        p.yz *= rot(0.3);
        float k = 1.6 / min(dot(p, p), 1.2);
        p *= k;
        s *= k;
    }
    return (length(p) - 0.5) / s;
}

float sceneWormhole(vec3 p) {
    float r = length(p.xy);
    float tunnel = r - (1.0 + 0.2 * sin(p.z * 4.0 + u_time * 2.0));
    float spiral = sin(p.z * 6.0 + atan(p.y, p.x) * 8.0) * 0.1;
    return tunnel + spiral;
}

float getDist(vec3 p) {
    float t = mod(u_time, 180.0);
    if (t < 45.0) return sceneGeometric(p);
    if (t < 90.0) return sceneGyroid(p);
    if (t < 135.0) return sceneFractal(p);
    return sceneWormhole(p);
}

vec3 getNormal(vec3 p) {
    float d = getDist(p);
    vec2 e = vec2(0.01, 0.0);
    vec3 n = d - vec3(
        getDist(p - e.xyy),
        getDist(p - e.yxy),
        getDist(p - e.yyx)
    );
    return normalize(n);
}

float rayMarch(vec3 ro, vec3 rd) {
    float dO = 0.0;
    for(int i=0; i<MAX_STEPS; i++) {
        vec3 p = ro + rd * dO;
        float dS = getDist(p);
        dO += dS;
        if(dO > MAX_DIST || dS < SURF_DIST) break;
    }
    return dO;
}

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;

    vec3 ro = vec3(0.0, 0.0, -5.0);
    vec3 rd = normalize(vec3(uv, 1.0));

    float angle = u_time * 0.2;
    ro.xz *= rot(angle);
    rd.xz *= rot(angle);

    float d = rayMarch(ro, rd);

    vec3 col = vec3(0.0);
    if(d < MAX_DIST) {
        vec3 p = ro + rd * d;
        vec3 n = getNormal(p);
        float diffuse = clamp(dot(n, normalize(vec3(0.5, 0.6, 0.8))), 0.0, 1.0);

        float t = d * 0.05 + u_time * 0.1;
        col = palette(t,
            vec3(0.5, 0.5, 0.5),
            vec3(0.5, 0.5, 0.5),
            vec3(1.0, 1.0, 1.0),
            vec3(0.0, 0.33, 0.67)
        );

        col *= diffuse;
    }

    col = pow(col, vec3(0.85));
    gl_FragColor = vec4(col, 1.0);
}
```

#### Neuro-Dynamic Overload (gemini/math-odyssey-dynamic-v1_0_2.html)

Vertex shader:

```glsl
attribute vec2 position;
void main() { gl_Position = vec4(position, 0.0, 1.0); }
```

Fragment shader:

```glsl
precision highp float;

uniform vec2 u_resolution;
uniform float u_time;
uniform vec2 u_mouse;

#define PI 3.14159265359
#define MAX_STEPS 90
#define MAX_DIST 80.0
#define SURF_DIST 0.001

mat2 rot(float a) {
    float s = sin(a), c = cos(a);
    return mat2(c, -s, s, c);
}

vec2 pModPolar(inout vec2 p, float repetitions) {
    float angle = 2.0 * PI / repetitions;
    float a = atan(p.y, p.x) + angle / 2.0;
    float r = length(p);
    float c = floor(a / angle);
    a = mod(a, angle) - angle / 2.0;
    p = vec2(cos(a), sin(a)) * r;
    if (abs(c) >= (repetitions / 2.0)) c = abs(c);
    return p;
}

float sdBox(vec3 p, vec3 b) {
    vec3 q = abs(p) - b;
    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

float getBeat(float speed, float power) {
    return pow(sin(u_time * speed) * 0.5 + 0.5, power);
}

float map(vec3 p) {
    float beat = getBeat(2.0, 4.0);

    vec3 q = p;
    q.xy *= rot(u_time * 0.2);
    q.z += u_time * 0.6;

    float d1 = length(q) - (1.5 + beat);

    vec3 r = p;
    r.xy *= rot(u_time * 0.5);
    r.xz *= rot(u_time * 0.3);
    float d2 = sdBox(r, vec3(1.0 + beat, 0.4, 0.4));

    return min(d1, d2);
}

vec3 getNormal(vec3 p) {
    float d = map(p);
    vec2 e = vec2(0.001, 0.0);
    vec3 n = d - vec3(
        map(p - e.xyy),
        map(p - e.yxy),
        map(p - e.yyx)
    );
    return normalize(n);
}

float rayMarch(vec3 ro, vec3 rd) {
    float dO = 0.0;
    for(int i = 0; i < MAX_STEPS; i++) {
        vec3 p = ro + rd * dO;
        float dS = map(p);
        dO += dS;
        if(dO > MAX_DIST || dS < SURF_DIST) break;
    }
    return dO;
}

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / u_resolution.y;

    vec3 ro = vec3(0.0, 0.0, -6.0);
    vec3 rd = normalize(vec3(uv, 1.0));

    ro.xz *= rot(u_time * 0.2);
    rd.xz *= rot(u_time * 0.2);

    float d = rayMarch(ro, rd);

    vec3 col = vec3(0.0);
    if(d < MAX_DIST) {
        vec3 p = ro + rd * d;
        vec3 n = getNormal(p);
        float diff = clamp(dot(n, normalize(vec3(0.8, 0.6, 0.2))), 0.0, 1.0);
        float beat = getBeat(1.5, 2.0);
        col = vec3(0.1, 0.3, 0.9) * diff + vec3(beat * 0.5, 0.2, 0.6);
    }

    float glow = exp(-0.1 * d * d);
    col += glow * vec3(0.1, 0.8, 1.0);

    gl_FragColor = vec4(col, 1.0);
}
```

#### Advanced Math Visualization (zai-webgpu-001.html)

Vertex shader:

```glsl
attribute vec4 aVertexPosition;
void main() {
    gl_Position = aVertexPosition;
}
```

Fragment shader:

```glsl
precision highp float;

uniform vec2 uResolution;
uniform float uTime;
uniform float uBeatLow;
uniform float uBeatHigh;
uniform float uIntensity;
uniform float uZoom;
uniform float uSeed;

mat2 rot(float a) {
    float s = sin(a);
    float c = cos(a);
    return mat2(c, -s, s, c);
}

float sdBox(vec3 p, vec3 b) {
    vec3 q = abs(p) - b;
    return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0);
}

float sdSphere(vec3 p, float s) {
    return length(p) - s;
}

vec2 map(vec3 p) {
    float expansion = 1.0 + (uBeatLow * 0.5);

    p.xy *= rot(uTime * 0.1 + uSeed);
    p.xz *= rot(uTime * 0.15);

    vec3 q = p;
    q = mod(q + 1.5 + (uSeed * 0.1), 3.0) - 1.5;

    float foldFactor = 1.0 + uIntensity * 0.05 + uBeatHigh;
    q.xy = abs(q.xy) - 0.5 * foldFactor;
    q.xz = abs(q.xz) - 0.3 * foldFactor;

    float boxSize = (0.5 + 0.2 * sin(uTime + p.z + uSeed)) * expansion;
    float dBox = sdBox(q, vec3(boxSize));

    vec3 spherePos = vec3(sin(uTime + uSeed)*2.0, cos(uTime*1.3)*2.0, sin(uTime*0.7)*2.0);
    float dSphere = length(p - spherePos) - (0.2 + uBeatHigh * 0.3);

    float dStruct = max(dBox, -dSphere);
    float plane = p.y + 2.0;

    float d = min(dStruct, plane);
    float m = step(dStruct, plane);

    return vec2(d, m);
}

vec3 rayMarch(vec3 ro, vec3 rd) {
    float t = 0.0;
    float d = 0.0;
    vec3 p = ro;
    vec2 res = vec2(-1.0, 0.0);

    for(int i = 0; i < 80; i++) {
        p = ro + rd * t;
        res = map(p);
        d = res.x;
        t += d;
        if(d < 0.001 || t > 30.0) break;
    }

    return vec3(t, res.y, 0.0);
}

vec3 calcNormal(vec3 p) {
    float e = 0.001;
    return normalize(vec3(
        map(p + vec3(e, 0, 0)).x - map(p - vec3(e, 0, 0)).x,
        map(p + vec3(0, e, 0)).x - map(p - vec3(0, e, 0)).x,
        map(p + vec3(0, 0, e)).x - map(p - vec3(0, 0, e)).x
    ));
}

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / uResolution.y;

    vec3 ro = vec3(0.0, 0.0, -uZoom);
    vec3 rd = normalize(vec3(uv, 1.0));

    ro.x += sin(uTime * 20.0) * uBeatHigh * 0.1;
    ro.y += cos(uTime * 15.0) * uBeatHigh * 0.1;

    vec3 result = rayMarch(ro, rd);
    float t = result.x;
    float m = result.y;

    vec3 col = vec3(0.0);

    if(t < 30.0) {
        vec3 p = ro + rd * t;
        vec3 n = calcNormal(p);
        vec3 lightPos = vec3(2.0, 5.0, -3.0);
        vec3 l = normalize(lightPos - p);

        float diff = clamp(dot(n, l), 0.0, 1.0);
        float spec = pow(clamp(dot(reflect(-l, n), -rd), 0.0, 1.0), 32.0);
        float fresnel = pow(1.0 - dot(-rd, n), 3.0);

        vec3 baseColor = 0.5 + 0.5 * cos(uTime * 0.5 + p.xyx + vec3(0, 2, 4));
        baseColor += vec3(uBeatLow, uBeatHigh, uBeatLow * uBeatHigh) * 2.0;

        if(m > 0.5) {
            col = baseColor * diff + vec3(1.0) * spec;
            col += fresnel * vec3(0.0, 1.0, 1.0);
        } else {
            float grid = step(0.95, fract(p.x)) + step(0.95, fract(p.z));
            col = vec3(grid) * diff * vec3(0.0, 0.2, 0.3);
        }

        col = mix(col, vec3(0.0), 1.0 - exp(-0.05 * t * t));
    }

    col *= 1.0 - length(uv) * 0.5;
    gl_FragColor = vec4(col, 1.0);
}
```

### 3.6 Object / Material Studies

#### Construct: Math, Code, Art (zai-webgpu-002.html)

This demo uses Three.js with three custom shader materials: crystal spikes, CS data cubes, and liquid metal.

Crystal vertex shader:

```glsl
uniform float uTime;
uniform float uBeat;
varying vec3 vNormal;
varying vec3 vPosition;
varying float vNoise;

// noiseGLSL injected in source

void main() {
    vNormal = normal;
    vPosition = position;

    float freq = 4.0;
    float amp = 0.2 + (uBeat * 0.4);
    float noiseVal = snoise(vec3(position.x * freq + uTime, position.y * freq, position.z * freq));

    vNoise = noiseVal;
    vec3 newPos = position + normal * noiseVal * amp;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
}
```

Crystal fragment shader:

```glsl
uniform vec3 uColor;
varying vec3 vNormal;
varying vec3 vPosition;
varying float vNoise;

void main() {
    vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
    float diff = max(dot(vNormal, lightDir), 0.0);

    vec3 viewDir = normalize(cameraPosition - vPosition);
    float rim = 1.0 - max(dot(viewDir, vNormal), 0.0);
    rim = pow(rim, 4.0);

    vec3 baseColor = uColor * (diff + 0.2);
    vec3 peakColor = vec3(1.0);
    vec3 finalColor = mix(baseColor, peakColor, smoothstep(0.0, 1.0, vNoise));

    finalColor += rim * uColor;

    gl_FragColor = vec4(finalColor, 1.0);
}
```

CS data cube vertex shader:

```glsl
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {
    vUv = uv;
    vNormal = normalize(normalMatrix * normal);
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    vViewPosition = -mvPosition.xyz;
    gl_Position = projectionMatrix * mvPosition;
}
```

CS data cube fragment shader:

```glsl
uniform float uTime;
uniform float uBeat;
uniform vec3 uColor;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {
    float grid = step(0.95, fract(vUv.x * 20.0)) + step(0.95, fract(vUv.y * 20.0));

    vec3 normal = normalize(vNormal);
    vec3 viewDir = normalize(vViewPosition);
    vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
    float diff = max(dot(normal, lightDir), 0.0);

    float pulse = 0.0;
    if(uBeat > 0.5) pulse = 0.5;

    vec3 color = mix(vec3(0.1), uColor, grid);
    color *= (diff + pulse);

    gl_FragColor = vec4(color, 1.0);
}
```

Liquid metal vertex shader:

```glsl
uniform float uTime;
uniform float uBeat;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

// noiseGLSL injected in source

void main() {
    vUv = uv;

    float noiseVal = snoise(vec3(position.x * 2.0, position.y * 2.0 + uTime, position.z * 2.0));
    float displacement = noiseVal * (0.5 + uBeat);

    vec3 newPos = position + normal * displacement;

    vNormal = normalize(normalMatrix * normal);
    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);
    vViewPosition = -mvPosition.xyz;

    gl_Position = projectionMatrix * mvPosition;
}
```

Liquid metal fragment shader:

```glsl
uniform vec3 uColor;
varying vec3 vNormal;
varying vec3 vViewPosition;
varying vec2 vUv;

void main() {
    vec3 normal = normalize(vNormal);
    vec3 viewDir = normalize(vViewPosition);

    vec3 lightDir = normalize(vec3(5.0, 5.0, 5.0));
    vec3 reflectDir = reflect(-lightDir, normal);
    float spec = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);

    float fresnel = pow(1.0 - max(dot(viewDir, normal), 0.0), 3.0);

    vec3 base = uColor * 0.2;
    vec3 finalColor = base + (vec3(1.0) * spec) + (uColor * fresnel * 2.0);

    gl_FragColor = vec4(finalColor, 1.0);
}
```

#### 3D Poly Knot (obj-3d-001.html)

This scene uses Three.js MeshStandardMaterial with vertex colors (no custom shader). The gradient is baked per-vertex via HSL and animated via object rotation.

### 3.7 CSS/UI-only Pages (No custom shader code)

- krysztaly-czasu-landing-v0_1_0.html (CSS-driven landing page)
- gemini/landing-v0_0_1.html, gemini/landing-v0_0_2.html, gemini/landing-v0_0_4.html, gemini/landing-v0_0_5.html (static landings)
- gemini/terminal.html (CSS MS-DOS replica)
- browser_feature_probe_v0_1_0.html (feature detection dashboard)
- index.html (nginx placeholder)
- 3dplay/index.html (UI shell; effect logic in external script/effects.json)

## 4) Practical Notes and Reuse Tips

- The 3d.html and html/webgpu2.html effect families share the same shader vocabulary. You can reuse these shaders by swapping only uniforms and materials.
- Many effects rely on Three.js postprocessing (EffectComposer, RenderPass, UnrealBloomPass, GlitchPass). To reproduce visuals precisely, keep the same bloom strength/threshold values.
- The lowpoly world uses standard materials and lighting. The visual punch comes from tone mapping or the HDR pass, plus strong fog and emissive accents.
- The WebGPU Aethelgard shader is a clean standalone template for full-screen procedural visuals. It is a good starting point for new WGSL experiments.