Skip to content

Commit

Permalink
Examples: Improved webgpu_compute_particles.
Browse files Browse the repository at this point in the history
  • Loading branch information
mrdoob committed Dec 22, 2023
1 parent 3a5de8c commit b7ebd00
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 12 deletions.
Binary file modified examples/screenshots/webgpu_compute_particles.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 14 additions & 12 deletions examples/webgpu_compute_particles.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<body>

<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - GPU Compute Particles / 100000 Particles
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - 1M Compute Particles
</div>

<script type="importmap">
Expand All @@ -34,7 +34,7 @@

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

const particleCount = 100000;
const particleCount = 1000000;

const gravity = uniform( - .0098 );
const bounce = uniform( .8 );
Expand Down Expand Up @@ -62,7 +62,7 @@
const { innerWidth, innerHeight } = window;

camera = new THREE.PerspectiveCamera( 50, innerWidth / innerHeight, .1, 1000 );
camera.position.set( 40, 15, 40 );
camera.position.set( 15, 30, 15 );

scene = new THREE.Scene();

Expand Down Expand Up @@ -90,9 +90,9 @@
const randY = instanceIndex.add( 2 ).hash();
const randZ = instanceIndex.add( 3 ).hash();

position.x = randX.mul( 60 ).add( - 30 );
position.y = randY.mul( 10 );
position.z = randZ.mul( 60 ).add( - 30 );
position.x = randX.mul( 100 ).add( - 50 );
position.y = 0; // randY.mul( 10 );
position.z = randZ.mul( 100 ).add( - 50 );

color.assign( vec3( randX, randY, randZ ) );

Expand Down Expand Up @@ -145,6 +145,7 @@
const particles = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), particleMaterial );
particles.isInstancedMesh = true;
particles.count = particleCount;
particles.frustumCulled = false;
scene.add( particles );

//
Expand All @@ -168,6 +169,7 @@
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

stats = new Stats();
document.body.appendChild( stats.dom );

Expand All @@ -184,9 +186,9 @@

const dist = position.distance( clickPosition );
const direction = position.sub( clickPosition ).normalize();
const distArea = float( 7 ).sub( dist ).max( 0 );
const distArea = float( 6 ).sub( dist ).max( 0 );

const power = distArea.mul( .1 );
const power = distArea.mul( .01 );
const relativePower = power.mul( instanceIndex.hash().mul( .5 ).add( .5 ) );

velocity.assign( velocity.add( direction.mul( relativePower ) ) );
Expand All @@ -195,7 +197,7 @@

//

function onHit( event ) {
function onMove( event ) {

pointer.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1 );

Expand All @@ -222,14 +224,14 @@

// events

renderer.domElement.addEventListener( 'pointerdown', onHit );
renderer.domElement.addEventListener( 'pointermove', onMove );

//

controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 5;
controls.maxDistance = 70;
controls.target.set( 0, - 1, 0 );
controls.maxDistance = 200;
controls.target.set( 0, 0, 0 );
controls.update();

//
Expand Down

0 comments on commit b7ebd00

Please sign in to comment.