WEBGL_draw_buffers-Erweiterung
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Die WEBGL_draw_buffers-Erweiterung ist Teil der WebGL API und ermöglicht es einem Fragment-Shader, in mehrere Texturen zu schreiben. Dies ist nützlich zum Beispiel für Deferred Shading.
WebGL-Erweiterungen sind verfügbar über die Methode WebGLRenderingContext.getExtension(). Für weitere Informationen siehe auch Anleitung zur Verwendung von Erweiterungen im WebGL-Leitfaden.
Konstanten
Diese Erweiterung stellt neue Konstanten bereit, die in den Methoden gl.framebufferRenderbuffer(), gl.framebufferTexture2D(), gl.getFramebufferAttachmentParameter(), ext.drawBuffersWEBGL() und gl.getParameter() verwendet werden können.
ext.COLOR_ATTACHMENT0_WEBGL,ext.COLOR_ATTACHMENT1_WEBGL,ext.COLOR_ATTACHMENT2_WEBGL,ext.COLOR_ATTACHMENT3_WEBGL,ext.COLOR_ATTACHMENT4_WEBGL,ext.COLOR_ATTACHMENT5_WEBGL,ext.COLOR_ATTACHMENT6_WEBGL,ext.COLOR_ATTACHMENT7_WEBGL,ext.COLOR_ATTACHMENT8_WEBGL,ext.COLOR_ATTACHMENT9_WEBGL,ext.COLOR_ATTACHMENT10_WEBGL,ext.COLOR_ATTACHMENT11_WEBGL,ext.COLOR_ATTACHMENT12_WEBGL,ext.COLOR_ATTACHMENT13_WEBGL,ext.COLOR_ATTACHMENT14_WEBGL,ext.COLOR_ATTACHMENT15_WEBGL-
Ein
GLenum, der einen Farb-Puffer angibt. ext.DRAW_BUFFER0_WEBGL,ext.DRAW_BUFFER1_WEBGL,ext.DRAW_BUFFER2_WEBGL,ext.DRAW_BUFFER3_WEBGL,ext.DRAW_BUFFER4_WEBGL,ext.DRAW_BUFFER5_WEBGL,ext.DRAW_BUFFER6_WEBGL,ext.DRAW_BUFFER7_WEBGL,ext.DRAW_BUFFER8_WEBGL ext.DRAW_BUFFER9_WEBGL,ext.DRAW_BUFFER10_WEBGL,ext.DRAW_BUFFER11_WEBGL,ext.DRAW_BUFFER12_WEBGL,ext.DRAW_BUFFER13_WEBGL,ext.DRAW_BUFFER14_WEBGL,ext.DRAW_BUFFER15_WEBGL-
Ein
GLenum, der einen Zeichenpuffer zurückgibt. ext.MAX_COLOR_ATTACHMENTS_WEBGL-
Ein
GLint, der die maximale Anzahl von Framebuffer-Farb-Anschlusspunkten angibt. ext.MAX_DRAW_BUFFERS_WEBGL-
Ein
GLint, der die maximale Anzahl von Zeichenpuffern angibt.
Instanzmethoden
Diese Erweiterung stellt eine neue Methode bereit.
ext.drawBuffersWEBGL()-
Definiert die Zeichenpuffer, in die alle Fragmentfarben geschrieben werden. (Bei Verwendung von
WebGL2ist diese Methode standardmäßig alsgl.drawBuffers()verfügbar).
Beispiele
Aktivierung der Erweiterung:
const ext = gl.getExtension("WEBGL_draw_buffers");
Mehrere Texturen (zu einem tx[]-Array) an verschiedene Framebuffer-Farbanfügungen binden:
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,
);
Farb-Anhänge in Zeichnen-Puffer-Slots abbilden, in die der Fragment-Shader mittels gl_FragData schreiben wird:
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]
]);
Shader-Code, der in mehrere Texturen schreibt:
<script type="x-shader/x-fragment">
#extension GL_EXT_draw_buffers : require
precision highp float;
void main(void) {
gl_FragData[0] = vec4(0.25);
gl_FragData[1] = vec4(0.5);
gl_FragData[2] = vec4(0.75);
gl_FragData[3] = vec4(1.0);
}
</script>
Spezifikationen
| Spezifikation |
|---|
| WebGL WEBGL_draw_buffers Khronos Ratified Extension Specification |