|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | | - <title>three.js webgpu - ambient occlusion (GTAO)</title> |
| 4 | + <title>three.js webgpu - ambient occlusion</title> |
5 | 5 | <meta charset="utf-8"> |
6 | 6 | <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> |
7 | 7 | <link type="text/css" rel="stylesheet" href="main.css"> |
|
37 | 37 | import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js'; |
38 | 38 | import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; |
39 | 39 |
|
40 | | - import Stats from 'three/addons/libs/stats.module.js'; |
41 | 40 | import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; |
42 | 41 |
|
43 | | - let camera, scene, renderer, postProcessing, controls, stats; |
| 42 | + let camera, scene, renderer, postProcessing, controls; |
44 | 43 |
|
45 | 44 | let aoPass, denoisePass, blendPassAO, blendPassDenoise, scenePassColor; |
46 | 45 |
|
|
67 | 66 |
|
68 | 67 | scene = new THREE.Scene(); |
69 | 68 |
|
70 | | - renderer = new THREE.WebGPURenderer(); |
| 69 | + renderer = new THREE.WebGPURenderer( { antialias: true } ); |
71 | 70 | renderer.setPixelRatio( window.devicePixelRatio ); |
72 | 71 | renderer.setSize( window.innerWidth, window.innerHeight ); |
73 | 72 | renderer.setAnimationLoop( animate ); |
|
93 | 92 | controls.minDistance = 2; |
94 | 93 | controls.maxDistance = 8; |
95 | 94 |
|
96 | | - stats = new Stats(); |
97 | | - document.body.appendChild( stats.dom ); |
98 | | - |
99 | 95 | // |
100 | 96 |
|
101 | 97 | postProcessing = new THREE.PostProcessing( renderer ); |
|
113 | 109 | // ao |
114 | 110 |
|
115 | 111 | aoPass = ao( scenePassDepth, scenePassNormal, camera ); |
116 | | - aoPass.resolutionScale = 0.5; |
| 112 | + aoPass.resolutionScale = 0.5; // running AO in half resolution is often sufficient |
117 | 113 | blendPassAO = aoPass.getTextureNode().mul( scenePassColor ); |
118 | 114 |
|
119 | | - // denoise (optional) |
| 115 | + // denoise (optional, use it if you need best quality but is has a noticeable hit on performance) |
120 | 116 |
|
121 | 117 | denoisePass = denoise( aoPass.getTextureNode(), scenePassDepth, scenePassNormal, camera ); |
122 | 118 | blendPassDenoise = denoisePass.mul( scenePassColor ); |
|
229 | 225 | controls.update(); |
230 | 226 |
|
231 | 227 | postProcessing.render(); |
232 | | - stats.update(); |
233 | 228 |
|
234 | 229 | } |
235 | 230 |
|
|
0 commit comments