WEBGL_draw_buffers-Erweiterung

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.

Hinweis: Diese Erweiterung ist nur in WebGL1-Kontexten verfügbar. In WebGL2 ist die Funktionalität dieser Erweiterung standardmäßig im WebGL2-Kontext verfügbar. In WebGL 2 sind die Konstanten ohne das "WEBGL"-Suffix verfügbar und die neuen GLSL-Built-ins 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, 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 WebGL2 ist diese Methode standardmäßig als gl.drawBuffers() verfügbar).

Beispiele

Aktivierung der Erweiterung:

js
const ext = gl.getExtension("WEBGL_draw_buffers");

Mehrere Texturen (zu einem tx[]-Array) an verschiedene Framebuffer-Farbanfügungen binden:

js
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:

js
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:

html
<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

Specification
WebGL WEBGL_draw_buffers Khronos Ratified Extension Specification

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch