feat: add a colorSpace option to facilitate the usage of display-p3

Author: jsulpis

lib/playground/src/pages/core/scissor.astro

@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 
 <script>
-  import { useWebGLCanvas } from "usegl";
+  import { useQuadRenderPass, useWebGLCanvas } from "usegl";
   import { incrementRenderCount } from "../../components/renderCount";
 
   const canvas = document.querySelector("canvas");
@@ -18,14 +18,12 @@ import Layout from "../../layouts/Layout.astro";
     renderMode: "manual",
   });
 
-  const rightShader = useWebGLCanvas({
-    canvas,
+  const rightShader = useQuadRenderPass(leftShader.gl, {
     fragment: /* glsl */ `
 			void main() {
 				gl_FragColor = vec4(0, 1, 0, 1);
 			}
 		`,
-    renderMode: "manual",
   });
 
   leftShader.onAfterRender(incrementRenderCount);

lib/src/hooks/useWebGLCanvas.ts

@@ -1,23 +1,20 @@
 import { useResizeObserver } from "./useResizeObserver";
-import type { Attribute, DrawMode, PostEffect, Uniforms } from "../types";
+import type { PostEffect, Uniforms } from "../types";
 import { useWebGLContext } from "./useWebGLContext";
+import type { QuadPassOptions } from "./useQuadRenderPass";
 import { useQuadRenderPass } from "./useQuadRenderPass";
 import { useCompositor } from "./useCompositor";
 import { findUniformName } from "../internal/findName";
 import type { UseLoopOptions } from "./useLoop";
 import { useLoop } from "./useLoop";
 
-interface Props<U extends Uniforms> extends UseLoopOptions {
+interface Props<U extends Uniforms> extends UseLoopOptions, QuadPassOptions<U> {
   canvas: HTMLCanvasElement | OffscreenCanvas | string;
-  fragment: string;
-  vertex?: string;
-  uniforms?: U;
-  attributes?: Record<string, Attribute>;
   webglOptions?: WebGLContextAttributes;
-  drawMode?: DrawMode;
   dpr?: number;
   postEffects?: PostEffect[];
   renderMode?: "manual" | "auto";
+  colorSpace?: PredefinedColorSpace;
 }
 
 export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
@@ -29,9 +26,15 @@ export const useWebGLCanvas = <U extends Uniforms>(props: Props<U>) => {
     postEffects = [],
     immediate,
     renderMode = "auto",
+    colorSpace,
+    webglOptions,
   } = props;
 
-  const { gl, canvas, setSize: setCanvasSize } = useWebGLContext(canvasProp);
+  const {
+    gl,
+    canvas,
+    setSize: setCanvasSize,
+  } = useWebGLContext(canvasProp, { ...webglOptions, colorSpace });
 
   const primaryPass = useQuadRenderPass(gl, props);
   const compositor = useCompositor(gl, primaryPass, postEffects);

lib/src/hooks/useWebGLContext.ts

@@ -1,6 +1,10 @@
+export type WebGLContextOptions = WebGLContextAttributes & {
+  colorSpace?: PredefinedColorSpace;
+};
+
 export function useWebGLContext(
   canvas: HTMLCanvasElement | OffscreenCanvas | string,
-  options?: WebGLContextAttributes,
+  options?: WebGLContextOptions,
 ) {
   const canvasElement =
     typeof canvas === "string" ? document.querySelector<HTMLCanvasElement>(canvas) : canvas;
@@ -14,6 +18,10 @@ export function useWebGLContext(
     throw new Error("No WebGL2 context available.");
   }
 
+  if ("drawingBufferColorSpace" in gl && options?.colorSpace != undefined) {
+    gl.drawingBufferColorSpace = options.colorSpace;
+  }
+
   function setSize(width: number, height: number) {
     canvasElement!.width = width;
     canvasElement!.height = height;