You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
10 KiB
HTML
370 lines
10 KiB
HTML
2 months ago
|
<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.webgpu.js",
|
||
|
|
"three/webgpu": "../build/three.webgpu.js",
|
||
|
|
"three/tsl": "../build/three.tsl.js",
|
||
|
|
"three/addons/": "./jsm/",
|
||
|
|
"stats-gl": "https://cdn.jsdelivr.net/npm/stats-gl@3.6.0/dist/main.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from 'three';
|
||
|
|
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 { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.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() {
|
||
|
|
|
||
|
|
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;
|
||
|
|
collisionPosRT.texture.generateMipmaps = false;
|
||
|
|
|
||
|
|
collisionPosMaterial = new THREE.MeshBasicNodeMaterial();
|
||
|
|
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 );
|
||
|
|
|
||
|
|
//
|
||
|
|
|
||
|
|
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 ) );
|
||
|
|
const rippleFloorArea = rippleOnSurface.y.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 );
|
||
|
|
|
||
|
|
// 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.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 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.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 THREE.MeshBasicNodeMaterial( {
|
||
|
|
color: 0xfcfb9e
|
||
|
|
} ) );
|
||
|
|
|
||
|
|
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.setAnimationLoop( animate );
|
||
|
|
document.body.appendChild( renderer.domElement );
|
||
|
|
|
||
|
|
stats = new Stats( {
|
||
|
|
precision: 3,
|
||
|
|
horizontal: false,
|
||
|
|
trackGPU: true,
|
||
|
|
trackCPT: true
|
||
|
|
} );
|
||
|
|
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 vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
|
||
|
|
|
||
|
|
const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
|
||
|
|
const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 3 );
|
||
|
|
teapotTreePassBlurred.resolution = new THREE.Vector2( .2, .2 );
|
||
|
|
|
||
|
|
const scenePassColorBlurred = gaussianBlur( scenePassColor );
|
||
|
|
scenePassColorBlurred.resolution = new THREE.Vector2( .5, .5 );
|
||
|
|
scenePassColorBlurred.directionNode = vec2( 1 );
|
||
|
|
|
||
|
|
// compose
|
||
|
|
|
||
|
|
let totalPass = scenePass;
|
||
|
|
totalPass = totalPass.add( scenePassColorBlurred.mul( .1 ) );
|
||
|
|
totalPass = totalPass.mul( vignette );
|
||
|
|
totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ) );
|
||
|
|
|
||
|
|
postProcessing = new THREE.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 );
|
||
|
|
renderer.render( scene, collisionCamera );
|
||
|
|
|
||
|
|
// compute
|
||
|
|
|
||
|
|
renderer.compute( computeParticles );
|
||
|
|
renderer.resolveTimestampsAsync( THREE.TimestampQuery.COMPUTE );
|
||
|
|
|
||
|
|
// result
|
||
|
|
|
||
|
|
scene.overrideMaterial = null;
|
||
|
|
renderer.setRenderTarget( null );
|
||
|
|
|
||
|
|
await postProcessing.renderAsync();
|
||
|
|
|
||
|
|
renderer.resolveTimestampsAsync();
|
||
|
|
stats.update();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|