Skip to content

Commit 0c11af3

Browse files
authored
GTAONode: Implement composite. (#28851)
* GTAONode: Implement composite. * Examples: Clean up.
1 parent 3230889 commit 0c11af3

File tree

3 files changed

+43
-13
lines changed

3 files changed

+43
-13
lines changed
21.3 KB
Loading

examples/webgpu_postprocessing_ao.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,15 @@
2828
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
2929

3030
import Stats from 'three/addons/libs/stats.module.js';
31+
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
3132

3233
let camera, scene, renderer, postProcessing, controls, clock, stats, mixer;
3334

35+
const params = {
36+
blendIntensity: 1,
37+
enabled: true
38+
};
39+
3440
init();
3541

3642
async function init() {
@@ -102,6 +108,31 @@
102108

103109
window.addEventListener( 'resize', onWindowResize );
104110

111+
//
112+
113+
const gui = new GUI();
114+
gui.title( 'AO settings' );
115+
gui.add( params, 'blendIntensity' ).min( 0 ).max( 1 ).onChange( ( value ) => {
116+
117+
aoPass.blendIntensity.value = value;
118+
119+
} );
120+
gui.add( params, 'enabled' ).onChange( ( value ) => {
121+
122+
if ( value === true ) {
123+
124+
postProcessing.outputNode = aoPass;
125+
126+
} else {
127+
128+
postProcessing.outputNode = scenePassColor;
129+
130+
}
131+
132+
postProcessing.needsUpdate = true;
133+
134+
} );
135+
105136
}
106137

107138
function onWindowResize() {

src/nodes/display/GTAONode.js

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ class GTAONode extends TempNode {
3636
this.distanceExponent = uniform( 1 );
3737
this.distanceFallOff = uniform( 1 );
3838
this.scale = uniform( 1 );
39+
this.blendIntensity = uniform( 1 );
3940
this.noiseNode = texture( generateMagicSquareNoise() );
4041

4142
this.cameraProjectionMatrix = uniform( camera.projectionMatrix );
@@ -53,12 +54,6 @@ class GTAONode extends TempNode {
5354

5455
}
5556

56-
getTextureNode() {
57-
58-
return this._textureNode;
59-
60-
}
61-
6257
setSize( width, height ) {
6358

6459
this.resolution.value.set( width, height );
@@ -115,7 +110,7 @@ class GTAONode extends TempNode {
115110

116111
const uvNode = uv();
117112

118-
// const sampleTexture = ( uv ) => textureNode.uv( uv );
113+
const sampleTexture = ( uv ) => textureNode.uv( uv );
119114
const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x;
120115
const sampleNoise = ( uv ) => this.noiseNode.uv( uv );
121116

@@ -228,18 +223,22 @@ class GTAONode extends TempNode {
228223

229224
} );
230225

226+
const composite = tslFn( () => {
227+
228+
const beauty = sampleTexture( uvNode );
229+
const ao = this._textureNode.uv( uvNode );
230+
231+
return beauty.mul( mix( vec3( 1.0 ), ao, this.blendIntensity ) );
232+
233+
} );
234+
231235
const material = this._material || ( this._material = builder.createNodeMaterial() );
232236
material.fragmentNode = ao().context( builder.getSharedContext() );
233237
material.needsUpdate = true;
234238

235239
//
236240

237-
const properties = builder.getNodeProperties( this );
238-
properties.textureNode = textureNode;
239-
240-
//
241-
242-
return this._textureNode;
241+
return composite();
243242

244243
}
245244

0 commit comments

Comments
 (0)