WebGLRenderingContext: unpackColorSpace property

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:

• ImageBitmap
• ImageData
• HTMLImageElement
• HTMLCanvasElement
• HTMLVideoElement
• OffscreenCanvas
• VideoFrame

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.

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,
);