WebGPU 如何让浏览器 3D 设计变快

如今的浏览器，能做的早已不止是显示一个轻量的 3D 预览。有了 WebGPU，它可以用接近桌面渲染 API 的方式直接调用现代图形硬件。正因如此，Aedifex 才能在场景始终保持可交互的同时，实时更新材质、家具和光影。

简史

过去说到浏览器 3D，指的就是 WebGL——它是 OpenGL ES 的 JavaScript 绑定，2011 年前后登陆 Chrome。WebGL 让 Google Maps 的 3D 视图、Tinkercad、SketchUp Free 等应用成为可能。但它从一开始就是一种妥协：构建在一套老旧的 API 之上，而这套老旧 API 本身，又是对各家桌面 GPU API 的一次妥协。

WebGL 最大的几个痛点是：

单线程 JS 瓶颈。大多数图形调用都得绕道主 JS 线程。一个包含成千上万个物体的场景，往往在 GPU 还没忙起来时，就先被绘制调用的开销拖垮了。
没有计算着色器。WebGL 2 加入了一些类计算的特性，但远远谈不上现代意义上的 GPU 编程。
着色语言陈旧。GLSL ES 3.0 应付 2010 年前后的效果还行，碰到现代 PBR 和复杂光照就力不从心。

WebGPU 则是一次彻底的重新设计：它吸取了 Vulkan、Metal、Direct3D 12 的经验，再把这些能力带进浏览器。目前 MDN 还没有把它标为完全 Baseline，因为各浏览器、各设备的支持程度不一，但方向已经很清晰：现代 GPU 访问，如今已经成了 Web 平台的一部分。

WebGPU 能做、WebGL 做不到的三件事

1. 真正的计算着色器（Compute Shaders）

你可以运行通用的 GPU 计算代码，而不仅仅是渲染。对设计编辑器来说，这意味着光源裁剪、空间检测、场景数据批处理这类任务，都能从原本会挤占主 JS 线程的位置，搬到更靠近 GPU 的地方执行。

2. 多线程命令录制

WebGPU 让渲染代码能更精细地掌控命令缓冲区和资源绑定。面对包含大量墙段和家具实例的复杂场景，它的单物体开销比传统的 WebGL 循环更低，准备起来也更轻松。

3. 现代着色语言（WGSL）

WGSL 是专为 Web 而生的：类型安全、易于校验，也不存在驱动层面的未定义行为。我们用 WGSL 来编写 PBR（基于物理的渲染）着色器，正因如此，材质预览看上去才会像真实的材质，而不是 2002 年的电子游戏画面。

Aedifex 怎么用 WebGPU

实时 PBR 渲染

Aedifex 素材库里的每一种材质，都附带一整套 PBR 贴图：albedo（颜色）、normal（表面细节）、roughness（粗糙度）、metalness（金属度）。着色器用 Cook-Torrance BRDF 对它们逐像素求值——这和 V-Ray、Cycles 用的是同一套数学，只不过它在你的浏览器里跑到了每秒 60 帧，而不是在工作站上每帧要花 60 分钟。

如果你对技术细节感兴趣：这类渲染器通常会把分簇或分块光源管理、屏幕空间效果、时间抗锯齿，以及用 WGSL 编写的材质着色器组合在一起。但落到用户这一端，结果其实很简单：挪动一盏灯、换一块地板材质，操作应当是即时见效的。

实例化家具

一间典型的客厅里，往往摆着好几把同款椅子。如果每把都当成独立物体来渲染，光是椅子就要 4 到 8 次绘制调用。而用上实例化（instancing），四把椅子一次调用就能全部渲染出来。WebGPU 的存储缓冲区（storage buffer）让这件事实现起来很干净——不必再把实例数据塞进顶点属性里。

动态光照

当你在 Aedifex 里拖动太阳位置滑块时，光照会实时重新计算。太阳是一盏带级联阴影贴图的方向光，室内的灯则是带同样阴影贴图的点光源，每个像素的光照贡献都在片段着色器里逐像素算出。基础的阴影贴图，WebGL 也能做；但要同时管理几十个光源还游刃有余，靠的就是 WebGPU 改进后的绑定模型。

浏览器需要什么

截至 2026 年，WebGPU 的支持面已经足够广，能撑起正经的浏览器 3D 工作，但仍然需要做特性检测：

Chromium 系浏览器：目前对 WebGPU 支持最成熟
Firefox 和 Safari：支持已经改善，但用户仍应预料到版本和设备上的差异
老旧设备和受管浏览器：可能需要回退到 WebGL

Aedifex 会在选定渲染器之前先检测设备能力。即便浏览器不支持 WebGPU，用户看到的也应该是一个画质降级的编辑器，而不是一块空白画布。

这对浏览器优先工具的意义

五年前，想在浏览器里做一款正经的 3D 设计应用，往往意味着要在视觉效果上做出牺牲，去迁就 WebGL。而今天，在大多数用户真正在意的迭代规模上，浏览器工具的渲染质量已经能与桌面工具比肩。

这正是 Aedifex 坚持浏览器优先的原因。它不是嫁接在 2D Web 应用上的一个静态 3D 查看器，而是一款交互式设计编辑器——在这里，"免安装"和"链接即分享"，并不以放弃实时渲染为代价。

试试

用任意一款现代浏览器打开在线演示，调整一天中的时间，看着光照实时变化——这就是 WebGPU 在背后发挥作用。

想看工具对比，可以读 Aedifex 与 SketchUp 对比；想了解全部可用工具，可以读 2026 年免费 3D 建筑工具盘点。