ShanksLiu / 刘玉坤 · Web 图形工程

把复杂三维能力做成可交付的产品

Web 图形工程 × 空间数据 × AI 业务集成

从训练管线、离线工具链到多引擎查看器与业务集成：三仓库闭环（16 项端到端断言）、GiB 级流式数据加工（峰值内存与文件大小解耦）、四个 iframe 子应用统一调度、移动端 55–60 FPS 实时三维。

查看核心案例下载简历
FIG.01无人机三维可视化平台 · 项目记录
无人机航线三维可视化平台界面01 地图航线02 任务表单同屏
交付形态（桌面 GCS / Web 任务视图 / 数据大屏）
3
uav 视图模块（mission / inspection / RealtimeLog / payload）
4
地图引擎（Mapbox / MapLibre）
2
交付现场 / 无人机三维可视化平台商业项目 · 页面记录（已脱敏）

CAPABILITIES

核心能力

三条能力线，每条都能追到对应的项目证据与可体验入口。

  • 3D Web 交付

    • 浏览器内实时渲染 3DGS / Mesh / 混合场景，移动端 55–60 FPS 历史记录
    • 编辑器 → 编译管线 → 独立查看器的离线工具链，三仓闭环

    工具链案例 →实验场可玩 →

  • 空间数据与 3DGS 工程化

    • GiB 级 PLY 流式加工，峰值内存与文件大小解耦（4.1 GiB → ~220 MB）
    • 采集 → SfM 门禁 → 训练 → LOD → 碰撞的全链路可复现

    数据管线案例 →LOD 可视化 →

  • AI Agent 工程集成

    • leader / sub-agent 编排接入真实业务，SSE 事件流与工具调用
    • 平台身份只读共享知识库，权限边界与幂等设计

    Agent 集成案例 →编排演示 →

ENGINEERING DECISIONS

我承担的工程决策

每个决策都能在对应案例中追到约束、取舍与结果。

  • 01

    数据与渲染预算

    4.1 GiB PLY 以约 220 MB 峰值内存完成流式轴向校正；LOD 分级与内存预算决定场景能否在浏览器稳定打开。

    4.1 GiB → ~220 MB16 MB 恒定缓冲34.1 → 20.7 MB

    查看案例 →
  • 02

    编辑器边界与撤销重做

    7 类对象混合编排、全部操作纳入撤销重做栈；命令栈与数据契约决定编辑器能否持续演进。

    7 类对象100% 撤销重做3 层引擎架构

    查看案例 →
  • 03

    权限与业务集成

    平台身份只读共享知识库、凭据不离开服务端；边界与幂等设计决定 Agent 能力如何安全接入业务。

    2 条能力线6 个 Agent 分工知识库只读共享

    查看案例 →

PIPELINE

从拍摄到浏览器：一条自研全链路

九个节点覆盖采集重建、数据加工与创作交付。点击节点查看工具与产物，相关案例可直接跳转。

  1. 重建

    STEP 01 · 重建

    采集

    手机或相机视频、多机阵列与鱼眼 Rig 的原始采集，统一抽帧并去畸变。

    查看相关案例 →

    TOOLS

    • FFmpeg
    • FishPoly 去畸变
    • 多相机 Rig

    OUTPUT

    frames/*.jpg

  2. STEP 02 · 重建

    SfM 重建

    FFmpeg 抽帧配合 COLMAP 恢复相机位姿，注册率不达标则中止训练。

    查看相关案例 →

    TOOLS

    • FFmpeg 9.0
    • COLMAP 4.2
    • 位姿先验

    OUTPUT

    sparse/ + cameras

  3. STEP 03 · 重建

    训练

    Brush 或 Nerfstudio splatfacto 训练高斯场景，导出 PLY。

    查看相关案例 →

    TOOLS

    • Brush 0.3.0
    • Nerfstudio splatfacto
    • gsplat

    OUTPUT

    scene.ply

  4. 数据加工

    STEP 04 · 数据加工

    轴向校正

    流式把 Z-up 数据校正为 Y-up，单文件可超过 4GB。

    查看相关案例 →

    TOOLS

    • 轴向校正 CLI
    • splat-transform

    OUTPUT

    *_yup.ply

  5. STEP 05 · 数据加工

    LOD 生成

    逐级抽稀生成多级 LOD，输出可按视距加载的分块 Streamed SOG。

    查看相关案例 →

    TOOLS

    • LOD 转换 CLI
    • scene-pipeline
    • Streamed SOG

    OUTPUT

    lod-meta.json + chunks

  6. STEP 06 · 数据加工

    碰撞生成

    分位裁剪后体素化，生成漫游用碰撞体，也可输出 GLB 网格。

    查看相关案例 →

    TOOLS

    • 碰撞生成 CLI
    • scene-pipeline（GPU 体素）

    OUTPUT

    voxel.json/.bin · GLB

  7. 创作与交付

    STEP 07 · 创作与交付

    场景编辑

    在 scene-studio 与 混合场景编辑器 中混合编排 3DGS、Mesh、灯光、热点与运镜。

    查看相关案例 →

    TOOLS

    • scene-studio
    • 混合场景编辑器
    • PlayCanvas

    OUTPUT

    .sscene

  8. STEP 08 · 创作与交付

    发布打包

    scene-pipeline 把 .sscene 工程包解包、烘焙并组装为标准产物包。

    查看相关案例 →

    TOOLS

    • scene-pipeline
    • splat-transform
    • Dawn WebGPU

    OUTPUT

    package-manifest

  9. STEP 09 · 创作与交付

    实时查看

    scene-viewer、Explorer 与 Hunter World 在浏览器中实时渲染产物。

    查看相关案例 →

    TOOLS

    • scene-viewer
    • supersplat-viewer 1.37
    • Explorer
    • Babylon.js

    OUTPUT

    浏览器实时渲染

VISUAL & INTERACTION

视觉与交互专题

商业渲染、三维交互展示与静物视觉的真实画面记录。

可选体验：三维查看器演示（外部样例）Grace Cathedral · 非自采成果

展开后展示 vincentwoo.com 的 Grace Cathedral 场景海报与查看器入口；该资产为外部演示样例，非自采重建成果，加载需要访问远程资源。

ShanksLiu（刘玉坤），Web 图形工程师——从数据管线、实时渲染到业务集成的完整交付，现居深圳。关于我 →

OPEN TO WORK

正在寻找 Web 图形 / 空间数据方向的工作机会

期望工作城市：深圳。同时也承接 3D 场景展示与查看器定制，服务范围见服务页。

联系我服务范围