|
36 | 36 | import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; |
37 | 37 |
|
38 | 38 | import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; |
39 | | - import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; |
40 | 39 | import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; |
41 | 40 | import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; |
42 | | - import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; |
43 | | - import { FXAAShader } from 'three/addons/shaders/FXAAShader.js'; |
| 41 | + import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js'; |
44 | 42 |
|
45 | 43 | let composer, camera, scene, renderer; |
46 | | - let gui, dirLight, pointLight, controls, bloomPass, fxaaPass; |
| 44 | + let gui, dirLight, pointLight, controls, bloomPass, taaPass; |
47 | 45 | let ready = false; |
48 | 46 |
|
49 | 47 | const meshes = {}; |
|
217 | 215 |
|
218 | 216 | if ( composer ) return; |
219 | 217 |
|
220 | | - const renderPass = new RenderPass( scene, camera ); |
221 | | - const outputPass = new OutputPass(); |
222 | | - |
223 | 218 | bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); |
224 | 219 | bloomPass.threshold = setting.threshold; |
225 | 220 | bloomPass.strength = setting.strength; |
226 | 221 | bloomPass.radius = setting.radius; |
227 | 222 |
|
228 | | - fxaaPass = new ShaderPass( FXAAShader ); |
229 | | - const pixelRatio = renderer.getPixelRatio(); |
230 | | - fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( window.innerWidth * pixelRatio ), 1 / ( window.innerHeight * pixelRatio ) ); |
| 223 | + taaPass = new TAARenderPass( scene, camera ); |
| 224 | + taaPass.sampleLevel = 2; |
| 225 | + taaPass.unbiased = false; |
231 | 226 |
|
232 | 227 | composer = new EffectComposer( renderer ); |
233 | | - composer.setPixelRatio( pixelRatio ); |
| 228 | + composer.setPixelRatio( window.devicePixelRatio ); |
| 229 | + composer.setSize( window.innerWidth, window.innerHeight ); |
234 | 230 |
|
235 | | - composer.addPass( renderPass ); |
| 231 | + composer.addPass( taaPass ); |
236 | 232 | composer.addPass( bloomPass ); |
237 | | - composer.addPass( fxaaPass ); |
238 | | - composer.addPass( outputPass ); |
239 | | - composer.addPass( fxaaPass ); |
240 | | - composer.addPass( fxaaPass ); |
| 233 | + composer.addPass( new OutputPass() ); |
241 | 234 |
|
242 | 235 | } else { |
243 | 236 |
|
244 | 237 | if ( ! composer ) return; |
245 | 238 | composer.dispose(); |
246 | 239 | composer = null; |
247 | 240 | bloomPass = null; |
248 | | - fxaaPass = null; |
| 241 | + taaPass = null; |
249 | 242 |
|
250 | 243 | } |
251 | 244 |
|
|
316 | 309 | if ( composer ) { |
317 | 310 |
|
318 | 311 | composer.setSize( width, height ); |
319 | | - if ( fxaaPass ) { |
320 | | - |
321 | | - const pr = renderer.getPixelRatio(); |
322 | | - fxaaPass.material.uniforms[ 'resolution' ].value.set( 1 / ( width * pr ), 1 / ( height * pr ) ); |
323 | | - |
324 | | - } |
325 | 312 |
|
326 | 313 | } |
327 | 314 |
|
|
0 commit comments