Chapter 267: RenderTransitionPass

Core Idea

A special type of render pass for implementing transition effects. When active, the pass will transition from scene A to scene B.

Key Concepts

• cameraA : Camera: The camera of the first scene.
• cameraB : Camera: The camera of the second scene.
• material : ShaderMaterial: The pass material.
• sceneA : Scene: The first scene.
• sceneB : Scene: The second scene.

Code Examples

const renderTransitionPass = new RenderTransitionPass( fxSceneA.scene, fxSceneA.camera, fxSceneB.scene, fxSceneB.camera );
renderTransitionPass.setTexture( textures[ 0 ] );
composer.addPass( renderTransitionPass );

• What it demonstrates: Typical usage of RenderTransitionPass.

Reference Tables

Constructor

Signature
new RenderTransitionPass( sceneA : Scene, cameraA : Camera, sceneB : Scene, cameraB : Camera )

Properties

Property	Description
.cameraA : Camera	The camera of the first scene.
.cameraB : Camera	The camera of the second scene.
.material : ShaderMaterial	The pass material.
.sceneA : Scene	The first scene.
.sceneB : Scene	The second scene.

Methods

Method	Description
.dispose()	Frees the GPU-related resources allocated by this instance. Call this method whenever the pass is no longer used in your app.
.render( renderer : WebGLRenderer, writeBuffer : WebGLRenderTarget, readBuffer : WebGLRenderTarget, deltaTime : number, maskActive : boolean )	Performs the transition pass.
.setSize( width : number, height : number )	Sets the size of the pass.
.setTexture( value : Texture )	Sets the effect texture.
`.setTextureThreshold( value : boolean	number )`
`.setTransition( value : boolean	number )`
.useTexture( value : boolean )	Toggles the usage of a texture for the effect.

Key Takeaways

1. RenderTransitionPass extends: Pass
2. Most relevant properties: cameraA, cameraB, material, sceneA.
3. Key methods: dispose, render, setSize, setTexture.

Connects To

• Pass: parent class
• Source: examples/jsm/postprocessing/RenderTransitionPass.js