experimental backend WebGL2 · not opted in
Enable WebGPU controls in settings. WebGL2 remains unchanged. preview clip · live controls are optional this browser needs the main-thread fallback, which may freeze the page.
0.75
0.03
0.03
1.90
4.10
0.00
0.30
0.00
0.50
0.80
1.20
1.00
/*{ "DESCRIPTION": "Flight through an infinite twisting gyroid lattice with iridescent edges and a multi-pass HDR bloom.", "CREDIT": "Iridescence material after Psybernautics / IQ. CC0.", "ISFVSN": "2", "CATEGORIES": ["Generator", "Raymarching", "Geometry"], "INPUTS": [ { "NAME": "uSpeed", "TYPE": "float", "DEFAULT": 0.75, "MIN": 0.0, "MAX": 4.0, "LABEL": "Flight Speed" }, { "NAME": "uTwist", "TYPE": "float", "DEFAULT": 0.0255,"MIN": 0.0, "MAX": 1.5, "LABEL": "Tunnel Twist" }, { "NAME": "uThickness", "TYPE": "float", "DEFAULT": 0.03, "MIN": 0.01, "MAX": 0.20, "LABEL": "Wall Thickness" }, { "NAME": "uRadius", "TYPE": "float", "DEFAULT": 1.9, "MIN": 0.4, "MAX": 3.0, "LABEL": "Tube Radius" }, { "NAME": "uEdge", "TYPE": "float", "DEFAULT": 4.1, "MIN": 1.0, "MAX": 8.0, "LABEL": "Edge Falloff" }, { "NAME": "uHue", "TYPE": "float", "DEFAULT": 0.0, "MIN": 0.0, "MAX": 1.0, "LABEL": "Hue Offset" }, { "NAME": "uHueSpeed", "TYPE": "float", "DEFAULT": 0.3, "MIN": 0.0, "MAX": 2.0, "LABEL": "Hue Drift Speed" }, { "NAME": "uGlow", "TYPE": "float", "DEFAULT": 0.001,"MIN": 0.0, "MAX": 2.0, "LABEL": "Edge Glow" }, { "NAME": "uAudio", "TYPE": "float", "DEFAULT": 0.5, "MIN": 0.0, "MAX": 1.0, "LABEL": "Audio Pulse" }, { "NAME": "uBloomThresh", "TYPE": "float", "DEFAULT": 0.8, "MIN": 0.0, "MAX": 3.0, "LABEL": "Bloom Threshold" }, { "NAME": "uBloomIntensity","TYPE": "float", "DEFAULT": 1.2, "MIN": 0.0, "MAX": 4.0, "LABEL": "Bloom Intensity" }, { "NAME": "uBloomSize", "TYPE": "float", "DEFAULT": 1.0, "MIN": 0.2, "MAX": 3.0, "LABEL": "Bloom Size" } ], "PASSES": [ { "TARGET": "sceneBuf", "FLOAT": true }, { "TARGET": "blurX", "FLOAT": true, "WIDTH": "floor($WIDTH/4.0)", "HEIGHT": "floor($HEIGHT/4.0)" }, { "TARGET": "blurY", "FLOAT": true, "WIDTH": "floor($WIDTH/4.0)", "HEIGHT": "floor($HEIGHT/4.0)" }, { } ] }*/ // ============================================================ // GYROID TUNNEL + BLOOM — ISF (glslop.com compatible) // // 4-pass pipeline, all self-contained: // PASS 0 (sceneBuf) : raymarch the scene, output linear HDR // PASS 1 (blurX) : bright-pass threshold + horizontal blur (1/4 res) // PASS 2 (blurY) : vertical blur (1/4 res) // PASS 3 (screen) : composite scene + bloom, tonemap + gamma // ============================================================ const float PI = 3.14159265; // 2D rotation mat2 r2(float a){ float c = cos(a), s = sin(a); return mat2(c, -s, s, c); } // time-animated hue offset (uHue = manual offset, uHueSpeed = drift per second) float hueShift(){ return uHue + TIME * uHueSpeed; } // IQ cosine palette vec3 palette(float t){ return 0.5 + 0.5 * cos(6.28318 * (t + vec3(0.0, 0.33, 0.67) + hueShift())); } // gyroid pseudo-distance field float gyroid(vec3 p, float scale, float thick){ p *= scale; return abs(dot(sin(p), cos(p.zxy))) / scale - thick; } // glow accumulator (reset per fragment in the scene pass) float g_glow; float map(vec3 p){ p.xy *= r2(p.z * uTwist); // twist the tunnel float scale = 1.0 + uAudio * 0.6; // audio-reactive pulse float g1 = gyroid(p, 1.0 * scale, uThickness); float g2 = gyroid(p, 2.0 * scale, uThickness * 0.5); float d = max(g1, -g2 * 0.7); // subtract detail layer // carve a hollow tube so the camera has empty space to fly through float tube = uRadius - length(p.xy); d = max(d, tube); g_glow += 0.015 / (0.01 + d * d * 40.0); return d; } vec3 getNormal(vec3 p){ vec2 e = vec2(0.001, 0.0); return normalize(vec3( map(p + e.xyy) - map(p - e.xyy), map(p + e.yxy) - map(p - e.yxy), map(p + e.yyx) - map(p - e.yyx) )); } // ---- PASS 0: raymarch the scene into an HDR buffer ---- vec3 renderScene(vec2 fragNorm){ g_glow = 0.0; vec2 uv = (fragNorm * RENDERSIZE - 0.5 * RENDERSIZE) / RENDERSIZE.y; float t = TIME * uSpeed; vec3 ro = vec3(0.0, 0.0, t); vec3 rd = normalize(vec3(uv, 1.2)); rd.xy *= r2(sin(t * 0.15) * 0.4); // slow banking roll float dist = 0.0; bool hit = false; vec3 p = ro; for(int i = 0; i < 120; i++){ p = ro + rd * dist; float d = map(p); if(d < 0.001){ hit = true; break; } if(dist > 40.0) break; dist += d * 0.7; } vec3 col = vec3(0.0); vec3 hue = palette(TIME * 0.05 + 0.3); // fallback tint for the background if(hit){ vec3 n = getNormal(p); float fres = pow(1.0 - clamp(dot(n, -rd), 0.0, 1.0), uEdge); // iridescence material (from the reference shader) float height = atan(n.y, n.x); hue = cos((height + (vec3(0.0, 0.33, 0.67) + hueShift()) * PI) * 2.0) * 0.5 + 0.5; vec3 wall = vec3(0.008, 0.008, 0.016); col = wall + hue * fres * 3.5; // HDR edges } col += hue * g_glow * uGlow; // colored glow halo col = mix(col, vec3(0.0), smoothstep(20.0, 40.0, dist)); // depth fog return col; } // separable Gaussian blur of the bright-pass, in `dir` (1,0) or (0,1) vec3 bloomBlur(vec2 fragNorm, vec2 dir){ vec2 px = (1.0 / RENDERSIZE) * dir * uBloomSize; vec3 sum = vec3(0.0); float wsum = 0.0; for(int i = -6; i <= 6; i++){ float w = exp(-float(i * i) / 18.0); // sigma = 3 vec2 uv = fragNorm + px * float(i); vec3 s; if(PASSINDEX == 1){ // sampling the full-res scene: apply the bright-pass threshold here s = IMG_NORM_PIXEL(sceneBuf, uv).rgb; s = max(s - uBloomThresh, 0.0); } else { // sampling the already-thresholded horizontal blur s = IMG_NORM_PIXEL(blurX, uv).rgb; } sum += s * w; wsum += w; } return sum / wsum; } void main(){ vec2 fragNorm = isf_FragNormCoord; if(PASSINDEX == 0){ // scene -> HDR buffer gl_FragColor = vec4(renderScene(fragNorm), 1.0); } else if(PASSINDEX == 1){ // bright-pass + horizontal blur (quarter res) gl_FragColor = vec4(bloomBlur(fragNorm, vec2(1.0, 0.0)), 1.0); } else if(PASSINDEX == 2){ // vertical blur (quarter res) gl_FragColor = vec4(bloomBlur(fragNorm, vec2(0.0, 1.0)), 1.0); } else { // composite: scene + bloom, then tonemap + gamma vec3 scene = IMG_NORM_PIXEL(sceneBuf, fragNorm).rgb; vec3 bloom = IMG_NORM_PIXEL(blurY, fragNorm).rgb; vec3 col = scene + bloom * uBloomIntensity; col = col / (1.0 + col); // Reinhard tonemap col = pow(col, vec3(0.4545)); // gamma gl_FragColor = vec4(col, 1.0); } }
Flight through an infinite twisting gyroid lattice with iridescent edges and a multi-pass HDR bloom.
by dewpointwitnessed_generationmade with glslopCC0-1.0credit: Iridescence material after Psybernautics / IQ. CC0.active·created 2026-07-21 23:28Z217 views0 forks12 paramsmultipass ×4Claude Opus 4.8
export clip · render a video in your browser
Renders to video in your browser (no upload), stepping the real renderer frame by frame so multipass + feedback come out right. motion auto-animates the shader's own knobs — each export rolls a fresh take (🎲 re-roll, 🔒 to pin one you like). GIF is slower with a tighter length cap; MP4/WebM are faster. Some devices record in real time (noted below if so) — keep the tab visible.
caps: ≤1920 per side, ≤60fps, ≤18000 frames (GIF ≤300)
embed · drop this shader into any page
Renders client-side in the reader's browser (CC0 — no attribution required, but the backlink is appreciated).