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

现在的浏览器已经不只是能显示轻量 3D 预览。有了 WebGPU，它能用接近桌面渲染 API 的方式和现代图形硬件对话。这是为什么 Aedifex 能在场景保持交互的同时更新材质、家具和光影。

简史

浏览器 3D 过去意味着 WebGL，2011 年左右上 Chrome 的 OpenGL ES JavaScript 绑定。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 而生。类型安全、易验证、无驱动级 UB。我们用 WGSL 写 PBR(基于物理渲染)着色器，这是为什么材质预览看起来像真实材质而不像 2002 视频游戏。

Aedifex 怎么用 WebGPU

实时 PBR 渲染

Aedifex 家具库里每件材质都带 PBR 贴图：albedo(颜色)、normal(表面细节)、roughness(粗糙度)、metalness(金属度)。着色器用 Cook-Torrance BRDF 逐像素求值 — 和 V-Ray、Cycles 同一套数学，只是在你浏览器里 60 帧每秒跑，而不是工作站上 60 分钟一帧。

技术读者：这种渲染器通常组合分簇或分块光管理、屏幕空间效果、时间反走样、用 WGSL 写的材质着色器。重要的用户面结果更简单：挪一盏灯或换地板材质应该感觉即时。

实例化家具

典型客厅有多把同款椅子。每把作为单独物体渲染就是 4-8 个绘制调用仅椅子。带实例化，四把椅子一个调用渲染。WebGPU 的存储缓冲区让实现干净 — 不用把实例数据编码到顶点属性里。

动态光照

你拖动 Aedifex 的太阳位置滑块时，光照实时重算。太阳是带级联阴影贴图的方向光。室内灯是同样的点光源。每像素片段着色器算光贡献。WebGL 能做基础阴影贴图;WebGPU 改进的绑定模型让管理几十个光源实用。

浏览器需要什么

WebGPU 2026 年支持广到能做严肃浏览器 3D，但仍需特性检测:

Chromium 浏览器:WebGPU 今天最成熟的路径
Firefox 和 Safari:支持改善，但用户应预期版本和设备差异
老设备和受管浏览器:可能需 WebGL 兜底

Aedifex 选渲染器前检测能力。无 WebGPU 的浏览器，用户看到降级版编辑器而不是空画布。

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

五年前，在浏览器里造严肃 3D 设计应用意味着妥协视觉以适应 WebGL。今天，浏览器工具能在多数用户在意的迭代规模上匹配桌面工具的渲染质量。

这就是 Aedifex 浏览器优先的原因。它不是附加在 2D web 应用上的静态 3D 查看器;是交互式设计编辑器，"无需安装"和"链接分享"不要求放弃实时渲染。

试试

任何现代浏览器打开演示。改时段时看光照实时更新。那是 WebGPU 在工作。

工具对比:Aedifex vs SketchUp。所有可用工具:2026 年免费 3D 建筑工具。