ZERO TO HERO / ENGINEERING SERIES
Build the viewer. Understand every pixel.从零构建 Viewer,理解每一个像素。
12 chapters. 8 runnable GPU milestones. One Rust/wgpu rendering core in a browser and a native window. Start with a clear screen, end with a moving research model—and know how each step works.12 篇工程博客、8 个可运行 GPU 里程碑,同一份 Rust/wgpu 核心连接浏览器与桌面窗口。从清屏走到动态研究模型,理解每一步怎样工作。
Two ways to follow along两种跟学方式
Start online if your setup is not ready. When you can predict the result, clone the repository and reproduce it locally. Each chapter gives the next code change, a command, expected pixels, a fault to investigate, and an explanation you can check.环境没准备好,先在线运行。能预测结果后,克隆仓库并本地复现。每篇都给出下一步代码修改、运行命令、预期像素、需要排查的问题,以及可展开核对的解释。
The milestone selector runs the complete reference implementation in different teaching modes. The blog explains how to build up those capabilities; the modes are not separate Git history checkpoints.里程碑选择器在完整参考实现上切换教学模式;博客拆解这些能力如何逐步构建。这些模式不是彼此独立的 Git 历史检查点。
What you will be able to build你将能够构建什么
Same code, different pixels?同一份代码,像素不同?
Investigate Metal, DX12 and browser WebGPU differences through symptoms, current code and three interactive examples.通过现象、当前代码与三个交互实验,排查 Metal、DX12 和浏览器 WebGPU 的渲染差异。
Read the cross-platform field notes →阅读跨平台渲染指南 →Inside Spark & PlayCanvas读懂 Spark 与 PlayCanvas
Follow three real Gaussian rendering routes from file loading to pixels, with fixed-commit source links and ideas for our Rust/wgpu implementation.跟踪三条真实 Gaussian 渲染路线,从加载到像素,逐步对照固定版本源码,并联系我们的 Rust/wgpu 实现。
Read the source walk-through →阅读源码全流程 →01 / Boot the renderer启动渲染器
Start with your first pixel从一个像素开始搭建
Create the project, run a known milestone, and name who owns every part of the frame.建立项目,运行确定的里程碑,说清一帧中每个部分由谁负责。
02 · READ → BUILD → VERIFY阅读 → 实现 → 验证Connect a window to the GPU把窗口连接到 GPU
Initialize both hosts, handle resizing, and follow a frame’s lifetime without confusing a window with a texture.初始化两个宿主,处理尺寸变化,分清窗口与纹理,追踪一帧的生命周期。
03 · READ → BUILD → VERIFY阅读 → 实现 → 验证Teach the GPU to draw a triangle教 GPU 画出第一个三角形
Connect shader stages, draw calls and interpolation to visible pixels.把 shader 阶段、draw call、插值与实际像素连接起来。
02 / Build the splat构建 splat
Move numbers from Rust into GPU memory把 Rust 中的数字送进 GPU 内存
Build the Rust/WGSL data contract and draw one quad per instance.建立 Rust/WGSL 数据约定,让每个实例绘制一个四边形。
05 · READ → BUILD → VERIFY阅读 → 实现 → 验证Turn a rectangle into a soft splat把矩形变成柔软的 Gaussian
Implement Gaussian falloff, premultiplied alpha and order-dependent composition.实现高斯衰减、预乘透明度以及依赖顺序的合成。
06 · READ → BUILD → VERIFY阅读 → 实现 → 验证Give the splat a camera and a 3D shape为 splat 加上相机与三维形状
Connect world/view/clip coordinates, the projection derivative and a screen-space ellipse.打通世界、观察、裁剪坐标,连接投影导数与屏幕椭圆。
03 / Connect a learned model连接训练模型
Load a real model without guessing its meaning明确数据含义,再加载真实模型
Decode a specific model contract, upload persistent records, and render the pretrained fixture.解码具体模型约定,上传常驻记录,渲染预训练数据。
08 · READ → BUILD → VERIFY阅读 → 实现 → 验证Make time an explicit rendering input让时间成为输入
Evaluate motion and temporal opacity, then keep camera, sort and playback synchronized.计算运动与时间透明度,让相机、排序及播放保持同步。
09 · READ → BUILD → VERIFY阅读 → 实现 → 验证Trace one learned number all the way to a pixel追踪一个学到的参数,直到最终像素
Connect capture, optimization, export and runtime without confusing a viewer with a trainer.连接采集、优化、导出与运行时,分清 viewer 和训练器的职责。
04 / Integrate, measure, ship集成、测量、交付
Integrate one pass into two hosts—and your engine让同一个 pass 接入两个宿主和自研引擎
Define a reusable rendering boundary, then account for depth, color and device ownership in an existing engine.定义可复用渲染边界,并在现有引擎里处理深度、色彩与设备所有权。
11 · READ → BUILD → VERIFY阅读 → 实现 → 验证Measure first, then design a compute rasterizer先测量,再设计 compute 光栅器
Separate bottlenecks and connect today’s quad renderer to a future tile-based backend.区分性能瓶颈,并把当前 quad 渲染器连接到未来的 tile 后端。
12 · READ → BUILD → VERIFY阅读 → 实现 → 验证Prove it works, then ship and explain it验证、交付,并把它讲明白
Produce repeatable evidence, a reviewable deployment and a concise engineering explanation.形成可复现证据、可审阅部署以及清楚的工程讲解。
A seven-session route七次实操路线
Sessions 1–2: chapters 1–4, clear/triangle/buffers. Session 3: chapters 5–6, alpha and projection. Session 4: chapters 7–8, model and time. Session 5: chapter 9 with the training lab. Session 6: chapters 10–11, engine integration and profiling. Session 7: chapter 12, reproduce the checks and give the five-minute walkthrough. Advance when you can explain the result, not merely when you reach the end of a page.第 1–2 次:第 1–4 篇,清屏、三角形与 buffer。第 3 次:第 5–6 篇,alpha 与投影。第 4 次:第 7–8 篇,模型与时间。第 5 次:第 9 篇配合训练实验。第 6 次:第 10–11 篇,引擎集成与性能。第 7 次:第 12 篇,复现检查并做五分钟讲解。能解释结果后再前进,不以读到页尾作为完成标准。