Skip to content

Commit 3230889

Browse files
Mugen87sunag
Mugen87
and
sunag
authored
Nodes: Add GTAONode. (#28844)
* Nodes: Add `GTAONode`. * GTAONode: Clean up. * set derivative_uniformity diagnostic to off * GTAONode: Add internal pass with correct clear color. * Clean up. * GTAONode: Couple of fixes. * GTAONode: Clean up. * GTAONode: Fix loop. * GTAONode: Fix normal buffer values. * GTAONode: Use correct camera. * GTAONode: Use `positionView`. * GTAONode: Use `transformedNormalView`. * Clean up. * GTAONode: Add multiple fixes. * GTANode: More fixes. * GTAONode: Use `vec4` in `getSceneUvAndDepth()`. * GTAONode: Fix assignment of `ao`. * GTAONode: Attempt to fix `getSceneUvAndDepth()`. * GTAONode: Fix y-sampling. * E2E: Update screenshot. * Examples: Add back color space conversion. * E2E: Add example to exception list. --------- Co-authored-by: sunag <sunagbrasil@gmail.com>
1 parent dbfc594 commit 3230889

File tree

7 files changed

+479
-0
lines changed

7 files changed

+479
-0
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,7 @@
373373
"webgpu_postprocessing_3dlut",
374374
"webgpu_postprocessing_afterimage",
375375
"webgpu_postprocessing_anamorphic",
376+
"webgpu_postprocessing_ao",
376377
"webgpu_postprocessing_dof",
377378
"webgpu_postprocessing_sobel",
378379
"webgpu_postprocessing",

‎examples/screenshots/webgpu_postprocessing_ao.jpg‎

23.1 KB
Loading

‎examples/webgpu_postprocessing_ao.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgpu - ambient occlusion (GTAO)</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="main.css">
8+
</head>
9+
<body>
10+
<script type="importmap">
11+
{
12+
"imports": {
13+
"three": "../build/three.webgpu.js",
14+
"three/tsl": "../build/three.webgpu.js",
15+
"three/addons/": "./jsm/"
16+
}
17+
}
18+
</script>
19+
20+
<script type="module">
21+
22+
import * as THREE from 'three';
23+
import { pass, mrt, output, transformedNormalView } from 'three/tsl';
24+
25+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
26+
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
27+
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
28+
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
29+
30+
import Stats from 'three/addons/libs/stats.module.js';
31+
32+
let camera, scene, renderer, postProcessing, controls, clock, stats, mixer;
33+
34+
init();
35+
36+
async function init() {
37+
38+
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
39+
camera.position.set( 5, 2, 8 );
40+
41+
scene = new THREE.Scene();
42+
scene.background = new THREE.Color( 0xbfe3dd );
43+
44+
clock = new THREE.Clock();
45+
46+
const hdrloader = new RGBELoader();
47+
const texture = await hdrloader.loadAsync( 'textures/equirectangular/quarry_01_1k.hdr' );
48+
texture.mapping = THREE.EquirectangularReflectionMapping;
49+
50+
scene.environment = texture;
51+
52+
renderer = new THREE.WebGPURenderer();
53+
renderer.setSize( window.innerWidth, window.innerHeight );
54+
renderer.setAnimationLoop( animate );
55+
document.body.appendChild( renderer.domElement );
56+
57+
controls = new OrbitControls( camera, renderer.domElement );
58+
controls.target.set( 0, 0.5, 0 );
59+
controls.update();
60+
controls.enablePan = false;
61+
controls.enableDamping = true;
62+
63+
stats = new Stats();
64+
document.body.appendChild( stats.dom );
65+
66+
//
67+
68+
postProcessing = new THREE.PostProcessing( renderer );
69+
70+
const scenePass = pass( scene, camera );
71+
scenePass.setMRT( mrt( {
72+
output: output,
73+
normal: transformedNormalView
74+
} ) );
75+
76+
const scenePassColor = scenePass.getTextureNode( 'output' );
77+
const scenePassNormal = scenePass.getTextureNode( 'normal' );
78+
const scenePassDepth = scenePass.getTextureNode( 'depth' );
79+
80+
const aoPass = scenePassColor.ao( scenePassDepth, scenePassNormal, camera );
81+
82+
postProcessing.outputNode = aoPass;
83+
84+
//
85+
86+
const dracoLoader = new DRACOLoader();
87+
dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
88+
dracoLoader.setDecoderConfig( { type: 'js' } );
89+
const loader = new GLTFLoader();
90+
loader.setDRACOLoader( dracoLoader );
91+
loader.setPath( 'models/gltf/' );
92+
93+
const gltf = await loader.loadAsync( 'LittlestTokyo.glb' );
94+
95+
const model = gltf.scene;
96+
model.position.set( 1, 1, 0 );
97+
model.scale.set( 0.01, 0.01, 0.01 );
98+
scene.add( model );
99+
100+
mixer = new THREE.AnimationMixer( model );
101+
mixer.clipAction( gltf.animations[ 0 ] ).play();
102+
103+
window.addEventListener( 'resize', onWindowResize );
104+
105+
}
106+
107+
function onWindowResize() {
108+
109+
const width = window.innerWidth;
110+
const height = window.innerHeight;
111+
112+
camera.aspect = width / height;
113+
camera.updateProjectionMatrix();
114+
115+
renderer.setSize( width, height );
116+
117+
}
118+
119+
function animate() {
120+
121+
const delta = clock.getDelta();
122+
123+
if ( mixer ) {
124+
125+
mixer.update( delta );
126+
127+
}
128+
129+
controls.update();
130+
131+
postProcessing.render();
132+
stats.update();
133+
134+
}
135+
136+
</script>
137+
</body>
138+
</html>

‎src/nodes/Nodes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ export { default as DotScreenNode, dotScreen } from './display/DotScreenNode.js'
134134
export { default as RGBShiftNode, rgbShift } from './display/RGBShiftNode.js';
135135
export { default as FilmNode, film } from './display/FilmNode.js';
136136
export { default as Lut3DNode, lut3D } from './display/Lut3DNode.js';
137+
export { default as GTAONode, ao } from './display/GTAONode.js';
137138
export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js';
138139

139140
export { default as PassNode, pass, passTexture, depthPass } from './display/PassNode.js';

0 commit comments

Comments
 (0)