Urban fire safety, particularly in high-rise environments, requires sophisticated monitoring and evacuation planning. A 3D simulation provides an intuitive interface for fire positioning, equipment tracking, and emergency drills. Using WebGL and Three.js allows developers to create these complex environments that run directly in the browser without plugins.

Architectural Approach: Modeling vs. Procedural Generation

When building a 3D fire simulation, developers typically choose between two modeling strategies:

• External Modeling Tools (3ds Max, Blender): Offers high visual fidelity and rapid environment design. However, large files can lead to slow initial load times.
• Procedural Code Generation: Involves generating geometry (walls, floors, pipes) via JavaScript. This results in significantly smaller payloads and near-instant rendering at the cost of increased development complexity.

A hybrid approach is often optimal: using code for structural elements to ensure performance, while loading detailed assets for specific fire equipment or complex machinery in the background.

1. Initializing the 3D Environment

The transition from a 2D map to a 3D scene involves setting up a container and managing camera transitions. The following structure sets up the basic workspace for the simulatino.

<div id="webgl-container" class="viewer-frame"></div>

<script>
function initSimulation() {
    if (!Detector.webgl) {
        console.error("WebGL not supported");
        return;
    }
    
    const viewer = new SceneController('webgl-container');
    viewer.loadEnvironment();
}

const SceneController = function(elementId) {
    this.container = document.getElementById(elementId);
    this.currentFloor = null;
    
    this.enterScene = function(coords) {
        // Handle camera transition from 2D coordinates to 3D space
        this.animateCamera({ x: -500, y: 1000, z: 2000 }, { x: 0, y: 0, z: 0 });
    };
};
</script>

2. Fire and Smoke Dynamics

Fire simulation utilizes particle systems. By defining parameters for size, color interpolation, and velocity, we can create realistic smoke and flame effects that adapt to the environment.

const FireSystem = {
    createEmitter: function(pos, type) {
        const particleConfig = {
            name: "fire_instance_" + Date.now(),
            particleCount: 250,
            baseColor: type === 'smoke' ? 0x555555 : 0xff4400,
            spread: [70, 40, 70],
            lifespan: 2.5,
            texture: 'assets/textures/glow.png'
        };

        // Procedural generation of particle geometry
        const emitter = Engine.factory.create(particleConfig);
        emitter.position.set(pos.x, pos.y, pos.z);
        Engine.scene.add(emitter);
    },

    clearAlarm: function(id) {
        Engine.utils.removeObjectByName("fire_instance_" + id);
        UI.notify("Fire alarm cleared for zone: " + id);
    }
};

3. Visualizing Infrastructure: Piping and Wiring

For facility management, visualizing internal systems like sprinkler pipes or electrical wiring is critical. These are often rendered using tube geometries with animated textures to indicate flow direction.

function renderSprinklerSystem(floorLevel) {
    const pipePoints = [
        new THREE.Vector3(-200, 0, 0),
        new THREE.Vector3(0, 50, 200),
        new THREE.Vector3(200, 0, 400)
    ];

    const pipeGeometry = new THREE.TubeGeometry(
        new THREE.CatmullRomCurve3(pipePoints), 
        20, 2, 8, false
    );

    const flowMaterial = new THREE.MeshPhongMaterial({
        color: 0x00ccff,
        map: Engine.assets.getTexture('flow_indicator'),
        transparent: true,
        opacity: 0.7
    });

    const pipeMesh = new THREE.Mesh(pipeGeometry, flowMaterial);
    pipeMesh.position.y = floorLevel * 120;
    scene.add(pipeMesh);
}

4. Interactive Floor Management

Navigating through a skyscraper requires the ability to isolate specific floors. This is achieved by adjusting the visibility or opacity of meshes based on user selection.

const FloorManager = {
    isolateFloor: function(levelId) {
        const allObjects = Engine.getSceneObjects();
        
        allObjects.forEach(obj => {
            if (obj.userData.floorId === levelId) {
                this.highlightMesh(obj, 0x00ff00);
            } else {
                this.fadeMesh(obj, 0.1);
            }
        });
        
        this.focusCameraOnFloor(levelId);
    },

    fadeMesh: function(mesh, alpha) {
        if (mesh.material) {
            new TWEEN.Tween(mesh.material)
                .to({ opacity: alpha }, 600)
                .start();
        }
    }
};

5. Equipment Tracking and Safety Markers

Safety equipment such as fire extinguishers and hydrants are marked within the 3D space using Billboards (Sprites) or highlighted 3D icons. These markers maintain their size regardless of camera distance or can pulse to attract attention.

function deployEquipmentMarkers() {
    const extinguishers = SceneData.getEquipmentByType('extinguisher');
    
    extinguishers.forEach(data => {
        const marker = createPulseMarker(data.position);
        marker.onSelect = () => showStatusWindow(data.id);
        scene.add(marker);
    });

    function animateMarkers() {
        const scale = 1 + Math.sin(Date.now() * 0.005) * 0.2;
        markers.forEach(m => m.scale.set(scale, scale, scale));
        requestAnimationFrame(animateMarkers);
    }
}

6. Evacuation Path Planning

In an emergency, the system calculates the safest route to an exit. These paths are visualized using Spline curves that glow or animate to guide users.

function drawEvacuationRoute(startNode, exitNode) {
    const pathData = Pathfinding.calculate(startNode, exitNode);
    
    const routeCurve = new THREE.CatmullRomCurve3(
        pathData.map(p => new THREE.Vector3(p.x, 120, p.z))
    );

    const routeMesh = new THREE.Line(
        new THREE.BufferGeometry().setFromPoints(routeCurve.getPoints(50)),
        new THREE.LineBasicMaterial({ color: 0xffff00, linewidth: 2 })
    );

    scene.add(routeMesh);
    UI.flashObject(routeMesh, 3); // Flash 3 times to highlight
}

7. Ventilation and Smoke Control

Simulation of the HVAC system during a fire shows how smoke is extracted. Using "FlowTubes" with directional UV scrolling simulates the movement of air through the ventilation shafts.

const VentSimulation = {
    toggleExhaust: function(isActive) {
        const ventPipes = scene.getObjectsByProperty('type', 'VentPipe');
        ventPipes.forEach(pipe => {
            pipe.material.map.offset.x += isActive ? 0.01 : 0;
        });
    }
};