WebGLRenderingContext: unpackColorSpace プロパティ

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

WebGLRenderingContext.unpackColorSpace プロパティは、テクスチャをインポートする際に変換する色空間を指定します。既定値 (srgb) の他に、 display-p3 色空間も使用することができます。

テクスチャ画像のソースとしては、以下のものが利用できます。

テクスチャは WebGLRenderingContext.texImage2D()WebGLRenderingContext.texSubImage2D() メソッドを使用してインポートされ、インポート中に指定した unpackColorSpace 色空間に変換されます。

これは、 HTMLImageElement において UNPACK_COLORSPACE_CONVERSION_WEBGL 引数が NONE に設定されている場合には適用されないことに注意してください。

This property can have the following values:

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

テクスチャ内の sRGB ImageData を display-p3 に変換

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

仕様書

Specification
WebGL Specification
# DOM-WebGLRenderingContext-unpackColorSpace

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
unpackColorSpace

Legend

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

Full support
Full support
No support
No support

関連情報