|
|
@@ -0,0 +1,597 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgpu - compute fluid particles</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 - fluid particles<br />
|
|
|
+ MLS-MPM particle simulation running in compute shaders
|
|
|
+ </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';
|
|
|
+
|
|
|
+ import { Fn, If, Return, instancedArray, instanceIndex, uniform, attribute, uint, float, clamp, struct, atomicStore, int, ivec3, array, vec3, atomicAdd, Loop, atomicLoad, max, pow, mat3, vec4, cross, step, pass, mrt, output, normalView } from 'three/tsl';
|
|
|
+
|
|
|
+ import { ao } from 'three/addons/tsl/display/GTAONode.js';
|
|
|
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
|
|
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
+ import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
|
|
|
+ import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
|
|
|
+ import WebGPU from 'three/addons/capabilities/WebGPU.js';
|
|
|
+
|
|
|
+ let renderer, scene, camera, controls;
|
|
|
+
|
|
|
+ const clock = new THREE.Clock();
|
|
|
+
|
|
|
+ const maxParticles = 8192 * 16;
|
|
|
+ const gridSize1d = 64;
|
|
|
+ const gridSize = new THREE.Vector3( gridSize1d, gridSize1d, gridSize1d );
|
|
|
+ const fixedPointMultiplier = 1e7;
|
|
|
+
|
|
|
+ let particleCountUniform, stiffnessUniform, restDensityUniform, dynamicViscosityUniform, dtUniform, gravityUniform, gridSizeUniform;
|
|
|
+ let particleBuffer, cellBuffer, cellBufferFloat;
|
|
|
+ let clearGridKernel, p2g1Kernel, p2g2Kernel, updateGridKernel, g2pKernel;
|
|
|
+ let particleMesh;
|
|
|
+ const mouseCoord = new THREE.Vector3();
|
|
|
+ const prevMouseCoord = new THREE.Vector3();
|
|
|
+ let mouseRayOriginUniform, mouseRayDirectionUniform, mouseForceUniform;
|
|
|
+ let postProcessing, aoPass, blendPassAO, scenePassColor;
|
|
|
+
|
|
|
+ if ( WebGPU.isAvailable() === false ) {
|
|
|
+
|
|
|
+ document.body.appendChild( WebGPU.getErrorMessage() );
|
|
|
+ throw new Error( 'No WebGPU support' );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ const gui = new GUI();
|
|
|
+
|
|
|
+ const params = {
|
|
|
+ particleCount: 8192 * 4,
|
|
|
+ ambientOcclusion: true,
|
|
|
+ };
|
|
|
+
|
|
|
+ init();
|
|
|
+
|
|
|
+ async function init() {
|
|
|
+
|
|
|
+ renderer = new THREE.WebGPURenderer( { antialias: true } );
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+ renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
|
+ renderer.toneMappingExposure = 1.35;
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 10 );
|
|
|
+ camera.position.set( - 1.3, 1.3, - 1.3 );
|
|
|
+
|
|
|
+ controls = new OrbitControls( camera, renderer.domElement );
|
|
|
+
|
|
|
+ controls.minDistance = 1;
|
|
|
+ controls.maxDistance = 3;
|
|
|
+ controls.maxPolarAngle = Math.PI * 0.35;
|
|
|
+ controls.touches = { TWO: THREE.TOUCH.DOLLY_ROTATE };
|
|
|
+
|
|
|
+ const rgbeLoader = new RGBELoader().setPath( 'textures/equirectangular/' );
|
|
|
+
|
|
|
+ const hdrTexture = await rgbeLoader.loadAsync( 'royal_esplanade_1k.hdr' );
|
|
|
+ hdrTexture.mapping = THREE.EquirectangularReflectionMapping;
|
|
|
+ scene.background = hdrTexture;
|
|
|
+ scene.backgroundBlurriness = 0.5;
|
|
|
+ scene.environment = hdrTexture;
|
|
|
+
|
|
|
+ setupParticles();
|
|
|
+
|
|
|
+ gui.add( params, 'particleCount', 4096, maxParticles, 4096 ).onChange( value => {
|
|
|
+
|
|
|
+ p2g1Kernel.count = value;
|
|
|
+ p2g2Kernel.count = value;
|
|
|
+ g2pKernel.count = value;
|
|
|
+ p2g1Kernel.updateDispatchCount();
|
|
|
+ p2g2Kernel.updateDispatchCount();
|
|
|
+ g2pKernel.updateDispatchCount();
|
|
|
+ particleMesh.count = value;
|
|
|
+ particleCountUniform.value = value;
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ gui.add( params, 'ambientOcclusion' );
|
|
|
+
|
|
|
+ // setting up post processing for ambient occlusion
|
|
|
+ postProcessing = new THREE.PostProcessing( renderer );
|
|
|
+ const scenePass = pass( scene, camera );
|
|
|
+ scenePass.setMRT( mrt( {
|
|
|
+ output: output,
|
|
|
+ normal: normalView
|
|
|
+ } ) );
|
|
|
+ scenePassColor = scenePass.getTextureNode( 'output' );
|
|
|
+ const scenePassNormal = scenePass.getTextureNode( 'normal' );
|
|
|
+ const scenePassDepth = scenePass.getTextureNode( 'depth' );
|
|
|
+ aoPass = ao( scenePassDepth, scenePassNormal, camera );
|
|
|
+ aoPass.resolutionScale = 0.5;
|
|
|
+ blendPassAO = aoPass.getTextureNode().mul( scenePassColor );
|
|
|
+ postProcessing.outputNode = blendPassAO;
|
|
|
+
|
|
|
+ window.addEventListener( 'resize', onWindowResize );
|
|
|
+ controls.update();
|
|
|
+ renderer.setAnimationLoop( render );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupBuffers() {
|
|
|
+
|
|
|
+ const particleStruct = struct( {
|
|
|
+ position: { type: 'vec3' },
|
|
|
+ velocity: { type: 'vec3' },
|
|
|
+ C: { type: 'mat3' },
|
|
|
+ } );
|
|
|
+ const particleStructSize = 20; // each vec3 occupies 4 floats and mat3 occupies 12 floats in memory because of webgpu memory alignment
|
|
|
+ const particleArray = new Float32Array( maxParticles * particleStructSize );
|
|
|
+
|
|
|
+ for ( let i = 0; i < maxParticles; i ++ ) {
|
|
|
+
|
|
|
+ particleArray[ i * particleStructSize ] = ( Math.random() * 0.8 + 0.1 );
|
|
|
+ particleArray[ i * particleStructSize + 1 ] = ( Math.random() * 0.8 + 0.1 );
|
|
|
+ particleArray[ i * particleStructSize + 2 ] = ( Math.random() * 0.8 + 0.1 );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ particleBuffer = instancedArray( particleArray, particleStruct );
|
|
|
+
|
|
|
+ const cellCount = gridSize.x * gridSize.y * gridSize.z;
|
|
|
+
|
|
|
+ const cellStruct = struct( {
|
|
|
+ x: { type: 'int', atomic: true },
|
|
|
+ y: { type: 'int', atomic: true },
|
|
|
+ z: { type: 'int', atomic: true },
|
|
|
+ mass: { type: 'int', atomic: true },
|
|
|
+ } );
|
|
|
+
|
|
|
+ cellBuffer = instancedArray( cellCount, cellStruct );
|
|
|
+ cellBufferFloat = instancedArray( cellCount, 'vec4' );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupUniforms() {
|
|
|
+
|
|
|
+ gridSizeUniform = uniform( gridSize );
|
|
|
+ particleCountUniform = uniform( params.particleCount, 'uint' );
|
|
|
+ stiffnessUniform = uniform( 50 );
|
|
|
+ restDensityUniform = uniform( 1.5 );
|
|
|
+ dynamicViscosityUniform = uniform( 0.1 );
|
|
|
+ dtUniform = uniform( 1 / 60 );
|
|
|
+ gravityUniform = uniform( new THREE.Vector3( 0, - ( 9.81 * 9.81 ), 0 ) );
|
|
|
+ mouseRayOriginUniform = uniform( new THREE.Vector3( 0, 0, 0 ) );
|
|
|
+ mouseRayDirectionUniform = uniform( new THREE.Vector3( 0, 0, 0 ) );
|
|
|
+ mouseForceUniform = uniform( new THREE.Vector3( 0, 0, 0 ) );
|
|
|
+
|
|
|
+ // gui.add(restDensityUniform, "value", 1.0, 3, 0.1).name("restDensity");
|
|
|
+ // it's interesting to adjust the restDensity but it might cause the simulation to become unstable
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupComputeShaders() {
|
|
|
+
|
|
|
+ // the MLS-MPM system uses five compute shaders:
|
|
|
+ // 1. clearGridKernel: this clears the grid before each pass
|
|
|
+ // 2. p2g1Kernel & 3. p2g2Kernel: These particle2grid kernels transfer the particles' energy to the grid
|
|
|
+ // 4. updateGridKernel: updates the grid
|
|
|
+ // 5. g2pKernel: grid2particle kernel, transfers the grid energy back to the particles
|
|
|
+ // the implementation closely follows https://github.com/matsuoka-601/WebGPU-Ocean
|
|
|
+
|
|
|
+ // because webgpu only supports int atomics, we use fixed point floats by multiplying/dividing the float values with a high integer constant
|
|
|
+ const encodeFixedPoint = ( f32 ) => {
|
|
|
+
|
|
|
+ return int( f32.mul( fixedPointMultiplier ) );
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ const decodeFixedPoint = ( i32 ) => {
|
|
|
+
|
|
|
+ return float( i32 ).div( fixedPointMultiplier );
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ const cellCount = gridSize.x * gridSize.y * gridSize.z;
|
|
|
+ clearGridKernel = Fn( () => {
|
|
|
+
|
|
|
+ If( instanceIndex.greaterThanEqual( uint( cellCount ) ), () => {
|
|
|
+
|
|
|
+ Return();
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ atomicStore( cellBuffer.element( instanceIndex ).get( 'x' ), 0 );
|
|
|
+ atomicStore( cellBuffer.element( instanceIndex ).get( 'y' ), 0 );
|
|
|
+ atomicStore( cellBuffer.element( instanceIndex ).get( 'z' ), 0 );
|
|
|
+ atomicStore( cellBuffer.element( instanceIndex ).get( 'mass' ), 0 );
|
|
|
+
|
|
|
+ } )().compute( cellCount );
|
|
|
+
|
|
|
+ p2g1Kernel = Fn( () => {
|
|
|
+
|
|
|
+ If( instanceIndex.greaterThanEqual( particleCountUniform ), () => {
|
|
|
+
|
|
|
+ Return();
|
|
|
+
|
|
|
+ } );
|
|
|
+ const particlePosition = particleBuffer.element( instanceIndex ).get( 'position' ).toConst( 'particlePosition' );
|
|
|
+ const particleVelocity = particleBuffer.element( instanceIndex ).get( 'velocity' ).toConst( 'particleVelocity' );
|
|
|
+ const C = particleBuffer.element( instanceIndex ).get( 'C' ).toConst( 'C' );
|
|
|
+
|
|
|
+ const gridPosition = particlePosition.mul( gridSizeUniform ).toVar();
|
|
|
+ const cellIndex = ivec3( gridPosition ).sub( 1 ).toConst( 'cellIndex' );
|
|
|
+ const cellDiff = gridPosition.fract().sub( 0.5 ).toConst( 'cellDiff' );
|
|
|
+ const w0 = float( 0.5 ).mul( float( 0.5 ).sub( cellDiff ) ).mul( float( 0.5 ).sub( cellDiff ) );
|
|
|
+ const w1 = float( 0.75 ).sub( cellDiff.mul( cellDiff ) );
|
|
|
+ const w2 = float( 0.5 ).mul( float( 0.5 ).add( cellDiff ) ).mul( float( 0.5 ).add( cellDiff ) );
|
|
|
+ const weights = array( [ w0, w1, w2 ] ).toConst( 'weights' );
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gx', condition: '<' }, ( { gx } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gy', condition: '<' }, ( { gy } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gz', condition: '<' }, ( { gz } ) => {
|
|
|
+
|
|
|
+ const weight = weights.element( gx ).x.mul( weights.element( gy ).y ).mul( weights.element( gz ).z );
|
|
|
+ const cellX = cellIndex.add( ivec3( gx, gy, gz ) ).toConst();
|
|
|
+ const cellDist = vec3( cellX ).add( 0.5 ).sub( gridPosition ).toConst( 'cellDist' );
|
|
|
+ const Q = C.mul( cellDist );
|
|
|
+
|
|
|
+ const massContrib = weight; // assuming particle mass = 1.0
|
|
|
+ const velContrib = massContrib.mul( particleVelocity.add( Q ) ).toConst( 'velContrib' );
|
|
|
+ const cellPtr = cellX.x.mul( int( gridSize.y * gridSize.z ) ).add( cellX.y.mul( int( gridSize.z ) ) ).add( cellX.z ).toConst();
|
|
|
+ const cell = cellBuffer.element( cellPtr );
|
|
|
+
|
|
|
+ atomicAdd( cell.get( 'x' ), encodeFixedPoint( velContrib.x ) );
|
|
|
+ atomicAdd( cell.get( 'y' ), encodeFixedPoint( velContrib.y ) );
|
|
|
+ atomicAdd( cell.get( 'z' ), encodeFixedPoint( velContrib.z ) );
|
|
|
+ atomicAdd( cell.get( 'mass' ), encodeFixedPoint( massContrib ) );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } )().compute( params.particleCount );
|
|
|
+
|
|
|
+ p2g2Kernel = Fn( () => {
|
|
|
+
|
|
|
+ If( instanceIndex.greaterThanEqual( particleCountUniform ), () => {
|
|
|
+
|
|
|
+ Return();
|
|
|
+
|
|
|
+ } );
|
|
|
+ const particlePosition = particleBuffer.element( instanceIndex ).get( 'position' ).toConst( 'particlePosition' );
|
|
|
+ const gridPosition = particlePosition.mul( gridSizeUniform ).toVar();
|
|
|
+
|
|
|
+ const cellIndex = ivec3( gridPosition ).sub( 1 ).toConst( 'cellIndex' );
|
|
|
+ const cellDiff = gridPosition.fract().sub( 0.5 ).toConst( 'cellDiff' );
|
|
|
+ const w0 = float( 0.5 ).mul( float( 0.5 ).sub( cellDiff ) ).mul( float( 0.5 ).sub( cellDiff ) );
|
|
|
+ const w1 = float( 0.75 ).sub( cellDiff.mul( cellDiff ) );
|
|
|
+ const w2 = float( 0.5 ).mul( float( 0.5 ).add( cellDiff ) ).mul( float( 0.5 ).add( cellDiff ) );
|
|
|
+ const weights = array( [ w0, w1, w2 ] ).toConst( 'weights' );
|
|
|
+
|
|
|
+ const density = float( 0 ).toVar( 'density' );
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gx', condition: '<' }, ( { gx } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gy', condition: '<' }, ( { gy } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gz', condition: '<' }, ( { gz } ) => {
|
|
|
+
|
|
|
+ const weight = weights.element( gx ).x.mul( weights.element( gy ).y ).mul( weights.element( gz ).z );
|
|
|
+ const cellX = cellIndex.add( ivec3( gx, gy, gz ) ).toConst();
|
|
|
+ const cellPtr = cellX.x.mul( int( gridSize.y * gridSize.z ) ).add( cellX.y.mul( int( gridSize.z ) ) ).add( cellX.z ).toConst();
|
|
|
+ const cell = cellBuffer.element( cellPtr );
|
|
|
+ const mass = decodeFixedPoint( atomicLoad( cell.get( 'mass' ) ) );
|
|
|
+ density.addAssign( mass.mul( weight ) );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ const volume = float( 1 ).div( density );
|
|
|
+ const pressure = max( 0.0, pow( density.div( restDensityUniform ), 5.0 ).sub( 1 ).mul( stiffnessUniform ) ).toConst( 'pressure' );
|
|
|
+ const stress = mat3( pressure.negate(), 0, 0, 0, pressure.negate(), 0, 0, 0, pressure.negate() ).toVar( 'stress' );
|
|
|
+ const dudv = particleBuffer.element( instanceIndex ).get( 'C' ).toConst( 'C' );
|
|
|
+
|
|
|
+ const strain = dudv.add( dudv.transpose() );
|
|
|
+ stress.addAssign( strain.mul( dynamicViscosityUniform ) );
|
|
|
+ const eq16Term0 = volume.mul( - 4 ).mul( stress ).mul( dtUniform );
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gx', condition: '<' }, ( { gx } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gy', condition: '<' }, ( { gy } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gz', condition: '<' }, ( { gz } ) => {
|
|
|
+
|
|
|
+ const weight = weights.element( gx ).x.mul( weights.element( gy ).y ).mul( weights.element( gz ).z );
|
|
|
+ const cellX = cellIndex.add( ivec3( gx, gy, gz ) ).toConst();
|
|
|
+ const cellDist = vec3( cellX ).add( 0.5 ).sub( gridPosition ).toConst( 'cellDist' );
|
|
|
+ const momentum = eq16Term0.mul( weight ).mul( cellDist ).toConst( 'momentum' );
|
|
|
+
|
|
|
+ const cellPtr = cellX.x.mul( int( gridSize.y * gridSize.z ) ).add( cellX.y.mul( int( gridSize.z ) ) ).add( cellX.z ).toConst();
|
|
|
+ const cell = cellBuffer.element( cellPtr );
|
|
|
+ atomicAdd( cell.get( 'x' ), encodeFixedPoint( momentum.x ) );
|
|
|
+ atomicAdd( cell.get( 'y' ), encodeFixedPoint( momentum.y ) );
|
|
|
+ atomicAdd( cell.get( 'z' ), encodeFixedPoint( momentum.z ) );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } )().compute( params.particleCount );
|
|
|
+
|
|
|
+ updateGridKernel = Fn( () => {
|
|
|
+
|
|
|
+ If( instanceIndex.greaterThanEqual( uint( cellCount ) ), () => {
|
|
|
+
|
|
|
+ Return();
|
|
|
+
|
|
|
+ } );
|
|
|
+ const cell = cellBuffer.element( instanceIndex );
|
|
|
+ const mass = decodeFixedPoint( atomicLoad( cell.get( 'mass' ) ) ).toConst();
|
|
|
+ If( mass.lessThanEqual( 0 ), () => {
|
|
|
+
|
|
|
+ Return();
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ const vx = decodeFixedPoint( atomicLoad( cell.get( 'x' ) ) ).div( mass ).toVar();
|
|
|
+ const vy = decodeFixedPoint( atomicLoad( cell.get( 'y' ) ) ).div( mass ).toVar();
|
|
|
+ const vz = decodeFixedPoint( atomicLoad( cell.get( 'z' ) ) ).div( mass ).toVar();
|
|
|
+
|
|
|
+ const x = int( instanceIndex ).div( int( gridSize.z * gridSize.y ) );
|
|
|
+ const y = int( instanceIndex ).div( int( gridSize.z ) ).mod( int( gridSize.y ) );
|
|
|
+ const z = int( instanceIndex ).mod( int( gridSize.z ) );
|
|
|
+ If( x.lessThan( int( 1 ) ).or( x.greaterThan( int( gridSize.x ).sub( int( 2 ) ) ) ), () => {
|
|
|
+
|
|
|
+ vx.assign( 0 );
|
|
|
+
|
|
|
+ } );
|
|
|
+ If( y.lessThan( int( 1 ) ).or( y.greaterThan( int( gridSize.y ).sub( int( 2 ) ) ) ), () => {
|
|
|
+
|
|
|
+ vy.assign( 0 );
|
|
|
+
|
|
|
+ } );
|
|
|
+ If( z.lessThan( int( 1 ) ).or( z.greaterThan( int( gridSize.z ).sub( int( 2 ) ) ) ), () => {
|
|
|
+
|
|
|
+ vz.assign( 0 );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ cellBufferFloat.element( instanceIndex ).assign( vec4( vx, vy, vz, mass ) );
|
|
|
+
|
|
|
+ } )().compute( cellCount );
|
|
|
+
|
|
|
+
|
|
|
+ const clampToRoundedBox = ( pos, box, radius ) => {
|
|
|
+
|
|
|
+ const result = pos.sub( 0.5 ).toVar();
|
|
|
+ const pp = step( box, result.abs() ).mul( result.add( box.negate().mul( result.sign() ) ) );
|
|
|
+ const ppLen = pp.length().toVar();
|
|
|
+ const dist = ppLen.sub( radius );
|
|
|
+ If( dist.greaterThan( 0.0 ), () => {
|
|
|
+
|
|
|
+ result.subAssign( pp.normalize().mul( dist ).mul( 1.3 ) );
|
|
|
+
|
|
|
+ } );
|
|
|
+ result.addAssign( 0.5 );
|
|
|
+ return result;
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ g2pKernel = Fn( () => {
|
|
|
+
|
|
|
+ If( instanceIndex.greaterThanEqual( particleCountUniform ), () => {
|
|
|
+
|
|
|
+ Return();
|
|
|
+
|
|
|
+ } );
|
|
|
+ const particlePosition = particleBuffer.element( instanceIndex ).get( 'position' ).toVar( 'particlePosition' );
|
|
|
+ const gridPosition = particlePosition.mul( gridSizeUniform ).toVar();
|
|
|
+ const particleVelocity = vec3( 0 ).toVar();
|
|
|
+
|
|
|
+ const cellIndex = ivec3( gridPosition ).sub( 1 ).toConst( 'cellIndex' );
|
|
|
+ const cellDiff = gridPosition.fract().sub( 0.5 ).toConst( 'cellDiff' );
|
|
|
+
|
|
|
+ const w0 = float( 0.5 ).mul( float( 0.5 ).sub( cellDiff ) ).mul( float( 0.5 ).sub( cellDiff ) );
|
|
|
+ const w1 = float( 0.75 ).sub( cellDiff.mul( cellDiff ) );
|
|
|
+ const w2 = float( 0.5 ).mul( float( 0.5 ).add( cellDiff ) ).mul( float( 0.5 ).add( cellDiff ) );
|
|
|
+ const weights = array( [ w0, w1, w2 ] ).toConst( 'weights' );
|
|
|
+
|
|
|
+ const B = mat3( 0 ).toVar( 'B' );
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gx', condition: '<' }, ( { gx } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gy', condition: '<' }, ( { gy } ) => {
|
|
|
+
|
|
|
+ Loop( { start: 0, end: 3, type: 'int', name: 'gz', condition: '<' }, ( { gz } ) => {
|
|
|
+
|
|
|
+ const weight = weights.element( gx ).x.mul( weights.element( gy ).y ).mul( weights.element( gz ).z );
|
|
|
+ const cellX = cellIndex.add( ivec3( gx, gy, gz ) ).toConst();
|
|
|
+ const cellDist = vec3( cellX ).add( 0.5 ).sub( gridPosition ).toConst( 'cellDist' );
|
|
|
+ const cellPtr = cellX.x.mul( int( gridSize.y * gridSize.z ) ).add( cellX.y.mul( int( gridSize.z ) ) ).add( cellX.z ).toConst();
|
|
|
+
|
|
|
+ const weightedVelocity = cellBufferFloat.element( cellPtr ).xyz.mul( weight ).toConst( 'weightedVelocity' );
|
|
|
+ const term = mat3(
|
|
|
+ weightedVelocity.mul( cellDist.x ),
|
|
|
+ weightedVelocity.mul( cellDist.y ),
|
|
|
+ weightedVelocity.mul( cellDist.z )
|
|
|
+ );
|
|
|
+ B.addAssign( term );
|
|
|
+ particleVelocity.addAssign( weightedVelocity );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ particleBuffer.element( instanceIndex ).get( 'C' ).assign( B.mul( 4 ) );
|
|
|
+
|
|
|
+ // gravity
|
|
|
+ particleVelocity.addAssign( gravityUniform.mul( dtUniform ) );
|
|
|
+
|
|
|
+ // scale from (gridSize.x, gridSize.y, gridSize.z) to (1, 1, 1)
|
|
|
+ particleVelocity.divAssign( gridSizeUniform );
|
|
|
+
|
|
|
+ // mouseInteraction
|
|
|
+ const dist = cross( mouseRayDirectionUniform, particlePosition.sub( mouseRayOriginUniform ) ).length();
|
|
|
+ const force = dist.mul( 3.00 ).oneMinus().max( 0.0 ).pow( 2 );
|
|
|
+ particleVelocity.addAssign( mouseForceUniform.mul( force ) );
|
|
|
+
|
|
|
+ // add velocity to position
|
|
|
+ particlePosition.addAssign( particleVelocity.mul( dtUniform ) );
|
|
|
+
|
|
|
+ // clamp position so outermost gridCells are not reached
|
|
|
+ particlePosition.assign( clamp( particlePosition, vec3( 1 ).div( gridSizeUniform ), vec3( gridSize ).sub( 1 ).div( gridSizeUniform ) ) );
|
|
|
+
|
|
|
+ // add force for particles to stay within rounded box
|
|
|
+ const innerBox = gridSizeUniform.mul( 0.5 ).sub( 9.0 ).div( gridSizeUniform ).toVar();
|
|
|
+ const innerRadius = float( 6.0 ).div( gridSizeUniform.x );
|
|
|
+ const posNext = particlePosition.add( particleVelocity.mul( dtUniform ).mul( 2.0 ) ).toConst( 'posNext' );
|
|
|
+ const posNextClamped = clampToRoundedBox( posNext, innerBox, innerRadius );
|
|
|
+ particleVelocity.addAssign( posNextClamped.sub( posNext ) );
|
|
|
+
|
|
|
+ /*
|
|
|
+ const wallStiffness = 1.0;
|
|
|
+ const xN = particlePosition.add( particleVelocity.mul( dtUniform ).mul( 2.0 ) ).toConst( 'xN' );
|
|
|
+ const wallMin = vec3( 3 ).div(gridSizeUniform).toConst( 'wallMin' );
|
|
|
+ const wallMax = vec3( gridSize ).sub( 3 ).div(gridSizeUniform).toConst( 'wallMax' );
|
|
|
+ particleVelocity.addAssign( wallMin.sub( xN ).max( 0.0 ).mul( wallStiffness ) );
|
|
|
+ particleVelocity.addAssign( wallMax.sub( xN ).min( 0.0 ).mul( wallStiffness ) );
|
|
|
+ */
|
|
|
+
|
|
|
+ // scale from (1, 1, 1) back to (gridSize.x, gridSize.y, gridSize.z) to
|
|
|
+ particleVelocity.mulAssign( gridSizeUniform );
|
|
|
+
|
|
|
+ particleBuffer.element( instanceIndex ).get( 'position' ).assign( particlePosition );
|
|
|
+ particleBuffer.element( instanceIndex ).get( 'velocity' ).assign( particleVelocity );
|
|
|
+
|
|
|
+ } )().compute( params.particleCount );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupMesh() {
|
|
|
+
|
|
|
+ // mergeVertices to reduce the number of vertexShaderCalls
|
|
|
+ const geometry = BufferGeometryUtils.mergeVertices( new THREE.IcosahedronGeometry( 0.008, 1 ).deleteAttribute( 'uv' ) );
|
|
|
+
|
|
|
+ const material = new THREE.MeshStandardNodeMaterial( {
|
|
|
+ color: '#0066FF'
|
|
|
+ } );
|
|
|
+
|
|
|
+ material.positionNode = Fn( () => {
|
|
|
+
|
|
|
+ const particlePosition = particleBuffer.element( instanceIndex ).get( 'position' );
|
|
|
+ return attribute( 'position' ).add( particlePosition );
|
|
|
+
|
|
|
+ } )();
|
|
|
+ particleMesh = new THREE.Mesh( geometry, material );
|
|
|
+ particleMesh.count = params.particleCount;
|
|
|
+ particleMesh.position.set( - 0.5, 0, - 0.5 );
|
|
|
+ particleMesh.frustumCulled = false;
|
|
|
+ scene.add( particleMesh );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupMouse() {
|
|
|
+
|
|
|
+ const raycaster = new THREE.Raycaster();
|
|
|
+ const raycastPlane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ) );
|
|
|
+
|
|
|
+ const onMove = ( event ) => {
|
|
|
+
|
|
|
+ const pointer = new THREE.Vector2( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );
|
|
|
+ raycaster.setFromCamera( pointer, camera );
|
|
|
+ raycaster.ray.origin.x += 0.5;
|
|
|
+ raycaster.ray.origin.z += 0.5;
|
|
|
+ mouseRayOriginUniform.value.copy( raycaster.ray.origin );
|
|
|
+ mouseRayDirectionUniform.value.copy( raycaster.ray.direction );
|
|
|
+
|
|
|
+ raycaster.ray.intersectPlane( raycastPlane, mouseCoord );
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ renderer.domElement.addEventListener( 'pointermove', onMove );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupParticles() {
|
|
|
+
|
|
|
+ setupBuffers();
|
|
|
+ setupUniforms();
|
|
|
+ setupComputeShaders();
|
|
|
+ setupMesh();
|
|
|
+ setupMouse();
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onWindowResize() {
|
|
|
+
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
+
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ async function render() {
|
|
|
+
|
|
|
+ const deltaTime = THREE.MathUtils.clamp( clock.getDelta(), 0.00001, 1 / 60 ); // don't advance the time too far, for example when the window is out of focus
|
|
|
+ dtUniform.value = deltaTime;
|
|
|
+
|
|
|
+ mouseForceUniform.value.copy( mouseCoord ).sub( prevMouseCoord ).multiplyScalar( 2 );
|
|
|
+ const mouseForceLength = mouseForceUniform.value.length();
|
|
|
+ if ( mouseForceLength > 0.3 ) {
|
|
|
+
|
|
|
+ mouseForceUniform.value.multiplyScalar( 0.3 / mouseForceLength );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ prevMouseCoord.copy( mouseCoord );
|
|
|
+
|
|
|
+ await renderer.computeAsync( [ clearGridKernel, p2g1Kernel, p2g2Kernel, updateGridKernel, g2pKernel ] );
|
|
|
+
|
|
|
+ if ( params.ambientOcclusion ) {
|
|
|
+
|
|
|
+ await postProcessing.renderAsync();
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ await renderer.renderAsync( scene, camera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Niklas Niehus
