chore: add alphaTest to XrUi component

enijar · Apr 3, 2023 · 5cc6404 · 5cc6404
1 parent af1836c
commit 5cc6404
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-xr-ui",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,

diff --git a/src/components/layer.tsx b/src/components/layer.tsx
@@ -478,6 +478,10 @@ function Layer(
     return layerContext.renderOrder + zIndex + 1;
   }, [layerContext.parentUuid, layerContext.renderOrder, zIndex]);
 
+  const alpha = React.useMemo(() => {
+    return xrUiContext.alphaTest ?? alphaTest;
+  }, [xrUiContext.alphaTest, alphaTest]);
+
   const layerProviderValue = React.useMemo<LayerContextType>(() => {
     return {
       currentChildren,
@@ -547,7 +551,7 @@ function Layer(
             transparent={true}
             depthTest={depthTest}
             depthWrite={depthWrite}
-            alphaTest={alphaTest}
+            alphaTest={alpha}
             map={canvasTexture}
           />
         </mesh>

diff --git a/src/components/xr-ui.tsx b/src/components/xr-ui.tsx
@@ -5,24 +5,27 @@ export const XrUiContext = React.createContext<XrUiContextType>({
   layerResolution: 1024,
   fontFamily: "system-ui, sans-serif",
   optimizedRendering: false,
+  alphaTest: 0,
 });
 
 type Props = {
   children?: React.ReactNode;
-  layerResolution?: number;
-  fontFamily?: string;
-  optimizedRendering?: boolean;
+  layerResolution?: XrUiContextType["layerResolution"];
+  fontFamily?: XrUiContextType["fontFamily"];
+  optimizedRendering?: XrUiContextType["optimizedRendering"];
+  alphaTest?: XrUiContextType["alphaTest"];
 };
 
 export default function XrUi({
   children,
   layerResolution = 1024,
   fontFamily,
   optimizedRendering = false,
+  alphaTest,
 }: Props) {
   return (
     <XrUiContext.Provider
-      value={{ layerResolution, fontFamily, optimizedRendering }}
+      value={{ layerResolution, fontFamily, optimizedRendering, alphaTest }}
     >
       {children}
     </XrUiContext.Provider>

diff --git a/src/types.ts b/src/types.ts
@@ -98,4 +98,5 @@ export type XrUiContextType = {
   layerResolution: number;
   fontFamily: string;
   optimizedRendering: boolean;
+  alphaTest: number;
 };