15-mini版WebGLMaterials

源码:github.com/buglas/thre...

1-WebGLMaterialsMini的代码

src\renderers\webgl\WebGLMaterialsMini.js

scss 复制代码
/**
 * 将 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 的深拷贝。

整体流程:

scss 复制代码
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)
ini 复制代码
uniform vec3 diffuse;
void main() {
    pc_fragColor = vec4( diffuse, 1.0 );
}

Uniform 的初始定义在 ShaderLibMini.js:

css 复制代码
mini: {
    uniforms: {
        diffuse: { value: /*@__PURE__*/ new Color( 0xffffff ) }
    },

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

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

对比项 WebGLMaterialsMini WebGLMaterials(完整版)
材质类型 仅 MeshMiniMaterial Basic、Lambert、Phong、Standard、Node 等
同步内容 仅 color → diffuse 贴图、光照、雾、透明度、环境贴图等
额外参数 无 pixelRatio、height、transmissionRenderTarget 等

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

总结

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

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

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

相关推荐
沧沧凉凉8 小时前
一段需求、零素材,Claude Code 派了 33 个代理给我做了个 3D 动作游戏
游戏·ai编程·three.js
福兮说9 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理10 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆66611 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)11 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan11 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_12 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒12 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技12 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu13 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub