这次我们来看 WebGPU 玻璃材质渲染。先说结论如果只是想验证“WebGPU 到底能不能画玻璃”现在条件已经成熟。Chrome、Edge 的最新稳定版已经默认开启 WebGPU不需要安装任何 SDK 或运行时打开一个 localhost 页面或者 HTTPS 站点就能访问到 GPU。玻璃材质本身不是某个现成控件而是反射、折射、菲涅尔、透射吸收和粗糙度这些规则组合出来的渲染结果用 WGSL 写片元着色器可以逐环节控制。这篇文章会拆解三件事第一WebGPU 环境下怎么准备浏览器和 GPU 设备第二玻璃材质在实时渲染中的核心原理第三用 WGSL 写一个能跑起来的简易玻璃着色器并给出参数调整、性能观察和问题排查方法。适合读者准备从 WebGL 迁移到 WebGPU 的前端工程师、对实时渲染和 PBR 材质感兴趣的同学、需要做 Web 端 3D 产品展示的技术人员。全文不绑定特定框架核心逻辑可以迁移到自己的引擎封装或 three.js WebGPURenderer 方案中。1. 核心能力速览能力项说明技术类型Web 图形渲染 / 实时 3D 材质核心技术WebGPU 标准 WGSL 着色器主要功能玻璃、晶体、水等透明介质的实时渲染浏览器要求Chrome / Edge 较新稳定版需支持 WebGPU硬件门槛支持 WebGPU 的独显或核显与浏览器环境相关显存占用取决于画布尺寸、环境贴图分辨率和采样次数需实测开发方式原生 WebGPU API 或 three.js WebGPURenderer接口 API属于浏览器原生 API无额外服务端依赖批量任务不涉及传统批量任务适合实时交互和动态参数调优适合场景Web 产品展示、数字孪生、3D 编辑器、教育演示从材料看WebGPU 已经不是“未来技术”而是可以直接写业务代码的稳定标准。它的优点很明确比 WebGL 更接近现代 GPU 架构计算管线、存储缓冲、着色器语言都更规范缺点也很明显浏览器兼容性和显卡驱动差异仍然存在不能默认所有用户都能跑。2. 适用场景与使用边界WebGPU 玻璃材质最合适的场景是 Web 端实时预览。比如电商平台的透明包装展示、数字孪生场景中的玻璃围栏、3D 编辑器里的材质调参面板、展厅交互屏上的产品分解演示。这类场景的共同特点是画面不需要离线渲染那种量级的光线追踪精度但要求交互流畅、参数可调、加载方便。不合适的场景也要说清楚。如果要做高精度玻璃产品渲染图或者对折射细节有严格物理正确性要求首选还是离线渲染器或路径追踪方案WebGPU 玻璃材质更适合“能看、能动、能调参数”的实时预览。使用边界和合规提醒材质效果依赖环境贴图。不要在未授权情况下使用他人商业环境贴图或产品模型。如果项目里出现人脸、品牌 Logo、建筑物外观等素材要确认授权范围。WebGPU 页面能访问本地 GPU部署到公网时建议走 HTTPS并控制页面允许加载的外部资源域。涉及生成内容的场景需要保留资产来源和授权记录避免版权纠纷。还有一点容易被忽略WebGPU 的底层安全模型更严格写着色器和传递 Buffer 时要注意跨域资源、隐私窗口模式等限制不是一个 HTML 文件直接拖到浏览器里随便跑的时代了。3. 环境准备与前置条件3.1 浏览器检查先检查当前浏览器是否支持 WebGPU。打开 Chrome 或 Edge 的地址栏输入chrome://gpu或者edge://gpu能看到 WebGPU 相关的状态。更直接的方式是在控制台执行if (navigator.gpu) { console.log(WebGPU 可用); } else { console.error(当前浏览器不支持 WebGPU请升级到最新版 Chrome/Edge); }如果返回navigator.gpu是undefined说明浏览器版本太旧或者处于不支持 WebGPU 的隐私模式。3.2 GPU 设备检查浏览器里可以查询适配器和设备信息const adapter await navigator.gpu.requestAdapter(); if (!adapter) { console.error(没有找到可用的 GPU 适配器); } else { console.log(适配器信息, adapter.info); const device await adapter.requestDevice(); console.log(GPU Device 已创建, device); }这里要注意adapter.info在不同浏览器里返回字段有差异不能依赖它做严格的硬件型号判断。WebGPU 会自动做 GPU 进程管理多数情况下不需要手动指定哪块显卡。3.3 网络服务要求WebGPU 不能直接在file://协议下稳定使用尤其是加载纹理、环境贴图、模型资源时会有跨域问题。开发阶段用本地静态服务npx serve .或者用 Pythonpython3 -m http.server 8080打开http://localhost:8080测试。如果部署到生产环境必须使用 HTTPS否则 WebGPU 的纹理采样和外部资源加载可能被浏览器拦截。3.4 开发工具推荐准备一个支持 WGSL 语法高亮的编辑器。VS Code 可以安装 WebGPU 相关插件比如WGSL语言支持插件Chrome DevTools 的Rendering面板里也能看到 WebGPU 相关信息。日常调试时Dawn的验证日志会输出到浏览器控制台看到GPUPipelineError或createPipeline validation error这类信息说明着色器代码或管线描述有问题。4. WebGPU 基础初始化从 Canvas 到 Render Pipeline在写玻璃材质之前先把 WebGPU 的最小初始化流程跑通。4.1 获取 Canvas 上下文const canvas document.getElementById(gpu-canvas); const context canvas.getContext(webgpu); if (!context) { throw new Error(当前浏览器不支持 WebGPU Canvas Context); }4.2 请求设备和配置画布const adapter await navigator.gpu.requestAdapter(); const device await adapter.requestDevice(); const format navigator.gpu.getPreferredCanvasFormat(); context.configure({ device: device, format: format, alphaMode: opaque });这里的format使用浏览器偏好格式通常是bgra8unorm或rgba8unorm不要硬编码。4.3 最简渲染循环function frame() { const commandEncoder device.createCommandEncoder(); const passEncoder commandEncoder.beginRenderPass({ colorAttachments: [ { view: context.getCurrentTexture().createView(), clearValue: { r: 0.1, g: 0.1, b: 0.15, a: 1.0 }, loadOp: clear, storeOp: store } ] }); // 这里后续提交模型 draw 调用 passEncoder.end(); device.queue.submit([commandEncoder.finish()]); requestAnimationFrame(frame); } requestAnimationFrame(frame);能跑通这段代码说明 WebGPU 管线已经建立。之后所有效果都在passEncoder和 WGSL 着色器之间展开。5. 玻璃材质渲染原理拆解玻璃材质要做得像核心不是“透明度”而是四个物理现象的组合5.1 透射与折射光线进入玻璃后会弯曲弯曲程度由折射率IOR决定。常见玻璃 IOR 约为 1.5水约 1.33钻石约 2.42。实时渲染里折射的常见做法是用环境贴图采样折射方向而不是真的追踪场景里所有物体。简化思路拿到视线方向V和物体法线N用折射公式计算方向T后对环境贴图做一次textureSample。这个方向需要钳制到有环境信息的方向否则会出现明显黑边。5.2 反射与菲涅尔玻璃表面存在反射。反射强度不是固定值而是随视线角度变化正对着玻璃看时反射很弱斜着看时反射很强。这个现象用菲涅尔公式描述。实时渲染中常用 Schlick 近似F F0 (1 - F0) * pow(1 - dot(V, N), 5)F0是正视角反射率玻璃大约在 0.04 左右。5.3 吸收与雾感厚玻璃会有颜色比如绿色玻璃边缘看起来偏绿这是光线在介质内部被吸收的结果。实时渲染里可以用两层方式模拟外层反射保留清晰细节内层叠加一个基于厚度或距离的透射衰减色。5.4 粗糙度与模糊真实玻璃表面不是绝对光滑的反射和折射都会出现模糊。严格做法是微表面模型比如 GGX 分布简化做法是给采样方向加一点扰动粗糙度越高扰动越明显。5.5 环境贴图玻璃效果的好坏很大程度取决于环境贴图。实时渲染中玻璃反射/折射的“颜色来源”就是环境贴图。建议使用高动态范围HDR环境贴图能够提供更丰富的高光细节。6. 用 WGSL 实现一个基础玻璃着色器下面是一个简化的 WGSL 玻璃材质着色器。它使用环境立方体贴图作为反射和折射来源并在片元阶段做菲涅尔混合。6.1 顶点着色器struct VertexInput { location(0) position: vec3f32, location(1) normal: vec3f32, location(2) uv: vec2f32, }; struct VertexOutput { builtin(position) clipPosition: vec4f32, location(0) worldPosition: vec3f32, location(1) worldNormal: vec3f32, location(2) uv: vec2f32, }; struct CameraUniform { viewProj: mat4x4f32, model: mat4x4f32, cameraPosition: vec4f32, }; group(0) binding(0) varuniform camera: CameraUniform; vertex fn vs_main(in: VertexInput) - VertexOutput { var out: VertexOutput; out.worldPosition (camera.model * vec4f32(in.position, 1.0)).xyz; out.worldNormal normalize((camera.model * vec4f32(in.normal, 0.0)).xyz); out.uv in.uv; out.clipPosition camera.viewProj * vec4f32(out.worldPosition, 1.0); return out; }6.2 片元着色器group(0) binding(1) var envMap: texture_cubef32; group(0) binding(2) var envSampler: sampler; struct GlassParams { ior: f32, roughness: f32, baseColor: vec3f32, }; group(1) binding(0) varuniform params: GlassParams; // 手动实现折射方向便于后续调整 fn refract2(incident: vec3f32, normal: vec3f32, eta: f32) - vec3f32 { let cosI dot(-incident, normal); let sinT2 eta * eta * (1.0 - cosI * cosI); if (sinT2 1.0) { // 全内反射 return reflect(incident, normal); } return eta * incident (eta * cosI - sqrt(1.0 - sinT2)) * normal; } fn fresnelSchlick(cosTheta: f32, f0: f32) - f32 { return f0 (1.0 - f0) * pow(1.0 - cosTheta, 5.0); } fragment fn fs_main(in: VertexOutput) - location(0) vec4f32 { let V normalize(in.worldPosition - camera.cameraPosition.xyz); let N normalize(in.worldNormal); // 反射方向 let R reflect(V, N); // 折射方向eta 表示当前空气进入材质的比例 let eta 1.0 / params.ior; let T refract2(V, N, eta); // 采样环境贴图 let baseF0 0.04; let fresnel fresnelSchlick(dot(-V, N), baseF0); // 粗糙度越离谱越需要模糊这里先用扰动模拟 let blurredN normalize(N vec3f32(params.roughness) * vec3f32(0.1, 0.09, 0.11)); let reflectDir mix(R, reflect(V, blurredN), params.roughness); let refractDir T; let reflColor textureSample(envMap, envSampler, reflectDir).rgb; let refrColor textureSample(envMap, envSampler, refractDir).rgb; // 透射吸收简化处理 let absorption exp(-vec3f32(2.0, 1.5, 1.0) * distance(in.worldPosition, camera.cameraPosition.xyz) * 0.02); var color mix(refrColor * absorption, reflColor, fresnel); color mix(color, params.baseColor, 0.05); return vec4f32(color, 1.0); }这段代码的核心是用refract2计算折射方向用fresnelSchlick计算反射比率然后把环境贴图采样的反射颜色和折射颜色混合。粗糙度和吸收系数都是简化写法适合做 demo 演示。6.3 JavaScript 侧管线配置创建渲染管线时要把上面两个 WGSL 模块编译进GPUShaderModuleconst shaderModule device.createShaderModule({ code: shaderCode }); const pipeline device.createRenderPipeline({ vertex: { module: shaderModule, entryPoint: vs_main, buffers: [ { arrayStride: 32, attributes: [ { shaderLocation: 0, offset: 0, format: float32x3 }, { shaderLocation: 1, offset: 12, format: float32x3 }, { shaderLocation: 2, offset: 24, format: float32x2 } ] } ] }, fragment: { module: shaderModule, entryPoint: fs_main, targets: [{ format: format }] }, primitive: { topology: triangle-list, cullMode: back }, layout: auto });需要说明的是layout: auto可以省去手写绑定组布局但对性能敏感项目建议显式定义GPUBindGroupLayout。7. 功能测试与效果验证7.1 测试一最小可运行场景先创建一个球体或茶壶模型绑定玻璃着色器观察是否出现基本高光和环境反射。输入一个顶点数量适中的球体法线正确。操作覆盖场景为纯色背景放置环境贴图。预期结果球体边缘出现菲涅尔高光表面能看到环境映射。成功标准旋转相机时高光随视角变化不是固定贴纸。7.2 测试二折射方向验证把ior参数从 1.1 调到 2.0观察球体背后背景的形变程度。ior1.0时折射方向等于入射方向画面几乎无变形。ior1.5时背景物体位置会发生明显偏移这是玻璃最常见的折射效果。ior2.4时画面变形剧烈接近钻石材质。如果调整ior看不到变化优先检查refract2函数中eta的方向入射向量和法线是否同向法线是否经过归一化。7.3 测试三粗糙度影响当roughness0.0时反射和折射边缘清晰锐利。当roughness0.3时反射开始模糊画面出现磨砂玻璃质感。当roughness0.7时透射部分几乎无法辨认。当前代码中粗糙度的模拟方式比较粗暴直接对法线做扰动生产级效果建议换成微表面 GGX 采样。7.4 判断是否成功的标准玻璃材质看起来“真”的关键指标边缘有菲涅尔渐变垂直视角和掠射视角反差不明显。背景透过物体后有连续形变而不是被半透明滤镜简单模糊。高光和环境反射存在层次不会出现一整片死白。相机旋转时反射内容变化连贯不发生跳变。7.5 常见失败现象现象可能原因物体全黑环境贴图未正确绑定或采样方向为 0高光闪烁法线未归一化或模型有非均匀缩放折射反向refract2的入射向量方向反了边缘发白菲涅尔公式中cosTheta取值未钳制性能骤降画布分辨率过高或环境贴图采样次数过多8. 接口 API 与调用边界WebGPU 本身不是服务端 API而是一组浏览器暴露出的 Promise 接口。可以说它的“接口能力”体现在 JS 侧8.1 核心接口navigator.gpu.requestAdapter() // 请求适配器 adapter.requestDevice() // 请求设备 device.createShaderModule() // 编译 WGSL 着色器 device.createRenderPipeline() // 创建渲染管线 device.createCommandEncoder() // 创建命令编码器 device.queue.submit() // 提交命令队列 context.getCurrentTexture() // 获取当前帧画布纹理8.2 参数动态更新玻璃材质适合做参数实时调节。把ior、roughness、baseColor放到 uniform buffer 里然后在渲染循环中通过device.queue.writeBuffer更新const paramsBuffer device.createBuffer({ size: 32, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }); const params new Float32Array([ 1.5, // ior 0.05, // roughness 1.0, 1.0, 0.98, // baseColor 0.0 // 对齐占位 ]); device.queue.writeBuffer(paramsBuffer, 0, params);每次用户拖动滑块时重新填充params数组并调用writeBuffer即可。8.3 与 three.js 的结合如果不想手写全部渲染管线和模型加载可以使用 three.js 的 WebGPURenderer。它是 three.js 对 WebGPU 的官方后端材质系统保留了MeshPhysicalMaterial这类物理材质参数。当前版本对透射、清漆、折射率等参数的支持仍在快速迭代使用前要确认你安装的 three.js 版本和官方 WebGPU 示例保持同步。9. 资源占用与性能观察这里重点说明怎么看 WebGPU 场景的性能给出一套通用观察方法。9.1 在 Chrome DevTools 里观察打开 DevTools 的 Rendering 面板开启FPS meter可以看到实时帧率。Performance 面板里可以记录一段渲染过程查看 GPU 相关任务耗时。WebGPU 的调试信息不一定和 WebGL 完全一致更可靠的方式是查看命令队列提交的间隔。9.2 影响性能的关键因素因素对性能的影响画布分辨率分辨率翻倍片元着色器执行量翻四倍左右环境贴图分辨率贴图越大缓存占用越高采样带宽压力越大采样次数每增加一次textureSample片元耗时上升模型顶点数影响顶点着色器和光栅化开销粗糙度采样生产级 GGX 采样往往要多次采样性能开销明显9.3 降低开销的思路开始测试时用 720p 或 900p 画布确定效果后再提升分辨率。环境贴图使用 mipmap并让sampler开启各向异性过滤时注意上限。对粗糙度模糊可以先对低分辨率环境贴图采样再放大混合。避免每个片元做大量循环能用纹理查询替代的复杂计算尽量用纹理表达。实际显存占用需要结合你的画布尺寸、贴图格式和模型规模来测无法给出通用数值。运行时间一长可以打开任务管理器观察浏览器进程的 GPU 内存占用趋势。10. 常见问题与排查方法问题现象可能原因排查方式解决方案navigator.gpu为 undefined浏览器版本过旧或隐私模式限制在控制台打印navigator.gpu升级 Chrome/Edge 稳定版创建管线时报 validation errorUniform 结构体对齐错误或绑定组不匹配查看控制台 GPU 错误日志检查 WGSL 中向量对齐vec3后补vec4Canvas 黑屏渲染管线未提交或着色器输出被优化查看context.configure是否正确确认帧循环中passEncoder结束并submit环境贴图加载失败跨域问题或贴图格式不支持检查 Network 面板使用 HTTPS 或 localhost贴图转成KTX2等 WebGPU 友好格式折射画面反向折射入射向量方向不对打印固定点的 V/N 方向调试时先设置ior1.1观察方向帧率突然下降环境贴图采样次数过多或分辨率过高用 DevTools Performance 记录降低贴图分辨率或使用模糊预滤波纹理在部分 Windows 笔记本上掉驱动混合 GPU 环境或浏览器 GPU 进程切换查看浏览器chrome://gpu更新显卡驱动关闭部分硬件加速做对比11. 最佳实践与合规注意事项11.1 开发流程建议第一次实现玻璃材质不要一开始就追求完整 PBR。先跑通基础反射再加入菲涅尔再加入折射最后做粗糙度和吸收。每加一个环节就截图对比这样能快速定位写错的地方。11.2 工程化建议WGSL 着色器建议拆成独立文件通过构建工具注入不要写在一大段字符串里。Uniform Buffer 统一管理材质参数和相机参数分开。环境贴图统一走资源加载服务避免直接访问第三方跨域地址。渲染循环里加入可视化的参数面板dat.GUI 或 lil-gui方便调参。保留一份最小可运行场景遇到报错时先把复杂场景剥离回到最小场景确认基础管线。11.3 合规与安全边界WebGPU 页面运行在用户浏览器中开发时要注意不要用 WebGPU 处理用户上传素材后在无提示情况下进行人脸、肖像相关处理。环境贴图和模型资源要确认授权不要随意抓取商业网站素材。页面发布到公网时启用 HTTPS限制外部脚本和纹理域避免引入不可信资源。如果项目涉及用户隐私数据比如相机画面、麦克风输入必须在浏览器授权流程中明确告知用途。11.4 性能目标玻璃材质 demo 的目标帧率建议保持 60 FPS。如果达不到优先降低画布分辨率而不是减少采样次数因为分辨率对画面观感影响最直接。也可以提供“低画质模式”把采样次数动态降为 1 次。12. 总结与下一步WebGPU 玻璃材质最值得尝试的点不是“做出一个玻璃球”而是它让 Web 端实时渲染第一次拥有了接近现代图形 API 的底层控制能力。从这篇内容出发建议先做三件事跑通最小 Canvas 初始化、把简单玻璃着色器挂到一个球体上、用参数面板实时调ior和roughness。最容易踩的坑集中在三处WGSL 里 Uniform 结构体对齐问题vec3没有补齐 16 字节导致渲染结果异常。折射方向写反看起来像“假半透明”而不是“光线弯折”。环境贴图格式和采样方向不对导致物体表面发灰、发黑。下一步可以继续扩展的方向从环境贴图折射升级为屏幕空间折射让玻璃能折射场景里其他物体。加入微表面 GGX 粗糙度采样让磨砂玻璃不再依赖法线扰动。把玻璃材质封装成独立的 WebGPU 材质模块接入自己的模型加载器。对比 WebGPU 与 WebGL 2 在相同场景下的性能差异量化采样开销。如果你正在做 Web 端 3D 编辑器或产品展示建议先把这篇里的最小管线跑通再决定是继续手写 WGSL还是基于 three.js WebGPURenderer 做二次封装。两种路线都能做出玻璃材质区别在于前者控制力最强后者开发效率更高。建议收藏备用动手时按章节顺序逐步验证。