重构了渲染接口，换了新的着色器，C++ 还是太超前了。文章虽然是新发布的，不过技术应该早就完成了升级。
已加载全部内容
已加载全部内容
已加载全部内容
已加载全部内容
已加载全部内容
已加载全部内容
Figma 如何升级到 WebGPU 渲染
链接
简介
相似条目
笔记
BetaFigma渲染引擎核心用C++编写，通过WebAssembly编译后运行于浏览器主应用中，实现跨平台渲染逻辑复用。文章指出该方案既服务网页端用户，也用于服务端渲染与本地测试调试，需同时兼容浏览器WebGPU API与原生图形接口。
本文使用Emscripten将C++渲染代码编译为WebAssembly，并依赖其内置WebGPU绑定将C++调用映射到浏览器JavaScript WebGPU API。因Emscripten原生绑定已被弃用，Figma正迁移至Dawn提供的替代绑定以维持性能与兼容性。
Dawn是Chromium的WebGPU实现，本文将其集成到原生构建中，使同一套C++渲染代码既能通过WebAssembly在浏览器运行，也能直接在桌面端执行。无论网页还是原生路径，最终都由Dawn负责把WebGPU调用转译为底层图形API，同时提供异步错误报告与资源管理。
emdawnwebgpu是Dawn为Emscripten/WebAssembly提供的WebGPU绑定。Figma因Emscripten原有绑定即将废弃而计划切换至此方案，以继续在WebAssembly环境中高效调用WebGPU，同时保持与现有C++代码的兼容。
在本文中，RenderBundle 是 WebGPU 的一项特性，用于将多个绘制调用打包以减少 CPU 开销。Figma 计划利用它进一步优化渲染性能，尤其在向 GPU 提交工作时降低开销。目前该特性尚未实现，仅作为未来优化方向提及，与 compute shader、MSAA 等一起被列为 WebGPU 带来的新机会。
MSAA即多重采样抗锯齿，是WebGPU原生支持的渲染特性。Figma计划利用该特性替代现有WebGL方案，进一步降低边缘锯齿并提升整体绘制性能，属于WebGPU迁移后可解锁的优化方向之一。
本文中Naga是gfx-rs/wgpu项目下的开源工具，用于将着色器从较新版GLSL格式转换为WGSL。Figma通过自定义着色器处理器先解析WebGL 1时代的旧GLSL代码、完成格式升级，再调用Naga生成WGSL版本，从而同时支持WebGL与WebGPU两种后端，避免重复维护两套着色器。
WGSL 是 WebGPU 专用的着色语言，与旧 GLSL 在 uniform 分组与结构上差异显著。Figma 通过 shader processor 自动完成从 GLSL 到 WGSL 的转换，并同时输出两种语言版本，确保工程师只需维护单一源码即可同时支持 WebGL 与 WebGPU 渲染路径。
计算着色器是 WebGPU 新增能力，可将并行计算从 CPU 迁移至 GPU。Figma 目前已在接口层完成支持，未来将用于模糊渲染等场景，以进一步释放 GPU 性能。目前阶段主要为这类优化铺路，未在首次迁移中大规模启用。
WebGL 是 Figma 最初选择的浏览器图形 API，原为 3D 设计而生，后用于复杂 2D 无限画布。其依赖全局绑定状态，着色器使用旧版 GLSL，易因状态遗漏引发 bug。迁移中需维持现有 WebGL 实现不变，并作为 WebGPU 失败时的动态回退目标。
GLSL 是 WebGL 使用的着色语言，Figma 现有代码基于 WebGL 1 旧格式编写。项目保留所有 GLSL 源码，通过自定义处理器先升级为较新 GLSL，再借助 naga 工具生成 WGSL，同时提取输入类型与布局信息，避免双版本手动维护。
WebGPU 是 Chromium 2023 年引入的 WebGL 继任者，支持计算着色器、避免全局状态，并提供异步错误报告。Figma 为其重新设计渲染后端，使用 uniform buffer 批提交、bindGroup 缓存和 renderPass 合并等优化，同时处理异步读回与设备丢失场景。项目完成后计划进一步利用 MSAA 与 RenderBundles 降低 CPU 开销。
该分类暂无内容
该分类暂无内容
该分类暂无内容
Figma 自 2015 年起用 WebGL 构建浏览器渲染引擎，现已完成向 WebGPU 的迁移。该项目需重构图形接口以显式传递 draw call 参数、批处理 uniform 数据，并保持与 WebGL 的双向兼容。最终通过动态 fallback 机制完成 rollout，在部分 Windows、Mac、ChromeOS 设备上实现性能提升或持平，无明显回归。
相似条目
可左右滑动查看
- · - · 添加于 - -
