Renderer config is now an object instead of params, allow clearColor …

…in config To hide flash of black canvas
vuoro · Aug 26, 2021 · e6f7b8c · e6f7b8c
1 parent bfcb063
commit e6f7b8c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 21 deletions.
diff --git a/main.js b/main.js
@@ -94,7 +94,10 @@ const requestRendering = () => {
   }
 };
 
-export const createRenderer = (canvas, attributes = blankObject, pixelRatio = 1, debug = false) => {
+export const createRenderer = (
+  canvas,
+  { attributes = blankObject, pixelRatio = 1, debug = false, clearColor = [0, 0, 0, 1] }
+) => {
   let gl = canvas.getContext("webgl2", { ...defaultAttributes, ...attributes });
 
   // Caches and setters
@@ -172,7 +175,6 @@ export const createRenderer = (canvas, attributes = blankObject, pixelRatio = 1,
   };
 
   // Clearing
-  let clearColor = [0, 0, 0, 1];
   let lastDepth = 1;
   const setClear = (color = clearColor, depth = lastDepth) => {
     color.forEach((value, index) => {

diff --git a/main.preact.js b/main.preact.js
@@ -9,26 +9,24 @@ import {
 } from "./main.js";
 export * from "./main.js";
 
-const blankObject = {};
-
-export const Canvas = ({ attributes, pixelRatio, debug = false, ...rest }) => {
+export const Canvas = ({ attributes, pixelRatio, debug, clearColor, ...rest }) => {
   const ref = useRef();
-  useCanvas(ref, attributes, pixelRatio, debug);
+  useCanvas(ref, { attributes, pixelRatio, debug, clearColor });
   return h("canvas", {
     ref,
     ...rest,
   });
 };
 
-export const useCanvas = (elementOrRef, attributes = blankObject, pixelRatio, debug = false) => {
+export const useCanvas = (elementOrRef, config) => {
   useEffect(() => {
     const canvas = elementOrRef.current || elementOrRef;
-    const renderer = createRenderer(canvas, attributes, pixelRatio, debug);
+    const renderer = createRenderer(canvas, config);
 
     return () => {
       renderer.destroy();
     };
-  }, [elementOrRef, pixelRatio, debug, ...Object.keys(attributes), ...Object.values(attributes)]);
+  }, [elementOrRef, ...Object.keys(config), ...Object.values(config)]);
 };
 
 export const component = (...args) => {

diff --git a/main.react.js b/main.react.js
@@ -8,26 +8,24 @@ import {
 } from "./main.js";
 export * from "./main.js";
 
-const blankObject = {};
-
-export const Canvas = ({ attributes, pixelRatio, debug = false, ...rest }) => {
+export const Canvas = ({ attributes, pixelRatio, debug, clearColor, ...rest }) => {
   const ref = useRef();
-  useCanvas(ref, attributes, pixelRatio, debug);
+  useCanvas(ref, { attributes, pixelRatio, debug, clearColor });
   return createElement("canvas", {
     ref,
     ...rest,
   });
 };
 
-export const useCanvas = (elementOrRef, attributes = blankObject, pixelRatio, debug = false) => {
+export const useCanvas = (elementOrRef, config) => {
   useEffect(() => {
     const canvas = elementOrRef.current || elementOrRef;
-    const renderer = createRenderer(canvas, attributes, pixelRatio, debug);
+    const renderer = createRenderer(canvas, config);
 
     return () => {
       renderer.destroy();
     };
-  }, [elementOrRef, pixelRatio, debug, ...Object.keys(attributes), ...Object.values(attributes)]);
+  }, [elementOrRef, ...Object.keys(config), ...Object.values(config)]);
 };
 
 export const component = (...args) => {
@@ -59,10 +57,10 @@ export const useComponent = (component, props, enabled = true) => {
 
   const instance = ref.current;
 
-  const update = useCallback((name, value) => updateInstance(instance, name, value), [
-    instance,
-    updateInstance,
-  ]);
+  const update = useCallback(
+    (name, value) => updateInstance(instance, name, value),
+    [instance, updateInstance]
+  );
 
   // Update data from props
   for (const key in props) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuoro/sahti",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Write a WebGL 2 command, use it like a component.",
   "type": "module",
   "main": "main.js",