Architectural Overview

Developing high-fidelity digital twins for infrastructure management requires a robust rendering pipeline capable of handling complex geometries and dynamic data bindings. The architecture below demonstrates a scalable approach to visualizing building structures, managing spatial transitions, and synchronizing IoT sensor states within a WebGL environment.

Core Functionalities

Camera Control

Static viewing angles are pre-calculated to allow instant user navigation. Interaction triggers smoooth camera enterpolation between current positions and target focus points, ensuring stable framing during transitions.

Dynamic Level Management

To maintain performance, internal room geometries are instantiated only when required. High-detail models for specific floors are cached after initial loading, preventing redundant mesh calculations when switching between adjacent levels.

Device Synchronization

Asset objects are mapped to unique identifiers. API calls retrieve real-time status updates, driving visual attributes such as opacity changes or overlay information display.

Implementation Details

Geometric Configuration

Model asset are defined via structured JSON configurations. Geometry types include extruded shapes for facades and primitives for equipment nodes. Separating exterior frames from interior volumes allows for selective visibility control.

// Exterior Facade Configuration
const facadeConfig = {
  objectType: 'ExtrudeGeometry',
  name: 'building_exterior_shell',
  transform: { x: 2100, y: 6000, z: 2300 },
  settings: {
    pathPoints: [
      { x: 0, y: 0 }, { x: 100, y: 100 }, 
      { x: 100, y: 2300 }, { x: -50, y: 2450 }
    ],
    amount: 1
  },
  material: { color: 0xFF0000, side: 2, opacity: 1 }
};

// Equipment Node Configuration
const sensorNode = {
  objectType: 'Cylinder',
  radiusTop: 16,
  height: 100,
  segments: 24,
  texture: './assets/sensor_material.jpg'
};

Interaction Logic

Event handlers manage state locks during animation sequences to prevent user race conditions. This ensures the scene stabilizes before processing new input commands.

class SceneController {
  constructor(sceneReference) {
    this.scene = sceneReference;
    this.isAnimating = false;
    this.cameraTargets = {
      viewOne: { 
        position: { x: 9487, y: 8719, z: 10591 }, 
        target: { x: 4356, y: 4840, z: 3600 } 
      }
    };
  }

  switchView(viewIdentifier) {
    if (this.isAnimating) return;
    
    this.isAnimating = true;
    const config = this.cameraTargets[viewIdentifier];
    
    // Animate camera movement
    threeJsHelper.transitionCamera(
      config.position, 
      config.target, 
      1000,
      () => { this.isAnimating = false; }
    );
  }
}

Floor Management System

Levels are managed through caching mechanisms. When a specific floor is requested, the system verifies existing caches before instantiating new meshes. Visibility states are toggled based on the camera's frustum and active selection.

class LevelManager {
  constructor() {
    this.roomCache = new Map();
    this.activeFloorIndex = 0;
  }

  async loadFloor(levelNumber) {
    const cacheKey = `floor_${levelNumber}`;
    
    if (this.roomCache.has(cacheKey)) {
      return this.enableCachedRooms(cacheKey);
    }

    const newModels = await fetchLevelData(levelNumber);
    const transformedModels = newModels.map(model => {
      model.position.y += (levelNumber * 500); // Offset by floor height
      model.visible = true;
      return model;
    });

    this.roomCache.set(cacheKey, transformedModels);
    this.renderScene(transformedModels);
  }

  fadeOutInvisibleFloors(activeLevel) {
    this.allFloors.forEach(floor => {
      if (parseInt(floor.name.replace('build_f', '')) > activeLevel) {
        threeJsHelper.fadeObject(floor, 0, 0.01, 1000);
        floor.visible = false;
      }
    });
  }
}

Data Overlay Rendering

Informational popups are positioned relative to 3D coordinates, projecting onto the screen plane for fixed visibility regardless of camera rotation. This uses utility functions to convert world-space vectors to screen-space coordinates.

function renderInfoPopup(deviceRef) {
  const worldPos = deviceRef.position;
  const domContainer = document.createElement('div');
  
  // Transform 3D coordinate to 2D screen space
  const screenPt = deviceRef.projectOnScreen(domContainer);
  
  domContainer.style.left = `${screenPt.x}px`;
  domContainer.style.top = `${screenPt.y}px`;
  
  domContainer.innerHTML = `<strong>Device Status:</strong> ${deviceRef.status}`;
  document.body.appendChild(domContainer);
}