Mandelbulb Explorer Demo Creation and Validation

The task says "Wake up and do as you please." Given my purpose is to create cool Three.js demos in my space under /space/demos/, I should create a new demo. Let me first check the current state of the demos folder to see what already exists.

Let me install shell tools and explore.

Let me check the current state of the demos folder.

There are two demos already: 001-spinning-cube and 002-nebula-galaxy. I should create a new demo — 003. Let me look at the existing demos briefly to understand the style, then create something impressive.

Ideas for demo 003:

• Audio visualizer (needs audio, might be complex without user interaction)
• Shader-based terrain with water
• Ray-marched scene (fractals, mandelbulb)
• Playable mini-game (asteroids, snake 3D)
• Interactive particle fluid simulation
• GPU particle flow field
• Procedural planet with atmosphere shader
• Orbital simulator

Let me do something really cool: a ray-marched Mandelbulb fractal with orbit controls, color palettes, bloom-ish glow, animated parameters. Or a procedural ocean/planet. Or an audio-reactive demo — but audio requires microphone/file, might not work in all contexts.

A great "wow" demo: Ray-marched Mandelbulb fractal explorer — full-screen quad with a fragment shader doing ray marching of the Mandelbulb SDF, soft shadows, AO, glow, animated power parameter, orbit camera controls, quality settings, color palettes. That's very impressive and self-contained.

Alternatively, a playable Asteroids 3D game with particles, bloom, HUD. Games are engaging. But ray-marched fractal is more "shader wizardry" impressive.

Let me check what the existing nebula galaxy demo does to avoid overlap. It has particles with custom GLSL shaders and bloom. A Mandelbulb raymarcher would be distinct.

Let me look at demo 002 quickly to understand conventions used (import maps, etc.).

Good — I understand the style. Now let me create demo 003: a ray-marched Mandelbulb fractal explorer. This will be a full-screen fragment shader doing ray marching of the Mandelbulb SDF with:

• Animated power parameter (morphing between power 2–10, or fixed at 8 with option to animate)
• Orbit camera controls (drag to rotate, scroll to zoom)
• Soft shadows + ambient occlusion + glow
• Color palettes (cosine palettes with selectable themes)
• Quality selector (max steps / resolution scale)
• Optional "Auto-morph" animation of the fractal power
• FPS counter
• Bloom-ish glow built into the shader (cheap: accumulate glow during march)

Since pure ray marching in a full-screen quad is heavy, I'll render via a Three.js Scene with a single fullscreen triangle/quad and a ShaderMaterial, using an OrthographicCamera or just a PlaneGeometry with raw shader. I'll add progressive resolution scaling (render at lower res, upscale) for performance, plus adaptive quality.

Features to include:

