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

在WebGL中，OES_draw_buffers_indexed扩展提供了一种方式来更灵活地控制多个颜色附件的渲染。这允许开发者在片段着色器中独立地指定每个颜色附件的输出颜色，而不是使用统一的输出数组。这对于实现复杂的渲染效果非常有用。

OES_draw_buffers_indexed 简介

OES_draw_buffers_indexed扩展为WebGL添加了对多个颜色附件的更细粒度的控制。这意味着你可以使用片段着色器中的特定函数来分别设置每个颜色附件的输出颜色，而不是使用全局的gl_FragData数组。

使用方法

使用OES_draw_buffers_indexed扩展的一般步骤如下：

1. 检测扩展：首先确保浏览器支持该扩展。
2. 创建帧缓冲区：使用createFramebuffer方法创建帧缓冲区。
3. 附加颜色纹理：使用framebufferTexture2D方法将多个颜色纹理附加到帧缓冲区。
4. 设置颜色附件：使用drawBuffersIndexed方法设置要渲染的颜色附件。
5. 绘制场景：使用drawArrays或drawElements方法绘制场景。

示例代码

下面是一个使用OES_draw_buffers_indexed扩展创建和使用多个颜色附件的基本示例：

const canvas = document.getElementById('my-canvas');
const gl = canvas.getContext('webgl2', { antialias: true });

// 检测扩展
const drawBuffersIndexed = gl.getExtension('OES_draw_buffers_indexed');

if (!drawBuffersIndexed) {
  console.error('OES_draw_buffers_indexed extension not supported.');
  return;
}

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

// 创建颜色纹理
const colorTexture1 = gl.createTexture();
const colorTexture2 = gl.createTexture();

// 设置纹理参数
gl.bindTexture(gl.TEXTURE_2D, colorTexture1);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

gl.bindTexture(gl.TEXTURE_2D, colorTexture2);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 附加颜色纹理到帧缓冲区
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture1, 0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, colorTexture2, 0);

// 设置颜色附件
drawBuffersIndexed.drawBuffersWEBGL([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);

// 创建片段着色器
const fragmentShaderSource = `
  precision mediump float;
  void main() {
    // 设置颜色附件0
    oes_setFragmentData(0, vec4(1.0, 0.0, 0.0, 1.0));
    // 设置颜色附件1
    oes_setFragmentData(1, vec4(0.0, 1.0, 0.0, 1.0));
  }
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 创建并链接着色器程序
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 加载颜色纹理数据
const textureData = new Uint8Array([...]); // 假设这里填充了纹理数据
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 128, 128, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData);

// 绘制场景
// 假设这里已经设置了顶点数据
gl.drawArrays(gl.TRIANGLES, 0, 3);

注意事项

• 确保在片段着色器中使用 oes_setFragmentData 函数来设置每个颜色附件的输出颜色。
• 由于浏览器和设备支持情况的不同，你应该始终检查扩展是否可用。
• 使用多个颜色附件可能会稍微影响性能，因为涉及更多的数据处理。

结论

使用OES_draw_buffers_indexed扩展可以显著提高WebGL应用程序中的渲染能力，特别是在实现高级渲染技术时。然而，由于支持情况的不同，你应该始终检查扩展是否可用，并且不要在生产环境中直接暴露敏感信息给用户。