graph LR
%% 定义样式
classDef hardware fill:#e2e8f0,stroke:#64748b,stroke-width:2px
classDef ros fill:#dbeafe,stroke:#2563eb,stroke-width:2px
classDef server fill:#dcfce7,stroke:#16a34a,stroke-width:2px
classDef web fill:#fce7f3,stroke:#db2777,stroke-width:2px
classDef protocol fill:#fff,stroke:#94a3b8,stroke-dasharray: 5 5
subgraph Physical_Layer [1. 物理层/硬件]
LiDAR(激光雷达设备):::hardware
end
subgraph Robot_ROS_Layer [2. 机器人端 Linux/ROS]
Driver(雷达驱动节点
C++ SDK):::ros
ROSCore((ROS Core)):::ros
Topic[/Topic: point_cloud2/]:::ros
Bridge(WebSocket 桥接服务
Go / Python):::server
end
subgraph Web_Client_Layer [3. 浏览器端 Frontend]
WS_Client(JS WebSocket 客户端):::web
Parser(数据解析器
ArrayBuffer -> Float32):::web
WebGL(Three.js / WebGL 渲染):::web
Canvas[屏幕画面]:::web
end
%% 连接关系
LiDAR --"UDP 广播
(原始二进制包)"--> Driver
Driver --"计算 XYZ
(解析协议)"--> ROSCore
ROSCore --"Publish
(sensor_msgs)"--> Topic
Topic --"Subscribe
(ROS 消息)"--> Bridge
Bridge --"WebSocket WSS
(二进制流/ArrayBuffer)"--> WS_Client
WS_Client --"接收数据"--> Parser
Parser --"构建 BufferGeometry"--> WebGL
WebGL --"绘制 Draw Calls"--> Canvas