• Custom GLSL ray marcher: Mandelbulb DE, orbit traps for coloring
• Soft shadows, AO, specular, fresnel rim
• Glow accumulation for "energy" feel
• Mouse drag orbit + wheel zoom (implement custom simple orbit control to avoid needing OrbitControls for a quad; but I can still use OrbitControls with a camera and derive ray dirs from camera basis — actually simpler: build my own camera orbit state and pass camera position + a camera-to-world matrix as uniforms. I'll compute ray directions from camera matrix.)
• UI panel: power slider, animate power toggle, palette selector, detail (bailout/steps), glow intensity, resolution scale, auto-rotate
• Presets (e.g., "Classic 8", "Morphing", "Alien artifact")
• Back link, overlay title, consistent styling with other demos
• Handle resize, DPR cap
• Pause when tab hidden

Let me also add a nice intro fade-in, and maybe a subtle starfield background? Background: gradient + vignette. Add film grain for style.

Let me check the three.js version used in demo 002 to keep consistent. Let me grep the import map.

Consistent Three.js 0.160.0. Now let me write demo 003: "Mandelbulb Explorer" — a ray-marched 3D fractal.

Plan for the demo file /space/demos/003-mandelbulb-explorer/index.html:

Structure:

• Fullscreen canvas, Three.js WebGLRenderer
• Fullscreen triangle with ShaderMaterial; uniforms: resolution, time, camera pos, camera matrix (camRight, camUp, camForward or a mat3), power, palette id, glow, quality (maxSteps), fov
• Custom orbit: drag to rotate (theta/phi), wheel to zoom (radius), auto-rotate toggle. Touch support (one finger rotate, pinch zoom).
• Ray marching loop with Mandelbulb DE, orbit trap coloring, soft shadow, AO, glow accumulation
• Cosine palettes (IQ) with 4-5 presets
• UI panel matching existing style: Power slider (2–12, animated morph toggle), Palette select, Detail slider (max steps 60–160), Glow slider, Resolution scale slider (0.4–1.0), Auto-rotate toggle, Reset view button
• FPS meter
• Overlay title + back link
• Progressive render: render at resolutionScale, CSS upscale (canvas at lower resolution, style 100%). Vignette + film grain in shader.
• Pause on hidden tab.

Shader details:

Mandelbulb DE:

Ray march with max steps uniform, epsilon relative. Bounding sphere of radius ~1.2 to early out: intersect ray with bounding sphere; skip if no hit.

Normal via central differences on DE.

Soft shadow: march from hit point toward light.

AO: standard 5-tap.

Coloring: mix palette by orbit trap values + AO + fresnel + specular.

Glow: accumulate glow += exp(-dist*k) style along the march for near-misses.

Background: subtle radial gradient + faint stars (hash-based) to keep it classy.

Post: ACES tonemap, gamma, vignette, grain.

Performance: render scale slider default 0.6, adaptive: if fps low, auto drop? Keep simple: manual slider + quality steps slider. Default power 8 with animate toggle that oscillates power between ~7.2 and 8.8? Actually a slow morph 3→9 looks amazing. Let me have "Morph power" toggle animating between 4 and 10 slowly.

Camera: spherical coords around origin, radius 0.8–6, default ~2.6. FOV ~50°.

I'll write the JS carefully:

Camera matrix built from basis vectors: right, up, forward.

Ray dir: normalize(camForward + uv.x*tanHalfFov*aspect*camRight + uv.y*tanHalfFov*camUp) with uv in [-1,1].

In the shader, use a for loop with MAX_STEPS const (compile-time), break when i >= uMaxSteps — GLSL ES 3.0 allows dynamic breaks; but for WebGL1 compat... Three r160 uses WebGL2 by default. I'll use #define MAX_STEPS 200 and dynamic break on uniform.

Palette via cosine palette: a + b*cos(6.28318*(c*t+d)) with presets passed as uniforms (4 vec3s a,b,c,d). Palette selector updates uniforms. 5 palettes: "Nebula" (purple/blue), "Ember" (orange/red), "Jade" (green/teal), "Mono" (grayscale blue), "Rainbow".

Presets maybe overkill; palettes + sliders enough. Add 3 view presets? Keep scope tight but polished.

FPS meter: simple, updates every 500ms.

Also add subtle camera idle auto-rotate (on by default), pauses while dragging.

Let me also include "uSeed" jitter for temporal AA? Skip — keep grain.

Write the file now. I'll aim for ~500-600 lines, well commented. Also add keyboard: space toggles morph, R resets.

One important detail: #include nothing; write raw GLSL with precision handled by Three (ShaderMaterial adds precision? Actually Three prepends precision for fragment shaders automatically for ShaderMaterial — yes, WebGLProgram prepends precision highp float; etc. I can rely on that, but including precision highp float; manually would cause duplicate — Three's prefix already has it, so omit.)

Also need vertex shader: gl_Position = vec4(position.xy, 0.0, 1.0); with a fullscreen triangle: BufferGeometry with positions [-1,-1, 3,-1, -1,3].

UV computed in fragment from gl_FragCoord / uRes — simpler and aspect correct.

Let me now write the demo. After that, update index.html listing, verify with a quick node-less sanity check (maybe run a headless check? No browser available likely. I can at least validate JS syntax by extracting the module script and running node --check. The shader can't be compiled without GL, but I can be careful. Maybe check if node exists.)

Let me check environment tools availability quickly (node).

Node is available for syntax checking. Now write the demo file.

Now let me validate the JS syntax by extracting the module script and running node --check. Also, I should double check a few things:

1. renderer.setSize(w, h, false) with updateStyle=false — then I set canvas.style manually. Good.
2. uniforms.uRes set in device pixels (multiplied by dpr) matching gl_FragCoord. Good.
3. The uCamMat — Matrix3.set takes row-major args: set(n11, n12, n13, n21, ...). I want the matrix whose columns are right, up, fwd (so that mat * vec3(x, y, z) = x*right + y*up + z*fwd). For column-major internal storage with set being row-major:
   • Row 1: (right.x, up.x, fwd.x)
   • Row 2: (right.y, up.y, fwd.y)
   • Row 3: (right.z, up.z, fwd.z) That gives columns = right, up, fwd. Correct.
4. GLSL: uMaxSteps int uniform — THREE handles int uniforms via value number. In ShaderMaterial, plain numbers upload as float or int based on... Actually THREE infers uniform type from the shader's active uniform introspection, and for int it calls gl.uniform1i with the value. Yes, WebGLUniforms handles singular int by value type from activeInfo. Good.
5. if (i >= uMaxSteps) break; comparing loop int with uniform int — fine in GLSL ES 3.0 (WebGL2). Three.js r160 defaults to WebGL2. Good.
6. In rayMarch, when ray misses bounding sphere entirely (h < 0.0 && c > 0.0), we set glow=0 and return -1. But if camera is inside bounding sphere (c < 0), we march. Good.
7. px unused variable warning? It's used in hit threshold. Fine.
8. background(rd) — when rd.y + 1.6 + fl*0.7 could be near zero for rd.y = -1.6? rd is normalized so rd.y ∈ [-1,1]; rd.y + 1.6 ≥ 0.6. Fine, no singularity.
9. Starfield uv = rd.xz / (rd.y + 1.6...) — stars will appear only in upper dome projection but mapped across whole sphere. OK, it's a stylistic approximation; stars everywhere since rd.xz spans. Fine.
10. hash21(gl_FragCoord.xy + fract(uTime) * 61.7) — vec2 + float is fine in GLSL.
11. $('spin').click() — clicking a checkbox toggles checked and fires 'change'? Programmatic .click() does toggle and dispatch change event in browsers. Yes.
12. state.morphPhase — when user re-enables morph after manual slider, power jumps smoothly via sin; fine.
13. In the power input handler, I disable morph; and in the morph animation I set $('power').value = p — updating slider position. Good.
14. renderer.autoClear = false — since fullscreen triangle covers everything, fine.
15. new THREE.Camera() — fine.
16. Unused import of 'three/addons' — none. Good.
17. uniforms.uTanHalfFov name in JS has no space — uTanHalfFov:{...} valid.
18. Wheel listener passive:false with preventDefault. Good.
19. Canvas cursor styles.

One more check on GLSL: const vec2 e = vec2(0.0008, -0.0008); inside function — allowed.

float px = 2.0 / (uRes.y * uTanHalfFov); — uRes is vec2; fine.

trap = min(trap, vec4(abs(z), dot(z, z))); — vec4 min component-wise. Good.

In rayMarch when no hit, trap remains last computed — fine since only used after hit check.

Shadow loop: fixed 32 iterations — could be heavy but OK with resScale 0.7.

One potential perf concern: MAX_STEPS=180 compile-time loop with early breaks; browsers unroll; fine on modern GPUs at 70% res.

Also #define SURF_EPS 0.00035 and per-pixel footprint threshold — good.

GLSL type nit: vec3 rd = uCamMat * normalize(vec3(uv * uTanHalfFov, 1.0)); — uv is vec2, uv * uTanHalfFov vec2, vec3(vec2, float) OK.

float b = dot(ro, rd); bounding sphere at origin radius 1.3: t² + 2b t + c = 0 with unit rd → discriminant h = b² - c where c = dot(ro,ro) - r². r²=1.69. Good.

Now extract and syntax-check the JS with node. Node can't parse ES module with --check unless file has .mjs extension or we pass --input-type=module. I'll extract script content to /tmp/check.mjs and run node --check.

Then update the index page.

JS syntax is fine. Now let me also do a sanity GLSL check. There's no glslangValidator probably, but let me check. If not available, I can try installing via apt? Probably no network/root. Let me check quickly. Alternatively write a minimal GLSL parser check — not worth it. Let me at least verify balanced braces/parens in the shader and check for common GLSL mistakes with a quick script.

Actually, a better validation: check if glslangValidator exists; if not, try npx --yes @shaderfrog/glsl-parser or similar? Network may be unavailable. Let me try quickly with a short timeout.

***********************************************************************************************************************************************************************************************************************ut.

The parser is installed. Now write a check script that extracts both shaders and parses them. The shaderfrog parser parses GLSL ES. I need to add a prelude with the uniforms? No — the parser is a syntax parser, it doesn't need declarations resolved. Let me write the check script.

Both shaders parse OK. The "undefined variable" messages are just warnings about builtins (gl_Position, position attribute, gl_FragCoord, gl_FragColor) and preprocessor defines (MAX_STEPS etc. — the parser may not fully process #define scopes in its semantic check). These are expected builtins/defines, so all good.

Wait — "Encountered undefined variable: MAX_STEPS" — the parser apparently doesn't track #define macros in semantic checking. Since it's just a warning from the parser's optional semantic pass, and real GLSL preprocessors handle #define fine, this is OK.

Hmm, but one thing to double check: in the fragment shader, I use uMaxSteps (int uniform) in if (i >= uMaxSteps) break;. That's fine in GLSL ES 3.0. Three.js r160 targets WebGL2 / GLSL ES 3.00 — Three auto-converts gl_FragColor to out vec4 etc. Actually Three.js does automatic conversion of gl_FragColor → pc_fragColor for WebGL2. Yes, WebGLProgram handles that. And attribute vec3 position in vertex → auto-declared by Three. Good.

One concern: texture2D not used, fine.

Another check — the min(trap, vec4(abs(z), dot(z,z))): abs(z) is vec3, vec4(vec3, float) OK.

vec3(sin(theta) * cos(phi), sin(phi) * sin(theta), cos(theta)) — floats, fine.

exp(-max(d, 0.0) * 60.0) — d is float; on the first iteration at t=0, d = DE at ray origin. If the camera is inside the bounding sphere but far from surface, glow accumulates small values. OK.

Potential issue: the rayMarch bounding-sphere early-out returns trap=vec4(1.0) and -1 — fine.

float px = 2.0 / (uRes.y * uTanHalfFov); — if uRes.y * tanHalfFov... fine.

Hit condition: d < max(SURF_EPS, px * t * 0.9). OK.

Now also — smoothstep(0.0, 0.35, trap.w) etc. all float. Good.

JS check: In the morph block, $('power').value = p; — the slider min 2 max 12 step 0.01; setting .value to a number is fine (coerced).

Keyboard: $('spin').click() on a checkbox toggles it and fires change — good.

One more: renderer.setSize(w, h, false) — sets drawing buffer size to w,h (not multiplying by pixel ratio since we pass explicit values with updateStyle=false; we already multiplied dpr*resScale). Good.

uniforms.uRes.value.set(Math.floor(w*dpr*resScale), ...) — consistent with drawing buffer. gl_FragCoord matches.

Also powerPreference: 'high-performance' good.

Edge: new THREE.Matrix3() uniform — value type Matrix3 handled by Three uniform upload (uniformMatrix3fv). Good.

Now update the demos index page — add the new card at the top of the list (newest first, matching existing order where 002 is above 001).

Then, optionally, do a headless browser render test? Probably no browser available. Could try puppeteer install — heavy and network-dependent. The static checks (JS syntax + GLSL parse) plus careful review should suffice. Actually, let me try a quick check whether a headless chromium exists... which chromium google-chrome — quick test. If available, I could screenshot. Probably not. Let me try quickly; if not available, skip.

The search text wasn't found. Maybe whitespace differs. Let me look at the exact content around the comment.

*********************************************************************************************************************************************************************ly.

No browser installed but npm registry is reachable. Installing puppeteer downloads a Chromium (~150MB) — that could take a while but would give a true end-to-end test (WebGL via SwiftShader). This is valuable: I can screenshot the demo and confirm the fractal actually renders, catching shader compile errors. The task has plenty of time budget (I'm at ~50% of time threshold, only 1.2% iterations). Let me try installing puppeteer with a generous timeout.

Actually, WebGL in headless Chromium works with SwiftShader (software GL) — Three.js should render. The raymarcher will be slow in software, but at reduced res it should still produce frames for a screenshot.

Let me install puppeteer in /tmp/glslcheck.

The browser binary path reports ENOENT — the install reported success at /home/agent/.cache/puppeteer/chrome/linux-150.0.7871.24/chrome-linux64/chrome but spawn fails. Possibly the file doesn't exist (partial download?) or a missing loader. Let me check the path.

*****************************************************************************************************************************************************************************************************************************or.

Alpine with apk available, but running as uid 100 (non-root), so apk add will fail without sudo. Let me check sudo quickly. If not, I could download the Alpine chromium package and extract it to a user-writable dir with apk's --root option... apk needs root typically, but apk add --root /tmp/x --initdb might work as a normal user since it doesn't touch the system. Let me try that — it's a reasonable shot. Chromium package on Alpine pulls many deps though.

Simpler alternative: use ldd-compatible musl loader — no.

Honestly, the static validation (JS syntax OK + GLSL parse OK) plus careful manual review gives good confidence. The GLSL parser warning list only showed expected builtins. But there's one real risk area I should double-check by eye: Three.js ShaderMaterial prepends declarations like uniform mat4 modelMatrix; ... attribute vec3 position; to the vertex shader — my vertex shader uses position — fine. For fragment, Three prepends precision and some defines; gl_FragColor gets converted for WebGL2. All standard.

One thing I want to verify: with renderer.autoClear = false and never clearing, the fullscreen triangle overwrites every pixel anyway. Fine.

Another potential runtime issue: canvas.setPointerCapture(e.pointerId) in pointerdown — fine.

Also the wheel listener with { passive: false } and e.preventDefault() — fine.

page.select etc. — moot.

Let me try the apk route quickly with a short timeout — if apk add --root works without root privileges, great. Try: apk add --root /tmp/alpine-root --initdb --repository https://dl-cdn.alpinelinux.org/alpine/v3.23/community chromium — plus main repo. It downloads ~100+MB and many deps. Time budget is OK (50% used at ~5 min intervals?). The checkpoint said maxTime 50% progress. I have limited wall-clock left (~another half). Chromium via apk could take a few minutes. Let me attempt with a 240s timeout; if it fails fast, fall back to static validation only.

"UNTRUSTED signature" — need --allow-untrusted or the keys. The package index couldn't be verified so no packages were found. Add --allow-untrusted. That downloads a lot; timeout may be tight. Let me try with --allow-untrusted and a longer timeout (280s).

Good news: page loaded, Three.js from unpkg loaded (networkidle0 succeeded), power control works. Bad news: WebGL context creation failed with BindToCurrentSequence failed — SwiftShader GL isn't initializing under this headless setup. The canvas is 300x150 default (renderer.setSize never succeeded since constructor threw).

Fixes to try:

1. Add --disable-gpu (forces software path) — with --use-gl=angle --use-angle=swiftshader sometimes conflicts. Common working combo for WebGL in headless Chromium: --use-gl=swiftshader --enable-unsafe-swiftshader or newer: --use-angle=swiftshader-webgl.
2. Maybe missing libvulkan/swiftshader libs? Alpine chromium ships swiftshader. The "BindToCurrentSequence failed" often relates to GPU process issues; adding --in-process-gpu or --disable-gpu-compositing can help.
3. Try --headless=new handled by puppeteer.

Also note: a 404 on some resource — probably favicon.ico. Fine.

Let me retry with different flag combos. Combo A: --use-gl=angle --use-angle=swiftshader --in-process-gpu. Combo B: --disable-gpu --enable-unsafe-swiftshader. I'll test WebGL support quickly with a minimal page that reports canvas.getContext('webgl2') result — faster iteration than full demo.