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.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Erweiterung WEBGL_draw_buffers ist Teil der WebGL-API und ermöglicht es einem Fragment-Shader, in mehrere Texturen zu schreiben. Das ist beispielsweise für Deferred Shading nützlich.
WebGL-Erweiterungen sind über die Methode WebGLRenderingContext.getExtension() verfügbar.
Weitere Informationen finden Sie unter WebGL-Erweiterungen verwenden.
Hinweis:
Diese Erweiterung ist nur für WebGL1-Kontexte verfügbar. In WebGL2 steht die Funktionalität dieser Erweiterung im WebGL2-Kontext standardmäßig zur Verfügung. In WebGL 2 sind die Konstanten ohne das Suffix „WEBGL“ verfügbar, und die neuen integrierten GLSL-Variablen erfordern GLSL #version 300 es.
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, das einen Farbpuffer 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, das einen Zeichenpuffer zurückgibt. ext.MAX_COLOR_ATTACHMENTS_WEBGL-
Ein
GLint, das die maximale Anzahl von Farbanhangspunkten eines Framebuffers angibt. ext.MAX_DRAW_BUFFERS_WEBGL-
Ein
GLint, das die maximale Anzahl von Zeichenpuffern angibt.
Instanzmethoden
Diese Erweiterung stellt eine neue Methode bereit.
ext.drawBuffersWEBGL()-
Legt die Zeichenpuffer fest, in die alle Fragmentfarben geschrieben werden. (Bei Verwendung von
WebGL2ist diese Methode standardmäßig alsgl.drawBuffers()verfügbar.)
Beispiele
Die Erweiterung aktivieren:
const ext = gl.getExtension("WEBGL_draw_buffers");
Mehrere Texturen (aus einem tx[]-Array) an verschiedene Farbanhänge eines Framebuffers 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,
);
Die Farbanhänge den Zeichenpuffer-Slots zuordnen, in die der Fragment-Shader mittels gl_FragData schreibt:
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 |