THREE.JS / FOUNDATIONS 218

Look through the surface.

A pair of portals turns render targets, off-axis camera projection, coordinate-space reflection, and renderer-state restoration into a controllable scene instead of a black-box effect.

Initializing Preparing WebGL2

Preparing two portal render targets and an off-axis portal camera...

renderer: -
targets: -
captures: -
camera: -
passes: -
calls: -
triangles: -
frame ms: -

Capture controlslive

target size capture passes

capture every frame show portal effect portal camera helper animate scene objects

Each pass renders both portals. Higher pass counts deepen the visible recursion but multiply capture work.

Capture contractWebGL render target

renderer.setRenderTarget(target)render off-screen

CameraUtils.frameCorners()off-axis projection

worldToLocal -> reflect -> localToWorldportal-space camera

renderer.getRenderTarget()restore caller state

target.dispose()release color/depth resources

The portal surface is only a texture. The illusion comes from rendering the scene again from a transformed camera whose projection is framed by the destination portal corners.

Live capture readoutready

left target-

right target-

portal camera-

state restore-

GPU resourcesowned

Orbit around the room and watch the portal camera keep the destination surface framed without changing the main camera.

Derived from the official portal example, CameraUtils, and the current RenderTarget / WebGLRenderer docs.

THREE.JS FOUNDATIONS LAB