Home Explore Help
Register Sign In
samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Improve `webgpu_postprocessing_ssr`. (#29878)

* Examples: Improve `webgpu_postprocessing_ssr`.

* E2E: Update exception list.
Michael Herzog 1 year ago
parent
2058544e2c
commit
651280b3c0
4 changed files with 21 additions and 70 deletions
Unified View Show Diff Stats
  1. BIN
      examples/models/gltf/steampunk_camera.glb
  2. BIN
      examples/screenshots/webgpu_postprocessing_ssr.jpg
  3. 20 70
      examples/webgpu_postprocessing_ssr.html
  4. 1 0
      test/e2e/puppeteer.js

BIN
examples/models/gltf/steampunk_camera.glb
View File


BIN
examples/screenshots/webgpu_postprocessing_ssr.jpg
View File


+ 20 - 70
examples/webgpu_postprocessing_ssr.html
View File 

@@ -4,19 +4,18 @@
 
 <head>
 
 <head>
 
 
 
 	<head>
 
 	<head>
 
-		<title>three.js webgpu - postprocessing - Screen Space Reflection</title>
 
+		<title>three.js webgpu - postprocessing - Screen Space Reflections (SSR)</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 	</head>
 
 	</head>
 
 
 
 <body>
 
 <body>
 
-	<div id="container"></div>
 
 	<div id="info">
 
 	<div id="info">
 
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
 
-		SSR demo by <a href="https://github.com/gonnavis" target="_blank">Vis</a>.<br />
 
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - postprocessing - screen space reflections<br />
 
+		<a href="https://skfb.ly/6tqYD" target="_blank" rel="noopener">Steampunk Camera</a> by 
+		<a href="https://sketchfab.com/lumoize" target="_blank" rel="noopener">dylanheyes</a> is licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener">Creative Commons Attribution</a>.<br />
 
 	</div>
 
 	</div>
 
-
 
 	<script type="importmap">
 
 	<script type="importmap">
 
 		{
 
 		{
 
 			"imports": {
 
 			"imports": {
 
@@ -29,92 +28,48 @@
 
 
 
 	<script type="module">
 
 	<script type="module">
 
 		import * as THREE from 'three';
 
 		import * as THREE from 'three';
 
-		import { pass, mrt, output, transformedNormalView, metalness, vec4/*, uniform*/ } from 'three/tsl';
 
+		import { pass, mrt, output, transformedNormalView, metalness, vec4, screenUV, color } from 'three/tsl';
 
 		import { ssr } from 'three/addons/tsl/display/SSRNode.js';
 
 		import { ssr } from 'three/addons/tsl/display/SSRNode.js';
 
 
 
 		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
 		import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
+		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 		import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
 		import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 		import Stats from 'three/addons/libs/stats.module.js';
 
 		import Stats from 'three/addons/libs/stats.module.js';
 
 
 
 		const params = {
 
 		const params = {
 
-			maxDistance: 0.1,
 
+			maxDistance: 0.2,
 
 			opacity: 1,
 
 			opacity: 1,
 
-			thickness: 0.018,
 
-			enabled: true,
 
-			autoRotate: false
 
+			thickness: 0.015,
 
+			enabled: true
 
 		};
 
 		};
 
 
 
 		let camera, scene, renderer, postProcessing, ssrPass;
 
 		let camera, scene, renderer, postProcessing, ssrPass;
 
 		let gui, stats, controls;
 
 		let gui, stats, controls;
 
 
 
-		// Configure and create Draco decoder.
 
-		const dracoLoader = new DRACOLoader();
 
-		dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
 
-		dracoLoader.setDecoderConfig( { type: 'js' } );
 
-
 
 		init();
 
 		init();
 
 
 
 		async function init() {
 
 		async function init() {
 
 
 
-			camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 15 );
 
-			camera.position.set( 0.1, 0.2, 0.5 );
 
+			camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 50 );
 
+			camera.position.set( 2.5, 2, 2.5 );
 
 
 
 			scene = new THREE.Scene();
 
 			scene = new THREE.Scene();
 
-			scene.fog = new THREE.Fog( 0x666666, 1, 4 );
 
-
 
-			// Ground
 
-			const plane = new THREE.Mesh(
 
-				new THREE.PlaneGeometry( 8, 8 ),
 
-				new THREE.MeshStandardNodeMaterial( { color: 0xcbcbcb } )
 
-			);
 
-		
-			// any node material can write custom MRT metalness values for controlling SSR
 
+			scene.backgroundNode = screenUV.distance( .5 ).remap( 0, 0.5 ).mix( color( 0x666666 ), color( 0x393939 ) );
 
 
 
-			// plane.material.mrtNode = mrt( {
 
-			// 	output: output,
 
-			// 	normal: transformedNormalView,
 
-			// 	metalness: uniform( 0.5 )
 
-			// } );
 
+			const dracoLoader = new DRACOLoader();
 
+			dracoLoader.setDecoderPath( 'jsm/libs/draco/' );
 
+			dracoLoader.setDecoderConfig( { type: 'js' } );
 
 		
 		
-			plane.rotation.x = - Math.PI / 2;
 
-			plane.position.y = - 0.0001;
 
-			scene.add( plane );
 
-
 
-			dracoLoader.load( 'models/draco/bunny.drc', function ( geometry ) {
 
-
 
-				geometry.computeVertexNormals();
 
+			const loader = new GLTFLoader();
 
+			loader.setDRACOLoader( dracoLoader );
 
+			loader.load( 'models/gltf/steampunk_camera.glb', function ( gltf ) {
 
 
 
-				const material = new THREE.MeshStandardNodeMaterial( { color: 0xa5a5a5, metalness: 1 } );
 
-				const mesh = new THREE.Mesh( geometry, material );
 
-				mesh.position.y = - 0.0365;
 
-				scene.add( mesh );
 
-
 
-				dracoLoader.dispose();
 
+				scene.add( gltf.scene );
 
 
 
 			} );
 
 			} );
 
 
 
-			let geometry, material, mesh;
 
-
 
-			geometry = new THREE.BoxGeometry( 0.05, 0.05, 0.05 );
 
-			material = new THREE.MeshStandardNodeMaterial( { color: 'green', metalness: 0.3 } );
 
-			mesh = new THREE.Mesh( geometry, material );
 
-			mesh.position.set( - 0.12, 0.025, 0.015 );
 
-			scene.add( mesh );
 
-
 
-			geometry = new THREE.IcosahedronGeometry( .025, 4 );
 
-			material = new THREE.MeshStandardNodeMaterial( { color: 'cyan', metalness: 0.5 } );
 
-			mesh = new THREE.Mesh( geometry, material );
 
-			mesh.position.set( - 0.05, 0.025, 0.08 );
 
-			scene.add( mesh );
 
-		
-			geometry = new THREE.ConeGeometry( 0.025, 0.05, 64 );
 
-			material = new THREE.MeshStandardNodeMaterial( { color: 'yellow', metalness: 0.4 } );
 
-			mesh = new THREE.Mesh( geometry, material );
 
-			mesh.position.set( - 0.05, 0.025, - 0.055 );
 
-			scene.add( mesh );
 
-
 
 			//
 
 			//
 
 
 
 			renderer = new THREE.WebGPURenderer();
 
 			renderer = new THREE.WebGPURenderer();
 
@@ -128,7 +83,6 @@
 
 			const environment = new RoomEnvironment();
 
 			const environment = new RoomEnvironment();
 
 			const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 			const pmremGenerator = new THREE.PMREMGenerator( renderer );
 
 
 
-			scene.background = new THREE.Color( 0x666666 );
 
 			scene.environment = pmremGenerator.fromScene( environment ).texture;
 
 			scene.environment = pmremGenerator.fromScene( environment ).texture;
 
 			scene.environmentIntensity = 0.75;
 
 			scene.environmentIntensity = 0.75;
 
 			pmremGenerator.dispose();
 
 			pmremGenerator.dispose();
 
@@ -162,7 +116,6 @@
 
 
 
 			controls = new OrbitControls( camera, renderer.domElement );
 
 			controls = new OrbitControls( camera, renderer.domElement );
 
 			controls.enableDamping = true;
 
 			controls.enableDamping = true;
 
-			controls.target.set( 0, 0.05, 0 );
 
 			controls.update();
 
 			controls.update();
 
 
 
 			// stats
 
 			// stats
 
@@ -177,7 +130,7 @@
 
 			gui = new GUI();
 
 			gui = new GUI();
 
 			gui.add( params, 'maxDistance' ).min( 0 ).max( 1 ).onChange( updateParameters );
 
 			gui.add( params, 'maxDistance' ).min( 0 ).max( 1 ).onChange( updateParameters );
 
 			gui.add( params, 'opacity' ).min( 0 ).max( 1 ).onChange( updateParameters );
 
 			gui.add( params, 'opacity' ).min( 0 ).max( 1 ).onChange( updateParameters );
 
-			gui.add( params, 'thickness' ).min( 0 ).max( 0.1 ).onChange( updateParameters );
 
+			gui.add( params, 'thickness' ).min( 0 ).max( 0.05 ).onChange( updateParameters );
 
 			gui.add( params, 'enabled' ).onChange( () => {
 
 			gui.add( params, 'enabled' ).onChange( () => {
 
 
 
 				if ( params.enabled === true ) {
 
 				if ( params.enabled === true ) {
 
@@ -193,7 +146,6 @@
 
 				postProcessing.needsUpdate = true;
 
 				postProcessing.needsUpdate = true;
 
 
 
 			} );
 
 			} );
 
-			gui.add( params, 'autoRotate' );
 
 		
 		
 			updateParameters();
 
 			updateParameters();
 
 
 
@@ -221,8 +173,6 @@
 
 
 
 			stats.begin();
 
 			stats.begin();
 
 
 
-			controls.autoRotate = params.autoRotate;
 
-		
 			controls.update();
 
 			controls.update();
 
 
 
 			postProcessing.render();
 
 			postProcessing.render();

+ 1 - 0
test/e2e/puppeteer.js
View File 

@@ -157,6 +157,7 @@ const exceptionList = [
 
 	'webgpu_tsl_vfx_tornado',
 
 	'webgpu_tsl_vfx_tornado',
 
 	'webgpu_textures_anisotropy',
 
 	'webgpu_textures_anisotropy',
 
 	'webgpu_materials_envmaps_bpcem',
 
 	'webgpu_materials_envmaps_bpcem',
 
+	'webgpu_postprocessing_ssr',
 
 
 
 	// WebGPU idleTime and parseTime too low
 
 	// WebGPU idleTime and parseTime too low
 
 	'webgpu_compute_particles',
 
 	'webgpu_compute_particles',

粤ICP备19079148号