Signatur
Beschreibung
Mit unpackColorSpace legst du fest, in welchen Farbraum der Browser Bilddaten umrechnet, wenn du sie mit texImage2D(), texSubImage2D(), texImage3D() oder texSubImage3D() als Textur hochlädst. Das betrifft DOM-Quellen wie HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap und ImageData. Mögliche Werte sind "srgb" (Standard) und "display-p3".
Wichtig wird die Eigenschaft bei Wide-Gamut-Inhalten, also Fotos mit eingebettetem Display-P3-Profil oder Videos mit großem Farbumfang. Wenn der Shader in P3 rechnen soll und die Ausgabe per drawingBufferColorSpace = "display-p3" ebenfalls P3 ist, setzt du unpackColorSpace auf "display-p3". Dann gehen gesättigte Farben beim Upload nicht verloren.
Die Eigenschaft gilt für den ganzen Kontext und wirkt auf alle folgenden Upload-Aufrufe. Bereits hochgeladene Texturen ändern sich nicht. Rohdaten aus ArrayBufferViews (typisierte Arrays) werden nicht umgerechnet, denn der Browser kennt ihren Farbraum nicht.
Die Eigenschaft gibt es genauso auch auf WebGLRenderingContext (WebGL 1).
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | "srgb" | "display-p3" | "srgb" | Zielfarbraum für alle folgenden Textur-Uploads aus Bild-, Video- oder Canvas-Quellen. Beim Setzen eines ungültigen Werts wird ein TypeError ausgelöst. |
Rückgabewert
Beispiele
Aktuellen Wert auslesen und Unterstützung prüfen
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl2');
if (gl && 'unpackColorSpace' in gl) {
console.log(gl.unpackColorSpace);
} else {
console.log('unpackColorSpace wird nicht unterstützt');
}Display-P3-Foto verlustarm als Textur hochladen
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2');
// Ausgabe und Textur-Import auf Display P3 umstellen
gl.drawingBufferColorSpace = 'display-p3';
gl.unpackColorSpace = 'display-p3';
const loadTexture = async (url) => {
const img = new Image();
img.src = url;
await img.decode();
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
return tex;
};
const texture = await loadTexture('/bilder/sonnenuntergang-p3.jpg');
console.log('Textur geladen im Farbraum', gl.unpackColorSpace);Farbraum nur für einzelne Uploads umschalten
const gl = document.querySelector('canvas').getContext('webgl2');
const uploadWithColorSpace = (source, colorSpace) => {
const previous = gl.unpackColorSpace;
gl.unpackColorSpace = colorSpace;
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
gl.unpackColorSpace = previous; // Zustand wiederherstellen
return tex;
};
const video = document.querySelector('video');
const videoTex = uploadWithColorSpace(video, 'display-p3');
console.log(gl.unpackColorSpace);// Wichtig · Fallstricke
- Browser-Unterstützung: Chromium-Browser ab Version 104 und Safari ab 16.4. Firefox unterstützt die Eigenschaft bisher nicht. Prüfe deshalb vorher mit
'unpackColorSpace' in gl. Nicht unterstützende Browser ignorieren eine Zuweisung einfach. - Nur für DOM-Quellen: Typisierte Arrays (
Uint8Arrayusw.) werden nie umgerechnet. - Globaler Zustand: Der Wert gilt für den ganzen Kontext, ähnlich wie
pixelStorei()-Einstellungen. Vergisst du, ihn zurückzusetzen, hat das Folgen für alle späteren Uploads. - Präzision: Bei 8-Bit-Texturen (
UNSIGNED_BYTE) kann die Umrechnung zwischen Farbräumen Streifenbildung (Banding) erzeugen. Für hohe Farbtreue eignen sich Formate wieRGBA16Fbesser. - Wechselwirkung: Mit
pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE)schaltest du jede Farbraum-Umrechnung ab. Dann hat auchunpackColorSpacekeine Wirkung auf eingebettete Farbprofile. - Ob der Bildschirm P3 überhaupt darstellen kann, prüfst du mit
matchMedia('(color-gamut: p3)').