FBO Particles in Three.js

Just throwing some ideas here to see how we could add use particles simulation using FBO in three.js

Basically what this means is that particles positions are simulated/calculated in webgl shaders, so particles positions never need to be passed via JS, which potentially means its possible to run millions of particles in realtime.

here’s 2 poc, but they are not really integrated with three.js yet since things broke when i got into a little mess trying hack the webglrenderer.

http://jabtunes.com/labs/particles/experiments_fbo.html http://jabtunes.com/labs/particles/experiments_fbo2.html

perhaps we could something like this?

init() {
  particles = new THREE.FBOParticles();
  particles.simulation = new THREE.Composer(); //...
  particles.renderer = new THREE.ShaderMaterial(); //...

  particles.position.set(x,y,z);

  scene.add(particles)
}

render() {
  particles.updateSimulation();
  renderer.render(scene, camera);
}

[zz85]

Update of FBO particle experiments links with three.js for anyone who might find examples useful 😃

http://nucleal.com http://mrdoob.com/lab/javascript/webgl/particles/particles_zz85.html http://mrdoob.com/144/Magic_dust

[zz85]

heehee… managed to get @mrdoob experiment moved to the shaders.

before was running < 5fps on my macbook air, now its running at 30fps 😃