Chapter 518: AnaglyphEffect

Core Idea

A class that creates an anaglyph effect using physically-correct off-axis stereo projection.

This implementation uses CameraUtils.frameCorners() to align stereo camera frustums to a virtual screen plane, providing accurate depth perception with zero parallax at the plane distance.

Note that this class can only be used with WebGLRenderer. When using WebGPURenderer, use AnaglyphPassNode.

Key Concepts

eyeSep : number: The interpupillary distance (eye separation) in world units. Typical human IPD is 0.064 meters (64mm).
planeDistance : number: The distance in world units from the viewer to the virtual screen plane where zero parallax (screen depth) occurs. Objects at this distance…

Code Examples

import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';

What it demonstrates: Typical usage of AnaglyphEffect.

Reference Tables

Constructor

Signature
`new AnaglyphEffect( renderer : WebGLRenderer, width : number, height : number )`

Properties

Property	Description
`.eyeSep : number`	The interpupillary distance (eye separation) in world units. Typical human IPD is 0.064 meters (64mm).
`.planeDistance : number`	The distance in world units from the viewer to the virtual screen plane where zero parallax (screen depth) occurs. Objects at this distance appear at the screen surface. Objects closer appear in fron…

Methods

Method	Description
`.dispose()`	Frees internal resources. This method should be called when the effect is no longer required.
`.render( scene : Object3D, camera : Camera )`	When using this effect, this method should be called instead of the default WebGLRenderer#render.
`.setSize( width : number, height : number )`	Resizes the effect.

Key Takeaways

Most relevant properties: eyeSep, planeDistance.
Key methods: dispose, render, setSize.

Connects To

Source: examples/jsm/effects/AnaglyphEffect.js