Direct Ref Material Painting
Updating materials directly in-engine to bypass state hooks.
requestAnimationFrame(() => { meshRef.current.material.color.setHSL(tempVal, 1.0, 0.5); });IoT E-Governance App
Smart IoT Compliance & Monitoring Suite
Developed an interactive industrial digital twin dashboard using React, Three.js, and D3, solving CPU main-thread blocking by decoupling telemetry updates from React state rendering.
- Sector
- IoT E-Governance App
- Timeline
- 8 months
- Role
- Systems & WebGL Engineer
- React
- Vite
- Three.js
- React Three Fiber
- D3.js
- Leaflet
- Radix UI
- 60 fps
- Rendering Frame Rate
- 70%
- Manual Oversight Cut
WebGL facility display under 1K concurrent sensor inputs
Automated penalty evaluation efficiency
The problem
Handling major CPU thread blocking and rendering lag caused by high-frequency smart sensor inputs, and establishing cross-browser GPU compliance fallbacks.
The solution
Decoupled telemetry state bindings from React rendering cycles and developed an automated regulatory penalty compliance evaluator.
Approach
How it was built.
01
Decoupled Canvas Painting
Mapped live IoT variables directly to Three.js meshes using mutable references inside a requestAnimationFrame rendering loop, bypassing React virtual DOM updates.
02
D3 Sankey Flow Mapping
Mapped complex thermodynamic and chemical inputs flowing into processing units and attributing waste paths.
Technical detail
The parts worth explaining.
What I took from it
- Direct GPU canvas manipulation is mandatory for live telemetry
- Graceful 2D SVG fallbacks preserve accessibility
Where it goes next
- Integrate predictive AI models forecasting hardware failure schedules
- Deploy localized thermal imaging drone maps
Got a problem shaped like this?
If something here looks like what you're facing, tell me about it. The first conversation is an architecture discussion, not a sales call.