18-mini版WebGLRenderList

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

1-WebGLRenderListMini的代码

src\renderers\webgl\WebGLRenderListMini.js

php 复制代码
/**
 * 单帧渲染项列表。Mini 版只有 opaque 队列
 */
function WebGLRenderListMini() {
    const opaque = [];
    function push( object, geometry, material ) {
        opaque.push( {
            id: object.id,
            object: object,
            geometry: geometry,
            material: material,
        });
    }
    return {
        opaque: opaque,
        push: push,
    };
}
export { WebGLRenderListMini };

2-WebGLRenderListMini 的功能定位

WebGLRenderList 是WebGL 渲染器 里负责 收集、分类、排序待渲染物体 的模块。

WebGLRenderList 本身不画任何东西,而是为 WebGLRenderer 准备一份「这一帧要画什么、按什么顺序画」的列表。

WebGLRenderList 导出2个工厂函数:

  • WebGLRenderList:单次渲染用的列表,分成opaque → transmissive → transparent 三类,并按此顺序绘制。
  • WebGLRenderLists:按 scene 缓存多个 WebGLRenderList,支持嵌套渲染。

WebGLRenderListMini 就比较简单了,只有opaque 队列,其职责很单纯:

  1. 维护一个 opaque 数组
  2. push(object, geometry, material) 往里塞一项
  3. 对外暴露 { opaque, push }

3-和完整版 WebGLRenderLists 的差别

Mini 完整版 WebGLRenderList
队列 只有 opaque opaque / transparent / transmissive
排序 无(场景遍历顺序) painterSortStable 等,按 renderOrder、材质、深度
字段 id, object, geometry, material 还多 z, groupOrder, renderOrder, group, materialVariant
对象池 每帧 new + 直接 push 新对象 renderItems 池化复用,init/finish
列表管理 每帧新建一个 list WebGLRenderLists + WeakMap 按 scene 缓存

Mini 版假设:只画不透明、Mesh、材料简单,所以不需要透明从后往前画、transmission、多场景缓存等。

设计意图

把「场景树遍历」和「 draw call」拆开。

相关推荐
福兮说3 小时前
纯前端把图片压缩到指定体积:canvas.toBlob 配合二分查找
前端·javascript·canvas·图片处理
是立不是利3 小时前
CSS 入门与进阶:从选择器到响应式布局的完整指南
前端·css
镭立智能制造3 小时前
电线电缆换线频繁?MES系统如何缩短换线时间40%
前端·制造
Amos_Web4 小时前
Rspack 源码解析(五):CodeGenerationPass 与模块代码生成
前端·前端框架·源码阅读
八荒启·交互动画4 小时前
Web特效06——WebGL深挖:顶点着色器和片元着色器到底在干什么
前端·网页特效·八荒启-交互动画·八荒启
这锅我不背哈4 小时前
前端权限控制实践:基于 RBAC 的完整落地方案
前端
星空5 小时前
Map<String, String>`Map`是接口,不能直接 new
java·前端·算法
开开心心就好5 小时前
低年级识字练笔顺工具,电脑和安卓端都能用
前端·javascript·网络·安全·scala·erlang·语音识别
杨利杰YJlio5 小时前
ITSK PE 26U5 测试版解读:组件完善、VMD 修复与服务器支持边界
前端·javascript·后端
志尊宝5 小时前
Vue3 零基础每日笔记(021):class 与 style 动态绑定——对象、数组、三元表达式写法汇总
前端·vue.js·笔记·前端框架·html5