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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WEBGL_draw_buffers
drawBuffersWEBGL

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch