WEBGL_draw_buffers-Erweiterung

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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:

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:

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden