Signatur
Beschreibung
Die Eigenschaft drawingBufferColorSpace legt fest, in welchem Farbraum der Browser die Pixel des WebGL-Zeichenpuffers interpretiert, wenn er die Canvas auf dem Bildschirm zusammensetzt. Standardmäßig ist das "srgb". Auf Geräten mit Wide-Gamut-Displays (etwa aktuelle MacBooks, iPhones oder viele OLED-Monitore) kannst du mit "display-p3" gesättigtere Farben darstellen, die außerhalb des sRGB-Farbumfangs liegen.
Die Eigenschaft ist les- und schreibbar und steht sowohl auf WebGLRenderingContext als auch auf WebGL2RenderingContext zur Verfügung. Der Wert gehört zum Aufzählungstyp PredefinedColorSpace, der auch bei CanvasRenderingContext2D (Option colorSpace) und ImageData verwendet wird.
Wichtig: Der Farbraum ändert nicht, wie deine Shader rechnen. Er bestimmt nur, wie die geschriebenen Werte angezeigt werden. Der Farbwert vec4(1.0, 0.0, 0.0, 1.0) ist bei "srgb" das sRGB-Rot, bei "display-p3" dagegen das deutlich kräftigere P3-Rot. Damit Texturen korrekt in den Zielfarbraum umgewandelt werden, gibt es die ergänzende Eigenschaft unpackColorSpace (bei WebGL 2 zusätzlich das Argument beim Hochladen).
Setze den Wert am besten direkt nach dem Erzeugen des Kontexts und vor dem ersten Zeichnen, denn beim Umschalten wird der Zeichenpuffer neu angelegt und sein Inhalt verworfen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "srgb" | "display-p3" | "srgb" | Neuer Farbraum beim Zuweisen. Ungültige Zeichenketten werden laut WebIDL stillschweigend ignoriert, es wird also kein Fehler geworfen. |
Rückgabewert
"srgb" oder "display-p3". In Browsern ohne Unterstützung ist der Wert undefined.Beispiele
Aktuellen Farbraum auslesen
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
if (gl && 'drawingBufferColorSpace' in gl) {
console.log(gl.drawingBufferColorSpace);
} else {
console.log('drawingBufferColorSpace wird nicht unterstützt');
}Display-P3 nur bei passendem Bildschirm aktivieren
const canvas = document.querySelector('#scene');
const gl = canvas.getContext('webgl2');
const supportsP3 = window.matchMedia('(color-gamut: p3)').matches;
if (supportsP3 && 'drawingBufferColorSpace' in gl) {
// Vor dem ersten Zeichnen setzen, beim Umschalten wird der Puffer neu angelegt
gl.drawingBufferColorSpace = 'display-p3';
gl.unpackColorSpace = 'display-p3';
}
console.log(`Farbraum: ${gl.drawingBufferColorSpace}`);
// Kräftiges P3-Rot als Hintergrund
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);Setzen prüfen, weil ungültige Werte ignoriert werden
const gl = document.createElement('canvas').getContext('webgl');
const setColorSpace = (ctx, space) => {
ctx.drawingBufferColorSpace = space;
return ctx.drawingBufferColorSpace === space;
};
console.log(setColorSpace(gl, 'rec2020')); // kein gültiger Wert
console.log(setColorSpace(gl, 'display-p3'));
console.log(gl.drawingBufferColorSpace);// Wichtig · Fallstricke
- Browser-Kompatibilität: Chromium-basierte Browser unterstützen die Eigenschaft ab Version 104, Safari ab 16.4. In Firefox ist die Unterstützung eingeschränkt. Teste die Verfügbarkeit mit
'drawingBufferColorSpace' in gl. - Inhalt geht verloren: Wenn du den Wert änderst, wird der Zeichenpuffer neu angelegt. Danach musst du die Szene neu zeichnen.
- Kein Fehler bei ungültigen Werten: Werte wie
"rec2020"werden ohne Meldung ignoriert. Lies den Wert nach dem Setzen zur Kontrolle aus. - Shader-Werte bleiben gleich: Deine Farbwerte werden nicht automatisch umgerechnet. Farben, die für sRGB abgestimmt sind, wirken in
"display-p3"übersättigt. Lade Texturen deshalb mit passendemunpackColorSpacehoch. - Auf Bildschirmen ohne P3-Unterstützung werden P3-Farben auf den verfügbaren Farbumfang abgebildet (Gamut-Mapping). Frag das vorher mit
matchMedia('(color-gamut: p3)')ab. toDataURL()undreadPixels()liefern die Rohwerte des Puffers. Beim Export kann ein Farbprofil fehlen oder vom Browser abhängen.