1-WebGLBufferRendererMini 的代码
src\renderers\webgl\WebGLBufferRendererMini.js
ini
/**
* 最底层的 draw call 封装,对应 gl.drawArrays。
*/
function WebGLBufferRendererMini( gl ) {
let mode;
function setMode( value ) {
mode = value;
}
function render( start, count ) {
gl.drawArrays( mode, start, count );
}
this.setMode = setMode;
this.render = render;
}
export { WebGLBufferRendererMini };
2-WebGLBufferRendererMini 的功能定位
WebGLBufferRenderer 是WebGL 渲染管线里最底层的非索引几何体绘制封装。
WebGLBufferRenderer 把 gl.drawArrays 及其变体统一包起来,并顺带更新渲染统计信息。
在 Three.js 中,几何体有两种绘制方式:
| 方式 | 对应 API | 封装类 |
|---|---|---|
| 非索引(直接按顶点顺序画) | gl.drawArrays |
WebGLBufferRenderer |
| 索引(用 index buffer 复用顶点) | gl.drawElements |
WebGLIndexedBufferRenderer |
WebGLBufferRendererMini 保留了WebGLBufferRenderer 的核心更能,但具体功能做了删减。
3-代码详解
WebGLBufferRendererMini 是一个工厂函数(不是 class),接收 WebGL 上下文 gl,返回带两个方法的对象:
| 方法 | 作用 |
|---|---|
setMode(value) |
保存绘制模式(如 TRIANGLES、LINES) |
render(start, count) |
调用 gl.drawArrays(mode, start, count) |
mode 用闭包保存在函数内部,避免每次绘制都传模式参数。
4-与完整版 WebGLBufferRenderer 的对比
完整版在 src/renderers/webgl/WebGLBufferRenderer.js:
| 能力 | Mini 版 | 完整版 |
|---|---|---|
drawArrays |
✅ | ✅ |
drawArraysInstanced(实例化) |
❌ | ✅ |
multiDrawArraysWEBGL(批量绘制) |
❌ | ✅ |
渲染统计 info.update |
❌ | ✅ |
Mini 版只保留最基础的 drawArrays,符合 WebGLRendererMini 的定位:学习/演示主链路,不支持实例化、多 group、线框等。
小结
WebGLBufferRendererMini 是精简渲染器的最后一环,把 WebGL 的 drawArrays 封装成 setMode + render 两个小接口。
前面 VAO、shader、uniform 都准备好之后,由它真正把几何体画到屏幕上。