From 5335d60fc3ea2bf9940d5e7e811addd3f63981fe Mon Sep 17 00:00:00 2001 From: Hamish Willee Date: Tue, 8 Oct 2024 11:08:01 +1100 Subject: [PATCH] FF132 Add webgl2rendering unpackColorSpace --- .../drawingbuffercolorspace/index.md | 46 +++++++++++ .../web/api/webgl2renderingcontext/index.md | 7 ++ .../unpackcolorspace/index.md | 78 +++++++++++++++++++ .../unpackcolorspace/index.md | 2 +- 4 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/webgl2renderingcontext/drawingbuffercolorspace/index.md create mode 100644 files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md diff --git a/files/en-us/web/api/webgl2renderingcontext/drawingbuffercolorspace/index.md b/files/en-us/web/api/webgl2renderingcontext/drawingbuffercolorspace/index.md new file mode 100644 index 000000000000000..6ded7a0ebfd4d5f --- /dev/null +++ b/files/en-us/web/api/webgl2renderingcontext/drawingbuffercolorspace/index.md @@ -0,0 +1,46 @@ +--- +title: "WebGL2RenderingContext: drawingBufferColorSpace property" +short-title: drawingBufferColorSpace +slug: Web/API/WebGL2RenderingContext/drawingBufferColorSpace +page-type: web-api-instance-property +browser-compat: api.WebGL2RenderingContext.drawingBufferColorSpace +--- + +{{APIRef("WebGL")}}{{AvailableInWorkers}} + +The **`WebGL2RenderingContext.drawingBufferColorSpace`** property specifies the color space of the WebGL drawing buffer. Along with the default (`srgb`), the `display-p3` color space can be used. + +See [`WebGL2RenderingContext.unpackColorSpace`](/en-US/docs/Web/API/WebGL2RenderingContext/unpackColorSpace) for specifying the color space for textures. + +## Value + +This property can have the following values: + +- `"srgb"` selects the [sRGB color space](https://en.wikipedia.org/wiki/SRGB). This is the default value. +- `"display-p3"` selects the [display-p3 color space](https://en.wikipedia.org/wiki/DCI-P3). + +If an invalid value is specified, then the value of `drawingBufferColorSpace` will remain unchanged. + +## Examples + +### Setting the drawing buffer color space to draw a Display P3 red + +```js +const canvas = document.getElementById("canvas"); +const gl = canvas.getContext("webgl"); +gl.drawingBufferColorSpace = "display-p3"; +gl.clearColor(1, 0, 0, 1); +gl.clear(gl.COLOR_BUFFER_BIT); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [`WebGL2RenderingContext.unpackColorSpace`](/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace) diff --git a/files/en-us/web/api/webgl2renderingcontext/index.md b/files/en-us/web/api/webgl2renderingcontext/index.md index 5ab6ce1eab558b7..e213a0a5b185e88 100644 --- a/files/en-us/web/api/webgl2renderingcontext/index.md +++ b/files/en-us/web/api/webgl2renderingcontext/index.md @@ -94,6 +94,13 @@ See the [WebGL constants](/en-US/docs/Web/API/WebGL_API/Constants) page. - {{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}} - : Specifies integer data formats and locations of vertex attributes in a vertex attributes array. +## Color spaces + +- {{domxref("WebGL2RenderingContext.drawingBufferColorSpace")}} + - : Specifies the color space of the WebGL drawing buffer. +- {{domxref("WebGL2RenderingContext.unpackColorSpace")}} + - : Specifies the color space to convert to when importing textures. + ## Drawing buffers - {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}} diff --git a/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md b/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md new file mode 100644 index 000000000000000..67ecb3d75ec7223 --- /dev/null +++ b/files/en-us/web/api/webgl2renderingcontext/unpackcolorspace/index.md @@ -0,0 +1,78 @@ +--- +title: "WebGL2RenderingContext: unpackColorSpace property" +short-title: unpackColorSpace +slug: Web/API/WebGL2RenderingContext/unpackColorSpace +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.WebGL2RenderingContext.unpackColorSpace +--- + +{{APIRef("WebGL")}}{{SeeCompatTable}}{{AvailableInWorkers}} + +The **`WebGL2RenderingContext.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`](/en-US/docs/Web/API/ImageBitmap) +- [`ImageData`](/en-US/docs/Web/API/ImageData) +- [`HTMLImageElement`](/en-US/docs/Web/API/HTMLImageElement) +- [`HTMLCanvasElement`](/en-US/docs/Web/API/HTMLCanvasElement) +- [`HTMLVideoElement`](/en-US/docs/Web/API/HTMLVideoElement) +- [`OffscreenCanvas`](/en-US/docs/Web/API/OffscreenCanvas) +- [`VideoFrame`](/en-US/docs/Web/API/VideoFrame) + +Textures are imported using the [`WebGL2RenderingContext.texImage2D()`](/en-US/docs/Web/API/WebGL2RenderingContext/texImage2D) and [`WebGL2RenderingContext.texSubImage2D()`](/en-US/docs/Web/API/WebGL2RenderingContext/texSubImage2D) methods and conversion to the specified `unpackColorSpace` color space happens during import. + +Note that this doesn't apply to [`HTMLImageElement`](/en-US/docs/Web/API/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](https://en.wikipedia.org/wiki/SRGB). This is the default value. +- `"display-p3"` selects the [display-p3 color space](https://en.wikipedia.org/wiki/DCI-P3). + +If an invalid value is specified, then the value of `unpackColorSpace` will remain unchanged. + +## Examples + +### Converting sRGB ImageData to display-p3 in a texture + +```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, +); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [`WebGL2RenderingContext.drawingBufferColorSpace`](/en-US/docs/Web/API/WebGL2RenderingContext/drawingBufferColorSpace) diff --git a/files/en-us/web/api/webglrenderingcontext/unpackcolorspace/index.md b/files/en-us/web/api/webglrenderingcontext/unpackcolorspace/index.md index 165e0fbd5cbb8cf..97cc92040622f90 100644 --- a/files/en-us/web/api/webglrenderingcontext/unpackcolorspace/index.md +++ b/files/en-us/web/api/webglrenderingcontext/unpackcolorspace/index.md @@ -22,7 +22,7 @@ Texture image sources can be the following: - [`OffscreenCanvas`](/en-US/docs/Web/API/OffscreenCanvas) - [`VideoFrame`](/en-US/docs/Web/API/VideoFrame) -Textures are imported using the [`WebGLRenderingContext.texImage2D()`](/en-US/docs/Web/API/WebGLRenderingContext/texImage2D) and [`WebGLRenderingContext.texSubImage2D()`](/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D) methods and conversion to the specified `unpackColorSpace` color space happens during import. +Textures are imported using the [`WebGL2RenderingContext.texImage2D()`](/en-US/docs/Web/API/WebGLRenderingContext/texImage2D) and [`WebGL2RenderingContext.texSubImage2D()`](/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D) methods and conversion to the specified `unpackColorSpace` color space happens during import. Note that this doesn't apply to [`HTMLImageElement`](/en-US/docs/Web/API/HTMLImageElement) when the `UNPACK_COLORSPACE_CONVERSION_WEBGL` pixel storage parameter is set to `NONE`.