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

Author: Fantashit

1 thought on “FBO Particles in Three.js

Comments are closed.