15-mini版WebGLMaterials

17 阅读2分钟

源码:github.com/buglas/thre…

1-WebGLMaterialsMini的代码

src\renderers\webgl\WebGLMaterialsMini.js

/**
 * 将 JS 侧 Material 属性同步到 shader uniform 对象。
 * Mini 版仅处理 MeshMiniMaterial 的 diffuse(纯色)颜色。
 */
function WebGLMaterialsMini() {
    // 刷新材质的uniforms,uniforms 是WebGLUniformsMini的实例
    function refreshMaterialUniforms( uniforms, material ) {
        if ( material.isMeshMiniMaterial ) {
            uniforms.diffuse.value.copy( material.color );
        }
    }
    return {
        refreshMaterialUniforms: refreshMaterialUniforms
    };
}
​
export { WebGLMaterialsMini };

2-WebGLMaterialsMini的功能定位

WebGLMaterials 是WebGL 渲染管线中的“Material → Uniform 桥接层”。

WebGLMaterials 不负责编译 shader、也不直接上传 GPU,而是把 JavaScript 侧的 Material 属性,同步到 shader 对应的 uniforms 对象里,供 WebGLRenderer 后续调用 WebGLUniforms.upload() 上传到 GPU。

shader 对应的 uniforms 对象指的是在js里预定义的uniforms,这种uniforms是ShaderLib 中的uniforms 的深拷贝。

整体流程:

Material 属性变化
    ↓
WebGLMaterials.refreshMaterialUniforms()  更新js里预定义的uniforms
    ↓
WebGLUniforms.upload() 上传到 GPU

WebGLMaterialsMini 比较简单,只保留了其核心功能。

3-代码详解

WebGLMaterialsMini 只向外暴露了一个refreshMaterialUniforms 方法。

refreshMaterialUniforms 方法负责把 JavaScript 侧材质属性 同步到 shader uniform 对象,再交给 WebGLUniformsMini.upload() 上传到 GPU。

WebGLMaterialsMini 只处理MeshMiniMaterial 材质。

判断条件是 material.isMeshMiniMaterial,目前只同步一个属性:

  • JS 侧:MeshMiniMaterial.color
  • Shader 侧:uniform vec3 diffuse(见 meshmini.glsl.js
uniform vec3 diffuse;
void main() {
    pc_fragColor = vec4( diffuse, 1.0 );
}

Uniform 的初始定义在 ShaderLibMini.js

mini: {
    uniforms: {
        diffuse: { value: /*@__PURE__*/ new Color( 0xffffff ) }
    },

所以当你写 new MeshMiniMaterial({ color: 0xff0000 }) 时,这个模块会在每帧绘制前把红色同步到 GPU,片元着色器就能输出纯色。

4-与完整版 WebGLMaterials.js 的对比

对比项WebGLMaterialsMiniWebGLMaterials(完整版)
材质类型MeshMiniMaterialBasic、Lambert、Phong、Standard、Node 等
同步内容color → diffuse贴图、光照、雾、透明度、环境贴图等
额外参数pixelRatioheighttransmissionRenderTarget

完整版里类似逻辑在 refreshUniformsCommon 等函数中,Mini 版把这一层砍到最小,只保留「纯色网格」所需的一条路径。

总结

WebGLMaterialsMini.js 是 Mini 渲染器里的 材质 uniform 同步器:

setProgram 阶段把 MeshMiniMaterial.color 写入 diffuse uniform,让 meshmini 片元着色器能按材质颜色绘制纯色三角形。

功能很少,但它是「用户改 material.color → 屏幕变色」这条链路上不可缺少的一环。