Skip to content

WebGLRenderer: Add outputBufferType and setEffects() #32461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
mrdoob wants to merge 10 commits into
base: dev
Choose a base branch
from
+1,302 −219
Draft

WebGLRenderer: Add outputBufferType and setEffects() #32461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dd4b924
WebGLRenderer: Add colorBufferType and setEffects().
mrdoob Dec 7, 2025
255b88b
Updated watch and ldraw examples.
mrdoob Dec 7, 2025
9f77c3f
WebGLRenderer: Revert transmissionRenderTarget type change.
mrdoob Dec 7, 2025
c4d9b8b
Clean up.
mrdoob Dec 7, 2025
bde7068
Renamed colorBufferType to outputBufferType.
mrdoob Dec 8, 2025
dced4cf
Added effects support to WebXR.
mrdoob Dec 8, 2025
29b6af4
Updated screenshot.
mrdoob Dec 8, 2025
19c89b7
We no longer need to resize the passes manually.
mrdoob Dec 8, 2025
220bd3b
Fixed feedback loop in webgl_watch.
mrdoob Dec 9, 2025
eefb94e
Updated builds.
mrdoob Dec 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
388 changes: 359 additions & 29 deletions build/three.cjs
View file
Open in desktop

Large diffs are not rendered by default.

394 changes: 362 additions & 32 deletions build/three.module.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/three.module.min.js
View file
Open in desktop

Large diffs are not rendered by default.

132 changes: 82 additions & 50 deletions build/three.webgpu.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/three.webgpu.min.js
View file
Open in desktop

Large diffs are not rendered by default.

132 changes: 82 additions & 50 deletions build/three.webgpu.nodes.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/three.webgpu.nodes.min.js
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions examples/jsm/postprocessing/RenderPass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,16 @@ class RenderPass extends Pass {
* @default false
*/
this.needsSwap = false;

/**
* This flag indicates that this pass renders the scene itself.
*
* @type {boolean}
* @readonly
* @default true
*/
this.isRenderPass = true;

this._oldClearColor = new Color();

}
Expand Down
Binary file modified examples/screenshots/webgl_loader_ldraw.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified examples/screenshots/webxr_xr_controls_transform.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion examples/webgl_loader_ldraw.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@

//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new THREE.WebGLRenderer( { antialias: true, outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
Expand Down
41 changes: 14 additions & 27 deletions examples/webgl_watch.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,10 @@

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';

let composer, camera, scene, renderer;
let camera, scene, renderer;
let gui, dirLight, pointLight, controls, bloomPass, taaPass;
let ready = false;

Expand Down Expand Up @@ -69,7 +67,7 @@

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new THREE.WebGLRenderer( { antialias: true, outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
Expand Down Expand Up @@ -213,32 +211,27 @@

if ( b ) {

if ( composer ) return;
if ( bloomPass ) return;

taaPass = new TAARenderPass( scene, camera );
taaPass.sampleLevel = 2;

bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = setting.threshold;
bloomPass.strength = setting.strength;
bloomPass.radius = setting.radius;

taaPass = new TAARenderPass( scene, camera );
taaPass.sampleLevel = 2;
taaPass.unbiased = false;

composer = new EffectComposer( renderer );
composer.setPixelRatio( window.devicePixelRatio );
composer.setSize( window.innerWidth, window.innerHeight );

composer.addPass( taaPass );
composer.addPass( bloomPass );
composer.addPass( new OutputPass() );
renderer.setEffects( [ taaPass, bloomPass ] );

} else {

if ( ! composer ) return;
composer.dispose();
composer = null;
bloomPass = null;
if ( ! bloomPass ) return;
taaPass.dispose();
taaPass = null;
bloomPass.dispose();
bloomPass = null;

renderer.setEffects( null );

}

Expand Down Expand Up @@ -306,11 +299,6 @@
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
if ( composer ) {

composer.setSize( width, height );

}

}

Expand All @@ -322,8 +310,7 @@

TWEEN.update();

if ( composer ) composer.render();
else renderer.render( scene, camera );
renderer.render( scene, camera );

if ( ready ) getTime();

Expand Down
10 changes: 9 additions & 1 deletion examples/webxr_xr_controls_transform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,11 @@
import { TransformControls } from 'three/addons/controls/TransformControls.js';
import { XRButton } from 'three/addons/webxr/XRButton.js';
import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';

let container;
let camera, scene, renderer;
let bloomPass;
let controller1, controller2, line;
let controllerGrip1, controllerGrip2;

Expand Down Expand Up @@ -110,14 +112,20 @@

//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new THREE.WebGLRenderer( { antialias: true, outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.xr.enabled = true;
container.appendChild( renderer.domElement );

// post-processing

bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
renderer.setEffects( [ bloomPass ] );

document.body.appendChild( XRButton.createButton( renderer ) );

// controllers
Expand Down
Loading