工作流

WebGL 材质工作流

为 Three.js、自定义 WebGL renderer 和浏览器材质预览使用紧凑、可预测的程序化贴图通道。

导出目标

通道设置

Three.js 中可见 base color texture 使用 sRGB color space，自定义 shader 使用等效颜色转换。

Normal map 按数据纹理采样，并在材质中调 normal scale，而不是重新烘焙贴图。

Roughness 与 AO 保持 linear。Three.js 中 AO 还需要 UV2 或对应的第二 UV 处理。

Seamless 材质启用 repeat wrapping，并在代码中设置 repeat 值，让同一导出适配不同模型尺寸。

需要快速材质载体时使用 GLB；如果 renderer 自己管理 shader 和 texture binding，则使用独立 PNG 贴图。

Color map 使用 sRGB；roughness、normal、height 和 AO 保持 linear 数据纹理。

为 seamless 表面将 wrapS 和 wrapT 设为 repeat，再通过 material repeat 值或 shader uniforms 控制比例。

在目标设备上测试分辨率、压缩和通道数量，再把大型贴图组用于生产场景。

如果 Three.js 中 AO 没有效果，确认几何体具备材质所需的 UV 集。

Base color 被当作 linear 会偏暗；数据贴图被当作 sRGB 会破坏 roughness 或 normal 响应。

浏览器场景对纹理显存敏感。使用能满足镜头距离的最小分辨率。

用于快速材质查看时是。生产 renderer 通常用独立贴图获得更好的压缩、加载和 shader 输入控制。

可以。把 texture wrapping mode 设为 repeat，并在 material 或 texture 实例上控制 repeat scale。