Pixel Flame Canvas Doom Fire - Three.js WebGL Guide

The Pixel Flame Canvas - Doom Fire project brings one of the most iconic graphics algorithms in video game history directly into modern web browsers. Inspired by the classic PS1 port of DOOM, this lightweight canvas application generates a dynamic, real-time fire simulation using modern JavaScript, CSS3, and Three.js rendering techniques.

Built specifically for web developers, front-end learners, and creative designers, this project reimagines traditional 2D pixel manipulation through high-performance WebGL context. Instead of relying on heavy video assets or bloated GIF images, the flame effect generates entirely via code, offering unmatched speed, flexibility, and scalability.

Why was this project created? Modern web experiences often lack the tactile, nostalgic charm of classic 90s visual engineering. Many developers want to incorporate procedural graphics into their personal sites or client landing pages but hesitate due to performance overhead. This codebase solves that exact challenge. It demonstrates how to achieve fluid, 60fps retro animation while keeping file sizes minuscule and network overhead practically zero.

By studying and integrating this component, developers gain direct insight into array manipulation, color-palette lookup tables, particle dissipation logic, and WebGL scene management. Whether you need an eye-catching hero background, a playful 404 page element, or an interactive portfolio feature, this project provides a clean, fully documented foundation ready for production deployment.

Key Features

• Real-time Procedural Fire Algorithm: Calculates heat decay and particle movement frame-by-frame without pre-rendered assets.
• Three.js WebGL Integration: Leverages GPU acceleration for smooth rendering even on lower-end devices.
• Fully Responsive Layout: Uses Bootstrap 5 grid systems to ensure seamless display on desktop, tablet, and mobile screens.
• Customizable Palette Matrices: Easily swap RGB values to change fire colors from classic fiery orange to cosmic blue or neon green.
• Zero External Image Dependencies: Operates completely through pure code, minimizing HTTP requests and speeding up initial page load.
• Interactive Wind & Decay Controls: Modify air direction, turbulence, and cooling rates dynamically via simple script parameters.
• Lightweight Footprint: Designed with minimal dependencies to guarantee fast parsing, low memory usage, and zero layout shifts.
• Clean, Modular Code Architecture: Organised into well-commented modules, making key functions effortless to extract or refactor.

Technologies Used

How It Works

The classic Doom fire algorithm operates by manipulating a 2D grid of intensity values, where each value represents a specific temperature level. The bottom row of pixels is continuously set to maximum heat (white/yellow).

In every frame update, the algorithm iterates from the bottom of the grid upward. For each pixel, it calculates a small, randomized cooling factor and propagates the heat value to the pixel directly above it—or slightly to the left or right to simulate wind draft.

Once the intensity grid updates, the numerical matrix maps onto an indexed color palette. Three.js updates the dynamic texture coordinates on a screen-aligned plane geometry, pushing the visual data straight to the graphics processing unit (GPU) for instant rendering.

Benefits

Real World Use Cases

Performance & SEO

Search engines evaluate websites based on user experience, load stability, and core web vitals. Because this canvas flame implementation operates purely through optimized scripts, it avoids heavy network payloads associated with media files.

• Fast Loading Times: Less than 15KB of core JavaScript means near-instant download speeds over cellular networks.
• Zero Layout Shifts (CLS): The HTML5 canvas retains fixed aspect ratios or uses container-relative sizing, eliminating unexpected page jumps during layout rendering.
• Full Accessibility Compliance: Includes proper fallback aria-labels and descriptive text alternatives for screen reader users.
• Mobile-First Optimization: Automatically scales pixel resolution dynamic sizing based on viewport pixel density to preserve high FPS on mobile screens.
• Clean Semantic HTML5: Structured with clean tags, structured microdata support, and explicit heading hierarchies that search crawlers easily index.

Customization Guide

Tailoring the Pixel Flame Canvas project to fit your specific design system requires only a few tweaks within the configuration object:

const fireColorsPalette = [
  {"r":7,"g":7,"b":7},     // Index 0: Dark background
  {"r":31,"g":7,"b":7},   // Index 1: Deep red
  {"r":223,"g":87,"b":7},  // Index 15: Bright Orange
  {"r":255,"g":255,"b":255} // Index 36: Pure White
];

// Increasing the random offset pushes fire left or right
const decay = Math.floor(Math.random() * 3);
const srcPixel = currentPixel - decay;
const dstPixel = currentPixel - FIRE_WIDTH;
firePixelsArray[dstPixel] = firePixelsArray[srcPixel] - (decay & 1);

Who Should Use This Project?

This project is tailored specifically for:

Conclusion

The Pixel Flame Canvas - Doom Fire project proves that memorable web experiences don't require bloated video backgrounds or sluggish assets. By combining timeless retro graphics algorithms with modern technologies like Three.js, HTML5, and Bootstrap 5, you get a performant, versatile component ready to elevate any web application.

Explore the codebase on CodeTap, test out custom palette configurations, and integrate this iconic visual effect into your next front-end web project today!

Frequently Asked Questions