WebGLRenderingContext: unpackColorSpace property

Limited availability

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

See full compatibility

Note: This feature is available in Web Workers.

The WebGLRenderingContext.unpackColorSpace property specifies the color space to convert to when importing textures. Along with the default (srgb), the display-p3 color space can be used.

Texture image sources can be the following:

Textures are imported using the WebGLRenderingContext.texImage2D() and WebGLRenderingContext.texSubImage2D() methods and conversion to the specified unpackColorSpace color space happens during import.

Note that this doesn't apply to HTMLImageElement when the UNPACK_COLORSPACE_CONVERSION_WEBGL pixel storage parameter is set to NONE.

Value

This property can have the following values:

"srgb" selects the sRGB color space. This is the default value.
"display-p3" selects the display-p3 color space.

If an invalid value is specified, then the value of unpackColorSpace will remain unchanged.

Examples

Converting sRGB ImageData to display-p3 in a texture

const canvas = document.getElementById("canvas");
const gl = canvas.getContext("webgl");

gl.drawingBufferColorSpace = "display-p3";
gl.unpackColorSpace = "display-p3";

// Some sRGB ImageData
// Will be converted from sRGB to Display P3
const imageData = new ImageData(data, 32, 32);

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(
  gl.TEXTURE_2D,
  0,
  gl.RGBA,
  width,
  height,
  0,
  gl.RGBA,
  gl.UNSIGNED_BYTE,
  imageData,
);

Specifications

Specification
WebGL Specification # DOM-WebGLRenderingContext-unpackColorSpace

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`unpackColorSpace`	Chrome – Full support Chrome 104 (Release date: 2022-08-02) footnote Full support	Edge – Full support Edge 104 (Release date: 2022-08-05) footnote Full support	Firefox – Full support Firefox 132 (Release date: 2024-10-29) footnote Full support	Opera – Full support Opera 90 (Release date: 2022-08-18) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 104 (Release date: 2022-08-02) footnote Full support	Firefox for Android – Full support Firefox for Android 132 (Release date: 2024-10-29) footnote Full support	Opera Android – Full support Opera Android 71 (Release date: 2022-09-16) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 20 (Release date: 2023-02-10) footnote Full support	WebView Android – Full support WebView Android 104 (Release date: 2022-08-02) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support

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

Full support: Full support
No support: No support