Three.js Demos
Three.js Demos

MRT G-Buffer Visualizer (r183 roadmap)

WebGL2 multiple-render-target demo that captures normal and depth attachments and visualizes them alongside the beauty pass in a four-panel layout.

Key topics: three.js mrt, g-buffer, webgl2, multiple render targets, deferred rendering, r183

What this code does

- Multi-Render Targets: renders one geometry pass into two color attachments (normal + depth) using `WebGLRenderTarget` with `count: 2`.
- G-Buffer Inspection: four-panel view shows beauty output, encoded normals, depth distribution, and a relit normal-based preview.
- Shader Outputs: a GLSL3 override material writes per-pixel normal and depth values to separate attachments in one pass.
- Runtime Tuning: depth scale and relight exposure controls help inspect precision and buffer readability.
- WebGL2 Fallback: demo detects unsupported contexts and gracefully falls back to beauty-only rendering with a status hint.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
const gbuffer = new THREE.WebGLRenderTarget(width, height, {
  count: 2,
  type: THREE.HalfFloatType
})

const gbufferMaterial = new THREE.ShaderMaterial({
  glslVersion: THREE.GLSL3,
  vertexShader: `
    varying vec3 vNormal;
    void main() {
      vNormal = normalize(normalMatrix * normal);
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    layout(location = 0) out vec4 gNormal;
    layout(location = 1) out vec4 gDepth;
    varying vec3 vNormal;
    void main() {
      gNormal = vec4(vNormal * 0.5 + 0.5, 1.0);
      gDepth = vec4(vec3(gl_FragCoord.z), 1.0);
    }
  `
})
← Back