diff --git a/examples/jsm/postprocessing/BloomPass.js b/examples/jsm/postprocessing/BloomPass.js
index 5394a43ea04f23..ff437ec75e3ef8 100644
--- a/examples/jsm/postprocessing/BloomPass.js
+++ b/examples/jsm/postprocessing/BloomPass.js
@@ -128,6 +128,9 @@ class BloomPass extends Pass {
if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
+ const oldAutoClear = renderer.autoClear;
+ renderer.autoClear = false;
+
// Render quad with blurred scene into texture (convolution pass 1)
this._fsQuad.material = this.materialConvolution;
@@ -161,6 +164,8 @@ class BloomPass extends Pass {
if ( this.clear ) renderer.clear();
this._fsQuad.render( renderer );
+ renderer.autoClear = oldAutoClear;
+
}
/**
diff --git a/examples/webgl_materials_alphahash.html b/examples/webgl_materials_alphahash.html
index 34f08bc67e998f..e5408099c610b8 100644
--- a/examples/webgl_materials_alphahash.html
+++ b/examples/webgl_materials_alphahash.html
@@ -25,14 +25,11 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
let camera, scene, renderer, controls, stats, mesh, material;
- let composer, renderPass, taaRenderPass, outputPass;
+ let taaRenderPass;
let needsUpdate = false;
@@ -96,7 +93,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 );
@@ -112,18 +109,9 @@
//
- composer = new EffectComposer( renderer );
-
- renderPass = new RenderPass( scene, camera );
- renderPass.enabled = false;
-
taaRenderPass = new TAARenderPass( scene, camera );
- outputPass = new OutputPass();
-
- composer.addPass( renderPass );
- composer.addPass( taaRenderPass );
- composer.addPass( outputPass );
+ renderer.setEffects( [ taaRenderPass ] );
//
@@ -144,8 +132,7 @@
taaFolder.add( params, 'taa' ).name( 'enabled' ).onChange( () => {
- renderPass.enabled = ! params.taa;
- taaRenderPass.enabled = params.taa;
+ renderer.setEffects( params.taa ? [ taaRenderPass ] : null );
sampleLevelCtrl.enable( params.taa );
@@ -170,7 +157,6 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
needsUpdate = true;
@@ -212,7 +198,7 @@
}
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_materials_video.html b/examples/webgl_materials_video.html
index 393ef799da96fe..169658bbc20d95 100644
--- a/examples/webgl_materials_video.html
+++ b/examples/webgl_materials_video.html
@@ -33,10 +33,7 @@
import * as THREE from 'three';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
let container;
@@ -44,8 +41,6 @@
let video, texture, material, mesh;
- let composer;
-
let mouseX = 0;
let mouseY = 0;
@@ -76,7 +71,7 @@
light.position.set( 0.5, 1, 1 ).normalize();
scene.add( light );
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -148,21 +143,12 @@
}
- renderer.autoClear = false;
-
document.addEventListener( 'mousemove', onDocumentMouseMove );
// postprocessing
- const renderPass = new RenderPass( scene, camera );
const bloomPass = new BloomPass( 1.3 );
- const outputPass = new OutputPass();
-
- composer = new EffectComposer( renderer );
-
- composer.addPass( renderPass );
- composer.addPass( bloomPass );
- composer.addPass( outputPass );
+ renderer.setEffects( [ bloomPass ] );
//
@@ -179,7 +165,6 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
}
@@ -258,8 +243,7 @@
counter ++;
- renderer.clear();
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_afterimage.html b/examples/webgl_postprocessing_afterimage.html
index 1c83ea29e02bf8..649168ddba6c54 100644
--- a/examples/webgl_postprocessing_afterimage.html
+++ b/examples/webgl_postprocessing_afterimage.html
@@ -22,12 +22,9 @@
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, scene, renderer, composer;
+ let camera, scene, renderer;
let mesh;
let afterimagePass;
@@ -42,7 +39,7 @@
function init() {
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -61,14 +58,8 @@
// postprocessing
- composer = new EffectComposer( renderer );
- composer.addPass( new RenderPass( scene, camera ) );
-
afterimagePass = new AfterimagePass();
- composer.addPass( afterimagePass );
-
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ afterimagePass ] );
window.addEventListener( 'resize', onWindowResize );
@@ -84,7 +75,6 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
}
@@ -95,8 +85,7 @@
afterimagePass.enabled = params.enable;
- composer.render();
-
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_dof.html b/examples/webgl_postprocessing_dof.html
index c752bdb3ef2d50..0f27827b9dd66a 100644
--- a/examples/webgl_postprocessing_dof.html
+++ b/examples/webgl_postprocessing_dof.html
@@ -29,10 +29,7 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
let camera, scene, renderer, stats,
singleMaterial, zmaterial,
@@ -48,7 +45,7 @@
const materials = [], objects = [];
- const postprocessing = {};
+ let bokehPass;
init();
@@ -62,7 +59,7 @@
scene = new THREE.Scene();
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
@@ -136,8 +133,6 @@
initPostprocessing();
- renderer.autoClear = false;
-
stats = new Stats();
container.appendChild( stats.dom );
@@ -156,9 +151,9 @@
const matChanger = function ( ) {
- postprocessing.bokeh.uniforms[ 'focus' ].value = effectController.focus;
- postprocessing.bokeh.uniforms[ 'aperture' ].value = effectController.aperture * 0.00001;
- postprocessing.bokeh.uniforms[ 'maxblur' ].value = effectController.maxblur;
+ bokehPass.uniforms[ 'focus' ].value = effectController.focus;
+ bokehPass.uniforms[ 'aperture' ].value = effectController.aperture * 0.00001;
+ bokehPass.uniforms[ 'maxblur' ].value = effectController.maxblur;
};
@@ -193,30 +188,18 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- postprocessing.composer.setSize( width, height );
}
function initPostprocessing() {
- const renderPass = new RenderPass( scene, camera );
-
- const bokehPass = new BokehPass( scene, camera, {
+ bokehPass = new BokehPass( scene, camera, {
focus: 1.0,
aperture: 0.025,
maxblur: 0.01
} );
- const outputPass = new OutputPass();
-
- const composer = new EffectComposer( renderer );
-
- composer.addPass( renderPass );
- composer.addPass( bokehPass );
- composer.addPass( outputPass );
-
- postprocessing.composer = composer;
- postprocessing.bokeh = bokehPass;
+ renderer.setEffects( [ bokehPass ] );
}
@@ -248,7 +231,7 @@
}
- postprocessing.composer.render( 0.1 );
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_glitch.html b/examples/webgl_postprocessing_glitch.html
index a700091358b8b1..eb410b8973fdca 100644
--- a/examples/webgl_postprocessing_glitch.html
+++ b/examples/webgl_postprocessing_glitch.html
@@ -33,12 +33,9 @@ WARNING
import * as THREE from 'three';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, scene, renderer, composer;
+ let camera, scene, renderer;
let object, light;
let glitchPass;
@@ -62,7 +59,7 @@ WARNING
function init() {
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -113,14 +110,8 @@ WARNING
// postprocessing
- composer = new EffectComposer( renderer );
- composer.addPass( new RenderPass( scene, camera ) );
-
glitchPass = new GlitchPass();
- composer.addPass( glitchPass );
-
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ glitchPass ] );
//
@@ -140,8 +131,6 @@ WARNING
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
-
}
@@ -150,7 +139,7 @@ WARNING
object.rotation.x += 0.005;
object.rotation.y += 0.01;
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_gtao.html b/examples/webgl_postprocessing_gtao.html
index 1e4ce87f423e98..dd28a7a79f64af 100644
--- a/examples/webgl_postprocessing_gtao.html
+++ b/examples/webgl_postprocessing_gtao.html
@@ -38,12 +38,9 @@
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { GTAOPass } from 'three/addons/postprocessing/GTAOPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, scene, renderer, composer, controls, timer, stats, mixer;
+ let camera, scene, renderer, controls, timer, stats, mixer;
init();
@@ -64,7 +61,7 @@
stats = new Stats();
container.appendChild( stats.dom );
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );
@@ -87,17 +84,9 @@
const width = window.innerWidth;
const height = window.innerHeight;
- composer = new EffectComposer( renderer );
-
- const renderPass = new RenderPass( scene, camera );
- composer.addPass( renderPass );
-
const gtaoPass = new GTAOPass( scene, camera, width, height );
gtaoPass.output = GTAOPass.OUTPUT.Denoise;
- composer.addPass( gtaoPass );
-
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ gtaoPass ] );
//
@@ -181,7 +170,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
}
@@ -200,7 +188,7 @@
controls.update();
stats.begin();
- composer.render();
+ renderer.render( scene, camera );
stats.end();
}
diff --git a/examples/webgl_postprocessing_pixel.html b/examples/webgl_postprocessing_pixel.html
index f096a73a9d2a55..62c2d26685da39 100644
--- a/examples/webgl_postprocessing_pixel.html
+++ b/examples/webgl_postprocessing_pixel.html
@@ -30,12 +30,10 @@
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPixelatedPass } from 'three/addons/postprocessing/RenderPixelatedPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- let camera, scene, renderer, composer, crystalMesh, timer;
+ let camera, scene, renderer, crystalMesh, timer;
let gui, params;
init();
@@ -54,19 +52,15 @@
timer = new THREE.Timer();
timer.connect( document );
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.shadowMap.enabled = true;
//renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );
- composer = new EffectComposer( renderer );
const renderPixelatedPass = new RenderPixelatedPass( 6, scene, camera );
- composer.addPass( renderPixelatedPass );
-
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ renderPixelatedPass ] );
window.addEventListener( 'resize', onWindowResize );
@@ -167,7 +161,6 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
}
@@ -199,7 +192,7 @@
}
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_rgb_halftone.html b/examples/webgl_postprocessing_rgb_halftone.html
index 0a08a175f3b1b8..86ad922b41a793 100644
--- a/examples/webgl_postprocessing_rgb_halftone.html
+++ b/examples/webgl_postprocessing_rgb_halftone.html
@@ -29,21 +29,19 @@
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
- let renderer, timer, camera, stats;
+ let renderer, timer, camera, scene, stats;
const rotationSpeed = Math.PI / 64;
- let composer, group;
+ let group;
init();
function init() {
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -66,7 +64,7 @@
// scene
- const scene = new THREE.Scene();
+ scene = new THREE.Scene();
scene.background = new THREE.Color( 0x444444 );
group = new THREE.Group();
@@ -119,8 +117,6 @@
// post-processing
- composer = new EffectComposer( renderer );
- const renderPass = new RenderPass( scene, camera );
const params = {
shape: 1,
radius: 4,
@@ -134,14 +130,11 @@
disable: false
};
const halftonePass = new HalftonePass( params );
- composer.addPass( renderPass );
- composer.addPass( halftonePass );
+ renderer.setEffects( [ halftonePass ] );
window.onresize = function () {
- // resize composer
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
@@ -199,7 +192,7 @@
const delta = timer.getDelta();
stats.update();
group.rotation.y += delta * rotationSpeed;
- composer.render( delta );
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_sao.html b/examples/webgl_postprocessing_sao.html
index d4b83bf07aa3e0..84b499859f8918 100644
--- a/examples/webgl_postprocessing_sao.html
+++ b/examples/webgl_postprocessing_sao.html
@@ -28,14 +28,11 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
let container, stats;
let camera, scene, renderer;
- let composer, renderPass, saoPass;
+ let saoPass;
let group;
init();
@@ -48,7 +45,7 @@
const width = window.innerWidth;
const height = window.innerHeight;
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
@@ -117,13 +114,8 @@
stats = new Stats();
container.appendChild( stats.dom );
- composer = new EffectComposer( renderer );
- renderPass = new RenderPass( scene, camera );
- composer.addPass( renderPass );
saoPass = new SAOPass( scene, camera );
- composer.addPass( saoPass );
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ saoPass ] );
// Init gui
const gui = new GUI();
@@ -160,9 +152,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
-
-
}
function animate() {
@@ -179,7 +168,7 @@
group.rotation.x = timer * 0.0002;
group.rotation.y = timer * 0.0001;
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_smaa.html b/examples/webgl_postprocessing_smaa.html
index b58d773689b088..613453d909323e 100644
--- a/examples/webgl_postprocessing_smaa.html
+++ b/examples/webgl_postprocessing_smaa.html
@@ -29,12 +29,9 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, scene, renderer, composer, stats, smaaPass;
+ let camera, scene, renderer, stats, smaaPass;
const params = {
enabled: true,
@@ -48,7 +45,7 @@
const container = document.getElementById( 'container' );
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -83,14 +80,8 @@
// postprocessing
- composer = new EffectComposer( renderer );
- composer.addPass( new RenderPass( scene, camera ) );
-
smaaPass = new SMAAPass();
- composer.addPass( smaaPass );
-
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ smaaPass ] );
window.addEventListener( 'resize', onWindowResize );
@@ -113,7 +104,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
}
@@ -136,7 +126,7 @@
smaaPass.enabled = params.enabled;
- composer.render();
+ renderer.render( scene, camera );
stats.end();
diff --git a/examples/webgl_postprocessing_sobel.html b/examples/webgl_postprocessing_sobel.html
index 4629929fb7745d..2d43a8d069d89b 100644
--- a/examples/webgl_postprocessing_sobel.html
+++ b/examples/webgl_postprocessing_sobel.html
@@ -30,16 +30,14 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
import { SobelOperatorShader } from 'three/addons/shaders/SobelOperatorShader.js';
- let camera, scene, renderer, composer;
+ let camera, scene, renderer;
- let effectSobel;
+ let effectGrayScale, effectSobel;
const params = {
enable: true
@@ -76,7 +74,7 @@
//
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -84,14 +82,9 @@
// postprocessing
- composer = new EffectComposer( renderer );
- const renderPass = new RenderPass( scene, camera );
- composer.addPass( renderPass );
-
// color to grayscale conversion
- const effectGrayScale = new ShaderPass( LuminosityShader );
- composer.addPass( effectGrayScale );
+ effectGrayScale = new ShaderPass( LuminosityShader );
// you might want to use a gaussian blur filter before
// the next pass to improve the result of the Sobel operator
@@ -101,7 +94,8 @@
effectSobel = new ShaderPass( SobelOperatorShader );
effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
- composer.addPass( effectSobel );
+
+ renderer.setEffects( [ effectGrayScale, effectSobel ] );
const controls = new OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
@@ -110,7 +104,11 @@
const gui = new GUI();
- gui.add( params, 'enable' );
+ gui.add( params, 'enable' ).onChange( ( value ) => {
+
+ renderer.setEffects( value ? [ effectGrayScale, effectSobel ] : null );
+
+ } );
gui.open();
//
@@ -125,7 +123,6 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
effectSobel.uniforms[ 'resolution' ].value.x = window.innerWidth * window.devicePixelRatio;
effectSobel.uniforms[ 'resolution' ].value.y = window.innerHeight * window.devicePixelRatio;
@@ -134,15 +131,7 @@
function animate() {
- if ( params.enable === true ) {
-
- composer.render();
-
- } else {
-
- renderer.render( scene, camera );
-
- }
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_ssaa.html b/examples/webgl_postprocessing_ssaa.html
index 9474d86d8d6bf0..08b1e2501c887f 100644
--- a/examples/webgl_postprocessing_ssaa.html
+++ b/examples/webgl_postprocessing_ssaa.html
@@ -31,13 +31,12 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let scene, renderer, composer;
+ let scene, renderer;
let cameraP, ssaaRenderPassP;
let cameraO, ssaaRenderPassO;
+ let activePass;
let gui, stats;
const params = {
@@ -89,7 +88,7 @@
const aspect = width / height;
const devicePixelRatio = window.devicePixelRatio || 1;
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( devicePixelRatio );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
@@ -169,14 +168,11 @@
// postprocessing
- composer = new EffectComposer( renderer );
- composer.setPixelRatio( 1 ); // ensure pixel ratio is always 1 for performance reasons
ssaaRenderPassP = new SSAARenderPass( scene, cameraP );
- composer.addPass( ssaaRenderPassP );
ssaaRenderPassO = new SSAARenderPass( scene, cameraO );
- composer.addPass( ssaaRenderPassO );
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+
+ activePass = ssaaRenderPassP;
+ renderer.setEffects( [ activePass ] );
window.addEventListener( 'resize', onWindowResize );
@@ -199,7 +195,6 @@
cameraO.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
}
@@ -238,12 +233,19 @@
ssaaRenderPassP.sampleLevel = ssaaRenderPassO.sampleLevel = params.sampleLevel;
ssaaRenderPassP.unbiased = ssaaRenderPassO.unbiased = params.unbiased;
- ssaaRenderPassP.enabled = ( params.camera === 'perspective' );
- ssaaRenderPassO.enabled = ( params.camera === 'orthographic' );
+ const nextPass = params.camera === 'perspective' ? ssaaRenderPassP : ssaaRenderPassO;
+ const activeCamera = params.camera === 'perspective' ? cameraP : cameraO;
+
+ if ( nextPass !== activePass ) {
+
+ activePass = nextPass;
+ renderer.setEffects( [ activePass ] );
+
+ }
cameraP.view.offsetX = params.viewOffsetX;
- composer.render();
+ renderer.render( scene, activeCamera );
stats.end();
diff --git a/examples/webgl_postprocessing_ssao.html b/examples/webgl_postprocessing_ssao.html
index a153e8fe09670f..5c8db4032c5a76 100644
--- a/examples/webgl_postprocessing_ssao.html
+++ b/examples/webgl_postprocessing_ssao.html
@@ -32,14 +32,10 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
let container, stats;
let camera, scene, renderer;
- let composer;
let group;
init();
@@ -49,7 +45,7 @@
container = document.createElement( 'div' );
document.body.appendChild( container );
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );
@@ -100,16 +96,8 @@
const width = window.innerWidth;
const height = window.innerHeight;
- composer = new EffectComposer( renderer );
-
- const renderPass = new RenderPass( scene, camera );
- composer.addPass( renderPass );
-
const ssaoPass = new SSAOPass( scene, camera, width, height );
- composer.addPass( ssaoPass );
-
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ ssaoPass ] );
// Init gui
const gui = new GUI();
@@ -143,7 +131,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
}
@@ -161,7 +148,7 @@
group.rotation.x = timer * 0.0002;
group.rotation.y = timer * 0.0001;
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_postprocessing_taa.html b/examples/webgl_postprocessing_taa.html
index 03209051adaf3d..15926e4f4df435 100644
--- a/examples/webgl_postprocessing_taa.html
+++ b/examples/webgl_postprocessing_taa.html
@@ -32,12 +32,9 @@
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, scene, renderer, composer, taaRenderPass, renderPass;
+ let camera, scene, renderer, taaRenderPass;
let gui, stats;
let index = 0;
@@ -60,8 +57,7 @@
if ( taaRenderPass ) {
- taaRenderPass.enabled = ( param.TAAEnabled === '1' );
- renderPass.enabled = ( param.TAAEnabled !== '1' );
+ renderer.setEffects( param.TAAEnabled === '1' ? [ taaRenderPass ] : null );
}
@@ -92,7 +88,7 @@
const container = document.getElementById( 'container' );
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
@@ -130,18 +126,10 @@
// postprocessing
- composer = new EffectComposer( renderer );
-
taaRenderPass = new TAARenderPass( scene, camera );
taaRenderPass.unbiased = false;
- composer.addPass( taaRenderPass );
-
- renderPass = new RenderPass( scene, camera );
- renderPass.enabled = false;
- composer.addPass( renderPass );
- const outputPass = new OutputPass();
- composer.addPass( outputPass );
+ renderer.setEffects( [ taaRenderPass ] );
window.addEventListener( 'resize', onWindowResize );
@@ -156,7 +144,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
}
@@ -183,7 +170,7 @@
}
- composer.render();
+ renderer.render( scene, camera );
stats.update();
diff --git a/examples/webgl_postprocessing_unreal_bloom.html b/examples/webgl_postprocessing_unreal_bloom.html
index 076441bd410c4b..25e076a00f50cb 100644
--- a/examples/webgl_postprocessing_unreal_bloom.html
+++ b/examples/webgl_postprocessing_unreal_bloom.html
@@ -42,13 +42,10 @@
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, stats;
- let composer, renderer, mixer, timer;
+ let camera, scene, stats;
+ let renderer, mixer, timer;
const params = {
threshold: 0,
@@ -66,7 +63,7 @@
timer = new THREE.Timer();
timer.connect( document );
- const scene = new THREE.Scene();
+ scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( - 5, 2.5, - 3.5 );
@@ -89,7 +86,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 );
@@ -98,19 +95,12 @@
//
- const renderScene = new RenderPass( scene, camera );
-
const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = params.threshold;
bloomPass.strength = params.strength;
bloomPass.radius = params.radius;
- const outputPass = new OutputPass();
-
- composer = new EffectComposer( renderer );
- composer.addPass( renderScene );
- composer.addPass( bloomPass );
- composer.addPass( outputPass );
+ renderer.setEffects( [ bloomPass ] );
//
@@ -169,7 +159,6 @@
camera.updateProjectionMatrix();
renderer.setSize( width, height );
- composer.setSize( width, height );
}
@@ -183,7 +172,7 @@
stats.update();
- composer.render();
+ renderer.render( scene, camera );
}
diff --git a/examples/webgl_shader_lava.html b/examples/webgl_shader_lava.html
index 476ec68f24ea6c..745975a5bdf9b9 100644
--- a/examples/webgl_shader_lava.html
+++ b/examples/webgl_shader_lava.html
@@ -87,12 +87,9 @@
import * as THREE from 'three';
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
- import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
- let camera, renderer, composer, timer;
+ let camera, scene, renderer, timer;
let uniforms, mesh;
@@ -105,7 +102,7 @@
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 4;
- const scene = new THREE.Scene();
+ scene = new THREE.Scene();
timer = new THREE.Timer();
timer.connect( document );
@@ -147,24 +144,16 @@
//
- renderer = new THREE.WebGLRenderer();
+ renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
- renderer.autoClear = false;
container.appendChild( renderer.domElement );
//
- const renderModel = new RenderPass( scene, camera );
const effectBloom = new BloomPass( 1.25 );
- const outputPass = new OutputPass();
-
- composer = new EffectComposer( renderer );
-
- composer.addPass( renderModel );
- composer.addPass( effectBloom );
- composer.addPass( outputPass );
+ renderer.setEffects( [ effectBloom ] );
//
@@ -178,7 +167,6 @@
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
- composer.setSize( window.innerWidth, window.innerHeight );
}
@@ -195,8 +183,7 @@
mesh.rotation.y += 0.0125 * delta;
mesh.rotation.x += 0.05 * delta;
- renderer.clear();
- composer.render( 0.01 );
+ renderer.render( scene, camera );
}