javascript
/
three.js
Mirror von https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
							<html lang="en">
	<head>
		<title>three.js - WebGPU - Compute Particles Snow</title>
		<meta charset="utf-8">
		<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">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute Snow - 100K Particles
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/",
					"three/nodes": "./jsm/nodes/Nodes.js",
					"stats-gl": "https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';
			import { tslFn, texture, vec3, pass, color, uint, viewportTopLeft, positionWorld, positionLocal, timerLocal, vec2, MeshStandardNodeMaterial, instanceIndex, storage, MeshBasicNodeMaterial, If } from 'three/nodes';

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

			import WebGPU from 'three/addons/capabilities/WebGPU.js';
			import WebGL from 'three/addons/capabilities/WebGL.js';
			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';

			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';

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

			import Stats from 'stats-gl';

			const maxParticleCount = 100000;

			let camera, scene, renderer;
			let controls, stats;
			let computeParticles;
			let postProcessing;

			let collisionCamera, collisionPosRT, collisionPosMaterial;

			init();

			async function init() {

				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {

					document.body.appendChild( WebGPU.getErrorMessage() );

					throw new Error( 'No WebGPU or WebGL2 support' );

				}

				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.castShadow = true;
				dirLight.position.set( 10, 10, 0 );
				dirLight.castShadow = true;
				dirLight.shadow.camera.near = 1;
				dirLight.shadow.camera.far = 30;
				dirLight.shadow.camera.right = 30;
				dirLight.shadow.camera.left = - 30;
				dirLight.shadow.camera.top = 30;
				dirLight.shadow.camera.bottom = - 30;
				dirLight.shadow.mapSize.width = 2048;
				dirLight.shadow.mapSize.height = 2048;
				dirLight.shadow.bias = - 0.009;
				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.type = THREE.HalfFloatType;
				collisionPosRT.texture.magFilter = THREE.NearestFilter;
				collisionPosRT.texture.minFilter = THREE.NearestFilter;

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

				//

				const createBuffer = ( type = 'vec3' ) => storage( new StorageInstancedBufferAttribute( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );

				const positionBuffer = createBuffer();
				const scaleBuffer = createBuffer();
				const staticPositionBuffer = createBuffer();
				const dataBuffer = createBuffer( 'vec4' );

				// compute

				const timer = timerLocal();

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

				const computeInit = tslFn( () => {

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

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

					position.x = randX.mul( 100 ).add( - 50 );
					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 );

					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 );

				//

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

				const computeUpdate = tslFn( () => {

					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 ) );
					const rippleFloorArea = rippleOnSurface.y.add( scale.x.mul( surfaceOffset ) );

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

						position.x = particleData.x.add( timer.mul( random.mul( random ) ).mul( speed ).sin().mul( 3 ) );
						position.z = particleData.z.add( timer.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 );

				// 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 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.castShadow = true;
					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 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.castShadow = true;
						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 MeshBasicNodeMaterial( {
					color: 0xfcfb9e
				} ) );

				teapotTree.position.y = 18;

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

				//

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

				//

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

				stats = new Stats( {
					precision: 3,
					horizontal: false
				} );
				stats.init( renderer );
				document.body.appendChild( stats.dom );


				//

				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 vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();

				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
				const teapotTreePassBlurred = teapotTreePass.gaussianBlur( 3 );
				teapotTreePassBlurred.resolution = new THREE.Vector2( .2, .2 );

				const scenePassColorBlurred = scenePassColor.gaussianBlur();
				scenePassColorBlurred.resolution = new THREE.Vector2( .5, .5 );
				scenePassColorBlurred.directionNode = vec2( 1 );

				// compose

				let totalPass = scenePass;
				totalPass = totalPass.add( scenePassColorBlurred.mul( .1 ) );
				totalPass = totalPass.mul( vignet );
				totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ) );

				postProcessing = new PostProcessing( renderer );
				postProcessing.outputNode = totalPass;

				//

				await renderer.computeAsync( computeInit );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				const { innerWidth, innerHeight } = window;

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

				renderer.setSize( innerWidth, innerHeight );

			}

			async function animate() {

				controls.update();

				// position

				scene.overrideMaterial = collisionPosMaterial;
				renderer.setRenderTarget( collisionPosRT );
				await renderer.renderAsync( scene, collisionCamera );

				// compute

				await renderer.computeAsync( computeParticles );

				// result

				scene.overrideMaterial = null;
				renderer.setRenderTarget( null );

				await postProcessing.renderAsync();
			
				stats.update();

			}

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