Threejs源码系列- WebGLRenderer （1）

WebGLRenderer

WebGLRenderer 是 three.js 中基于 WebGL 2.0 的渲染器实现，负责将 3D 场景（包含几何体、材质、灯光等）渲染到 HTML5 Canvas 元素上。这段代码主要处理渲染器的初始化配置、WebGL 上下文创建、核心属性定义及基础渲染控制方法。

const {
    canvas = createCanvasElement(),
    context = null,
    depth = true, // 控制是否启用深度缓冲区（用于 3D 深度测试，确保远处物体不遮挡近处物体）。
    stencil = false, // 控制是否启用模板缓冲区（用于复杂的渲染遮罩效果，如限制渲染区域）。
    alpha = false, // 控制 canvas 是否包含 alpha 通道（用于透明背景）。
    antialias = false, // 控制是否启用抗锯齿（减少图形边缘的锯齿感）。
    premultipliedAlpha = true, // 控制是否使用预乘 alpha 通道（影响透明物体与背景的混合计算）。
    preserveDrawingBuffer = false, // 控制是否保留绘制缓冲区（用于后续读取 canvas 内容，如截图）。
    powerPreference = 'default', // 提示浏览器选择适合的 GPU（如高性能或低功耗）。'default'（默认）、'high-performance'（优先高性能 GPU）、'low-power'（优先低功耗 GPU）
    failIfMajorPerformanceCaveat = false, // 若浏览器检测到显著性能问题，是否创建上下文失败。
    reversedDepthBuffer = false, // 控制是否使用反转的深度缓冲区（近平面深度值为 1，远平面为 0，某些场景下可提高深度精度）。
} = parameters;


const uintClearColor = new Uint32Array( 4 );
const intClearColor = new Int32Array( 4 );

// 存储当前活跃的渲染列表（包含待渲染对象的集合）。渲染列表会根据场景中的物体、相机视锥体等条件动态生成，记录需要绘制的对象及其状态。
let currentRenderList = null;
// 存储当前的渲染状态，包含 WebGL 上下文的各种状态配置（如深度测试、混合模式、裁剪平面等）。渲染状态决定了如何绘制当前渲染列表中的对象。
let currentRenderState = null;


// 存储嵌套渲染时的渲染列表。当进入嵌套渲染时，将当前 currentRenderList 压入栈中，嵌套渲染结束后再从栈中恢复，确保外层渲染不受影响。
const renderListStack = [];
// 用于存储嵌套渲染时的渲染状态。与 renderListStack 配合，在嵌套渲染时保存和恢复 currentRenderState，保证渲染状态的隔离性。
const renderStateStack = [];

核心作用

1. 颜色数组 uintClearColor 和 intClearColor 用于高效处理颜色缓冲的清除操作，适配不同数据格式需求。
2. currentRenderList 和 currentRenderState 跟踪当前渲染帧的核心数据。
3. 两个栈结构 renderListStack 和 renderStateStack 实现了嵌套渲染时的状态隔离，确保多层级渲染（如主场景渲染中嵌套阴影贴图渲染）不会相互干扰，是维持渲染正确性的关键机制。

this.autoClear = true;
this.autoClearColor = true;
this.autoClearDepth = true;
this.autoClearStencil = true;
this.autoClearStencil = true;
this.sortObjects = true;
this.clippingPlanes = [];
this.localClippingEnabled = false;
this.toneMapping = NoToneMapping;
this.toneMappingExposure = 1.0;
this.transmissionResolutionScale = 1.0;

1. this.autoClear = true

• 核心作用 ：全局开关，控制渲染器是否在执行 render() 方法时自动清除缓冲区。
• 当设为 true 时，渲染器会根据 autoClearColor、autoClearDepth、autoClearStencil 的值决定是否清除对应的缓冲区；
• 当设为 false 时，无论其他三个属性如何设置，渲染器都不会自动清除任何缓冲区，需手动调用 clear() 方法清除。

2. this.autoClearColor = true

• 作用 ：当 autoClear 为 true 时，控制是否自动清除颜色缓冲区。
• 颜色缓冲区存储像素的 RGB 颜色值，清除后会用 renderer.setClearColor() 设定的颜色填充画布（默认黑色）。
• 若场景需要叠加绘制（如多图层渲染），可设为 false 避免覆盖已有内容。

3. this.autoClearDepth = true

• 作用 ：当 autoClear 为 true 时，控制是否自动清除深度缓冲区。
• 深度缓冲区用于记录像素的深度信息（Z 值），确保远处物体不遮挡近处物体。清除后，深度值会重置为默认值（通常为 1.0，代表最远）。
• 若需要保留上一帧的深度信息（如某些特殊叠加效果），可设为 false。

4. this.autoClearStencil = true

• 作用 ：当 autoClear 为 true 时，控制是否自动清除模板缓冲区。
• 模板缓冲区用于限制渲染区域（如遮罩效果），清除后会重置为默认值（通常为 0）。
• 若需要保留模板缓冲区的状态（如多步骤遮罩绘制），可设为 false。

5. this.autoClearStencil = true

• 作用 ：控制渲染器是否在每帧渲染前自动清除模板缓冲区（stencil buffer）。
• 模板缓冲区用于实现复杂的遮罩效果（如限制渲染区域），清除后会重置为默认值（通常为 0）。
• 当 autoClear 为 true 时，此属性生效；若需要保留上一帧的模板缓冲状态（如多步骤遮罩绘制），可设为 false。

6. this.sortObjects = true

• 作用：控制渲染器是否对场景中的对象进行排序后再渲染。
• 排序主要用于优化透明/半透明对象的渲染效果（透明物体需从后往前绘制以保证正确叠加）。
• 注意：排序并非在所有场景下都完美，复杂场景可能需要手动控制渲染顺序，此时可将其设为 false。

7. this.clippingPlanes = []

• 作用 ：定义全局裁剪平面（以 Plane 对象表示），用于裁剪场景中不需要渲染的区域。
• 平面方程为 ax + by + cz + d = 0，所有满足 ax + by + cz + d < 0 的点会被裁剪（不渲染）。
• 此属性为全局裁剪，对整个场景生效；若需对象级别的裁剪，需配合材质的 clippingPlanes 属性。

8. this.localClippingEnabled = false

• 作用 ：控制渲染器是否启用对象级别的裁剪 （即是否尊重材质自身定义的 clippingPlanes）。
• 默认值为 false（仅全局裁剪生效）；设为 true 时，会同时应用全局裁剪平面和每个材质自身的裁剪平面。

9. this.toneMapping = NoToneMapping

• 作用：设置色调映射（HDR 转 LDR 的颜色转换方式），用于优化高动态范围（HDR）场景的显示效果。
• NoToneMapping 为默认值（不进行色调映射）；其他常用值包括 ACESFilmicToneMapping（电影级效果）、ReinhardToneMapping 等。

10. this.toneMappingExposure = 1.0

• 作用：调节色调映射的曝光度，影响场景的整体亮度。
• 值越大，场景越亮；值越小，场景越暗。常用于配合不同的 toneMapping 类型调整视觉效果。

11. this.transmissionResolutionScale = 1.0

• 作用 ：控制透明材质（如 MeshPhysicalMaterial 的 transmission 属性）的渲染目标分辨率缩放比例。
• 取值范围为 0~1，值越低，透明效果的分辨率越低，但性能消耗越小（适合性能受限场景）；默认值 1.0 表示使用全分辨率。