diff --git a/examples/screenshots/webgpu_postprocessing_ao.jpg b/examples/screenshots/webgpu_postprocessing_ao.jpg index d97c2dbd9d9a81..a8e0bef975666a 100644 Binary files a/examples/screenshots/webgpu_postprocessing_ao.jpg and b/examples/screenshots/webgpu_postprocessing_ao.jpg differ diff --git a/examples/webgpu_postprocessing_ao.html b/examples/webgpu_postprocessing_ao.html index 54e33af74b983c..4d25758657d01a 100644 --- a/examples/webgpu_postprocessing_ao.html +++ b/examples/webgpu_postprocessing_ao.html @@ -28,9 +28,15 @@ import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import Stats from 'three/addons/libs/stats.module.js'; + import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; let camera, scene, renderer, postProcessing, controls, clock, stats, mixer; + const params = { + blendIntensity: 1, + enabled: true + }; + init(); async function init() { @@ -102,6 +108,31 @@ window.addEventListener( 'resize', onWindowResize ); + // + + const gui = new GUI(); + gui.title( 'AO settings' ); + gui.add( params, 'blendIntensity' ).min( 0 ).max( 1 ).onChange( ( value ) => { + + aoPass.blendIntensity.value = value; + + } ); + gui.add( params, 'enabled' ).onChange( ( value ) => { + + if ( value === true ) { + + postProcessing.outputNode = aoPass; + + } else { + + postProcessing.outputNode = scenePassColor; + + } + + postProcessing.needsUpdate = true; + + } ); + } function onWindowResize() { diff --git a/src/nodes/display/GTAONode.js b/src/nodes/display/GTAONode.js index f306ebfd645388..6113c7aa0dbb85 100644 --- a/src/nodes/display/GTAONode.js +++ b/src/nodes/display/GTAONode.js @@ -36,6 +36,7 @@ class GTAONode extends TempNode { this.distanceExponent = uniform( 1 ); this.distanceFallOff = uniform( 1 ); this.scale = uniform( 1 ); + this.blendIntensity = uniform( 1 ); this.noiseNode = texture( generateMagicSquareNoise() ); this.cameraProjectionMatrix = uniform( camera.projectionMatrix ); @@ -53,12 +54,6 @@ class GTAONode extends TempNode { } - getTextureNode() { - - return this._textureNode; - - } - setSize( width, height ) { this.resolution.value.set( width, height ); @@ -115,7 +110,7 @@ class GTAONode extends TempNode { const uvNode = uv(); - // const sampleTexture = ( uv ) => textureNode.uv( uv ); + const sampleTexture = ( uv ) => textureNode.uv( uv ); const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x; const sampleNoise = ( uv ) => this.noiseNode.uv( uv ); @@ -228,18 +223,22 @@ class GTAONode extends TempNode { } ); + const composite = tslFn( () => { + + const beauty = sampleTexture( uvNode ); + const ao = this._textureNode.uv( uvNode ); + + return beauty.mul( mix( vec3( 1.0 ), ao, this.blendIntensity ) ); + + } ); + const material = this._material || ( this._material = builder.createNodeMaterial() ); material.fragmentNode = ao().context( builder.getSharedContext() ); material.needsUpdate = true; // - const properties = builder.getNodeProperties( this ); - properties.textureNode = textureNode; - - // - - return this._textureNode; + return composite(); }