一. 简介
WEBGL_draw_buffers是一个一次性绘制多张颜色纹理（缓冲区）的插件，经常用于后处理中，比如延迟渲染等，后续记录后处理的时候再介绍
二.使用
2.1 获取扩展
const ext = gl.getExtension("WEBGL_draw_buffers");
2.2 绑定多个纹理
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
ext.COLOR_ATTACHMENT0_WEBGL,
gl.TEXTURE_2D,
tx[0],
0,
);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
ext.COLOR_ATTACHMENT1_WEBGL,
gl.TEXTURE_2D,
tx[1],
0,
);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
ext.COLOR_ATTACHMENT2_WEBGL,
gl.TEXTURE_2D,
tx[2],
0,
);
gl.framebufferTexture2D(
gl.FRAMEBUFFER,
ext.COLOR_ATTACHMENT3_WEBGL,
gl.TEXTURE_2D,
tx[3],
0,
);
2.3 绘制多个纹理
ext.drawBuffersWEBGL([
ext.COLOR_ATTACHMENT0_WEBGL, // gl_FragData[0]
ext.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1]
ext.COLOR_ATTACHMENT2_WEBGL, // gl_FragData[2]
ext.COLOR_ATTACHMENT3_WEBGL, // gl_FragData[3]
]);
2.4 在shader中向多个纹理写入
const fs = /*glsl*/ `
#extension GL_EXT_draw_buffers : require
precision highp float;
uniform sampler2D u_texture;
varying vec2 v_uv;
void main(){
vec4 color=texture2D(u_texture,v_uv);
// gl_FragColor=color;
gl_FragData[0] = color;
gl_FragData[1] = vec4(1.0,0.0,0.0,1.0);
gl_FragData[2] = vec4(0.0,1.0,0.0,1.0);
}
`;
