samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
							<html lang="en">
	<head>
		<title>three.js webgpu - compute snow</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta property="og:title" content="three.js webgpu - compute snow">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/webgpu_compute_particles_snow.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgpu_compute_particles_snow.jpg">
		<link type="text/css" rel="stylesheet" href="example.css">
		<!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<div class="title-wrapper">
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a>
				<span>Compute Snow</span>
			</div>

			<small>
				100k snow particles simulation.
			</small>
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three/webgpu';
			import { Fn, texture, vec3, pass, color, uint, screenUV, instancedArray, positionWorld, positionLocal, time, vec2, hash, instanceIndex, If } from 'three/tsl';
			import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

			import { Inspector } from 'three/addons/inspector/Inspector.js';

			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

			const maxParticleCount = 100000;

			let camera, scene, renderer;
			let controls;
			let computeParticles;
			let renderPipeline;

			let collisionCamera, collisionPosRT, collisionPosMaterial;

			init();

			async function init() {

				const { innerWidth, innerHeight } = window;

				camera = new THREE.PerspectiveCamera( 60, innerWidth / innerHeight, .1, 100 );
				camera.position.set( 20, 2, 20 );
				camera.layers.enable( 2 );
				camera.lookAt( 0, 40, 0 );

				scene = new THREE.Scene();
				scene.fog = new THREE.Fog( 0x0f3c37, 5, 40 );

				const dirLight = new THREE.DirectionalLight( 0xf9ff9b, 9 );
				dirLight.position.set( 10, 10, 0 );
				scene.add( dirLight );

				scene.add( new THREE.HemisphereLight( 0x0f3c37, 0x080d10, 100 ) );

				//

				collisionCamera = new THREE.OrthographicCamera( - 50, 50, 50, - 50, .1, 50 );
				collisionCamera.position.y = 50;
				collisionCamera.lookAt( 0, 0, 0 );
				collisionCamera.layers.enable( 1 );

				collisionPosRT = new THREE.RenderTarget( 1024, 1024 );
				collisionPosRT.texture.format = THREE.RedFormat;
				collisionPosRT.texture.type = THREE.HalfFloatType;
				collisionPosRT.texture.magFilter = THREE.NearestFilter;
				collisionPosRT.texture.minFilter = THREE.NearestFilter;
				collisionPosRT.texture.generateMipmaps = false;

				collisionPosMaterial = new THREE.MeshBasicNodeMaterial();
				collisionPosMaterial.blending = THREE.NoBlending;
				collisionPosMaterial.fog = false;
				collisionPosMaterial.toneMapped = false;
				collisionPosMaterial.colorNode = positionWorld.y;

				//

				const positionBuffer = instancedArray( maxParticleCount, 'vec3' );
				const scaleBuffer = instancedArray( maxParticleCount, 'vec3' );
				const staticPositionBuffer = instancedArray( maxParticleCount, 'vec3' );
				const dataBuffer = instancedArray( maxParticleCount, 'vec4' );

				// compute

				const randUint = () => uint( Math.random() * 0xFFFFFF );

				const computeInit = Fn( () => {

					const position = positionBuffer.element( instanceIndex );
					const scale = scaleBuffer.element( instanceIndex );
					const particleData = dataBuffer.element( instanceIndex );

					const randX = hash( instanceIndex );
					const randY = hash( instanceIndex.add( randUint() ) );
					const randZ = hash( instanceIndex.add( randUint() ) );

					position.x = randX.mul( 100 ).add( - 50 );
					position.y = randY.mul( 500 ).add( 3 );
					position.z = randZ.mul( 100 ).add( - 50 );

					scale.xyz = hash( instanceIndex.add( Math.random() ) ).mul( .8 ).add( .2 );

					staticPositionBuffer.element( instanceIndex ).assign( vec3( 1000, 10000, 1000 ) );

					particleData.y = randY.mul( - .1 ).add( - .02 );

					particleData.x = position.x;
					particleData.z = position.z;
					particleData.w = randX;

				} )().compute( maxParticleCount ).setName( 'Init Particles' );

				//

				const surfaceOffset = .2;
				const speed = .4;

				const computeUpdate = Fn( () => {

					const getCoord = ( pos ) => pos.add( 50 ).div( 100 );

					const position = positionBuffer.element( instanceIndex );
					const scale = scaleBuffer.element( instanceIndex );
					const particleData = dataBuffer.element( instanceIndex );

					const velocity = particleData.y;
					const random = particleData.w;

					const rippleOnSurface = texture( collisionPosRT.texture, getCoord( position.xz ) ).toInspector( 'Collision Test', () => {

						return texture( collisionPosRT.texture ).r; // .div( collisionCamera.position.y );

					} );

					const rippleFloorArea = rippleOnSurface.r.add( scale.x.mul( surfaceOffset ) );

					If( position.y.greaterThan( rippleFloorArea ), () => {

						position.x = particleData.x.add( time.mul( random.mul( random ) ).mul( speed ).sin().mul( 3 ) );
						position.z = particleData.z.add( time.mul( random ).mul( speed ).cos().mul( random.mul( 10 ) ) );

						position.y = position.y.add( velocity );

					} ).Else( () => {

						staticPositionBuffer.element( instanceIndex ).assign( position );

					} );

				} );

				computeParticles = computeUpdate().compute( maxParticleCount );
				computeParticles.name = 'Update Particles';

				// rain

				const geometry = new THREE.SphereGeometry( surfaceOffset, 5, 5 );

				function particle( staticParticles ) {

					const posBuffer = staticParticles ? staticPositionBuffer : positionBuffer;
					const layer = staticParticles ? 1 : 2;

					const staticMaterial = new THREE.MeshStandardNodeMaterial( {
						color: 0xeeeeee,
						roughness: .9,
						metalness: 0
					} );

					staticMaterial.positionNode = positionLocal.mul( scaleBuffer.toAttribute() ).add( posBuffer.toAttribute() );

					const rainParticles = new THREE.Mesh( geometry, staticMaterial );
					rainParticles.count = maxParticleCount;
					rainParticles.layers.disableAll();
					rainParticles.layers.enable( layer );

					return rainParticles;

				}

				const dynamicParticles = particle();
				const staticParticles = particle( true );

				scene.add( dynamicParticles );
				scene.add( staticParticles );

				// floor geometry

				const floorGeometry = new THREE.PlaneGeometry( 100, 100 );
				floorGeometry.rotateX( - Math.PI / 2 );

				const plane = new THREE.Mesh( floorGeometry, new THREE.MeshStandardMaterial( {
					color: 0x0c1e1e,
					roughness: .5,
					metalness: 0,
					transparent: true
				} ) );

				plane.material.opacityNode = positionLocal.xz.mul( .05 ).distance( 0 ).saturate().oneMinus();

				scene.add( plane );

				// tree

				function tree( count = 8 ) {

					const coneMaterial = new THREE.MeshStandardNodeMaterial( {
						color: 0x0d492c,
						roughness: .6,
						metalness: 0
					} );

					const object = new THREE.Group();

					for ( let i = 0; i < count; i ++ ) {

						const radius = 1 + i;

						const coneGeometry = new THREE.ConeGeometry( radius * 0.95, radius * 1.25, 32 );

						const cone = new THREE.Mesh( coneGeometry, coneMaterial );
						cone.position.y = ( ( count - i ) * 1.5 ) + ( count * .6 );
						object.add( cone );

					}

					const geometry = new THREE.CylinderGeometry( 1, 1, count, 32 );
					const cone = new THREE.Mesh( geometry, coneMaterial );
					cone.position.y = count / 2;
					object.add( cone );

					return object;

				}

				const teapotTree = new THREE.Mesh( new TeapotGeometry( .5, 18 ), new THREE.MeshBasicNodeMaterial( {
					color: 0xfcfb9e
				} ) );

				teapotTree.name = 'Teapot Pass';
				teapotTree.position.y = 18;

				scene.add( tree() );
				scene.add( teapotTree );

				//

				scene.backgroundNode = screenUV.distance( .5 ).mul( 2 ).mix( color( 0x0f4140 ), color( 0x060a0d ) );

				//

				renderer = new THREE.WebGPURenderer( { antialias: true } );
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setClearColor( 0x000000 );
				renderer.setAnimationLoop( animate );
				renderer.inspector = new Inspector();
				document.body.appendChild( renderer.domElement );

				await renderer.init();

				//

				controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 10, 0 );
				controls.minDistance = 25;
				controls.maxDistance = 35;
				controls.maxPolarAngle = Math.PI / 1.7;
				controls.autoRotate = true;
				controls.autoRotateSpeed = - 0.7;
				controls.update();

				// post processing

				const scenePass = pass( scene, camera );
				const scenePassColor = scenePass.getTextureNode();
				const vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();

				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
				const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 6 );
				teapotTreePassBlurred.resolutionScale = 0.2;

				const scenePassColorBlurred = gaussianBlur( scenePassColor );
				scenePassColorBlurred.resolutionScale = 0.5;
				scenePassColorBlurred.directionNode = vec2( 1 );

				// compose

				let totalPass = scenePass.toInspector( 'Scene' );
				totalPass = totalPass.add( scenePassColorBlurred.mul( .1 ) );
				totalPass = totalPass.mul( vignette );
				totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ).toInspector( 'Teapot Blur' ) );

				renderPipeline = new THREE.RenderPipeline( renderer );
				renderPipeline.outputNode = totalPass;

				//

				renderer.compute( computeInit );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				const { innerWidth, innerHeight } = window;

				camera.aspect = innerWidth / innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( innerWidth, innerHeight );

			}

			function animate() {

				controls.update();

				// position

				scene.name = 'Collider Position';
				scene.overrideMaterial = collisionPosMaterial;
				renderer.setRenderTarget( collisionPosRT );
				renderer.render( scene, collisionCamera );

				// compute

				renderer.compute( computeParticles );

				// result

				scene.name = 'Scene';
				scene.overrideMaterial = null;
				renderer.setRenderTarget( null );

				renderPipeline.render();

			}

		</script>
	</body>
</html>