Skip to content

Commit

Permalink
Examples: Prettified webgpu_postprocessing_ssr example.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Dec 20, 2024
1 parent 3d26186 commit 98170ef
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 5 deletions.
Binary file modified examples/screenshots/webgpu_postprocessing_ssr.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 15 additions & 5 deletions examples/webgpu_postprocessing_ssr.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
import * as THREE from 'three';
import { pass, mrt, output, transformedNormalView, metalness, blendColor, screenUV, color } from 'three/tsl';
import { ssr } from 'three/addons/tsl/display/SSRNode.js';
import { smaa } from 'three/addons/tsl/display/SMAANode.js';

import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Expand All @@ -40,7 +41,7 @@
import Stats from 'three/addons/libs/stats.module.js';

const params = {
maxDistance: 0.2,
maxDistance: 0.5,
opacity: 1,
thickness: 0.015,
enabled: true
Expand All @@ -54,10 +55,10 @@
async function init() {

camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 50 );
camera.position.set( 2.5, 2, 2.5 );
camera.position.set( 3, 2, 3 );

scene = new THREE.Scene();
scene.backgroundNode = screenUV.distance( .5 ).remap( 0, 0.5 ).mix( color( 0x666666 ), color( 0x393939 ) );
scene.backgroundNode = screenUV.distance( .5 ).remap( 0, 0.5 ).mix( color( 0x888877 ), color( 0x776666 ) );

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
Expand All @@ -67,6 +68,13 @@
loader.setDRACOLoader( dracoLoader );
loader.load( 'models/gltf/steampunk_camera.glb', function ( gltf ) {

gltf.scene.traverse( function ( object ) {
if ( object.material ) {
// Avoid overdrawing
object.material.side = THREE.FrontSide;
}
} );
gltf.scene.position.y = 0.1;
scene.add( gltf.scene );

} );
Expand All @@ -77,6 +85,7 @@
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.body.appendChild( renderer.domElement );

await renderer.init();
Expand All @@ -85,7 +94,7 @@
const pmremGenerator = new THREE.PMREMGenerator( renderer );

scene.environment = pmremGenerator.fromScene( environment ).texture;
scene.environmentIntensity = 0.75;
scene.environmentIntensity = 1.25;
pmremGenerator.dispose();

//
Expand All @@ -105,12 +114,13 @@
const scenePassMetalness = scenePass.getTextureNode( 'metalness' );

ssrPass = ssr( scenePassColor, scenePassDepth, scenePassNormal, scenePassMetalness, camera );
ssrPass.resolutionScale = 1.0;

// blend SSR over beauty

const outputNode = blendColor( scenePassColor, ssrPass );

postProcessing.outputNode = outputNode;
postProcessing.outputNode = smaa( outputNode );


//
Expand Down

4 comments on commit 98170ef

@Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented on 98170ef Dec 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

ssrPass.resolutionScale = 1.0;

I'm afraid this line noticeably decreases the performance on my 5K screen (FPS goes down from 60 to 26). In most cases, running SSR in half resolution is an optimal compromise between performance and quality. That's why the default is 0.5. Otherwise ray marching with that many pixels is computational too expensive. At least with the current implementation.

@mrdoob
Copy link
Owner Author

@mrdoob mrdoob commented on 98170ef Dec 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But then smaa doesn't work on the reflection pixels 🤔

@Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented on 98170ef Dec 26, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Um, probably because the reflections becomes to coarse.

It's just my personal subjective preference but I would like to see the examples actually hitting 60 FPS. A demo that runs at 25 FPS isn't a good showcase for any real interactive experience like a game.

How does the current SSR example on dev run on your devices? Maybe it's just my selection of devices that perform poorly. The mac Mini with a M2 Pro renders at 25 FPS and a Pixel 8a runs at 22 FPS. Transforming the camera does not feel well with this low framerate.

@mrdoob
Copy link
Owner Author

@mrdoob mrdoob commented on 98170ef Dec 30, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm yeah...

On the MacBook (M1 Pro) goes from 120 to 66.
On the Pixel 9 goes from 120 to 35.

Lets try disabling devicePixelRatio for this case.

2ef9864

Please sign in to comment.