这次我们来看一个和本地 AI 模型完全不同的方向：WebGPU Glass Material。简单来说，这是基于 WebGPU 渲染管线实现的玻璃材质示例，目标是在浏览器里实时渲染出带折射、菲涅尔、IOR（折射率）和透射效果的透明物体。它的核心价值不是“能跑 AI”，而是让 Web 前端直接调用 GPU，实现接近原生图形程序的光照和材质效果，不需要安装 CUDA、不需要本地环境，也不需要下载几个 GB 的模型文件。
WebGPU Glass Material 最值得关注的点有三个：第一，它跑在浏览器里，跨平台，Windows、macOS、Linux 都能用；第二，它不依赖传统 WebGL 的老旧管线，而是用 WGSL 编写 shader，能更精细地控制透明材质的渲染流程；第三，玻璃材质本身是一个典型的“多 Pass 渲染”场景，理解它之后，后续做折射、透射、水面、宝石、汽车玻璃都会很顺利。本文会带你从环境准备开始，到启动一个最小 WebGPU 示例，再到拆解玻璃材质的渲染原理，最后给出一套可以实际验证和扩展的测试流程。
这篇文章适合三类读者：一是做 Web 3D 展示、在线产品配置器、Web 游戏开发的前端工程师；二是想从 WebGL 转向 WebGPU 的图形开发者；三是正在被透明物体渲染排序、折射采样和菲涅尔效果折磨的渲染方向学生。读完你会知道玻璃材质在 WebGPU 中怎么做、怎么测、怎么调，以及哪些环节最容易出问题。
1. 核心能力速览
| 能力项 | 说明 |
|---|---|
| 技术栈 | WebGPU、WGSL、JavaScript、GPU 渲染管线 |
| 运行环境 | 支持 WebGPU 的现代浏览器，如 Chrome、Edge、Firefox（需开启对应特性） |
| 显存需求 | 由浏览器和 GPU 驱动管理，非本地模型式占用；实际占用取决于纹理分辨率、Pass 数量和后处理缓冲 |
| 启动方式 | 本地静态服务器 + 浏览器打开页面，无服务端依赖 |
| 主要功能 | 玻璃材质渲染、折射、菲涅尔、IOR 参数调节、环境反射、透明物体多 Pass 混合 |
| 是否支持 CPU | WebGPU 有软件后备后端，但实时玻璃渲染建议使用支持 WebGPU 的 GPU |
| 是否支持 API | 不提供传统 HTTP API，可通过 JavaScript 直接驱动 GPU 渲染接口 |
| 是否支持批量任务 | 可以通过脚本批量调节参数生成不同玻璃效果，但需要自己封装渲染循环和任务队列 |
| 适合场景 | Web 3D 展示、在线产品预览、Web 游戏、图形学教学、实时可视化 |
| 不适合场景 | 影视级离线渲染、需要极高精度透射和焦散效果的场景 |
说明一点：这个项目并不像本地大模型那样有固定的显存占用表。显存占用主要看你创建了多少个纹理附件、多少个 Render Pass，以及是否开启了多重采样抗锯齿（MSAA）。实际测试时，打开浏览器任务管理器，或者使用 Chrome 的chrome://gpu页面，都能看到 GPU 进程的资源占用情况。
2. 适用场景与使用边界
WebGPU Glass Material 最适合的场景是需要“看起来够真实”的实时 Web 渲染。比如：
- 电商网页里的玻璃杯、香水瓶、酒瓶预览，用户可以旋转视角，玻璃的折射和反射会跟随视角变化。
- 在线家具配置器中展示玻璃桌面、玻璃隔断。
- Web 小游戏里的能量罩、水晶、冰雪材质。
- 数字孪生和可视化项目中的透明管道、玻璃围栏。
- 图形学课程中讲解透明渲染、反射、折射的多 Pass 实现。
它不适合做什么？
- 不适合做离线电影特效。WebGPU 实时玻璃材质通常使用近似折射，不做路径追踪，所以焦散、多次透射、体积散射这类物理效果很难做。
- 不适合做超高精度物理光学模拟。如果你需要模拟色散、严格双向透射分布函数（BTDF），还是应该使用 Blender Cycles、Mitsuba 这类离线渲染器。
- 不适合在没有 GPU 或没有 WebGPU 驱动的老旧设备上使用。软件后备后端虽然存在，但性能通常达不到实时要求。
这里还要强调使用边界。玻璃材质渲染通常需要环境贴图、HDR 贴图、模型文件等素材。如果你从网上下载了收费贴图、商业模型、HDRI 环境图，请先确认授权，不要直接放进演示项目中使用。涉及品牌商品的模型或商标内容，在公开演示时也要注意知识产权问题。
3. 环境准备与前置条件
WebGPU Glass Material 的部署门槛非常低，没有 Python 虚拟环境，没有 CUDA 安装，没有模型权重文件。你需要准备的是：
3.1 浏览器与 WebGPU 支持
目前 WebGPU 在 Chrome 113+、Edge 113+、Firefox 中均有不同程度支持。Safari 在新版本中也加入了 WebGPU 支持，建议以当前浏览器版本实际测试为准。
打开浏览器，在地址栏输入：
chrome://gpu然后看 WebGPU 一栏是否显示Enabled或Hardware accelerated。如果显示Disabled或Software only，说明当前浏览器或显卡驱动不满足要求。
也可以直接在控制台执行：
async function checkWebGPU() { if (navigator.gpu) { const adapter = await navigator.gpu.requestAdapter(); if (adapter) { console.log("WebGPU adapter:", adapter.info ? adapter.info : adapter); console.log("WebGPU supported"); } else { console.log("WebGPU adapter not found"); } } else { console.log("WebGPU not supported"); } } checkWebGPU();控制台输出WebGPU supported，说明环境可用。这一步是后续所有操作的基础。
3.2 静态服务器
WebGPU 的 shader 模块加载和纹理加载需要fetch，直接双击index.html打开本地文件时，浏览器会拦截跨域请求。所以需要一个本地静态服务器。
推荐用 Python 自带模块，进入项目目录后执行：
cd webgpu-glass-material python3 -m http.server 8080如果你在用 Node.js，也可以使用：
npx vite或者：
npx http-server . -p 8080然后浏览器访问：
http://localhost:8080如果页面打不开，先检查端口是否被占用。换端口时，只需要改http.server 8080后面的端口号即可。
3.3 项目文件结构
一个最简的 WebGPU 玻璃材质 Demo 文件结构可以是这样：
webgpu-glass-material/ ├── index.html ├── main.js ├── shader.wgsl └── assets/ └── environment.hdrindex.html只放一个 canvas 画布；main.js负责初始化 WebGPU、创建渲染管线、加载纹理；shader.wgsl存放玻璃材质对应的 WGSL shader；assets/放环境贴图或模型。不需要 package.json，不需要 node_modules，除非你决定使用 Vite 这类构建工具。
4. 玻璃材质渲染原理
在进入代码之前，先理解玻璃材质为什么比普通的漫反射材质复杂。
玻璃是透明的，有折射，也有反射。它的最终颜色不是直接由漫反射贴图决定，而是由“背后场景的折射结果”和“环境反射结果”混合而成。混合比例由菲涅尔（Fresnel）公式近似决定，而折射偏移量由 IOR（折射率）和物体厚度决定。
常见的水 IOR 是 1.33，玻璃 IOR 是 1.5 左右，钻石是 2.4。IOR 越大，折射偏移越明显。
WebGPU 中实现实时玻璃材质的典型思路如下：
- 第一 Pass：把不透明的场景渲染到一张离屏纹理
sceneTexture。 - 第二 Pass：渲染玻璃物体。在玻璃物体片元中，采样
sceneTexture，根据法线方向和视线方向计算折射偏移，再用菲涅尔公式混合折射色和环境反射色。
这就是一个典型的多 Pass 渲染。WebGPU 的优势在于可以用GPURenderPassEncoder非常灵活地控制 Pass 之间的纹理绑定，而且在 WGSL 中编写自定义采样器很直接。
伪代码流程：
Pass 1: Render opaque scene -> sceneTexture Pass 2: Render glass sphere -> read sceneTexture with offset UV -> mix with reflection如果场景中有多个玻璃物体，还需要考虑透明物体排序。WebGPU 不像传统 WebGL 那样会自动帮你混合，你需要自己管理深度写入和混合状态。最简单的办法是：先渲染所有不透明物体，再开启玻璃物体的混合状态，按从远到近顺序渲染玻璃物体。
4.1 折射采样如何工作
在玻璃物体的片元 shader 中，通过法线方向normal和视线方向viewDir计算折射方向：
let ior = 1.5; let eta = 1.0 / ior; let refractedDir = refract(-viewDir, normal, eta); let refractedUV = uv + refractedDir.xy * refractionStrength; let refractedColor = textureSample(sceneTexture, sceneSampler, refractedUV).rgb;这里的refractionStrength用来控制折射的视觉强度。真实现实中，这个偏移量还和物体厚度、观察距离有关，所以很多 Web 端的实时玻璃材质实现会用一个可调参数代替，牺牲物理精确度换取可控性和性能。
4.2 菲涅尔效果
菲涅尔让玻璃在掠射角变得更反射。比如站远处看玻璃杯边缘，几乎看不到后面的场景，全是反射；而正对看玻璃表面时，能看到后面的内容。这一效果可以用 Schlick 近似公式表达：
F = F0 + (1 - F0) * (1 - dot(N, V))^5在 WGSL 中实现为：
let f0 = vec3<f32>(0.04); // 玻璃的垂直入射反射率近似值 let fresnel = f0 + (1.0 - f0) * pow(1.0 - max(dot(N, V), 0.0), 5.0); let finalColor = mix(refractedColor, reflectedColor, fresnel);当dot(N, V)变小，也就是视线接近掠射角时，菲涅尔系数变大，反射占比提高，折射占比下降。
4.3 多 Pass 的纹理绑定
WebGPU 中，Pass 输出的纹理可以被后续 Pass 绑定为采样器。核心是创建GPUTexture作为颜色附件，然后在第二 Pass 中通过createBindGroup把它绑定到textureSample。
代码中的关键逻辑如下：
// 第一 Pass 渲染到场景纹理 const sceneTexture = device.createTexture({ size: [canvas.width, canvas.height], format: "rgba16float", usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING, }); const sceneTextureView = sceneTexture.createView(); const sceneSampler = device.createSampler({ magFilter: "linear", minFilter: "linear", }); const bindGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: sceneTextureView }, { binding: 1, resource: sceneSampler }, ], });注意：rgba16float格式适合保存 HDR 场景数据，避免低动态范围带来的色阶断层。如果性能紧张，可以改成rgba8unorm，但玻璃边缘的反射高光可能会丢失细节。
5. 功能测试与效果验证
下面给出一套可执行的验证流程。这套流程不依赖特定开源项目，适用于任何 WebGPU 玻璃材质 Demo。你可以在自己搭好的最小工程里逐步验证。
5.1 基础渲染测试
测试目的：确认 WebGPU 初始化、渲染管线和三角形/球体渲染流程正常。
操作步骤：
- 启动本地静态服务器。
- 打开浏览器控制台。
- 检查控制台是否报错。
- 观察 canvas 是否出现物体轮廓。
预期结果：
- 控制台输出 WebGPU adapter 信息。
- Canvas 出现一个带有基础光照的球体或物体。
- 页面没有红色报错。
判断成功标准：canvas 中出现可以被旋转视角的 3D 物体，并且物体表面有明暗变化。
常见失败原因：浏览器不支持 WebGPU、canvas 尺寸为 0、shader 编译错误。排查时先看控制台，再检查device.createShaderModule是否输出了编译日志。
5.2 玻璃材质切换测试
测试目的：让基础球体从“普通不透明材质”切换到“玻璃材质”。
操作步骤：
- 在 shader 中加入玻璃材质相关代码，也就是折射采样、菲涅尔混合、IOR 参数。
- 重建渲染管线并刷新页面。
- 观察球体表面变化。
预期结果：
- 球体中心区域呈现背后场景的折射结果。
- 球体边缘出现更强的反射。
- 球体的透明区域透过后面的背景物体，且偏移方向符合物理直觉。
判断成功标准：物体不再是一个简单的白色高光球，而是能透过它看到背景物体的“玻璃球”。
如果背景什么都没有，玻璃效果会非常不明显。建议在场景中放一个带纹理的立方体或棋盘格，玻璃球放在它前面。这是验证折射最直接的方法。
5.3 IOR 参数调节测试
测试目的：验证 IOR 参数对折射偏移的影响。
操作步骤：
- 将 IOR 从 1.0 调到 1.5，观察效果。
- 再从 1.5 调到 2.4，观察效果。
预期结果：
- IOR = 1.0 时，几乎没有折射偏移。
- IOR = 1.5 时，玻璃球后面的背景出现明显位移。
- IOR = 2.4 时，背景位移更大，物体边缘更厚实。
判断成功标准：参数变化和折射偏移方向一致，没有出现夸张的断裂或闪烁。
这里不能编造具体帧率。实际性能需要你在自己机器上观察，但 IOR 调节本身不会给 GPU 带来明显压力，因为折射方向计算只是几个向量的数学运算。
5.4 菲涅尔反射调节测试
测试目的：验证菲涅尔反射占比是否正常。
操作步骤：
- 固定视角，观察玻璃球中心和边缘。
- 旋转视角，观察玻璃球边缘的反射强度变化。
预期结果：
- 正对玻璃球中心时，反射较弱，透射较强。
- 视角越接近掠射角，反射越强，透射越弱。
判断成功标准：中心区域能看到后面场景，边缘区域反射环境贴图或场景光源。
如果边缘反射太强，检查f0是否设置得过高。如果完全看不到反射，检查反射环境贴图是否加载成功，以及fresnel变量是否参与最终颜色混合。
5.5 多玻璃物体排序测试
测试目的：验证多个玻璃物体同时渲染时，透明排序是否正常。
操作步骤：
- 在场景中放置两个玻璃球，位置一远一近。
- 开启混合状态。
- 观察两个球体交叠区域的显示效果。
预期结果：
- 远处玻璃球应该先渲染，近处玻璃球后渲染。
- 交叠区域不出现黑边或明显错误混合。
判断成功标准：交叠区域视觉上合理，没有渲染顺序颠倒导致的严重错误。
常见问题：如果把深度写入和混合状态配错，玻璃球可能会互相遮挡，或者出现半透明物体之间的颜色叠加异常。排查时关闭深度测试，改为手动排序，通常能解决。
5.6 环境贴图与反射测试
测试目的：验证玻璃材质能否正确反射环境。
操作步骤：
- 加载一张 HDR 环境贴图，比如一个室外天空环境。
- 将环境贴图绑定到玻璃材质反射通道。
- 旋转玻璃球。
预期结果：
- 玻璃球反射环境中的亮部区域，例如天空窗口。
- 玻璃边缘的高光变化明显。
判断成功标准：玻璃表面的反射方向随物体旋转而连续变化，没有闪烁和撕裂。
如果 HDR 加载失败，常见原因是图片不支持 HDR 格式，或者 WebGPU 采样器没有开启 mipmap。对 2D HDR 贴图做createSampler时，建议设置mipmapFilter: "linear"。
5.7 批量参数渲染测试
WebGPU 本身不提供“批量任务”按钮，但可以通过 JS 参数封装实现批量效果测试。具体方法：把 IOR、反射强度、粗糙度、折射强度、环境贴图路径封装成一个配置对象，然后在一个循环中遍历不同参数组合，每帧更新 uniform buffer。
const glassParams = { ior: 1.5, reflectionStrength: 1.0, refractionStrength: 0.02, }; const configs = [ { ior: 1.3, reflectionStrength: 0.8, refractionStrength: 0.01 }, { ior: 1.5, reflectionStrength: 1.0, refractionStrength: 0.02 }, { ior: 2.4, reflectionStrength: 1.2, refractionStrength: 0.04 }, ]; async function runBatch() { for (let i = 0; i < configs.length; i++) { updateGlassUniforms(configs[i]); await device.queue.onSubmittedWorkDone(); captureFrame(`glass_${i}.png`); } } runBatch();这种批量测试对日常调参很实用，尤其是做产品展示墙时，可以用同一套场景生成不同材质风格的玻璃瓶预览图。需要提醒的是，onSubmittedWorkDone返回的是 Promise，批量循环中如果不等待，GPU 工作队列可能堆积，导致帧捕获时间点错误。
6. 关于 API 与接口调用
有人会问：WebGPU Glass Material 能否通过 HTTP 接口调用？直接回答：不能。它不是一个后端服务，不是类似 Stable Diffusion WebUI 那种可以提供 REST API 的程序。它是一个浏览器内渲染技术，JavaScript 通过 WebGPU API 直接操纵 GPU。
但是，你可以把它封装成前端组件或 JavaScript 类，供其他页面模块调用。例如：
class GlassMaterialRenderer { constructor(canvas, options) { this.canvas = canvas; this.options = options; } async init() { this.device = await initWebGPU(this.canvas); this.pipeline = createGlassPipeline(this.device); } setIOR(ior) { this.options.ior = ior; this.updateUniforms(); } setEnvironmentTexture(url) { loadHDRTexture(url).then((texture) => { this.environmentTexture = texture; }); } render() { // 调用 GPU render pass } }如果你需要把渲染结果输出到后端，可以在render()之后调用canvas.toBlob()或toDataURL()，再通过fetch上传到服务器。这样就能把 WebGPU 的玻璃材质渲染结果接入到你现有的业务链路中。
canvas.toBlob((blob) => { const formData = new FormData(); formData.append("image", blob, "glass.png"); fetch("/api/upload", { method: "POST", body: formData, }); }, "image/png");这种方案适合做“在线设计 -> 生成商品图 -> 保存到服务器”的业务流程。
7. 资源占用与性能观察方式
WebGPU 玻璃材质不涉及模型文件加载，但它的 GPU 资源占用不容忽视。最需要注意的资源有三个：
7.1 Render Pass 数量
玻璃材质至少需要两个 Pass，也就是一帧内 GPU 至少清屏两次。如果场景中有多个玻璃物体，并且你为一个物体单独开启一个 Pass，Pass 数量会进一步上升。每增加一个 Pass，都会增加带宽消耗和 Draw Call 数量。
观察方式：使用 Chrome DevTools 的 Performance 面板录制一段交互，查看GPU相关进程的占用。或者在代码中记录每一帧的device.queue.onSubmittedWorkDone()时间，估算每帧提交耗时。
降低方式：
- 将不透明场景合并在一个 Pass 中，减少重复清屏。
- 尽量使用同一套渲染管线材质，减少管线切换。
- 使用 MRT（Multiple Render Targets）一次渲染多个输出数据，但这个比较复杂，建议后续再优化。
7.2 纹理分辨率与格式
离屏纹理sceneTexture的分辨率决定了折射采样质量。分辨率越高，采样越清晰，但显存占用和带宽消耗越高。
实际使用时，可以将离屏纹理分辨率设置为 canvas 分辨率的一半或更低。很多实时玻璃材质会故意用低分辨率折射纹理模拟毛玻璃，反而效果更真实。
代码示例：
const sceneTexture = device.createTexture({ size: [ Math.floor(canvas.width / 2), Math.floor(canvas.height / 2), ], format: "rgba16float", usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING, });如果材质模型有roughness参数，低分辨率纹理配合较高粗糙度，效果会更自然。
7.3 MSAA 和多采样缓冲
玻璃边缘在低分辨率下很容易出现锯齿。开启 MSAA 能改善边缘质量，但会显著增加显存和带宽占用。
在 WebGPU 中，MSAA 需要创建sampleCount: 4的纹理附件，并在渲染管线的multisample配置中设置对应的 sample count。如果开启 MSAA 后性能下降明显，建议先降低离屏纹理分辨率，或者关闭玻璃物体的 MSAA，只保留主渲染目标的 MSAA。
7.4 采样器数量
玻璃材质需要采样场景纹理、环境贴图，可能还有法线贴图和粗糙度贴图。每多一个采样器，就需要一次 bind group 更新。在批量渲染时，要注意避免每帧重建 bind group，应该把固定资源缓存起来。
8. 常见问题与排查方法
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 页面打开后 canvas 黑屏 | WebGPU 初始化失败或 shader 编译报错 | 打开控制台查看错误日志 | 检查requestAdapter是否返回 null，检查 shader 编译日志 |
| 浏览器提示 WebGPU not supported | 浏览器版本过低或 GPU 驱动问题 | 访问chrome://gpu查看 WebGPU 状态 | 升级浏览器、更新显卡驱动 |
| 玻璃球没有折射效果 | 场景纹理没有正确绑定 | 检查第二 Pass 的 bind group 是否绑定sceneTextureView | 重新创建 bind group，确认绑定槽位一致 |
| 玻璃球全黑 | 离屏纹理没有写入内容 | 检查第一 Pass 是否渲染到sceneTexture | 确认GPUTextureUsage.RENDER_ATTACHMENT已设置 |
| 玻璃球边缘出现黑边 | 混合状态和深度写入配置冲突 | 检查透明排序和混合公式 | 调整depthWriteEnabled和blend配置 |
| 折射方向错误 | IOR 参数设置不合理或法线方向不正确 | 打印法线和视线方向的点积 | 检查法线是否归一化，尝试交换 IOR 倒数方向 |
| 调整 IOR 没有变化 | uniform buffer 未更新 | 确认queue.writeBuffer是否有调用 | 在setIOR方法中添加 uniform 更新逻辑 |
| 环境反射缺失 | HDR 纹理加载失败或采样器错误 | 检查网络请求和createSampler配置 | 确认纹理加载完成后才创建绑定组 |
| 帧率很低 | Pass 数量过多或离屏纹理分辨率太高 | 使用 DevTools Performance 录制帧时间 | 降低离屏分辨率、减少 Pass 数量、关闭 MSAA |
| 批量渲染时内存持续上涨 | uniform buffer 或 bind group 频繁创建 | 查看内存曲线 | 将固定资源缓存复用，避免在渲染循环中创建对象 |
| 使用 Vite 启动后找不到 wgsl 文件 | 资源路径问题 | 检查 DevTools Network 面板 | 用?url后缀导入 wgsl，或放到 public 目录 |
如果遇到 shader 编译错误，WebGPU 控制台会直接输出错误位置，例如error: no matching overload for 'textureSample'。这种错误通常是采样器类型或纹理格式不匹配。检查createSampler返回的对象类型是否和 WGSL 中textureSample的第一个参数匹配。
9. 最佳实践与使用建议
9.1 先跑通最简示例再做复杂场景
第一步不要直接搞多个玻璃物体、反射探针、屏幕空间反射。先把一个球体的双 Pass 玻璃材质跑通，确认离屏纹理能写入、能被采样，再逐步增加复杂度。这个原则能帮你快速隔离问题是来自 WebGPU 基础流程还是材质算法。
9.2 离屏纹理分辨率不要拉满
玻璃折射对分辨率并不是越清晰越好。很多商业项目甚至故意使用半分辨率折射纹理，一方面降低带宽压力，另一方面给材质增加自然的模糊感。可以先从 1/2 分辨率开始，根据效果调整。
9.3 动画更新和 uniform buffer 分离
UI 滑块调整 IOR 时，不能每帧无条件更新 uniform buffer。合理做法是：用一个dirty标志，只有参数变化时才调用device.queue.writeBuffer。这能减少 GPU 上传带宽消耗。
9.4 界面参数分组
推荐提供以下几个可调参数：
- IOR：控制折射强度。
- Reflection Strength：控制环境反射强度。
- Refraction Strength：控制 UV 偏移倍数。
- Roughness：控制折射和反射的模糊程度。
- Base Color：玻璃本身的基础颜色，模拟彩色玻璃。
所有参数可以封装在同一个 uniform 结构体里，方便一次上传。
WGSL 中 uniform 定义示例：
struct GlassUniform { ior: f32, reflectionStrength: f32, refractionStrength: f32, roughness: f32, baseColor: vec3<f32>, padding: f32, };注意 WGSL 内存对齐规则。baseColor是vec3<f32>，后面最好补一个f32，保证结构体大小为 16 的倍数，避免 uniform buffer 绑定报错。
9.5 透明物体排序
任何透明渲染都无法绕开排序问题。在 WebGPU 中，你需要自己在 CPU 端维护透明物体的渲染队列：
- 将玻璃物体按相机距离从远到近排序。
- 关闭深度写入，但保留深度测试。
- 开启混合。
如果多个玻璃物体交叠严重，可以尝试以物体中心点为排序依据；如果物体非常大且形状不规则，中心点排序可能不够准确，可以拆分为多个子网格分别排序。
9.6 关于版权和素材授权
如果你要在自己的项目中放一个 HDR 环境贴图，或者加载一个公开的玻璃杯模型，请确认素材来源是否允许商用。特别是 HDR 贴图，很多免费图库要求署名，商业项目要使用对应授权版本。自己拍摄的素材则没有这个问题。涉及品牌商标、人脸、产品外观时，发布前要重新评估合规性。
10. 总结与下一步
WebGPU Glass Material 是一个把透明材质从 WebGL 时代带进新阶段的典型示例。它不依赖本地模型文件，没有显卡型号锁定的启动门槛，只要浏览器能启用 WebGPU，就能实时渲染出带有折射、菲涅尔和环境反射的玻璃物体。最值得一试的点是“双 Pass 离屏渲染”：先渲染不透明场景，再在玻璃物体 shader 中采样这张场景纹理，配合 IOR 和菲涅尔公式得到透明效果。这个思路一旦理解，后续做水面、冰面、变形效果、数字产品展示都会有直接的参考。
下一步建议按这个顺序推进：先跑通基础双 Pass，再加环境贴图和 IOR 参数滑块，然后试着把两个玻璃球放进同一个场景观察排序问题，最后思考如何把渲染结果通过canvas.toBlob输出到后端业务系统中。最容易踩的坑也先提醒一下：第一，确保离屏纹理的usage同时包含RENDER_ATTACHMENT和TEXTURE_BINDING；第二，WGSL uniform 结构体注意内存对齐；第三，多玻璃物体场景先关深度写入、手动排序，再逐步优化。
如果你在做 Web 端可视化、在线产品预览或图形学学习，这个方向值得花一个周末搭一个最小 Demo。控制台出现WebGPU supported，项目就完成了一半。剩下的就是反复调折射偏移和菲涅尔系数，让玻璃从“能看”变成“像玻璃”。
