从车库到浏览器：Forged.build与WebGPU革命

本文详细介绍了Forged.build工作室网站如何利用WebGPU技术将静态展示转变为可探索的3D世界，涵盖从Blender建模到WebGPU引擎的完整工作流程，包括光照烘焙、材质着色器和性能优化等核心技术。

从车库到浏览器：Forged.build与WebGPU革命

Forged.build重新构想了工作室网站的可能性，通过WebGPU将其从静态展示转变为可探索的活生生的世界。

项目起源

Forged网站始于一个简单的问题：如果工作室网站能让人感觉像一个真实的地方会怎样？不仅仅是缩略图滚动或精美主页，而是一个你可以真正踏入并探索的世界。

当开始Forged项目时，我知道我想融合两个热情：汽车和技术。汽车世界充满了充满目的的空间——车库、机械车间、制造实验室——但数字行业很少创造出有同样感觉的东西。这个网站成为了连接这两个世界的桥梁，是构建捕捉物理空间精神的数字空间的实验。

我们没有构建营销页面，而是构建了房间：车库、办公桌、工作台、测试空间。每个房间都锚定了故事的一部分：我们是谁，我们制造什么，以及如何制造。目标不是展示作品，而是创造一个你真正想要踏入的工作坊。

从车库到浏览器

视觉语言直接来自现实世界。借鉴了《东京漂移》中Han的车库氛围，以及Singer或Gunther Werks的简洁与工业美学交汇。Forged空间借用了同样的抛光与粗犷平衡：混凝土地板、金属货架、油漆和玻璃上的柔和反射。

早期，我使用AI图像生成制作概念模型——不是作为最终艺术，而是作为展示我想法的快速方式：车库外部、卷帘门打开、粗糙与精致之间的对比。这个捷径让我们在建模任何多边形之前就能进行视觉迭代。

从那里，我们在Blender中构建了完整环境，建模每个元素，用道具装饰场景，并烘焙光照通道以捕捉真实的衰减和阴影。挑战是让所有东西感觉连贯，多个房间形成一个连续的工作坊，全部照明就像它们属于同一个物理空间。

Blender到WebGPU工作流程

Forged网站中的每个场景都始于Blender，但在我们的自定义WebGPU引擎中变得生动。

在Blender中：

  • 建模和布局每个环境
  • 分配基础材质（需要时使用法线和粗糙度贴图）
  • 将光照烘焙到高分辨率纹理中，尽可能将多个对象打包到每个图集中

在WebGPU中：

  • 导入几何体（带Draco压缩的GLB）和光照贴图（单独的KTX2文件）
  • 通过引擎内GUI分配自定义着色器
  • 使用共享着色器模块（PBR、微表面BRDF和反射混合）按场景调整材质行为

我们不使用严格的glTF PBR规范。每个材质都手动调整以平衡性能和真实感——我称之为"伪追踪"管道的一部分。某些对象，如汽车，运行完整的PBR，带有粗糙度和金属度贴图。其他对象，如墙壁或家具，只使用烘焙光照加上微表面散射，以在高光中产生一丝运动感。

汽车是唯一使用真正PBR的东西，但要深入了解真实感渲染汽车，请查看Aura Color Explorer案例研究。

Blender为我们提供了真正光线追踪光照的精确性；WebGPU为我们提供了实时灵活性，使空间感觉生动。

管道简化概述： Blender → 烘焙光照 → 压缩（Draco + KTX2）→ 导入到WebGPU引擎 → 分配着色器 → 调整材质

工作坊照明——“伪追踪"管道

从一开始，目标不仅是让Forged工作坊看起来真实，还要让它表现得真实。在网络上几乎可以伪造所有东西，但光是最难令人信服地伪造的东西。

我称之为伪追踪。这是一种混合照明方法：烘焙真实感用于全局氛围，轻量级动态提示用于保持场景呼吸。它不是物理正确的，而是感知正确的。

两层光：

  • 烘焙漫反射： 所有间接光、颜色溢出和环境色调都在Blender中烘焙。这些贴图处理"世界照明”：环境充满柔和反射的方式。
  • 动态高光： WebGPU引擎内的小型实时系统仅处理高光：金属上的闪光、皮革椅子上的衰减、滚动时油漆上的微光。

