Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Examples: Improve performance - Compute Snow and Backdrop Water (#27404)

* less particles for better performance

* cleanup

* 60fps on M1
sunag 1 year ago
parent
b8069954d2
commit
1139719008
4 changed files with 17 additions and 7 deletions
Split View Show Diff Stats
  1. BIN
      examples/screenshots/webgpu_backdrop_water.jpg
  2. BIN
      examples/screenshots/webgpu_compute_particles_snow.jpg
  3. 13 4
      examples/webgpu_backdrop_water.html
  4. 4 3
      examples/webgpu_compute_particles_snow.html

BIN
examples/screenshots/webgpu_backdrop_water.jpg
View File


BIN
examples/screenshots/webgpu_compute_particles_snow.jpg
View File


+ 13 - 4
examples/webgpu_backdrop_water.html
View File 

@@ -38,9 +38,12 @@
 
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 
+			import Stats from 'three/addons/libs/stats.module.js';
 
+
 
 			let camera, scene, renderer;
 
 			let mixer, objects, clock;
 
 			let model, floor, floorPosition;
 
+			let stats;
 
 
 			init();
 
 
@@ -150,9 +153,8 @@
 
 
 				const waterLayer0 = mx_worley_noise_float( floorUV.mul( 4 ).add( timer ) );
 
 				const waterLayer1 = mx_worley_noise_float( floorUV.mul( 2 ).add( timer ) );
 
-				const waterLayer2 = mx_worley_noise_float( floorUV.mul( 3 ).add( timer ) );
 
 
-				const waterIntensity = waterLayer0.mul( waterLayer1 ).mul( waterLayer2 ).mul( 5 );
 
+				const waterIntensity = waterLayer0.mul( waterLayer1 ).mul( 1.4 );
 
 				const waterColor = waterIntensity.mix( color( 0x0f5e9c ), color( 0x74ccf4 ) );
 
 				const viewportTexture = viewportSharedTexture();
 
 
@@ -179,8 +181,10 @@
 
 				let transition = waterPosY.add( .1 ).saturate().oneMinus();
 
 				transition = waterPosY.lessThan( 0 ).cond( transition, normalWorld.y.mix( transition, 0 ) ).toVar();
 
 
-				material.colorNode = transition.mix( material.colorNode, material.colorNode.add( waterLayer0 ) );
 
-				floor.material.colorNode = material.colorNode;
 
+				const colorNode = transition.mix( material.colorNode, material.colorNode.add( waterLayer0 ) );
 
+
 
+				//material.colorNode = colorNode;
 
+				floor.material.colorNode = colorNode;
 
 
 				// renderer
 
 
@@ -191,6 +195,9 @@
 
 				renderer.setAnimationLoop( animate );
 
 				document.body.appendChild( renderer.domElement );
 
 
+				stats = new Stats();
 
+				document.body.appendChild( stats.dom );
 
+
 
 				const controls = new OrbitControls( camera, renderer.domElement );
 
 				controls.minDistance = 1;
 
 				controls.maxDistance = 10;
 
@@ -223,6 +230,8 @@
 
 
 			function animate() {
 
 
+				stats.update();
 
+
 
 				const delta = clock.getDelta();
 
 
 				floor.position.y = floorPosition.y - 5;

+ 4 - 3
examples/webgpu_compute_particles_snow.html
View File 

@@ -8,7 +8,7 @@
 
 	<body>
 
 
 		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - GPU Compute Snow - 300.000 Particles
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - GPU Compute Snow - 100.000 Particles
 
 		</div>
 
 
 		<script type="importmap">
 
@@ -37,7 +37,7 @@
 
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
 
-			const maxParticleCount = 300000;
 
+			const maxParticleCount = 100000;
 
 
 			let camera, scene, renderer;
 
 			let controls, stats;
 
@@ -126,7 +126,7 @@
 
 					const randZ = instanceIndex.add( randUint() ).hash();
 
 
 					position.x = randX.mul( 100 ).add( - 50 );
 
-					position.y = randY.mul( 1000 ).add( 3 );
 
+					position.y = randY.mul( 500 ).add( 3 );
 
 					position.z = randZ.mul( 100 ).add( - 50 );
 
 
 					scale.xyz = instanceIndex.add( Math.random() ).hash().mul( .8 ).add( .2 );
 
@@ -282,6 +282,7 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setAnimationLoop( animate );
 
 				document.body.appendChild( renderer.domElement );
 
+
 
 				stats = new Stats();
 
 				document.body.appendChild( stats.dom );