12-mini版WebGLObjects

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

1-WebGLObjectsMini的代码

src\renderers\webgl\WebGLObjectsMini.js

php 复制代码
/**
 * 物体级几何体更新:从 Mesh 取出 geometry,触发 GPU buffer 同步。
 * geometries: WebGLGeometriesMini
 */
function WebGLObjectsMini( geometries ) {
    //object:Mesh
    function update( object ) {
        // 从Mesh中取出geometry
        const geometry = object.geometry;
        // 从geometries中取出buffergeometry
        const buffergeometry = geometries.get( geometry );
        // 更新buffergeometry
        geometries.update( buffergeometry );
        // 返回buffergeometry
        return buffergeometry;
    }
    return {
        update: update
    };
}
​
export { WebGLObjectsMini };

2-WebGLObjectsMini 的功能定位

WebGLObjects 是WebGL 渲染器里的一个对象更新协调器。

在真正绘制某个 Object3D 之前,WebGLRenderer 会调用它的 update(object),确保该物体相关的 GPU 数据已经准备好。

WebGLObjects 的整体定位:

arduino 复制代码
场景遍历 (projectObject)
    ↓
objects.update(mesh)          ← WebGLObjectsMini
    ↓
geometries.get + update       ← WebGLGeometriesMini
    ↓
attributes.update             ← WebGLAttributesMini(真正写 GPU buffer)
    ↓
渲染列表 → renderBufferDirect → drawArrays

WebGLObjectsMini 亦是如此,只是具体功能做了删减。

WebGLObjectsMini 的核心职责:在渲染前,把 Mesh 上的 geometry 同步到 GPU。它本身不直接操作 WebGL,而是委托给 WebGLGeometriesMini。

3-update() 方法

ini 复制代码
function update( object ) {
    const geometry = object.geometry;
    const buffergeometry = geometries.get( geometry );
    geometries.update( buffergeometry );
    return buffergeometry;
}

update 做三件事:

  1. 调用object.geometry,从 Mesh 取出几何体。
  2. 调研geometries.get(geometry),注册/获取几何体,首次会挂 dispose 监听。
  3. geometries.update(buffergeometry),把 position 等 attribute 上传到 GPU。

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

完整版更复杂,Mini 版只保留了最基础路径:

能力 WebGLObjectsMini WebGLObjects(完整版)
基础 Mesh 几何体更新 ✅ ✅
每帧只更新一次(WeakMap + frame) ❌ 每次遍历都调 update ✅
InstancedMesh(实例矩阵) ❌ ✅
SkinnedMesh(骨骼) ❌ ✅
geometries.get(object, geometry) 只传 geometry 传 object 和 geometry
相关推荐
陈随易3 分钟前
从今天起,你只需要一个浏览器之Ego lite
前端·后端·程序员
怕浪猫7 分钟前
Step 5 Preview 模型写 3D 象棋,两个小时上线
前端·javascript·面试
Highcharts.js32 分钟前
Highcharts甘特图开发带导航功能的项目管理图示例
开发语言·前端·javascript·甘特图·highcharts·项目管理图
Hilaku1 小时前
前端不懂业务有多可怕?
前端·javascript·程序员
涛涛ing1 小时前
模型吐出半截JSON,前端如何边收边渲染?2026年AI应用必须闯过的工程关
前端
aixingpan1 小时前
aixingpan.cnAPI开发文档:api_docs_trichart_natal_solar_return_transit2接口指南
前端·php
FRing031 小时前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript
燕落南枝2 小时前
CSS 表单选择器与伪元素选择器详解
前端·css
拖孩2 小时前
一个人 + AI 做的小程序,今天,正式回本了
前端·后端·微信小程序
进击的丸子2 小时前
APP 人脸识别增值版 SDK:Camera2 无缝接入指南
前端·前端框架·代码规范