每个材质都有一个简单的混合控制——一个0到1的值，决定动态层在烘焙基础上贡献多少。

1
2
3

vec3 baked = texture(Lightmap, uv).rgb;
vec3 spec = MicrofacetBRDF(normal, viewDir, lightDir, roughness);
vec3 color = mix(baked, baked + spec, uDynamicBlend);

微表面分布

高光层使用标准微表面BRDF分布，带有自定义粗糙度曲线，可夸大掠射高光。它不是完整的PBR堆栈；为了速度而精简。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

vec3 MicrofacetBRDF(vec3 N, vec3 V, vec3 L, float roughness, vec3 F0) {
    // 半向量
    vec3 H = normalize(V + L);

    float NdotV = max(dot(N, V), 0.0);
    float NdotL = max(dot(N, L), 0.0);
    float NdotH = max(dot(N, H), 0.0);
    float VdotH = max(dot(V, H), 0.0);

    // 避免非正规值/除法问题
    const float EPS = 1e-5;

    // GGX法线分布函数（Trowbridge-Reitz）
    float a   = max(roughness, 0.001);     // 感知粗糙度[0..1]
    float a2  = a * a;
    float d_denom = max((NdotH * NdotH) * (a2 - 1.0) + 1.0, EPS);
    float D = a2 / (3.14159265 * d_denom * d_denom);

    // 带有Schlick-G项的Smith遮蔽-阴影
    float k = (a + 1.0);
    k = (k * k) / 8.0;
    float Gv = NdotV / max(NdotV * (1.0 - k) + k, EPS);
    float Gl = NdotL / max(NdotL * (1.0 - k) + k, EPS);
    float G = Gv * Gl;

    // Schlick菲涅尔
    vec3  F = F0 + (1.0 - F0) * pow(1.0 - VdotH, 5.0);

    // 高光项
    vec3 spec = (D * G) * F / max(4.0 * NdotL * NdotV + EPS, EPS);

    // 能量守恒保护 + 光传输的NdotL因子
    return spec * NdotL;
}

这些高光随相机移动，即使烘焙光是静态的，也给人以深度和运动的错觉。这是那些微小的感知技巧之一，能让你的大脑相信世界是真实的。

为什么有效

完全烘焙的场景在移动前看起来很漂亮——然后它们感觉死气沉沉。当光在你滚动时散射和移动一点点时，你的大脑会触发某些东西：这是活的。这就是伪追踪的目标。

不追求完美的物理精度，我们追求那个怀疑的时刻，你停止思考着色器，只是感觉像站在一个真实的房间里。

滚动作为方向语言

如果光照让Forged世界可信，那么运动让它感觉有形。滚动是每个访问者共享的唯一输入，所以我们不将其视为触发器，而是视为语言。

一次一个轴

滚动不是操纵杆。它是一个单轴手势，网站尊重这一点。每个场景只在一个方向上移动，要么向前穿过空间，要么向下穿过结构，从不两者兼有。

如果你尝试混合它们，感觉就不对。一旦相机在绑定到滚动时弯曲或旋转，你的大脑就期望游戏风格的控制。通过承诺每个部分一个轴，体验保持直观：鼠标滚轮以直线移动世界，你的身体立即理解它。

剪辑

空间之间的过渡像电影剪辑一样工作。例如，当你到达楼梯时，相机不会爬上去——它会剪辑到新楼层。这是你在电影或游戏中看到的相同连续性技巧：运动在一个方向上继续，但地理重置。

那个单一剪辑保持节奏流畅，并强化了整个网站存在于一个连续建筑内的错觉。

调整节奏

获得正确的节奏不是关于关键帧或故事板；而是关于距离。每个场景在视图单位中都有定义的高度——字面上，你滚动多少屏幕高度来穿过它。

太快？添加更多视图高度。太慢？删除几个。经过几次调整后，流程锁定。

1
2
3

// 简化的滚动到相机映射
const sectionHeight = vh(300); // 每个部分3个视图高度
camera.position.z = scrollProgress * sectionHeight;

就这样。没有物理，没有缓动方程——只有比例。一旦这些比例感觉正确，网站就以自己的重力移动：足够重以感觉物理，足够轻以滑行。

