← Back to projects

Industrial Machine 3D Simulation

Industrial Automation March 2025 Read in Chinese
ASP.NET Blazor Three.js JavaScript C#

Context

In an automation equipment company, machine motion sequences typically exist only in PLC code and engineers’ minds. When production line issues arise, operators can only see alarm codes on the HMI, with no intuitive way to understand the machine’s actual state. Sales engineers presenting machine capabilities to clients rely on static spec sheets and on-site visits.

This project aimed to build a web-based 3D simulation system that visualizes machine motion in real time within a browser.

Architecture

Backend: ASP.NET Blazor Server

Chose Blazor Server over Blazor WASM because real-time access to factory machine data was required. Via SignalR’s bidirectional connection, the backend continuously pushes machine state to the frontend.

Data sources:

  • TwinCAT ADS: Direct PLC variable reads (axis positions, IO states, program step sequences)
  • OPC UA: As a general-purpose industrial data interface fallback

Frontend: Three.js 3D Scene

Machine 3D models were exported from Blender as GLB format. Each movable part (slide, gripper, rotary axis) is an independent mesh, mapped to PLC variables through a naming convention.

Animation logic:

  • Backend pushes axis position values (e.g., X-axis = 125.3mm)
  • Frontend maps values to Three.js object position/rotation
  • Uses requestAnimationFrame with interpolation smoothing to prevent jitter caused by the data update frequency (approximately 100ms)

Camera and Interaction

  • Default auto-camera: Automatically switches to optimal viewing angle based on current execution step
  • Free mode: Users can freely orbit, zoom using OrbitControls
  • Part highlight on click: Clicking a part displays its corresponding PLC variable name and real-time value

Technical Challenges

Real-Time vs. Visual Smoothness Trade-off

PLC data update cycle is 1ms, but the effective update frequency reaching the web client through TwinCAT ADS over TCP is approximately 50-100ms. Direct application produces visible motion discontinuity.

The solution is frontend linear interpolation: upon receiving each new target position, lerp smoothly transitions to the target value over several frames. The cost is approximately 100ms of visual latency, which is acceptable for monitoring and demonstration purposes.

Model-to-PLC Variable Mapping

Established a naming convention: Blender object names use a PLC_ prefix followed by the ADS symbol path. For example, PLC_MAIN.Axis[1].ActPos maps to the X-axis current position. After loading the GLB, all objects with the PLC_ prefix are automatically parsed to build a mapping table.

Results

  • Operators can view real-time 3D machine dynamics on iPad, improving troubleshooting efficiency by approximately 40%
  • Sales demonstrations shifted from “bring clients to the factory” to “open a browser”, shortening the sales cycle
  • Subsequently adopted by three production lines as part of the standard monitoring interface