Interactive Digital Twin
Web-Based 3D Digital Twin Model of Industrial Machinery.
“Streamed real-time industrial sensor telemetry directly onto an interactive 3D WebGL machine model for predictive maintenance.”
Replace with high-res UI dashboard screenshot, mockup, or banner (Recommended 1920x1080)
Next-Generation Industrial Telemetry Visualization
Industrial operators are overwhelmed by tables of abstract sensor values. We engineered a browser-based 3D Digital Twin platform that imports CAD machinery models into WebGL and maps live vibration, temperature, and hydraulic pressure streams directly onto the machine's interactive geometry.
Project at a Glance
A web-based digital twin platform allowing factory engineers to inspect live operational health, sensor heatmaps, and historical telemetry directly on a 3D model of industrial machinery.
Industrial IoT & 3D Spatial Telemetry Visualization
Heavy Machinery Manufacturers & Factory Floor Managers
Q2 - Q4
Enabled factory operators to pinpoint mechanical failure points spatially in 3D seconds before catastrophic shutdowns.
The Problem
Heavy machinery produces hundreds of sensor readings per second. When alarms trip, plant managers receive cryptic error codes (e.g. 'Bearing #4 Vibration Exceeded') and struggle to locate the physical component within multi-ton industrial assemblies.
Abstract tabular dashboards fail to convey spatial context during critical equipment alerts.
Heavy desktop CAD software cannot be run on field tablets or web browsers.
Slow anomaly response times leading to costly unplanned assembly line downtime.
Difficulty correlating multi-sensor interactions (e.g. friction heat vs bearing rotation).
Goals
Technical Goals
- Smooth 60fps WebGL rendering of complex industrial assemblies on standard web browsers.
- Sub-100ms telemetry data streaming from factory PLC controllers via WebSockets.
- Dynamic 3D shader mesh coloring to visualize real-time thermal and stress gradients.
- TimescaleDB time-series integration for replaying historical failure events in 3D.
Business Goals
- Reduce mean time to identify mechanical root causes by over 50%.
- Prevent catastrophic machine burnouts through spatial predictive maintenance.
- Empower remote technical experts to troubleshoot field equipment without on-site travel.
My Role
Lead 3D Graphics & Systems Architect
Core Responsibilities
- Engineered the Three.js 3D rendering pipeline and glTF model optimization loader.
- Wrote custom GLSL vertex and fragment shaders for real-time thermal gradient mapping.
- Built the WebSocket ingestion gateway streaming telemetry from industrial edge gateways.
- Integrated TimescaleDB for high-throughput time-series sensor storage and playback.
Primary Focus Areas
Solution
The digital twin bridges physical sensors with a living virtual model. Industrial PLC controllers stream vibration, temperature, and RPM metrics to a cloud gateway. The web client projects these readings directly onto specific 3D mesh nodes, highlighting hot bearings or anomalous vibrations instantly.
Optimized WebGL Geometry
Decimated and LOD-managed CAD models load in under 2 seconds on web and mobile viewports.
Spatial Heatmap Shaders
Custom shaders interpolate sensor values into smooth thermal color gradients across machine surfaces.
Time-Travel Telemetry Playback
Rewind and replay sensor logs to inspect exact mechanical conditions leading up to historic breakdowns.
Architecture & Data Flow
Low-latency industrial telemetry pipeline connecting physical machine PLCs, WebSocket gateway, TimescaleDB time-series storage, and Three.js rendering client.
Edge Sensor Ingestion
MQTT / Industrial Edge GatewayFactory floor IoT gateway aggregates PLC sensor readings via MQTT protocol.
WebSocket Telemetry Hub
Node.js / WebSocketsNode.js WebSocket cluster broadcasts normalized sensor streams to connected web clients.
Time-Series Archival
TimescaleDB / PostgreSQLTelemetry points persist into TimescaleDB hyper-tables for long-term analytical queries.
3D WebGL Projection
Three.js / WebGL / GLSLThree.js client maps sensor floats into dynamic shader uniforms, coloring 3D meshes.
Core Features
Interactive 3D Assembly Explorer
Exploded 3D viewRotate, zoom, explode, and isolate individual machine components (motors, gears, bearings) in real-time.
Dynamic Thermal & Stress Shaders
Real-time thermal shadersMeshes dynamically transition from cool blue to warning red as component temperatures rise.
Historical Time-Travel Scrubbing
3D incident replayScrub through hours of past telemetry to visualize the exact sequence of events during a mechanical fault.
Predictive Anomaly Callouts
Early failure warningsAutomated visual badges highlighting bearings exhibiting harmonic vibration frequencies indicative of wear.
Engineering Decisions
glTF Binary (GLB) with Draco Compression vs Raw OBJ/STEP
Why: Compressed a 140MB raw industrial CAD assembly down to 8.2MB, enabling instantaneous browser loading over cellular network connections.
Challenges
Browser GPU Crashes on High-Polygon CAD Assemblies: Complex gears and bolts overwhelming mobile GPU memory.
Implemented Level-of-Detail (LOD) mesh decimation and frustum occlusion culling.
Maintained steady 60fps performance across laptops and mobile tablets.
Implementation Timeline
Model Optimization & 3D Shell
- glTF Draco optimization
- Three.js camera controls
- Exploded view logic
Real-Time Telemetry Pipeline
- MQTT bridge
- WebSocket distribution server
- Sensor node coordinate mapping
GLSL Shaders & Time Travel
- Thermal fragment shaders
- TimescaleDB historical playback
- Alert badges
On-Premise Testing & Launch
- Factory floor calibration
- Operator usability testing
- Production cutover
Results & Metrics
Silky smooth 3D interaction maintained across desktop and tablet viewports.
Near-instantaneous reflection of physical machine sensor changes in 3D.
Reduction in time required for technicians to locate physical defect origins.
Screenshots
Drop high-resolution interface screenshot here (Recommended 1920x1080)
3D Digital Twin Machine Assembly with Live Thermal Hotspots
Interactive WebGL viewport displaying physical machine geometry with dynamic heat mapping.
Drop high-resolution interface screenshot here (Recommended 1920x1080)
Component Isolation & Historical Time-Series Analysis
Detailed inspection view of isolated bearing node showing vibration amplitude trends.
Demo Video
Digital Twin Walkthrough: 2-minute video demonstrating 3D machine explosion, live thermal stress mapping, and scrubbing through historical failure logs.
Add iframe or video src in lib/case-studies-data.ts
Demonstration Highlights:
Lessons Learned
Industrial CAD files must undergo rigorous geometric cleanup and mesh decimation before they can run smoothly in browser WebGL contexts.
Spatial color gradients convey urgent machine status to shop-floor operators 10x faster than traditional numerical dashboards.
Tech Stack
3D & Frontend
Real-Time & Backend
Data & Infrastructure
Business Impact
The digital twin transformed industrial plant maintenance from reactive firefighting into proactive, spatially intuitive equipment management.