WebGL入门（048）：OES_draw_buffers_indexed 简介、使用方法、示例代码

一、OES_draw_buffers_indexed 简介

在WebGL中，渲染一个场景通常涉及多个渲染目标。在传统的WebGL 1.0中，只支持将渲染输出到一个目标纹理，但在某些高级渲染效果中，我们可能需要将多个输出渲染到多个纹理中，这样会增强渲染的灵活性和效果。OES_draw_buffers_indexed 扩展使得WebGL能够同时支持多个颜色输出，让开发者可以更方便地进行高级图形渲染，比如多重渲染目标（MRT, Multiple Render Targets）。

二、OES_draw_buffers_indexed 的使用方法

1. 启用扩展: 使用 getExtension 来启用这个扩展。
2. 创建帧缓冲: 创建一个帧缓冲对象并附加多个颜色附加点。
3. 设置绘制目标: 通过设置 drawBuffers 来选择绘制的目标。
4. 进行渲染: 将渲染过程应用于多个目标纹理。

三、示例代码

以下是一个简单的示例，展示了如何使用 OES_draw_buffers_indexed 扩展进行多重渲染目标的渲染。

// 获取 WebGL 上下文
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');

// 启用 OES_draw_buffers_indexed 扩展
const ext = gl.getExtension('OES_draw_buffers_indexed');
if (!ext) {
    console.error('OES_draw_buffers_indexed not supported');
}

// 创建帧缓冲对象
const framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

// 创建两个纹理作为颜色渲染目标
function createTexture() {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 512, 512, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    return texture;
}

const texture1 = createTexture();
const texture2 = createTexture();

// 将纹理附加到帧缓冲对象
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture1, 0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, texture2, 0);

// 检查帧缓冲对象的完整性
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
    console.error('Framebuffer is not complete');
}

// 设置绘制到多个缓冲
const drawBuffers = [gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1];
ext.drawBuffers(drawBuffers.length, drawBuffers);

// 清空颜色缓冲
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 执行绘制操作（绘制代码略过，为简单起见）
// 例如：gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

// 解绑帧缓冲
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

// 现在可以在屏幕上绘制或使用texture1和texture2的颜色输出

四、总结

使用 OES_draw_buffers_indexed 扩展可以显著提高WebGL渲染的灵活性，尤其在开发复杂的图形效果时，能够灵活地将渲染结果输出到多个目标。以上示例展示了如何创建一个帧缓冲对象并将多个纹理作为渲染目标，同时设置绘制到这两个纹理的流程。通过使用这种扩展，开发者能够在WebGL中实现更丰富的视觉效果，并扩展更多渲染技术的可能性。