W3cubDocs

WebGLRenderingContext: unpackColorSpace property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`unpackColorSpace`	104	104	No	No	90	No	104	104	No	71	No	20.0

Value

Examples

Converting sRGB ImageData to display-p3 in a texture

Specifications

Browser compatibility

See also