diff --git a/examples/jsm/tsl/display/BloomNode.js b/examples/jsm/tsl/display/BloomNode.js index 8cd9a9af1fb86c..b3cacc7bcd1c98 100644 --- a/examples/jsm/tsl/display/BloomNode.js +++ b/examples/jsm/tsl/display/BloomNode.js @@ -12,20 +12,20 @@ let _rendererState; /** * Post processing node for creating a bloom effect. * ```js - * const postProcessing = new THREE.PostProcessing( renderer ); + * const renderPipeline = new THREE.RenderPipeline( renderer ); * * const scenePass = pass( scene, camera ); * const scenePassColor = scenePass.getTextureNode( 'output' ); * * const bloomPass = bloom( scenePassColor ); * - * postProcessing.outputNode = scenePassColor.add( bloomPass ); + * renderPipeline.outputNode = scenePassColor.add( bloomPass ); * ``` * By default, the node affects the entire image. For a selective bloom, * use the `emissive` material property to control which objects should * contribute to bloom or not. This can be achieved via MRT. * ```js - * const postProcessing = new THREE.PostProcessing( renderer ); + * const renderPipeline = new THREE.RenderPipeline( renderer ); * * const scenePass = pass( scene, camera ); * scenePass.setMRT( mrt( { @@ -37,7 +37,7 @@ let _rendererState; * const emissivePass = scenePass.getTextureNode( 'emissive' ); * * const bloomPass = bloom( emissivePass ); - * postProcessing.outputNode = scenePassColor.add( bloomPass ); + * renderPipeline.outputNode = scenePassColor.add( bloomPass ); * ``` * @augments TempNode * @three_import import { bloom } from 'three/addons/tsl/display/BloomNode.js'; diff --git a/examples/jsm/tsl/display/GTAONode.js b/examples/jsm/tsl/display/GTAONode.js index 243728cd110bdb..a159f302d81a33 100644 --- a/examples/jsm/tsl/display/GTAONode.js +++ b/examples/jsm/tsl/display/GTAONode.js @@ -12,7 +12,7 @@ let _rendererState; /** * Post processing node for applying Ground Truth Ambient Occlusion (GTAO) to a scene. * ```js - * const postProcessing = new THREE.PostProcessing( renderer ); + * const renderPipeline = new THREE.RenderPipeline( renderer ); * * const scenePass = pass( scene, camera ); * scenePass.setMRT( mrt( { @@ -26,7 +26,7 @@ let _rendererState; * * const aoPass = ao( scenePassDepth, scenePassNormal, camera ); * - * postProcessing.outputNod = aoPass.getTextureNode().mul( scenePassColor ); + * renderPipeline.outputNode = aoPass.getTextureNode().mul( scenePassColor ); * ``` * * Reference: [Practical Real-Time Strategies for Accurate Indirect Occlusion](https://www.activision.com/cdn/research/Practical_Real_Time_Strategies_for_Accurate_Indirect_Occlusion_NEW%20VERSION_COLOR.pdf). diff --git a/examples/jsm/tsl/display/OutlineNode.js b/examples/jsm/tsl/display/OutlineNode.js index 111851d9ec7bd9..17f373c5f9c53e 100644 --- a/examples/jsm/tsl/display/OutlineNode.js +++ b/examples/jsm/tsl/display/OutlineNode.js @@ -13,7 +13,7 @@ let _rendererState; * gives you great flexibility in composing the final outline look depending on * your requirements. * ```js - * const postProcessing = new THREE.PostProcessing( renderer ); + * const renderPipeline = new THREE.RenderPipeline( renderer ); * * const scenePass = pass( scene, camera ); * @@ -36,7 +36,7 @@ let _rendererState; * const { visibleEdge, hiddenEdge } = outlinePass; * const outlineColor = visibleEdge.mul( visibleEdgeColor ).add( hiddenEdge.mul( hiddenEdgeColor ) ).mul( edgeStrength ); * - * postProcessing.outputNode = outlineColor.add( scenePass ); + * renderPipeline.outputNode = outlineColor.add( scenePass ); * ``` * * @augments TempNode diff --git a/examples/jsm/tsl/display/TRAANode.js b/examples/jsm/tsl/display/TRAANode.js index bf02082cceb412..b5680e2eb04cb0 100644 --- a/examples/jsm/tsl/display/TRAANode.js +++ b/examples/jsm/tsl/display/TRAANode.js @@ -434,20 +434,20 @@ class TRAANode extends TempNode { */ setup( builder ) { - const postProcessing = builder.context.postProcessing; + const renderPipeline = builder.context.renderPipeline; - if ( postProcessing ) { + if ( renderPipeline ) { this._needsPostProcessingSync = true; - postProcessing.context.onBeforePostProcessing = () => { + renderPipeline.context.onBeforeRenderPipeline = () => { const size = builder.renderer.getDrawingBufferSize( _size ); this.setViewOffset( size.width, size.height ); }; - postProcessing.context.onAfterPostProcessing = () => { + renderPipeline.context.onAfterRenderPipeline = () => { this.clearViewOffset(); diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html index d6f871b119c928..2012793920d9ee 100644 --- a/examples/misc_controls_fly.html +++ b/examples/misc_controls_fly.html @@ -62,7 +62,7 @@ let geometry, meshPlanet, meshClouds, meshMoon; let dirLight; - let postProcessing; + let renderPipeline; const textureLoader = new THREE.TextureLoader(); @@ -219,12 +219,12 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode(); - postProcessing.outputNode = film( scenePassColor ); + renderPipeline.outputNode = film( scenePassColor ); } @@ -278,7 +278,7 @@ controls.movementSpeed = 0.33 * d; controls.update( delta ); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_backdrop_water.html b/examples/webgpu_backdrop_water.html index f87e03161b93fd..eda0616752cb9e 100644 --- a/examples/webgpu_backdrop_water.html +++ b/examples/webgpu_backdrop_water.html @@ -44,7 +44,7 @@ let camera, scene, renderer; let mixer, objects, timer; let model, floor, floorPosition; - let postProcessing; + let renderPipeline; let controls; init(); @@ -221,8 +221,8 @@ const vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus().toInspector( 'Post-Processing / Vignette' ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = waterMask.select( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignette ) ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = waterMask.select( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignette ) ); // @@ -264,7 +264,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html index 65dc3ec2bbf7fd..379cf6684f1cb5 100644 --- a/examples/webgpu_compute_particles_snow.html +++ b/examples/webgpu_compute_particles_snow.html @@ -49,7 +49,7 @@ let camera, scene, renderer; let controls; let computeParticles; - let postProcessing; + let renderPipeline; let collisionCamera, collisionPosRT, collisionPosMaterial; @@ -309,8 +309,8 @@ totalPass = totalPass.mul( vignette ); totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ).toInspector( 'Teapot Blur' ) ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = totalPass; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = totalPass; // @@ -354,7 +354,7 @@ scene.overrideMaterial = null; renderer.setRenderTarget( null ); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_custom_fog_background.html b/examples/webgpu_custom_fog_background.html index 6320bcfe6945aa..3d02d200a087b9 100644 --- a/examples/webgpu_custom_fog_background.html +++ b/examples/webgpu_custom_fog_background.html @@ -44,7 +44,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; init(); @@ -81,9 +81,9 @@ // mix fog using fog factor and fog color const compose = fogFactor.mix( scenePassTM, fogColor ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform - postProcessing.outputNode = compose; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = true; // no tone mapping will be applied, only the default color space transform + renderPipeline.outputNode = compose; // @@ -130,7 +130,7 @@ function animate() { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_custom_fog_scattering.html b/examples/webgpu_custom_fog_scattering.html index 5150e05f90eb6b..665219fc66bc1b 100644 --- a/examples/webgpu_custom_fog_scattering.html +++ b/examples/webgpu_custom_fog_scattering.html @@ -40,7 +40,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing, controls; + let camera, scene, renderer, renderPipeline, controls; const params = { scatteringEnabled: true @@ -134,7 +134,7 @@ // - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // uniforms @@ -158,7 +158,7 @@ const compositeNode = mix( scenePassColor, sceneColorBlurred, fogFactor ); - postProcessing.outputNode = compositeNode; + renderPipeline.outputNode = compositeNode; // gui @@ -173,15 +173,15 @@ if ( value === true ) { - postProcessing.outputNode = compositeNode; + renderPipeline.outputNode = compositeNode; } else { - postProcessing.outputNode = scenePassColor; + renderPipeline.outputNode = scenePassColor; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } ); @@ -202,7 +202,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_display_stereo.html b/examples/webgpu_display_stereo.html index 18e8d2bb5798a4..39d894e26e2baa 100644 --- a/examples/webgpu_display_stereo.html +++ b/examples/webgpu_display_stereo.html @@ -41,7 +41,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing; + let camera, scene, renderer, renderPipeline; let stereo, anaglyph, parallaxBarrier; @@ -108,12 +108,12 @@ renderer.inspector = new Inspector(); document.body.appendChild( renderer.domElement ); - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); stereo = stereoPass( scene, camera ); anaglyph = anaglyphPass( scene, camera ); parallaxBarrier = parallaxBarrierPass( scene, camera ); - postProcessing.outputNode = stereo; + renderPipeline.outputNode = stereo; const gui = renderer.inspector.createParameters( 'Stereo Settings' ); gui.add( params, 'effect', effects ).onChange( update ); @@ -138,19 +138,19 @@ if ( value === 'stereo' ) { - postProcessing.outputNode = stereo; + renderPipeline.outputNode = stereo; } else if ( value === 'anaglyph' ) { - postProcessing.outputNode = anaglyph; + renderPipeline.outputNode = anaglyph; } else if ( value === 'parallaxBarrier' ) { - postProcessing.outputNode = parallaxBarrier; + renderPipeline.outputNode = parallaxBarrier; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } @@ -194,7 +194,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_hdr.html b/examples/webgpu_hdr.html index 41af83e264b3f7..2cf87349fd5900 100644 --- a/examples/webgpu_hdr.html +++ b/examples/webgpu_hdr.html @@ -123,11 +123,11 @@ brushMat.depthWrite = false; brushMat.blending = THREE.AdditiveBlending; // additive to build HDR energy - const postProcessing = new THREE.PostProcessing( renderer ); + const renderPipeline = new THREE.RenderPipeline( renderer ); const brushPass = pass( brushScene, camera, { type: THREE.HalfFloatType } ); brushPass.renderTarget.texture.colorSpace = ExtendedSRGBColorSpace; - postProcessing.outputNode = afterImage( brushPass, params.afterImageDecay ); + renderPipeline.outputNode = afterImage( brushPass, params.afterImageDecay ); // HDR brush uniforms const uColor = params.intensity; @@ -193,7 +193,7 @@ // Main loop renderer.setAnimationLoop( async () => { - postProcessing.render(); + renderPipeline.render(); } ); diff --git a/examples/webgpu_lights_tiled.html b/examples/webgpu_lights_tiled.html index d3af393949e731..34f7b3a30972d6 100644 --- a/examples/webgpu_lights_tiled.html +++ b/examples/webgpu_lights_tiled.html @@ -51,7 +51,7 @@ compose, tileInfluence, lighting, count, - postProcessing; + renderPipeline; init(); @@ -176,7 +176,7 @@ compose = scenePass.add( bloomPass ); tileInfluence = uniform( 0 ); - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); updatePostProcessing(); @@ -193,8 +193,8 @@ const debugBlockIndexes = lighting.getNode( scene ).setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio ).getBlock().toColor().div( count * 2 ); - postProcessing.outputNode = compose.add( debugBlockIndexes.mul( tileInfluence ) ); - postProcessing.needsUpdate = true; + renderPipeline.outputNode = compose.add( debugBlockIndexes.mul( tileInfluence ) ); + renderPipeline.needsUpdate = true; } @@ -227,7 +227,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_materials_alphahash.html b/examples/webgpu_materials_alphahash.html index da7f4df5a588ec..567720ef7d8ea9 100644 --- a/examples/webgpu_materials_alphahash.html +++ b/examples/webgpu_materials_alphahash.html @@ -30,7 +30,7 @@ import { ssaaPass } from 'three/addons/tsl/display/SSAAPassNode.js'; - let camera, scene, renderer, controls, mesh, material, postProcessing; + let camera, scene, renderer, controls, mesh, material, renderPipeline; const amount = parseInt( window.location.search.slice( 1 ) ) || 3; const count = Math.pow( amount, 3 ); @@ -111,11 +111,11 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = ssaaPass( scene, camera ); scenePass.sampleLevel = 3; - postProcessing.outputNode = scenePass; + renderPipeline.outputNode = scenePass; // @@ -161,7 +161,7 @@ function animate() { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_materials_toon.html b/examples/webgpu_materials_toon.html index 95da9e327d0ad9..dd7586e9d5e988 100644 --- a/examples/webgpu_materials_toon.html +++ b/examples/webgpu_materials_toon.html @@ -46,7 +46,7 @@ let container; - let camera, scene, renderer, postProcessing; + let camera, scene, renderer, renderPipeline; let particleLight; const loader = new FontLoader(); @@ -80,9 +80,9 @@ // - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); - postProcessing.outputNode = toonOutlinePass( scene, camera ); + renderPipeline.outputNode = toonOutlinePass( scene, camera ); // Materials @@ -200,7 +200,7 @@ particleLight.position.y = Math.cos( timer * 5 ) * 400; particleLight.position.z = Math.cos( timer * 3 ) * 300; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_mrt.html b/examples/webgpu_mrt.html index 4169bb99c75544..3dfdc7cd40a61c 100644 --- a/examples/webgpu_mrt.html +++ b/examples/webgpu_mrt.html @@ -44,7 +44,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; init(); @@ -110,9 +110,9 @@ // post processing - mrt - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; - postProcessing.outputNode = Fn( () => { + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; + renderPipeline.outputNode = Fn( () => { const output = scenePass.getTextureNode( 'output' ); // output name is optional here const normal = scenePass.getTextureNode( 'normal' ); @@ -153,7 +153,7 @@ function render() { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_mrt_mask.html b/examples/webgpu_mrt_mask.html index e665e28748ef1a..73561cf20f1309 100644 --- a/examples/webgpu_mrt_mask.html +++ b/examples/webgpu_mrt_mask.html @@ -42,7 +42,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; let spheres, rotate = true; let mixer, timer; @@ -138,9 +138,9 @@ const colorPass = scenePass.getTextureNode(); const maskPass = scenePass.getTextureNode( 'mask' ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; - postProcessing.outputNode = colorPass.add( gaussianBlur( maskPass, 1, 20 ).mul( .3 ) ).renderOutput(); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; + renderPipeline.outputNode = colorPass.add( gaussianBlur( maskPass, 1, 20 ).mul( .3 ) ).renderOutput(); // controls @@ -173,7 +173,7 @@ if ( rotate ) spheres.rotation.y += delta * 0.5; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_multiple_rendertargets.html b/examples/webgpu_multiple_rendertargets.html index 99ae8e0a1da625..68fc0c0e52fe64 100644 --- a/examples/webgpu_multiple_rendertargets.html +++ b/examples/webgpu_multiple_rendertargets.html @@ -39,7 +39,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer, torus; - let postProcessing, renderTarget; + let renderPipeline, renderTarget; init(); @@ -94,8 +94,8 @@ // Post Processing - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, screenUV.x ) ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = mix( texture( renderTarget.textures[ 0 ] ), texture( renderTarget.textures[ 1 ] ), step( 0.5, screenUV.x ) ); // Controls @@ -127,7 +127,7 @@ // render post FX renderer.setRenderTarget( null ); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_ocean.html b/examples/webgpu_ocean.html index 26618061d957d0..ec886362bf3b13 100644 --- a/examples/webgpu_ocean.html +++ b/examples/webgpu_ocean.html @@ -46,7 +46,7 @@ import { SkyMesh } from 'three/addons/objects/SkyMesh.js'; let container; - let camera, scene, renderer, postProcessing; + let camera, scene, renderer, renderPipeline; let controls, water, sun, sky, mesh, bloomPass; init(); @@ -75,7 +75,7 @@ // Post-processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode( 'output' ); @@ -85,7 +85,7 @@ bloomPass.strength.value = 0.1; bloomPass.radius.value = 0; - postProcessing.outputNode = scenePassColor.add( bloomPass ); + renderPipeline.outputNode = scenePassColor.add( bloomPass ); // @@ -226,7 +226,7 @@ mesh.rotation.x = time * 0.5; mesh.rotation.z = time * 0.51; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing.html b/examples/webgpu_postprocessing.html index 83353ff60ff90c..2b188e4d23c506 100644 --- a/examples/webgpu_postprocessing.html +++ b/examples/webgpu_postprocessing.html @@ -37,7 +37,7 @@ import { rgbShift } from 'three/addons/tsl/display/RGBShiftNode.js'; import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, renderer, postProcessing; + let camera, renderer, renderPipeline; let object; init(); @@ -84,7 +84,7 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode().toInspector( 'Scene Color' ); @@ -95,7 +95,7 @@ const rgbShiftPass = rgbShift( dotScreenPass ); rgbShiftPass.amount.value = 0.001; - postProcessing.outputNode = rgbShiftPass; + renderPipeline.outputNode = rgbShiftPass; // @@ -117,7 +117,7 @@ object.rotation.x += 0.005; object.rotation.y += 0.01; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_3dlut.html b/examples/webgpu_postprocessing_3dlut.html index 2eb935bd77272a..8513e02d253653 100644 --- a/examples/webgpu_postprocessing_3dlut.html +++ b/examples/webgpu_postprocessing_3dlut.html @@ -63,7 +63,7 @@ 'NightLUT': null }; - let camera, scene, renderer, postProcessing, controls, lutPass; + let camera, scene, renderer, renderPipeline, controls, lutPass; init(); @@ -207,12 +207,12 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // ignore default output color transform ( toneMapping and outputColorSpace ) // use renderOutput() for control the sequence - postProcessing.outputColorTransform = false; + renderPipeline.outputColorTransform = false; // scene pass @@ -222,7 +222,7 @@ const lut = lutMap[ params.lut ]; lutPass = lut3D( outputPass, texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) ); - postProcessing.outputNode = lutPass; + renderPipeline.outputNode = lutPass; // controls @@ -265,7 +265,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_afterimage.html b/examples/webgpu_postprocessing_afterimage.html index 7a622faea3f6b8..6fb57b66686aec 100644 --- a/examples/webgpu_postprocessing_afterimage.html +++ b/examples/webgpu_postprocessing_afterimage.html @@ -41,7 +41,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; let camera, scene, renderer, particles; - let postProcessing, afterImagePass, scenePass; + let renderPipeline, afterImagePass, scenePass; const params = { @@ -121,13 +121,13 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); scenePass = pass( scene, camera ); afterImagePass = afterImage( scenePass, params.damp ); - postProcessing.outputNode = afterImagePass; + renderPipeline.outputNode = afterImagePass; // @@ -143,15 +143,15 @@ if ( params.enabled === true ) { - postProcessing.outputNode = afterImagePass; + renderPipeline.outputNode = afterImagePass; } else { - postProcessing.outputNode = scenePass; + renderPipeline.outputNode = scenePass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } @@ -185,7 +185,7 @@ particles.rotation.z = time * 0.001; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_anamorphic.html b/examples/webgpu_postprocessing_anamorphic.html index f82d2a6f4f1648..d0c842d0133b36 100644 --- a/examples/webgpu_postprocessing_anamorphic.html +++ b/examples/webgpu_postprocessing_anamorphic.html @@ -45,7 +45,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; const params = { resolutionScale: 0.2 @@ -104,9 +104,9 @@ const anamorphicPass = anamorphic( scenePass.getTextureNode().toInspector( 'Color' ), threshold, scaleNode, samples ).toInspector( 'Anamorphic' ); anamorphicPass.resolutionScale = params.resolutionScale; // 1 = full resolution - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = scenePass.add( anamorphicPass.mul( intensity ) ); - //postProcessing.outputNode = scenePass.add( anamorphicPass.getTextureNode().gaussianBlur() ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = scenePass.add( anamorphicPass.mul( intensity ) ); + //renderPipeline.outputNode = scenePass.add( anamorphicPass.getTextureNode().gaussianBlur() ); // gui @@ -135,7 +135,7 @@ function render() { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_ao.html b/examples/webgpu_postprocessing_ao.html index 669aba98586583..b35b40cf69cf12 100644 --- a/examples/webgpu_postprocessing_ao.html +++ b/examples/webgpu_postprocessing_ao.html @@ -47,7 +47,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing, controls; + let camera, scene, renderer, renderPipeline, controls; let aoPass, traaPass, transparentMesh; @@ -102,7 +102,7 @@ // post-processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // pre-pass @@ -150,7 +150,7 @@ traaPass = traa( scenePass, prePassDepth, prePassVelocity, camera ); traaPass.useSubpixelCorrection = false; - postProcessing.outputNode = traaPass; + renderPipeline.outputNode = traaPass; // models @@ -195,16 +195,16 @@ if ( value === true ) { - postProcessing.outputNode = vec4( vec3( aoPass.r ), 1 ); + renderPipeline.outputNode = vec4( vec3( aoPass.r ), 1 ); } else { - postProcessing.outputNode = traaPass; + renderPipeline.outputNode = traaPass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } ); @@ -239,7 +239,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_bloom.html b/examples/webgpu_postprocessing_bloom.html index e42cc64a706358..3194c2632124f6 100644 --- a/examples/webgpu_postprocessing_bloom.html +++ b/examples/webgpu_postprocessing_bloom.html @@ -46,7 +46,7 @@ let camera; - let postProcessing, renderer, mixer, timer; + let renderPipeline, renderer, mixer, timer; const params = { threshold: 0, @@ -95,14 +95,14 @@ // - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode( 'output' ).toInspector( 'Color' ); const bloomPass = bloom( scenePassColor ).toInspector( 'Bloom' ); - postProcessing.outputNode = scenePassColor.add( bloomPass ); + renderPipeline.outputNode = scenePassColor.add( bloomPass ); // @@ -167,7 +167,7 @@ mixer.update( delta ); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_bloom_emissive.html b/examples/webgpu_postprocessing_bloom_emissive.html index af8865ba19ea35..f1a6b6843b877c 100644 --- a/examples/webgpu_postprocessing_bloom_emissive.html +++ b/examples/webgpu_postprocessing_bloom_emissive.html @@ -43,7 +43,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; init(); @@ -116,8 +116,8 @@ const bloomPass = bloom( emissivePass, 2.5, .5 ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = outputPass.add( bloomPass ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = outputPass.add( bloomPass ); // @@ -155,7 +155,7 @@ function render() { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_bloom_selective.html b/examples/webgpu_postprocessing_bloom_selective.html index ff366401c1daac..34726f4ae4d6c1 100644 --- a/examples/webgpu_postprocessing_bloom_selective.html +++ b/examples/webgpu_postprocessing_bloom_selective.html @@ -94,9 +94,9 @@ const bloomPass = bloom( outputPass.mul( bloomIntensityPass ) ); - const postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; - postProcessing.outputNode = outputPass.add( bloomPass ).renderOutput(); + const renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; + renderPipeline.outputNode = outputPass.add( bloomPass ).renderOutput(); // controls @@ -160,7 +160,7 @@ function animate() { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_ca.html b/examples/webgpu_postprocessing_ca.html index f8a328b74ac05b..42aadc8a589c2e 100644 --- a/examples/webgpu_postprocessing_ca.html +++ b/examples/webgpu_postprocessing_ca.html @@ -52,7 +52,7 @@ }; let camera, scene, renderer, timer, mainGroup; - let controls, postProcessing; + let controls, renderPipeline; init(); @@ -100,8 +100,8 @@ scene.add( gridHelper ); // post processing - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; // scene pass const scenePass = pass( scene, camera ); @@ -116,7 +116,7 @@ const caPass = chromaticAberration( outputPass, staticStrength, staticCenter, staticScale ); // Set initial output based on params - postProcessing.outputNode = params.enabled ? caPass : outputPass; + renderPipeline.outputNode = params.enabled ? caPass : outputPass; window.addEventListener( 'resize', onWindowResize ); @@ -126,8 +126,8 @@ gui.add( params, 'enabled' ).onChange( ( value ) => { - postProcessing.outputNode = value ? caPass : outputPass; - postProcessing.needsUpdate = true; + renderPipeline.outputNode = value ? caPass : outputPass; + renderPipeline.needsUpdate = true; } ); @@ -336,7 +336,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_difference.html b/examples/webgpu_postprocessing_difference.html index 100af9a4414303..b207fcdc90cfae 100644 --- a/examples/webgpu_postprocessing_difference.html +++ b/examples/webgpu_postprocessing_difference.html @@ -42,7 +42,7 @@ speed: 0 }; - let camera, renderer, postProcessing; + let camera, renderer, renderPipeline; let timer, mesh, controls; init(); @@ -80,7 +80,7 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); @@ -91,7 +91,7 @@ const saturationAmount = luminance( frameDiff ).mul( 1000 ).clamp( 0, 3 ); - postProcessing.outputNode = saturation( currentTexture, saturationAmount ); + renderPipeline.outputNode = saturation( currentTexture, saturationAmount ); // @@ -127,7 +127,7 @@ mesh.rotation.y += timer.getDelta() * 5 * params.speed; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_dof.html b/examples/webgpu_postprocessing_dof.html index b05bd55e50e5b5..24dce6f03e5f13 100644 --- a/examples/webgpu_postprocessing_dof.html +++ b/examples/webgpu_postprocessing_dof.html @@ -45,7 +45,7 @@ let width = window.innerWidth; let height = window.innerHeight; - let postProcessing; + let renderPipeline; init(); @@ -118,7 +118,7 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); @@ -127,7 +127,7 @@ const dofPass = dof( scenePassColor, scenePassViewZ, effectController.focusDistance, effectController.focalLength, effectController.bokehScale ); - postProcessing.outputNode = dofPass; + renderPipeline.outputNode = dofPass; // controls @@ -161,7 +161,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_dof_basic.html b/examples/webgpu_postprocessing_dof_basic.html index 14407e228505c0..dcccaa133b0a27 100644 --- a/examples/webgpu_postprocessing_dof_basic.html +++ b/examples/webgpu_postprocessing_dof_basic.html @@ -48,7 +48,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; import TWEEN from 'three/addons/libs/tween.module.js'; - let camera, controls, scene, timer, renderer, model, mixer, raycaster, postProcessing; + let camera, controls, scene, timer, renderer, model, mixer, raycaster, renderPipeline; const pointerCoords = new THREE.Vector2(); const focusPoint = new THREE.Vector3( 1, 1.75, - 0.4 ); @@ -107,8 +107,8 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; // DOF uniforms @@ -133,7 +133,7 @@ const outputPass = renderOutput( dofPass ); const fxaaPass = fxaa( outputPass ); - postProcessing.outputNode = fxaaPass; + renderPipeline.outputNode = fxaaPass; // GUI @@ -202,7 +202,7 @@ camera.updateMatrixWorld(); focusPointView.value.copy( focusPoint ).applyMatrix4( camera.matrixWorldInverse ); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_fxaa.html b/examples/webgpu_postprocessing_fxaa.html index 2fe6cb28e88417..9540c1a9ad025f 100644 --- a/examples/webgpu_postprocessing_fxaa.html +++ b/examples/webgpu_postprocessing_fxaa.html @@ -44,7 +44,7 @@ }; let camera, scene, renderer, timer, group; - let postProcessing; + let renderPipeline; init(); @@ -108,12 +108,12 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // ignore default output color transform ( toneMapping and outputColorSpace ) // use renderOutput() for control the sequence - postProcessing.outputColorTransform = false; + renderPipeline.outputColorTransform = false; // scene pass @@ -123,7 +123,7 @@ // FXAA must be computed in sRGB color space (so after tone mapping and color space conversion) const fxaaPass = fxaa( outputPass ); - postProcessing.outputNode = fxaaPass; + renderPipeline.outputNode = fxaaPass; // @@ -136,15 +136,15 @@ if ( value === true ) { - postProcessing.outputNode = fxaaPass; + renderPipeline.outputNode = fxaaPass; } else { - postProcessing.outputNode = outputPass; + renderPipeline.outputNode = outputPass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } ); gui.add( params, 'animated' ); @@ -174,7 +174,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_lensflare.html b/examples/webgpu_postprocessing_lensflare.html index 618adfd25b0177..dbd355b0a26ab4 100644 --- a/examples/webgpu_postprocessing_lensflare.html +++ b/examples/webgpu_postprocessing_lensflare.html @@ -50,7 +50,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; let camera, scene, renderer, controls; - let postProcessing; + let renderPipeline; init(); @@ -124,8 +124,8 @@ const blurPass = gaussianBlur( flarePass, 8 ); // optional (blurring produces better flare quality but also adds some overhead) - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = outputPass.add( bloomPass ).add( blurPass ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = outputPass.add( bloomPass ).add( blurPass ); // @@ -172,7 +172,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_masking.html b/examples/webgpu_postprocessing_masking.html index 0cd4a5c616547d..d92e4956bbef27 100644 --- a/examples/webgpu_postprocessing_masking.html +++ b/examples/webgpu_postprocessing_masking.html @@ -35,7 +35,7 @@ import { pass, texture } from 'three/tsl'; import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, postProcessing, renderer; + let camera, renderPipeline, renderer; let box, torus; init(); @@ -91,8 +91,8 @@ compose = sceneMask1.mix( compose, texture( texture1 ) ); compose = sceneMask2.mix( compose, texture( texture2 ) ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = compose; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = compose; } @@ -122,7 +122,7 @@ torus.rotation.x = time; torus.rotation.y = time / 2; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_motion_blur.html b/examples/webgpu_postprocessing_motion_blur.html index 70e381bd30b7dd..f71802be939211 100644 --- a/examples/webgpu_postprocessing_motion_blur.html +++ b/examples/webgpu_postprocessing_motion_blur.html @@ -43,7 +43,7 @@ let camera, scene, renderer; let boxLeft, boxRight, model, mixer, timer; - let postProcessing; + let renderPipeline; let controls; const params = { @@ -193,8 +193,8 @@ const vignette = screenUV.distance( .5 ).remap( .6, 1 ).mul( 2 ).clamp().oneMinus(); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = mBlur.mul( vignette ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = mBlur.mul( vignette ); // @@ -236,7 +236,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_outline.html b/examples/webgpu_postprocessing_outline.html index bb962bee6de1ea..682e9b07a4afcf 100644 --- a/examples/webgpu_postprocessing_outline.html +++ b/examples/webgpu_postprocessing_outline.html @@ -41,7 +41,7 @@ import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; let camera, scene, renderer, controls; - let postProcessing, outlinePass; + let renderPipeline, outlinePass; let selectedObjects = []; @@ -196,8 +196,8 @@ const scenePass = pass( scene, camera ).toInspector( 'Color' ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = outlinePulse.add( scenePass ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = outlinePulse.add( scenePass ); // gui @@ -280,7 +280,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_pixel.html b/examples/webgpu_postprocessing_pixel.html index 0997ebc034e91a..4453310b99b88e 100644 --- a/examples/webgpu_postprocessing_pixel.html +++ b/examples/webgpu_postprocessing_pixel.html @@ -41,7 +41,7 @@ import { uniform } from 'three/tsl'; import { pixelationPass } from 'three/addons/tsl/display/PixelationPassNode.js'; - let camera, scene, renderer, postProcessing, crystalMesh, timer; + let camera, scene, renderer, renderPipeline, crystalMesh, timer; let effectController; init(); @@ -145,9 +145,9 @@ pixelAlignedPanning: true }; - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pixelationPass( scene, camera, effectController.pixelSize, effectController.normalEdgeStrength, effectController.depthEdgeStrength ); - postProcessing.outputNode = scenePass; + renderPipeline.outputNode = scenePass; window.addEventListener( 'resize', onWindowResize ); @@ -206,7 +206,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_radial_blur.html b/examples/webgpu_postprocessing_radial_blur.html index 4dee920a143278..83859f856a97ca 100644 --- a/examples/webgpu_postprocessing_radial_blur.html +++ b/examples/webgpu_postprocessing_radial_blur.html @@ -44,7 +44,7 @@ }; let camera, scene, renderer, timer, group; - let postProcessing; + let renderPipeline; init(); @@ -126,7 +126,7 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); @@ -137,7 +137,7 @@ const blurPass = radialBlur( scenePass, { weight: weightUniform, decay: decayUniform, count: countUniform, exposure: exposureUniform } ); - postProcessing.outputNode = blurPass; + renderPipeline.outputNode = blurPass; // @@ -154,15 +154,15 @@ if ( value === true ) { - postProcessing.outputNode = blurPass; + renderPipeline.outputNode = blurPass; } else { - postProcessing.outputNode = scenePass; + renderPipeline.outputNode = scenePass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } ); gui.add( params, 'animated' ); @@ -191,7 +191,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_smaa.html b/examples/webgpu_postprocessing_smaa.html index d725d77e6cf77a..92c88455d8d9c3 100644 --- a/examples/webgpu_postprocessing_smaa.html +++ b/examples/webgpu_postprocessing_smaa.html @@ -37,7 +37,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing; + let camera, scene, renderer, renderPipeline; const params = { enabled: true, @@ -81,12 +81,12 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ).toInspector( 'Color' ); const smaaPass = smaa( scenePass ); - postProcessing.outputNode = smaaPass; + renderPipeline.outputNode = smaaPass; // @@ -99,15 +99,15 @@ if ( value === true ) { - postProcessing.outputNode = smaaPass; + renderPipeline.outputNode = smaaPass; } else { - postProcessing.outputNode = scenePass; + renderPipeline.outputNode = scenePass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } ); @@ -143,7 +143,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_sobel.html b/examples/webgpu_postprocessing_sobel.html index 2da8b33c62f16a..f6f2aa4667949b 100644 --- a/examples/webgpu_postprocessing_sobel.html +++ b/examples/webgpu_postprocessing_sobel.html @@ -41,7 +41,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; let camera, scene, renderer, controls; - let postProcessing; + let renderPipeline; const params = { enabled: true @@ -94,12 +94,12 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; const scenePass = pass( scene, camera ); - postProcessing.outputNode = sobel( renderOutput( scenePass ) ); + renderPipeline.outputNode = sobel( renderOutput( scenePass ) ); // @@ -128,7 +128,7 @@ if ( params.enabled === true ) { - postProcessing.render(); + renderPipeline.render(); } else { diff --git a/examples/webgpu_postprocessing_ssaa.html b/examples/webgpu_postprocessing_ssaa.html index fe2f8e29a6027e..1e05a12960543e 100644 --- a/examples/webgpu_postprocessing_ssaa.html +++ b/examples/webgpu_postprocessing_ssaa.html @@ -36,7 +36,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; - let scene, mesh, renderer, postProcessing; + let scene, mesh, renderer, renderPipeline; let camera, ssaaRenderPass; let timer; @@ -128,12 +128,12 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); ssaaRenderPass = ssaaPass( scene, camera ); const scenePassColor = ssaaRenderPass.getTextureNode(); - postProcessing.outputNode = scenePassColor; + renderPipeline.outputNode = scenePassColor; window.addEventListener( 'resize', onWindowResize ); @@ -201,7 +201,7 @@ camera.view.offsetX = params.viewOffsetX; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_ssgi.html b/examples/webgpu_postprocessing_ssgi.html index 5c1ad385b2627f..26d2500887e7b0 100644 --- a/examples/webgpu_postprocessing_ssgi.html +++ b/examples/webgpu_postprocessing_ssgi.html @@ -40,7 +40,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing, controls; + let camera, scene, renderer, renderPipeline, controls; init(); @@ -71,7 +71,7 @@ // - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); scenePass.setMRT( mrt( { @@ -123,7 +123,7 @@ // traa const traaPass = traa( compositePass, scenePassDepth, scenePassVelocity, camera ); - postProcessing.outputNode = traaPass; + renderPipeline.outputNode = traaPass; // Cornell Box inspired scene @@ -239,23 +239,23 @@ if ( value === 1 ) { - postProcessing.outputNode = vec4( vec3( ao ), 1 ); + renderPipeline.outputNode = vec4( vec3( ao ), 1 ); } else if ( value === 2 ) { - postProcessing.outputNode = vec4( gi, 1 ); + renderPipeline.outputNode = vec4( gi, 1 ); } else if ( value === 3 ) { - postProcessing.outputNode = scenePassColor; + renderPipeline.outputNode = scenePassColor; } else { - postProcessing.outputNode = giPass.useTemporalFiltering ? traaPass : compositePass; + renderPipeline.outputNode = giPass.useTemporalFiltering ? traaPass : compositePass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } @@ -279,7 +279,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_ssr.html b/examples/webgpu_postprocessing_ssr.html index 3c0768d10102a9..db1c147ac5e788 100644 --- a/examples/webgpu_postprocessing_ssr.html +++ b/examples/webgpu_postprocessing_ssr.html @@ -60,7 +60,7 @@ enabled: true }; - let camera, scene, model, renderer, postProcessing, ssrPass; + let camera, scene, model, renderer, renderPipeline, ssrPass; let controls; init(); @@ -126,7 +126,7 @@ // - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); scenePass.setMRT( mrt( { @@ -170,7 +170,7 @@ const outputNode = smaa( blendColor( scenePassColor, ssrPass ) ); - postProcessing.outputNode = outputNode; + renderPipeline.outputNode = outputNode; // @@ -193,15 +193,15 @@ if ( params.enabled === true ) { - postProcessing.outputNode = outputNode; + renderPipeline.outputNode = outputNode; } else { - postProcessing.outputNode = scenePass; + renderPipeline.outputNode = scenePass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } ); const modelFolder = gui.addFolder( 'Model' ); @@ -246,7 +246,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_sss.html b/examples/webgpu_postprocessing_sss.html index 28338132841eb2..1bf10c893387cf 100644 --- a/examples/webgpu_postprocessing_sss.html +++ b/examples/webgpu_postprocessing_sss.html @@ -45,7 +45,7 @@ import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing, controls; + let camera, scene, renderer, renderPipeline, controls; init(); @@ -130,7 +130,7 @@ // post-processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // pre-pass @@ -165,7 +165,7 @@ // traa const traaPass = traa( scenePass, prePassDepth, prePassVelocity, camera ); - postProcessing.outputNode = traaPass; + renderPipeline.outputNode = traaPass; // @@ -198,15 +198,15 @@ if ( params.output === 2 ) { - postProcessing.outputNode = vec4( vec3( sssPass.r ), 1 ); + renderPipeline.outputNode = vec4( vec3( sssPass.r ), 1 ); } else { - postProcessing.outputNode = sssPass.useTemporalFiltering ? traaPass : scenePass; + renderPipeline.outputNode = sssPass.useTemporalFiltering ? traaPass : scenePass; } - postProcessing.needsUpdate = true; + renderPipeline.needsUpdate = true; } @@ -231,7 +231,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_traa.html b/examples/webgpu_postprocessing_traa.html index 5e39bdb1f63ad8..c46ac13ea9571c 100644 --- a/examples/webgpu_postprocessing_traa.html +++ b/examples/webgpu_postprocessing_traa.html @@ -37,7 +37,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing; + let camera, scene, renderer, renderPipeline; let index = 0; init(); @@ -77,7 +77,7 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); scenePass.setMRT( mrt( { output: output, @@ -94,7 +94,7 @@ const traaNode = traa( scenePassColor, scenePassDepth, scenePassVelocity, camera ); - postProcessing.outputNode = traaNode; + renderPipeline.outputNode = traaNode; // @@ -131,7 +131,7 @@ } - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_postprocessing_transition.html b/examples/webgpu_postprocessing_transition.html index f5d193ecfa3ce5..0bf872494ca875 100644 --- a/examples/webgpu_postprocessing_transition.html +++ b/examples/webgpu_postprocessing_transition.html @@ -40,7 +40,7 @@ import { uniform, pass } from 'three/tsl'; import { transition } from 'three/addons/tsl/display/TransitionNode.js'; - let renderer, postProcessing, transitionController, transitionPass; + let renderer, renderPipeline, transitionController, transitionPass; const textures = []; const timer = new THREE.Timer(); @@ -168,14 +168,14 @@ renderer.setAnimationLoop( animate ); document.body.appendChild( renderer.domElement ); - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePassA = pass( fxSceneA.scene, fxSceneA.camera ); const scenePassB = pass( fxSceneB.scene, fxSceneB.camera ); transitionPass = transition( scenePassA, scenePassB, new THREE.TextureNode( textures[ effectController.texture ] ), effectController._transition, effectController.threshold, effectController._useTexture ); - postProcessing.outputNode = transitionPass; + renderPipeline.outputNode = transitionPass; const gui = renderer.inspector.createParameters( 'Settings' ); @@ -265,7 +265,7 @@ } else { - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_reflection.html b/examples/webgpu_reflection.html index 02088fd26c0d52..2de3742ae6c1d9 100644 --- a/examples/webgpu_reflection.html +++ b/examples/webgpu_reflection.html @@ -46,7 +46,7 @@ import TWEEN from 'three/addons/libs/tween.module.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; let controls; // below uniforms will be animated via TWEEN.js @@ -155,8 +155,8 @@ const vignette = screenUV.distance( .5 ).mul( 1.25 ).clamp().oneMinus().sub( 0.2 ); - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = blendOverlay( scenePassColorBlurred, vignette ); + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = blendOverlay( scenePassColorBlurred, vignette ); // tweens @@ -194,7 +194,7 @@ TWEEN.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_skinning_instancing.html b/examples/webgpu_skinning_instancing.html index a547f9220ade65..a577a8662cbed4 100644 --- a/examples/webgpu_skinning_instancing.html +++ b/examples/webgpu_skinning_instancing.html @@ -40,7 +40,7 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; let camera, scene, renderer; - let postProcessing; + let renderPipeline; let mixer, timer; @@ -146,8 +146,8 @@ const scenePassColorBlurred = gaussianBlur( scenePassColor ); scenePassColorBlurred.directionNode = scenePassDepth; - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputNode = scenePassColorBlurred; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputNode = scenePassColorBlurred; // events @@ -173,7 +173,7 @@ if ( mixer ) mixer.update( delta ); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_test_memory.html b/examples/webgpu_test_memory.html index e604b93edae645..3d22ddb636798c 100644 --- a/examples/webgpu_test_memory.html +++ b/examples/webgpu_test_memory.html @@ -44,7 +44,7 @@ let camera, scene, renderer, light; let generateMeshes = true; let mesh; - let postProcessing; + let renderPipeline; let aoNode, outlineNode, scenePass, prePass; const selectedObjects = []; @@ -143,10 +143,10 @@ function updatePostProcessing() { - if ( postProcessing ) { + if ( renderPipeline ) { - postProcessing.dispose(); - postProcessing = null; + renderPipeline.dispose(); + renderPipeline = null; } @@ -180,7 +180,7 @@ if ( params.enablePP ) { - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); scenePass = pass( scene, camera ); let colorNode = scenePass; @@ -216,7 +216,7 @@ } - postProcessing.outputNode = colorNode; + renderPipeline.outputNode = colorNode; } @@ -283,9 +283,9 @@ } - if ( postProcessing ) { + if ( renderPipeline ) { - postProcessing.render(); + renderPipeline.render(); } else { diff --git a/examples/webgpu_tsl_vfx_linkedparticles.html b/examples/webgpu_tsl_vfx_linkedparticles.html index 9ef2edc1648c7a..1eb85f76eb6663 100644 --- a/examples/webgpu_tsl_vfx_linkedparticles.html +++ b/examples/webgpu_tsl_vfx_linkedparticles.html @@ -43,7 +43,7 @@ import WebGPU from 'three/addons/capabilities/WebGPU.js'; - let camera, scene, renderer, postProcessing, controls, timer, light; + let camera, scene, renderer, renderPipeline, controls, timer, light; let updateParticles, spawnParticles; // TSL compute nodes let getInstanceColor; // TSL function @@ -356,14 +356,14 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode( 'output' ); const bloomPass = bloom( scenePassColor, 0.75, 0.1, 0.5 ); - postProcessing.outputNode = scenePassColor.add( bloomPass ); + renderPipeline.outputNode = scenePassColor.add( bloomPass ); // controls @@ -462,7 +462,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_tsl_vfx_tornado.html b/examples/webgpu_tsl_vfx_tornado.html index 999eebfaf626b8..07ec9e922e0cfd 100644 --- a/examples/webgpu_tsl_vfx_tornado.html +++ b/examples/webgpu_tsl_vfx_tornado.html @@ -41,7 +41,7 @@ import { Inspector } from 'three/addons/inspector/Inspector.js'; - let camera, scene, renderer, postProcessing, controls; + let camera, scene, renderer, renderPipeline, controls; init(); @@ -288,14 +288,14 @@ // post processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); const scenePass = pass( scene, camera ); const scenePassColor = scenePass.getTextureNode( 'output' ); const bloomPass = bloom( scenePassColor, 1, 0.1, 1 ); - postProcessing.outputNode = scenePassColor.add( bloomPass ); + renderPipeline.outputNode = scenePassColor.add( bloomPass ); // controls @@ -336,7 +336,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_volume_caustics.html b/examples/webgpu_volume_caustics.html index ba4e5308897131..8329ab6c939d2d 100644 --- a/examples/webgpu_volume_caustics.html +++ b/examples/webgpu_volume_caustics.html @@ -46,7 +46,7 @@ import { bloom } from 'three/addons/tsl/display/BloomNode.js'; let camera, scene, renderer, controls; - let postProcessing; + let renderPipeline; let gltf; init(); @@ -179,7 +179,7 @@ // Post-Processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // Layers @@ -294,7 +294,7 @@ const scenePassColor = scenePass.add( bloomPass.mul( volumetricLightingIntensity ) ); - postProcessing.outputNode = scenePassColor; + renderPipeline.outputNode = scenePassColor; // Controls @@ -326,7 +326,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_volume_lighting.html b/examples/webgpu_volume_lighting.html index f0b83439056e90..8e97b4db49a9de 100644 --- a/examples/webgpu_volume_lighting.html +++ b/examples/webgpu_volume_lighting.html @@ -46,7 +46,7 @@ let renderer, scene, camera; let volumetricMesh, teapot, pointLight, spotLight; - let postProcessing; + let renderPipeline; init(); @@ -193,7 +193,7 @@ // Post-Processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // Layers @@ -227,7 +227,7 @@ const scenePassColor = scenePass.add( blurredVolumetricPass.mul( volumetricLightingIntensity ) ); - postProcessing.outputNode = scenePassColor; + renderPipeline.outputNode = scenePassColor; // GUI @@ -252,8 +252,8 @@ const scenePassColor = scenePass.add( volumetric.mul( volumetricLightingIntensity ) ); - postProcessing.outputNode = scenePassColor; - postProcessing.needsUpdate = true; + renderPipeline.outputNode = scenePassColor; + renderPipeline.needsUpdate = true; } ); @@ -290,7 +290,7 @@ teapot.rotation.y = time * 0.2; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_volume_lighting_rectarea.html b/examples/webgpu_volume_lighting_rectarea.html index 185623db3e333b..f674d5baf58470 100644 --- a/examples/webgpu_volume_lighting_rectarea.html +++ b/examples/webgpu_volume_lighting_rectarea.html @@ -48,7 +48,7 @@ let volumetricMesh; let rectLight1, rectLight2, rectLight3; let timer; - let postProcessing; + let renderPipeline; init(); @@ -216,7 +216,7 @@ // Post-Processing - postProcessing = new THREE.PostProcessing( renderer ); + renderPipeline = new THREE.RenderPipeline( renderer ); // Layers @@ -249,7 +249,7 @@ const scenePassColor = scenePass.add( blurredVolumetricPass.mul( volumetricLightingIntensity ) ); - postProcessing.outputNode = scenePassColor; + renderPipeline.outputNode = scenePassColor; // GUI @@ -274,8 +274,8 @@ const scenePassColor = scenePass.add( volumetric.mul( volumetricLightingIntensity ) ); - postProcessing.outputNode = scenePassColor; - postProcessing.needsUpdate = true; + renderPipeline.outputNode = scenePassColor; + renderPipeline.needsUpdate = true; } ); @@ -306,7 +306,7 @@ rectLight2.rotation.y += delta * .5; rectLight3.rotation.y += delta; - postProcessing.render(); + renderPipeline.render(); } diff --git a/examples/webgpu_water.html b/examples/webgpu_water.html index 802e868df846f0..ba8b75b8160e8c 100644 --- a/examples/webgpu_water.html +++ b/examples/webgpu_water.html @@ -51,7 +51,7 @@ import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; - let scene, camera, renderer, water, postProcessing, controls; + let scene, camera, renderer, water, renderPipeline, controls; const params = { color: '#99e0ff', @@ -182,8 +182,8 @@ // postprocessing - postProcessing = new THREE.PostProcessing( renderer ); - postProcessing.outputColorTransform = false; + renderPipeline = new THREE.RenderPipeline( renderer ); + renderPipeline.outputColorTransform = false; const scenePass = pass( scene, camera ); scenePass.setMRT( mrt( { @@ -199,7 +199,7 @@ const outputPass = renderOutput( beautyPass.add( bloomPass ) ); const fxaaPass = fxaa( outputPass ); - postProcessing.outputNode = fxaaPass; + renderPipeline.outputNode = fxaaPass; // gui @@ -254,7 +254,7 @@ controls.update(); - postProcessing.render(); + renderPipeline.render(); } diff --git a/src/Three.WebGPU.Nodes.js b/src/Three.WebGPU.Nodes.js index 7b55fe53ca323d..771a500e011912 100644 --- a/src/Three.WebGPU.Nodes.js +++ b/src/Three.WebGPU.Nodes.js @@ -6,6 +6,7 @@ export { default as Lighting } from './renderers/common/Lighting.js'; export { default as BundleGroup } from './renderers/common/BundleGroup.js'; export { default as QuadMesh } from './renderers/common/QuadMesh.js'; export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js'; +export { default as RenderPipeline } from './renderers/common/RenderPipeline.js'; export { default as PostProcessing } from './renderers/common/PostProcessing.js'; import * as RendererUtils from './renderers/common/RendererUtils.js'; export { RendererUtils }; diff --git a/src/Three.WebGPU.js b/src/Three.WebGPU.js index 6435a35f72dc76..f6fedf52a4c95f 100644 --- a/src/Three.WebGPU.js +++ b/src/Three.WebGPU.js @@ -6,6 +6,7 @@ export { default as Lighting } from './renderers/common/Lighting.js'; export { default as BundleGroup } from './renderers/common/BundleGroup.js'; export { default as QuadMesh } from './renderers/common/QuadMesh.js'; export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js'; +export { default as RenderPipeline } from './renderers/common/RenderPipeline.js'; export { default as PostProcessing } from './renderers/common/PostProcessing.js'; import * as RendererUtils from './renderers/common/RendererUtils.js'; export { RendererUtils }; diff --git a/src/nodes/display/PassNode.js b/src/nodes/display/PassNode.js index c213e605063d9a..2a7d1001b25c53 100644 --- a/src/nodes/display/PassNode.js +++ b/src/nodes/display/PassNode.js @@ -150,7 +150,7 @@ class PassMultipleTextureNode extends PassTextureNode { * via MRT for further processing. * * ```js - * const postProcessing = new PostProcessing( renderer ); + * const postProcessing = new RenderPipeline( renderer ); * * const scenePass = pass( scene, camera ); * diff --git a/src/nodes/display/RenderOutputNode.js b/src/nodes/display/RenderOutputNode.js index 8b5f7e3ecd9755..4583d212170d61 100644 --- a/src/nodes/display/RenderOutputNode.js +++ b/src/nodes/display/RenderOutputNode.js @@ -13,10 +13,10 @@ import { ColorManagement } from '../../math/ColorManagement.js'; * in the effect chain. * * When applying tone mapping and color space conversion manually with this node, - * you have to set {@link PostProcessing#outputColorTransform} to `false`. + * you have to set {@link RenderPipeline#outputColorTransform} to `false`. * * ```js - * const postProcessing = new PostProcessing( renderer ); + * const postProcessing = new RenderPipeline( renderer ); * postProcessing.outputColorTransform = false; * * const scenePass = pass( scene, camera ); diff --git a/src/nodes/display/ToonOutlinePassNode.js b/src/nodes/display/ToonOutlinePassNode.js index ada1cf72aa027c..3d69d445072fb7 100644 --- a/src/nodes/display/ToonOutlinePassNode.js +++ b/src/nodes/display/ToonOutlinePassNode.js @@ -14,7 +14,7 @@ import PassNode from './PassNode.js'; * will receive the outline. * * ```js - * const postProcessing = new PostProcessing( renderer ); + * const postProcessing = new RenderPipeline( renderer ); * * const scenePass = toonOutlinePass( scene, camera ); * diff --git a/src/renderers/common/PostProcessing.js b/src/renderers/common/PostProcessing.js index 3c7cadffd8153c..5abb9dac9512af 100644 --- a/src/renderers/common/PostProcessing.js +++ b/src/renderers/common/PostProcessing.js @@ -1,223 +1,25 @@ -import NodeMaterial from '../../materials/nodes/NodeMaterial.js'; -import { ColorManagement } from '../../math/ColorManagement.js'; -import { vec4, renderOutput } from '../../nodes/TSL.js'; -import { NoToneMapping } from '../../constants.js'; -import QuadMesh from '../../renderers/common/QuadMesh.js'; +import RenderPipeline from './RenderPipeline.js'; import { warnOnce } from '../../utils.js'; /** - * This module is responsible to manage the post processing setups in apps. - * You usually create a single instance of this class and use it to define - * the output of your post processing effect chain. - * ```js - * const postProcessing = new PostProcessing( renderer ); + * @deprecated since r183. Use {@link RenderPipeline} instead. PostProcessing has been renamed to RenderPipeline. * - * const scenePass = pass( scene, camera ); - * - * postProcessing.outputNode = scenePass; - * ``` - * - * Note: This module can only be used with `WebGPURenderer`. + * This class is a wrapper for backward compatibility and will be removed in a future version. */ -class PostProcessing { +class PostProcessing extends RenderPipeline { /** * Constructs a new post processing management module. * * @param {Renderer} renderer - A reference to the renderer. * @param {Node} outputNode - An optional output node. + * @deprecated since r183. Use {@link RenderPipeline} instead. */ - constructor( renderer, outputNode = vec4( 0, 0, 1, 1 ) ) { - - /** - * A reference to the renderer. - * - * @type {Renderer} - */ - this.renderer = renderer; - - /** - * A node which defines the final output of the post - * processing. This is usually the last node in a chain - * of effect nodes. - * - * @type {Node} - */ - this.outputNode = outputNode; - - /** - * Whether the default output tone mapping and color - * space transformation should be enabled or not. - * - * It is enabled by default by it must be disabled when - * effects must be executed after tone mapping and color - * space conversion. A typical example is FXAA which - * requires sRGB input. - * - * When set to `false`, the app must control the output - * transformation with `RenderOutputNode`. - * - * ```js - * const outputPass = renderOutput( scenePass ); - * ``` - * - * @type {boolean} - */ - this.outputColorTransform = true; - - /** - * Must be set to `true` when the output node changes. - * - * @type {Node} - */ - this.needsUpdate = true; - - const material = new NodeMaterial(); - material.name = 'PostProcessing'; - - /** - * The full screen quad that is used to render - * the effects. - * - * @private - * @type {QuadMesh} - */ - this._quadMesh = new QuadMesh( material ); - this._quadMesh.name = 'Post-Processing'; - - /** - * The context of the post processing stack. - * - * @private - * @type {?Object} - * @default null - */ - this._context = null; - - } - - /** - * When `PostProcessing` is used to apply post processing effects, - * the application must use this version of `render()` inside - * its animation loop (not the one from the renderer). - */ - render() { - - const renderer = this.renderer; - - this._update(); - - if ( this._context.onBeforePostProcessing !== null ) this._context.onBeforePostProcessing(); - - const toneMapping = renderer.toneMapping; - const outputColorSpace = renderer.outputColorSpace; - - renderer.toneMapping = NoToneMapping; - renderer.outputColorSpace = ColorManagement.workingColorSpace; - - // - - const currentXR = renderer.xr.enabled; - renderer.xr.enabled = false; - - this._quadMesh.render( renderer ); - - renderer.xr.enabled = currentXR; - - // - - renderer.toneMapping = toneMapping; - renderer.outputColorSpace = outputColorSpace; - - if ( this._context.onAfterPostProcessing !== null ) this._context.onAfterPostProcessing(); - - } - - /** - * Returns the current context of the post processing stack. - * - * @readonly - * @type {?Object} - */ - get context() { - - return this._context; - - } - - /** - * Frees internal resources. - */ - dispose() { - - this._quadMesh.material.dispose(); - - } - - /** - * Updates the state of the module. - * - * @private - */ - _update() { - - if ( this.needsUpdate === true ) { - - const renderer = this.renderer; - - const toneMapping = renderer.toneMapping; - const outputColorSpace = renderer.outputColorSpace; - - const context = { - postProcessing: this, - onBeforePostProcessing: null, - onAfterPostProcessing: null - }; - - let outputNode = this.outputNode; - - if ( this.outputColorTransform === true ) { - - outputNode = outputNode.context( context ); - - outputNode = renderOutput( outputNode, toneMapping, outputColorSpace ); - - } else { - - context.toneMapping = toneMapping; - context.outputColorSpace = outputColorSpace; - - outputNode = outputNode.context( context ); - - } - - this._context = context; - - this._quadMesh.material.fragmentNode = outputNode; - this._quadMesh.material.needsUpdate = true; - - this.needsUpdate = false; - - } - - } - - /** - * When `PostProcessing` is used to apply post processing effects, - * the application must use this version of `renderAsync()` inside - * its animation loop (not the one from the renderer). - * - * @async - * @deprecated - * @return {Promise} A Promise that resolves when the render has been finished. - */ - async renderAsync() { - - warnOnce( 'PostProcessing: "renderAsync()" has been deprecated. Use "render()" and "await renderer.init();" when creating the renderer.' ); // @deprecated r181 + constructor( renderer, outputNode ) { - await this.renderer.init(); + warnOnce( 'PostProcessing: "PostProcessing" has been renamed to "RenderPipeline". Please update your code to use "THREE.RenderPipeline" instead.' ); // @deprecated, r183 - this.render(); + super( renderer, outputNode ); } diff --git a/src/renderers/common/RenderPipeline.js b/src/renderers/common/RenderPipeline.js new file mode 100644 index 00000000000000..0eb2855acf54d8 --- /dev/null +++ b/src/renderers/common/RenderPipeline.js @@ -0,0 +1,226 @@ +import NodeMaterial from '../../materials/nodes/NodeMaterial.js'; +import { ColorManagement } from '../../math/ColorManagement.js'; +import { vec4, renderOutput } from '../../nodes/TSL.js'; +import { NoToneMapping } from '../../constants.js'; +import QuadMesh from '../../renderers/common/QuadMesh.js'; +import { warnOnce } from '../../utils.js'; + +/** + * This module is responsible to manage the rendering pipeline setups in apps. + * You usually create a single instance of this class and use it to define + * the output of your render pipeline and post processing effect chain. + * ```js + * const renderPipeline = new RenderPipeline( renderer ); + * + * const scenePass = pass( scene, camera ); + * + * renderPipeline.outputNode = scenePass; + * ``` + * + * Note: This module can only be used with `WebGPURenderer`. + */ +class RenderPipeline { + + /** + * Constructs a new render pipeline management module. + * + * @param {Renderer} renderer - A reference to the renderer. + * @param {Node} outputNode - An optional output node. + */ + constructor( renderer, outputNode = vec4( 0, 0, 1, 1 ) ) { + + /** + * A reference to the renderer. + * + * @type {Renderer} + */ + this.renderer = renderer; + + /** + * A node which defines the final output of the rendering + * pipeline. This is usually the last node in a chain + * of effect nodes. + * + * @type {Node} + */ + this.outputNode = outputNode; + + /** + * Whether the default output tone mapping and color + * space transformation should be enabled or not. + * + * It is enabled by default by it must be disabled when + * effects must be executed after tone mapping and color + * space conversion. A typical example is FXAA which + * requires sRGB input. + * + * When set to `false`, the app must control the output + * transformation with `RenderOutputNode`. + * + * ```js + * const outputPass = renderOutput( scenePass ); + * ``` + * + * @type {boolean} + */ + this.outputColorTransform = true; + + /** + * Must be set to `true` when the output node changes. + * + * @type {Node} + */ + this.needsUpdate = true; + + const material = new NodeMaterial(); + material.name = 'RenderPipeline'; + + /** + * The full screen quad that is used to render + * the effects. + * + * @private + * @type {QuadMesh} + */ + this._quadMesh = new QuadMesh( material ); + this._quadMesh.name = 'Render Pipeline'; + + /** + * The context of the render pipeline stack. + * + * @private + * @type {?Object} + * @default null + */ + this._context = null; + + } + + /** + * When `RenderPipeline` is used to apply rendering pipeline and post processing effects, + * the application must use this version of `render()` inside + * its animation loop (not the one from the renderer). + */ + render() { + + const renderer = this.renderer; + + this._update(); + + if ( this._context.onBeforeRenderPipeline !== null ) this._context.onBeforeRenderPipeline(); + + const toneMapping = renderer.toneMapping; + const outputColorSpace = renderer.outputColorSpace; + + renderer.toneMapping = NoToneMapping; + renderer.outputColorSpace = ColorManagement.workingColorSpace; + + // + + const currentXR = renderer.xr.enabled; + renderer.xr.enabled = false; + + this._quadMesh.render( renderer ); + + renderer.xr.enabled = currentXR; + + // + + renderer.toneMapping = toneMapping; + renderer.outputColorSpace = outputColorSpace; + + if ( this._context.onAfterRenderPipeline !== null ) this._context.onAfterRenderPipeline(); + + } + + /** + * Returns the current context of the render pipeline stack. + * + * @readonly + * @type {?Object} + */ + get context() { + + return this._context; + + } + + /** + * Frees internal resources. + */ + dispose() { + + this._quadMesh.material.dispose(); + + } + + /** + * Updates the state of the module. + * + * @private + */ + _update() { + + if ( this.needsUpdate === true ) { + + const renderer = this.renderer; + + const toneMapping = renderer.toneMapping; + const outputColorSpace = renderer.outputColorSpace; + + const context = { + renderPipeline: this, + onBeforeRenderPipeline: null, + onAfterRenderPipeline: null + }; + + let outputNode = this.outputNode; + + if ( this.outputColorTransform === true ) { + + outputNode = outputNode.context( context ); + + outputNode = renderOutput( outputNode, toneMapping, outputColorSpace ); + + } else { + + context.toneMapping = toneMapping; + context.outputColorSpace = outputColorSpace; + + outputNode = outputNode.context( context ); + + } + + this._context = context; + + this._quadMesh.material.fragmentNode = outputNode; + this._quadMesh.material.needsUpdate = true; + + this.needsUpdate = false; + + } + + } + + /** + * When `RenderPipeline` is used to apply rendering pipeline and post processing effects, + * the application must use this version of `renderAsync()` inside + * its animation loop (not the one from the renderer). + * + * @async + * @deprecated + * @return {Promise} A Promise that resolves when the render has been finished. + */ + async renderAsync() { + + warnOnce( 'RenderPipeline: "renderAsync()" has been deprecated. Use "render()" and "await renderer.init();" when creating the renderer.' ); // @deprecated r181 + + await this.renderer.init(); + + this.render(); + + } + +} + +export default RenderPipeline;