16-mini版WebGLBackground

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

1-WebGLBackgroundMini的代码

src\renderers\webgl\WebGLBackgroundMini.js

import { Color } from '../../math/Color.js';
​
/**
 * 背景
 * Mini 版使用固定黄色，完整版会根据 scene.background 渲染天空盒或纯色。
 */
function WebGLBackgroundMini( renderer, state ) {
    const clearColor = new Color( 0xffff00 );
    function render() {
        state.buffers.color.setClear( clearColor.r, clearColor.g, clearColor.b );
        renderer.clear();
    }
    return {
        render: render,
    };
}
​
export { WebGLBackgroundMini };

2-WebGLBackgroundMini的功能定位

WebGLBackground 是WebGL 渲染器里负责处理场景背景的模块。

WebGLRenderer 在初始化时会实例化WebGLBackground ，并对外暴露 setClearColor / setClearAlpha 等 API。

WebGLBackgroundMini 亦是如此，只是具体功能做了删减。

3-代码详解

WebGLBackgroundMini的代码很简单，其主要职责是：在每帧渲染开始前，把画布清成固定黄色，为后续绘制几何体提供背景。

function WebGLBackgroundMini( renderer, state ) {
    const clearColor = new Color( 0xffff00 );
    function render() {
        state.buffers.color.setClear( clearColor.r, clearColor.g, clearColor.b );
        renderer.clear();
    }
    return {
        render: render,
    };
}

工作流程:

0. 创建时：保存 renderer 和 state，并定义清屏颜色 0xffff00（黄色）。

1. render() 被调用时：

   • state.buffers.color.setClear(...)：设置 WebGL 清屏颜色（经 WebGLStateMini 调用 gl.clearColor，相同颜色会跳过重复设置）。
   • renderer.clear()：执行 gl.clear(COLOR_BUFFER_BIT)，清空颜色缓冲区。

与完整版 WebGLBackground 的对比

能力	完整版	Mini 版
纯色背景	支持 scene.background = Color	固定黄色
纹理 / 天空盒	支持 scene.background = Texture	不支持
环境混合 / XR	支持	不支持
setClearColor / setClearAlpha	支持	不支持
深度 / 模板缓冲清屏	支持	不支持（只清颜色）

完整版会根据 scene.background 选择清屏颜色或绘制背景几何体；

Mini 版只保留「设置清屏色 + 清空画布」这一最小步骤。

小结

WebGLBackgroundMini 是一个约 20 行的工厂函数，返回 { render } 接口，与完整版 API 形状一致，便于 WebGLRendererMini 按同样方式挂载。

WebGLBackgroundMini 不做真正的「背景渲染」，只做固定黄色清屏，是精简渲染器里最小可用的背景处理实现。