Skip to content

作品与工程实践 ​

聚焦大规模图形渲染、可视化引擎、图编辑器与全栈工程落地。所有开源代码均公开可查,演示项目均可直接在线运行。

自研开源与架构工具 ​

大规模图形可视化工程系列 ​

前六个共用同一份确定性生成的 20,000 节点真实拓扑数据集,以不同渲染器与管线分别实现;第 7 个为完整可交互的 3D 家居设计应用;第 8 个反过来做 —— 一个渲染性能基准,把四种渲染方案放在同一份数据上比较,数字可复跑;第 9 个是晶圆图交互实验台,可切换三种绘图方案。全部支持直接在线运行(非录像演示),关键项目配有架构讲解视频。

01

瓦片化网络地图 MapLibre + deck.gl

20,000 节点 / 36,610 连线。瓦片模式首屏 1.62 MB / 16 块瓦片,完整模式单次 8.86 MB / 53 ms,两种模式都保持 60 FPS。左侧实时显示可见瓦片数、传输字节、每次请求耗时。

02

交互式 3D 场景 Three.js

42 个互联站点的可交互 3D 场景:InstancedMesh 实例化渲染、无后处理的辉光、曲线连线与流动粒子、射线拾取 → instanceId 直接索引数据模型。60 FPS / 83 draw calls。

03

车队实时监控 MapLibre + deck.gl

500 台车实时跑动、拖尾历史、电子围栏(实时在场计数)、点击查看详情。位置逐帧更新,拖尾按 400ms 采样 —— 60 FPS。

04

图编辑器引擎 零依赖 SVG + TypeScript

元件设计器 + 装配画布:语义引脚、连接策略校验、正交避障路由、命令式撤销重做。压测按钮可生成 2,000 个节点并保持 60 FPS;配套单元测试覆盖核心路径。

05

3D 产品配置器 Three.js

上传 GLB 模型与素材,点击模型表面贴花(DecalGeometry 贴合曲面而非浮在表面),支持拖动 / 缩放 / 旋转、分层管理、撤销与导出图片。

06

3D 地球视图 CesiumJS

与 01 共用同一份数据集的 Cesium 地球视图 —— 一份数据、两套引擎。分级细节(Backbone / Regional / 全部 20,000 节点)均 60 FPS,无 ion token、无影像服务依赖,点击节点可定位。

07

家居 3D 配置器 React Three Fiber + Zustand

户型本身是一份数据(改 floorplan.json 就改房型,不用动代码),24 个 SKU 商品库 + 28 个真实 CC0 模型。拖动摆放支持网格吸附、贴墙、叠放;非法落点会就近顺到合法位置并留下脚印。换款 / 换色 / 换材质、商品清单与合计、本地存档与版本冲突、第一人称漫游、HDRI 光照 —— 所有操作共用同一条撤销历史。

08

工业时序渲染基准 WebGL2 曲线 + TypedArray

六路本地合成信号,提供 Canvas 2D、ECharts 调优、ECharts 朴素和 WebGL2 四个独立选项。支持十万到一百万历史点、实时追加、全历史回看和 JSON 导出。配套文章记录 Canvas 2D 与 WebGL 的实测对比、绘制差异和计时边界。

09

晶圆图交互实验台 ECharts + Canvas 2D + deck.gl

三种绘图方案一键切换:ECharts 自定义 Die 方块与图表联动;Canvas / deck.gl 以 17,294 个 Die、30 万个模拟缺陷演示缩放、平移、点选、分类筛选和框选统计,并可追加缺陷。低倍率显示密度图,高倍率显示缺陷点。各方案数据规模不同,不是同条件性能基准,不涉及真实产线数据。

数据全部是合成或 CC0 素材,刷新即复现;网络类演示都挂了实时帧率计数器。链接直接可开,不需要登录或安装。

本站由 GitHub Actions 自动构建部署