Three.js Demos
Three.js Demos

Reversed Depth + PostFX Compatibility (r183)

Long depth-range scene rendered with `reverseDepthBuffer` and `EffectComposer`, demonstrating post-processing compatibility under reversed depth.

Key topics: three.js reverse depth, effectcomposer, post-processing, depth precision, r183

What this code does

- Reversed Depth Renderer: initializes `WebGLRenderer` with `reverseDepthBuffer: true` for improved depth precision over long ranges.
- Massive Depth Span: camera near/far setup (`0.1` to `50000`) stresses depth buffering across distant geometry.
- PostFX Pipeline: `EffectComposer` with `RenderPass` + `ShaderPass` verifies screen-space effects still render correctly.
- Capability Detection: displays whether reverse depth is active based on runtime renderer capabilities.
- Practical Benefit: helps reduce z-fighting in large scenes while retaining modern post-processing workflows.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'
import { VignetteShader } from 'three/examples/jsm/shaders/VignetteShader.js'

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  reverseDepthBuffer: true
})
const camera = new THREE.PerspectiveCamera(58, width / height, 0.1, 50000)

const composer = new EffectComposer(renderer)
composer.addPass(new RenderPass(scene, camera))
const vignette = new ShaderPass(VignetteShader)
composer.addPass(vignette)

function animate () {
  requestAnimationFrame(animate)
  composer.render()
}
animate()
← Back