WebGL2RenderingContext.drawingBufferColorSpace — Eigenschaft · JavaScript-Referenz

Signatur

WebGL2RenderingContext.drawingBufferColorSpace

Beschreibung

Mit der Eigenschaft drawingBufferColorSpace legst du fest, in welchem Farbraum der Browser die Pixelwerte im Zeichenpuffer (dem Drawing Buffer) eines WebGL-Kontexts interpretiert, wenn er sie auf dem Bildschirm zusammensetzt. Standard ist "srgb". Mit "display-p3" nutzt du auf passenden Bildschirmen (z. B. aktuelle MacBooks, iPhones, viele OLED-Monitore) den größeren Farbumfang von Display P3.

Die Eigenschaft ist lesbar und schreibbar. Setzt du einen neuen Wert, gibt der Browser den bisherigen Zeichenpuffer frei und legt ihn mit dem neuen Farbraum neu an. Der Inhalt geht dabei verloren. Deshalb solltest du den Farbraum direkt nach dem Erzeugen des Kontexts setzen und erst danach zeichnen.

Die Eigenschaft bestimmt nur, wie die Werte gedeutet werden. Deine Shader rechnen weiterhin mit Werten zwischen 0 und 1. Die Farbe vec4(1.0, 0.0, 0.0, 1.0) ist im P3-Raum aber ein kräftigeres Rot als in sRGB. Texturen, die aus Bildern geladen werden, steuerst du getrennt über unpackColorSpace. Beide Einstellungen sollten zusammenpassen, damit Farben nicht falsch umgerechnet werden.

Dieselbe Eigenschaft gibt es auch bei WebGLRenderingContext (WebGL 1).

Parameter

Name	Typ	Default	Beschreibung
$value	"srgb" \| "display-p3"	"srgb"	Farbraum, der beim Schreiben zugewiesen wird. Ungültige Werte führen zu einem `TypeError`, der Wert bleibt dann unverändert.

Rückgabewert

Typ

string

Beschreibung

Der aktuell eingestellte Farbraum des Zeichenpuffers: "srgb" oder "display-p3".

Beispiele

Aktuellen Farbraum auslesen

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');

console.log(gl.drawingBufferColorSpace);

srgb

Display P3 nur verwenden, wenn Browser und Bildschirm es unterstützen

const canvas = document.querySelector('#scene');
const gl = canvas.getContext('webgl2');

const wideGamut = window.matchMedia('(color-gamut: p3)').matches;

if ('drawingBufferColorSpace' in gl && wideGamut) {
  // Direkt nach dem Erzeugen setzen, weil der Puffer neu angelegt wird
  gl.drawingBufferColorSpace = 'display-p3';
  gl.unpackColorSpace = 'display-p3';
}

console.log(`Farbraum: ${gl.drawingBufferColorSpace}`);

Farbraum: display-p3 (auf P3-fähigen Geräten)

Kräftiges P3-Rot zeichnen

const gl = document.querySelector('canvas').getContext('webgl2');

try {
  gl.drawingBufferColorSpace = 'display-p3';
} catch (err) {
  console.warn('Farbraum nicht unterstützt:', err.message);
}

// In P3 ist (1, 0, 0) gesättigter als das sRGB-Rot
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

Ungültigen Wert abfangen

const gl = document.createElement('canvas').getContext('webgl2');

try {
  gl.drawingBufferColorSpace = 'rec2020';
} catch (err) {
  console.log(err.name);
}
console.log(gl.drawingBufferColorSpace);

TypeError srgb

// Wichtig · Fallstricke

Puffer wird zurückgesetzt: Jede Zuweisung legt den Zeichenpuffer neu an. Alles, was bis dahin gezeichnet wurde, ist danach weg. Setze den Farbraum deshalb vor dem ersten Zeichnen und nicht bei jedem Frame.
Browser-Unterstützung: Chromium-Browser ab Version 104 und Safari ab 16.4 unterstützen die Eigenschaft. Firefox unterstützt sie bisher nicht. Prüfe das mit 'drawingBufferColorSpace' in gl. In Firefox bleibt eine Zuweisung ohne Wirkung und ohne Fehlermeldung, weil nur eine gewöhnliche Eigenschaft am Objekt angelegt wird.
Bildschirm prüfen: Auf reinen sRGB-Bildschirmen bringt "display-p3" keinen Vorteil. Die Farben werden dann in den sRGB-Bereich zurückgerechnet. Mit matchMedia('(color-gamut: p3)') findest du heraus, ob der Bildschirm P3 darstellen kann.
Texturen: Für Bilddaten, die mit texImage2D hochgeladen werden, gilt unpackColorSpace. Passen die beiden Einstellungen nicht zusammen, sehen die Farben verschoben aus.
Beim Auslesen mit readPixels oder canvas.toDataURL() gehört der Farbraum nicht zu den Rohwerten. Wie das Ergebnis weiterverarbeitet wird, hängt von der Anwendung ab.

Siehe auch

PerformanceTimingConfidence.randomizedTriggerRate WebGL2RenderingContext.unpackColorSpace WebGLRenderingContext.drawingBufferColorSpace WebGLRenderingContext.drawingBufferHeight WebGLRenderingContext.drawingBufferWidth