Render WebGL Threejs

Build high-framerate WebGL2 and WebGPU interactive 3D scenes with compressed asset streaming, physically based rendering (PBR), merged post-processing passes, and deterministic VRAM lifecycle management.

Core Rules

• WebGPU with Graceful WebGL2 Fallback: Initialize WebGPURenderer when navigator capabilities permit, while providing seamless automatic fallback to WebGLRenderer and handling webglcontextlost / webglcontextrestored events without crashing.
• Compressed Asset Streaming: Enforce Draco or Meshopt geometry compression alongside KTX2 / Basis Universal GPU-compressed textures so assets remain compressed in VRAM and decode off the main thread.
• Explicit VRAM Disposal: Never rely on JavaScript garbage collection for GPU resources. Explicitly call .dispose() on every BufferGeometry, Material, Texture, and WebGLRenderTarget when unmounting scenes or despawning entities.
• Contract Adherence: Emit contracts/schemas/implementation-result.json upon completing WebGL/Three.js rendering slices.

Suggested Process

1. Renderer, Color Space & Pixel Ratio Setup

Configure the renderer for consistent cross-device fidelity and frame pacing:

• Set renderer.outputColorSpace = THREE.SRGBColorSpace and renderer.toneMapping = THREE.ACESFilmicToneMapping.
• Clamp device pixel ratio (Math.min(window.devicePixelRatio, 2.0)) to prevent fill-rate collapse on high-DPI mobile screens.