Many Fires, Two Draw Calls - GPU Fire Particles in Three.js (Tutorial)

Three.js GPU fire particles Tutorial: free live demo in your browser

This is a Three.js GPU particle fire tutorial by Shane Brumback / Indie Forge Studio, with a live WebGL demo you can run right here in your browser. No download needed. Learn how Super Soldier Battle draws all of its burning ruins and wrecks in just two draw calls: vertex-shader particles for flames, embers and smoke, distance fade, frustum culling, and no PointLights.

What does this tutorial cover?

Topics: GPU particles, two draw calls, shader-driven fire, high-performance WebGL effects. These are the same kinds of techniques used in Indie Forge browser games like Super Soldier Battle and Zombie Attack.

Who is it for?

JavaScript and Three.js developers building HTML5 / WebGL games, especially for fast fire effects in browser games. Beginners can follow along. Experienced devs can lift the code straight into a project.

Is it free?

Yes. The demo and the full tutorial are free on shanebrumback.com.

Does the demo run on mobile?

Yes. The demo above runs in modern desktop and mobile browsers (Chrome, Edge, Firefox, Safari). Use the fullscreen button for the best view.

Where is the full tutorial and source code?

Read the full walkthrough at https://www.shanebrumback.com/tutorials/threejs-gpu-fire-particles-two-draw-calls.html on shanebrumback.com.

See it in a real game

Play Super Soldier Battle (a free Three.js battle royale shooter) and Zombie Attack (a free Minecraft-style Three.js zombie FPS for desktop and landscape mobile), both in your browser.

Three.js GPU fire particles tutorial: a free Three.js / WebGL tutorial by Shane Brumback / Indie Forge Studio.