Three.js/WebGL content missing in rendered video (v0.6.x only, v0.5.5 works)

[Guomingze]

Describe the bug

Three.js backgrounds render correctly in hyperframes preview but appear as black/transparent in the MP4 output from hyperframes render. Downgrading to hyperframes@0.5.5 produces correct output.

Link to reproduction

My project contains sensitive content, so I cannot share the full repo publicly. I can create a minimal reproduction project if needed.

Steps to reproduce

1. Create a composition with a Three.js background (standard pattern: <template> + setTimeout + GSAP onUpdate driving renderer.render())
2. Run npx hyperframes preview — Three.js shows correctly ✅
3. Run npx hyperframes render — Three.js is missing, background is black ❌
4. Run npx hyperframes@0.5.5 render — Three.js shows correctly ✅

Expected behavior

v0.6.x rendered MP4 should include the Three.js/WebGL content, matching the preview.

Actual behavior

The Three.js area in the rendered output is completely black/transparent — the WebGL layer is not captured by the screenshot pipeline.

Environment

Run `npx hyperframes doctor` output:
- Version: 0.6.80 (broken), 0.5.5 (works)
- Platform: macOS darwin arm64
- Browser: Chrome headless + SwiftShader
- Three.js: 0.128.0

Additional context

No response

[miguel-heygen]

Hey — I tried reproducing this on macOS arm64 (Apple Silicon) using the three-boundary test composition in the repo, both with hardware GPU (Metal) and software rendering (--no-browser-gpu / SwiftShader). WebGL content captured correctly in both cases, 0% black pixels across all frames.

To pin down the environment where this breaks, could you share:

1. Full npx hyperframes doctor output — specifically the Chrome version and GPU backend it reports
2. Are you running inside Docker? The containerized Chrome uses a different compositor path than native macOS
3. The exact render command you're running (any flags like --no-browser-gpu, --docker, etc.)
4. A minimal reproduction project — you mentioned you could create one. Even just an index.html with a basic Three.js scene (colored cube + background, no sensitive content) would be enough

The fix in #1264 targets a specific compositor code path (captureBeyondViewport: true skipping WebGL layer compositing), so knowing the exact Chrome version + GPU backend is critical to confirming which configurations are affected.

[Guomingze]

1. npx hyperframes doctor output

✓ Version          0.6.81 (latest)
✓ Node.js          v26.0.0 (darwin arm64)
✓ CPU              8 cores · Apple M1 @ 2400MHz
✓ Memory           16.0 GB total · 6.0 GB available
✓ Disk             17.9 GB free
✓ Environment      non-TTY
✓ FFmpeg           ffmpeg 8.1
✓ FFprobe          ffprobe 8.1
✓ Chrome           system: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
✓ Docker           Docker version 29.2.0, build 0b9d198
✗ Docker running   Not running

Chrome version: Google Chrome 148.0.7778.216

2. Running inside Docker?

No — running natively on macOS arm64 (Apple M1), no Docker involved.

3. Render commands

Works (Three.js renders correctly with 0.6.71):

npx hyperframes@0.6.71 render videos/deepseek-reasonix -f 60 --resolution landscape-4k --quality high --gpu

Fails (Three.js = black with 0.6.80 / 0.6.81):

npx hyperframes@latest render videos/deepseek-reasonix

No --no-browser-gpu, --docker, or other special flags.

4. Minimal reproduction project

Created at /tmp/threejs-repro/. Simple structure:

• One composition
• Red clearColor(0xcc3333) background
• Blue wireframe cube + particle cloud
• No readPixels() hack, no preserveDrawingBuffer trick

To verify:

# Render with 0.6.71 (should show red background + blue cube)
npx hyperframes@0.6.71 render /tmp/threejs-repro

# Render with latest (Three.js should be black)
npx hyperframes@latest render /tmp/threejs-repro

5. Version regression range

Correction to my earlier message — hyperframes@0.6.71 also renders Three.js correctly.

Version	Three.js result	Notes
0.5.5	✅ Correct
0.6.71	✅ Correct
0.6.80	❌ Black
0.6.81	❌ Black	Latest

The regression was introduced between v0.6.71 and v0.6.80. Same project, same command, no special flags — 0.6.71 produces correct output, 0.6.80+ produces black frames for WebGL content.