后处理和氛围技巧

在光照和滚动系统锁定后，最后一层是关于氛围——让世界感觉扎根于现实的最后修饰。

色调映射和相机效果

自定义色调映射器平衡烘焙颜色与动态高光能量，然后是柔和晕影、一丝RGB偏移和一点胶片颗粒。这些小缺陷增加了一层模拟温暖——看起来渲染的东西和感觉拍摄的东西之间的区别。

反射和遮蔽

为了保持空间连接，我们在地板上添加了实时反射——一个微妙的镜像通道，将所有东西锚定到同一平面。在此基础上运行屏幕追踪方向遮蔽（SDDO），一种轻量级着色器，在伪造环境遮蔽的同时注入一丝光反弹。

这种混合通道在不牺牲性能的情况下提供深度——轮胎下的一点阴影，明亮表面周围的光晕——你的眼睛潜意识捕捉的那种细节。

即使所有东西都烘焙了，光仍然需要移动。当你滚动时，那些伪造的反射和遮蔽通道移动得刚好足以让空间感觉动态。它不是物理正确的，但感知上是准确的：观看静态渲染和站在其中一个里面的区别。

最后，这些后处理技巧不是关于装饰。它们是关于欺骗——说服你的眼睛不可能的事情正在浏览器标签中发生。

性能调优

在每个场景中发生如此多的事情，如烘焙和动态光照、反射、遮蔽和滚动驱动运动，保持网站在每个设备上的响应性归结为经验，而不是自动化。

在构建实时图形超过十年后，我已经培养了感知每类硬件能处理什么的感觉。我们不依赖复杂基准测试，而是依靠直觉和轻量级检测。高端GPU获得所有功能；中端设备放弃较重的通道；旧手机和预算PC仍然运行世界，只是动态技巧较少。

指导原则很简单：流畅运动第一，保真度第二。如果性能下降，我们在牺牲滚动流畅性之前很久就牺牲视觉奢侈品。相机应该总是感觉无重量。

层级 关键特性
高 所有效果，完整反射，动态高光，SDDO
中 半分辨率光照贴图，减少反射更新
低 仅烘焙光照，无反射或后处理FX

结果是感觉手动调整的性能——像凭耳朵而不是数字调整引擎。即使你无法测量，你也能听到它何时运行正确。

为什么WebGPU改变一切

整个Forged网站运行在WebGPU上，从WebGL最大的变化不仅仅是理论上的——它是物理上的。

在WebGL中，当东西变重时你能听到。风扇会旋转起来。使用WebGPU，它们保持安静。

这种安静说明了架构差异的一切。在WebGL中，几乎每个离屏效果——模糊、反射、光通道——都必须通过帧缓冲区处理，这意味着将每个操作视为纹理。它工作了，但代价很高。

使用计算着色器和工作组，WebGPU可以直接在GPU上执行相同的计算，几乎不需要绕道。像光散射、反射预过滤和模糊卷积这样的任务现在并行发生，而不会加热机器。

影响是真实的：更流畅的性能、更酷的设备，以及浏览器中可能性的更高上限。它允许我们连续运行在WebGL中会被禁止的效果，不仅每帧一次，而且每帧都运行。

对我们来说，WebGPU不仅仅是渲染器；它是Forged接下来将构建的一切背后的核心架构——网站、装置和交互式电影的基础，所有这些都共享相同的创意引擎。

WebGPU最终为Web体验提供了与本机引擎相同的表达范围。区别在于我们现在可以立即在任何地方部署它们，无需安装，无需妥协。

结论

从第一个烘焙测试渲染到第一个实时滚动通道，一切都只是……工作了。光照、布局、过渡——它们都比预期更快地契合。

这很重要，因为这是第一个Forged项目。它为之后的一切定下了基调。如果网站挣扎或感觉妥协，相信随后的六周冲刺会更难。但当车库门第一次打开，光洒在地板上完全如想象时，很清楚：我们正在构建真实的东西。

这不是关于炫耀技术。这是关于提醒人们网络仍然可以让你惊讶。

comments powered by Disqus
© 2020 - 2025 qife
使用 Hugo 构建
主题 Stack 由 Jimmy 设计
本站总访问量次 本站访客数人次