Integrating engineering specifications with WebGL for emergency system simulation involves mapping physical infrastructure onto a digital scene. The comprehensive fire safety framework typically encompasses six core subsystems, yet this implementation concentrates specifically on the Fire Water Supply System. This subsystem acts as the critical lifeline for high-risk structures, requiring precise modeling of water sources, pump stations, and distribution networks to support both operational monitoring and emergency training.

1. Scene Management and Layer Visibility

To effectively visualize internal piping within a structural envelope, the rendering logic must separate static architectural elements from functional network components. A layer-based approach allows the camera to penetrate building facades without modifying geometry.

Logic Flow

1. Asset Segregation: During asset preparation, models are categorized (e.g., Building Envelope, Internal Pipes, Equipment).
2. Opacity Transitions: Visual depth is created by interpolating material opacity settings.
3. Visibility State: Specific groups toggle visible properties based on user interaction states.

Model Loader Implementation

The following example demonstrates asynchronous loading and visibility toggling using modern JavaScript patterns instead of legacy jQuery callbacks. It assumes a standard Three.js loader setup.

async function initializeSceneConfig(config) {
    const { fileUrl, navState } = config;
    
    try {
        // Load external model data
        const response = await fetch(fileUrl);
        if (!response.ok) throw new Error('Model data failed');
        
        const jsonModels = await response.json();
        
        // Reset current state: Hide structural bounds first
        await toggleBuildingVisibility(false, 200); // Opacity fade duration
        
        // Load specific component models into the scene group
        sceneRoot.add(...jsonModels.map(model => createMeshFromJson(model)));
        
        // Handle Camera Transition
        if (config.navPosition[navState]) {
            const targetPos = config.navPosition[navState];
            animateCameraTransition(
                config.navPosition[navState].camera,
                config.navPosition[navState].target,
                1000 // Duration in ms
            );
        }
        
        // Filter relevant components for UI linking
        const activeComponents = []; 
        sceneRoot.traverse((node) => {
            if (node.userData.type === 'pipe_segment') {
                activeComponents.push(node);
            }
        });
        
        updateUIWithComponents(activeComponents);
        
    } catch (err) {
        console.error('Scene Initialization Error:', err);
    }
}

function toggleBuildingVisibility(hidden, duration = 0) {
    return new Promise(resolve => {
        const buildings = sceneRoot.children.filter(c => c.name.startsWith('building_'));
        buildings.forEach(b => {
            b.visible = !hidden;
            if(duration > 0) {
                // Interpolation logic placeholder
                setTimeout(() => resolve(), duration);
            } else resolve();
        });
    });
}

2. Component Data Structures

Equipment specifications require structured metadata to drive tooltips and status dashboards. Data follows a hierarchical key-value format compatible with web view layers.

Fire Water Storage Tank Configuration

Defines capacity requirements based on municipal supply reliability.

const fireWaterTankConfig = {
    id: "storage_reservoir",
    displayName: "Fire Water Reservoir",
    metaArea: ['auto', 'auto'],
    details: [
        {
            id: "cap_calc",
            title: "Capacity Calculation Rules",
            content: `
                <ul>
                    <li>If municipal supply meets design flow: Reserve volume must satisfy <b>indoor usage during fire duration</b>.</li>
                    <li>If municipal supply is insufficient: Combine <b>indoor demand</b> + <b>outdoor shortage</b>.</li>
                </ul>
            `
        },
        {
            id: "min_vol",
            title: "Minimum Effective Volume",
            content: `
                <ul>
                    <li>Must be ≥ 100m³ for dual-path supply with continuous refill.</li>
                    <li>Must be ≥ 50m³ if only hydrant systems exist.</li>
                </ul>
            `
        },
        {
            id: "refill_time",
            title: "Refilling Standards",
            content: `
                <ul>
                    <li>Standard refill time ≤ 48 hours.</li>
                    <li>If total volume > 2000m³, limit extends to 96 hours.</li>
                </ul>
            `
        }
    ]
};

High-Level Fire Pressure Tank

Used for maintaining initial pressure at elevated points (rooftops). Includes anti-vortex fittings.

const pressureTankConfig = {
    id: "pressure_tank_roof",
    displayName: "High-Level Pressure Tank",
    children: [
        {
            id: "water_level",
            name: "Effective Water Level Limits",
            desc: "Based on outlet pipe geometry (bell mouth or vortex suppressor)."
        },
        {
            id: "depth_specs",
            name: "Submergence Depth",
            spec:
                `<ul>
                    <li>Bell Mouth: ≥ 600mm depending on flow velocity.</li>
                    <li>Vortex Suppressor: ≥ 150mm per manufacturer specs.</li>
                </ul>`
        },
        {
            id: "installation_clearance",
            name: "Maintenance Access",
            spec:
                `<ul>
                    <li>No pipes nearby: Wall clearance ≥ 0.7m.</li>
                    <li>Pipes nearby: Clearance ≥ 1.0m; Pipe-to-wall gap ≥ 0.6m.</li>
                </ul>`
        }
    ]
};

Centrifugal Pump Station Specifications

Core pressurization units require strict performance curves and material standards.

const pumpStationConfig = {
    id: "pump_station_main",
    type: "Centrifugal",
    parameters: [
        {
            label: "Performance Curve",
            value: "Smooth, no humps, no inflection points (flat head characteristic)."
        },
        {
            label: "Zero-Flow Pressure",
            value: "120% ~ 140% of Rated Design Pressure (P_des)."
        },
        {
            label: "Material Grade",
            value: "Shell: Ductile Iron. Impeller: Bronze or Stainless Steel."
        },
        {
            label: "Configuration Limit",
            value: "Maximum 3 working pumps per unit; Model consistency recommended."
        },
        {
            label: "Sealing Requirement",
            value: "Mechanical seals suitable for low-flow operation longevity."
        }
    ]
};

Junction Box & Booster Sets

Booster sets maintain stable line pressure (typically 0.6–1.2 MPa) to ensure quick response within 30 seconds of activation. They utilize air vessels to dampen fluctuations.

const boosterSetConfig = {
    id: "pressure_stabilizer",
    specs: [
        {
            rule: "Fluctuation Control",
            detail: "Prevent frequent cycling (>15 starts/hour) using air chamber volume ≥ 150L."
        },
        {
            rule: "Pressure Settings",
            detail: "Stabilizer start pressure > Auto-start threshold by 0.07~0.10MPa."
        },
        {
            rule: "Flow Rate",
            detail: "Design flow ≥ 1 L/s (or 1-3% of system design flow if leakage data unknown)."
        },
        {
            rule: "Pipe Isolation",
            detail: "Suction: Gate Valve. Discharge: Silent Check Valve + Gate Valve."
        }
    ]
};

3. Hydrant and Connector Interfaces

Fire hydrant connectors facilitate rapid refilling from external vehicles into the internal network, essential for high-rise operations where truck elevations are insufficient.

const connectorConfig = {
    placement_zone: ["High-Rise Residential", "Tunnels", "Basements > 2 levels"],
    metrics: {
        flow_rate: "10 ~ 15 L/s per connector",
        count_max: "Up to 3 units calculated, reduced based on reliability needs",
        installation_dist: "15m ≤ distance from outdoor hydrant/pool ≤ 40m"
    },
    valve_types: ["Gate Valve", "Check Valve", "Safety Relief Valve", "Drain Valve"]
};

Anti-surge devices prevent hydraulic shock when pumps trip unexpectedly, particularly critical when supply height exceeds 24 meters.