react-native-shine 0.2.2 → 0.3.1

package/README.md

@@ -1,9 +1,11 @@
-# react-native-shine
+![image](./cover.png)
 
-Fast and efficient way to add interactive GPU-based shader effects to your React Native apps using [TypeGPU](https://github.com/type-gpu/type-gpu) and [WebGPU](https://github.com/wojtus7/react-native-wgpu).
+Fast and efficient way to add interactive GPU-based shader effects to your React Native apps using [TypeGPU](https://github.com/software-mansion/TypeGPU) and [WebGPU](https://github.com/wcandillon/react-native-webgpu).
 
 `react-native-shine` leverages powerful GPU execution via native bindings, delivering lovely, fancy and **shiny** effects—ideal for UIs or creative interactions.
 
+![cardPreview](./cardPreview.gif)
+
 ---
 
 ## ⚙️ Installation
@@ -103,7 +105,7 @@ export default function Index() {
 }
 ```
 
-Coming soon: docs and examples.
+For more thorough usage examples and docs click [here](https://github.com/wojtus7/react-native-shine/blob/main/USAGE.md)
 
 ---
 
@@ -150,10 +152,23 @@ We welcome shaders, GPU visual effects, demos, and bug fixes!
 
 ---
 
-## 📜 License
+## Shine is created by Software Mansion
 
-MIT © [VoidFrog](https://github.com/VoidFrog)
+[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=typegpu-github 'Software Mansion')](https://swmansion.com)
 
----
+Since 2012 [Software Mansion](https://swmansion.com) is a software agency with
+experience in building web and mobile apps. We are Core React Native
+Contributors and experts in dealing with all kinds of React Native issues. We
+can help you build your next dream product –
+[Hire us](https://swmansion.com/contact/projects?utm_source=shine&utm_medium=readme).
+
+<!-- automd:contributors author="software-mansion" -->
+
+Made by [@software-mansion](https://github.com/software-mansion) and
+[community](https://github.com/wojtus7/react-native-shine/graphs/contributors) 💛
+<br><br>
+<a href="https://github.com/wojtus7/react-native-shine/graphs/contributors">
+<img src="https://contrib.rocks/image?repo=wojtus7/react-native-shine" />
+</a>
 
-Made with ❤️ and [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+<!-- /automd -->

package/lib/module/components/Content.js

@@ -0,0 +1,232 @@
+"use strict";
+
+import { useEffect, useMemo, useRef } from 'react';
+import { PixelRatio, Platform, View } from 'react-native';
+import Animated, { SensorType, useAnimatedSensor, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { Canvas, useGPUContext } from 'react-native-wgpu';
+import * as d from 'typegpu/data';
+import { bufferData, textureBindGroupLayout } from "../shaders/bindGroupLayouts.js";
+import useAnimationFrame from "../hooks/useAnimationFrame.js";
+import { TypedBufferMap } from "../shaders/resourceManagement/bufferManager.js";
+import { createColorMaskBindGroup, createGlareBindGroup, createRotationValuesBindGroup } from "../shaders/bindGroupUtils.js";
+import colorMaskFragment from "../shaders/fragmentShaders/colorMaskFragment.js";
+import { newGlareFragment } from "../shaders/fragmentShaders/glareFragment.js";
+import { attachBindGroups, blend, createMaskPipeline, createRainbowHoloPipeline as createHoloPipeline, createReverseHoloPipeline, getDefaultTarget } from "../shaders/pipelineSetups.js";
+import mainVertex from "../shaders/vertexShaders/mainVertex.js";
+import { subscribeToOrientationChange } from "../shaders/utils.js";
+import { colorMaskToTyped, createColorMask, createGlareOptions } from "../types/typeUtils.js";
+import { addV3d, clampV3d, componentsFromV3d, degToRad, divV3d, negateV2dY, rotateV2d, scaleV2d, scaleV3d, subtractV3d, transformV2d, zeroV3d } from "../utils/vector.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Content({
+  addHolo,
+  addReverseHolo,
+  addTextureMask,
+  colorMaskOptions,
+  glareOptions,
+  height,
+  imageTexture,
+  maskTexture,
+  root,
+  touchPosition,
+  useTouchControl,
+  width
+}) {
+  const {
+    device
+  } = root;
+  const {
+    ref,
+    context
+  } = useGPUContext();
+  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+  const renderRef = useRef(null);
+
+  //changing canvas size to prevent blur
+  const pixelRatio = PixelRatio.get();
+  const size = {
+    x: width,
+    y: height
+  };
+  const pixelSize = transformV2d(scaleV2d(size, pixelRatio), v => Math.max(1, Math.round(v)));
+  const landscape = useSharedValue(false);
+  const rotation = useSharedValue(zeroV3d); // final GPU offsets
+
+  // Calibration shared values (UI thread)
+  const initialGravity = useSharedValue(zeroV3d);
+  const calibSum = useSharedValue(zeroV3d);
+  const calibCount = useSharedValue(0);
+  const calibrated = useSharedValue(false);
+  const gravitySensor = useAnimatedSensor(SensorType.GRAVITY, {
+    interval: 20
+  });
+  const bufferMap = useMemo(() => new TypedBufferMap(bufferData), []);
+
+  //TODO: add once again, when the wgpu issues are fixed :3
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const rotX = rotation.value.x * 10;
+    const rotY = rotation.value.y * 10;
+    return {
+      transform: [{
+        perspective: 300
+      }, {
+        rotateX: `${-rotY}deg`
+      }, {
+        rotateY: `${rotX}deg`
+      }
+      // { rotateZ: `${rotX * 5}deg` },
+      ]
+    };
+  });
+  // Subscribe to orientation changes and reset calibration on change
+  useEffect(() => subscribeToOrientationChange(isLandscape => {
+    landscape.value = isLandscape;
+  }), [landscape]);
+
+  // Calibration & mapping logic
+  useDerivedValue(() => {
+    'worklet';
+
+    if (useTouchControl) {
+      rotation.value = touchPosition ? {
+        x: touchPosition.value.x,
+        y: touchPosition.value.y,
+        z: 0
+      } : zeroV3d;
+      return;
+    }
+    const g = gravitySensor.sensor.value;
+    const CALIBRATION_SAMPLES = 40;
+    const alpha = 0.15; // smoothing
+    const scale = 0.6;
+    if (!calibrated.value) {
+      // accumulate baseline in device coordinates
+      calibSum.value = addV3d(calibSum.value, g);
+      if (++calibCount.value >= CALIBRATION_SAMPLES) {
+        initialGravity.value = divV3d(calibSum.value, calibCount.value);
+        calibrated.value = true;
+      }
+      rotation.value = zeroV3d;
+      return;
+    }
+    const init = initialGravity.value;
+    const dg = subtractV3d(g, init);
+
+    // Rotate into screen coordinates so offsets auto-swap with orientation
+    const m = rotateV2d(dg, degToRad(-90 * Number(landscape.value)));
+    const screen = negateV2dY(m);
+    const smoothOffset = {
+      ...scaleV2d(screen, alpha),
+      z: dg.z * alpha
+    };
+    const smooth = scaleV3d(addV3d(scaleV3d(rotation.value, 1 - alpha), smoothOffset), scale);
+    rotation.value = clampV3d(landscape.value ? {
+      x: smooth.y,
+      y: -smooth.x,
+      z: smooth.z
+    } : smooth, -1, 1);
+  });
+  // Render loop
+  useEffect(() => {
+    if (!context) return;
+
+    //this sets the underlying resolution of the canvas to prevent blurriness
+    const canvasElement = context.canvas;
+    if (canvasElement.width !== pixelSize.x && canvasElement.height !== pixelSize.y) {
+      canvasElement.width = pixelSize.x;
+      canvasElement.height = pixelSize.y;
+    }
+    context.configure({
+      device,
+      format: presentationFormat,
+      alphaMode: 'premultiplied'
+    });
+    const sampler = device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear'
+    });
+    const imageTextureBindGroup = root.createBindGroup(textureBindGroupLayout, {
+      texture: root.unwrap(imageTexture).createView(),
+      sampler
+    });
+    const rotationBuffer = bufferMap.addBuffer(root, 'rotation', d.vec3f(0.0));
+    const rotationBindGroup = createRotationValuesBindGroup(root, rotationBuffer);
+    const glareBuffer = bufferMap.addBuffer(root, 'glare', createGlareOptions(glareOptions ?? {}));
+    const glareBindGroup = createGlareBindGroup(root, glareBuffer);
+    const colorMaskBuffer = bufferMap.addBuffer(root, 'colorMask', colorMaskToTyped(createColorMask(colorMaskOptions ?? {
+      baseColor: [-20, -20, -20]
+    })));
+    const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
+    const pipelineMap = {
+      glare: attachBindGroups(root['~unstable'].withVertex(mainVertex, {}).withFragment(newGlareFragment, getDefaultTarget(presentationFormat)).createPipeline(), [imageTextureBindGroup, rotationBindGroup, glareBindGroup, colorMaskBindGroup]),
+      colorMask: attachBindGroups(root['~unstable'].withVertex(mainVertex, {}).withFragment(colorMaskFragment, getDefaultTarget(presentationFormat, blend)).createPipeline(), [imageTextureBindGroup, colorMaskBindGroup, rotationBindGroup]),
+      mask: createMaskPipeline(root, maskTexture, [imageTextureBindGroup, rotationBindGroup], sampler, presentationFormat),
+      reverseHolo: createReverseHoloPipeline(root, maskTexture, [imageTextureBindGroup, rotationBindGroup, glareBindGroup], sampler, presentationFormat),
+      holo: createHoloPipeline(root, imageTexture, [rotationBindGroup], sampler, presentationFormat)
+    };
+    const modifyBuffers = () => {
+      rotationBuffer.write(d.vec3f(...componentsFromV3d(rotation.value)));
+    };
+    const renderPipelines = () => {
+      const view = context.getCurrentTexture().createView();
+      const initialAttachment = {
+        view,
+        clearValue: [0, 0, 0, 0],
+        loadOp: 'clear',
+        storeOp: 'store'
+      };
+      const loadingAttachment = {
+        view,
+        clearValue: [0, 0, 0, 0],
+        loadOp: 'load',
+        storeOp: 'store'
+      };
+      const {
+        glare,
+        mask,
+        colorMask,
+        holo,
+        reverseHolo
+      } = pipelineMap;
+      const pairs = [[glare, initialAttachment]];
+      if (addTextureMask && mask) pairs.push([mask, loadingAttachment]);
+      if (addReverseHolo && reverseHolo) pairs.push([reverseHolo, loadingAttachment]);
+      if (addHolo && holo) pairs.push([holo, loadingAttachment]);
+      pairs.push([colorMask, loadingAttachment]);
+      pairs.forEach(([pipeline, attachment]) => pipeline.withColorAttachment(attachment).draw(6));
+    };
+    const presentContext = () => context.present();
+    renderRef.current = () => {
+      modifyBuffers();
+      renderPipelines();
+      presentContext();
+    };
+  }, [device, context, root, presentationFormat, imageTexture, maskTexture, rotation, bufferMap, glareOptions, colorMaskOptions, addHolo, addReverseHolo, addTextureMask, pixelSize]);
+  useAnimationFrame(() => renderRef.current?.());
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [animatedStyle],
+    children: /*#__PURE__*/_jsx(View, {
+      style: [
+        // styles.container,
+        // { width, height },
+      ],
+      children: /*#__PURE__*/_jsx(Canvas, {
+        ref: ref,
+        style: [{
+          width,
+          height
+        }
+        // aspectRatio: pixelWidth / pixelHeight,
+        // { transform: [{ scaleX: 1 / dpr }, { scaleY: 1 / dpr }] },
+        ],
+        transparent: Platform.OS === 'ios'
+        // transparent={true}
+      })
+    })
+  });
+}
+
+// const styles = StyleSheet.create({
+//   container: { overflow: 'hidden' },
+// });
+//# sourceMappingURL=Content.js.map

package/lib/module/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useRef","PixelRatio","Platform","View","Animated","SensorType","useAnimatedSensor","useAnimatedStyle","useDerivedValue","useSharedValue","Canvas","useGPUContext","d","bufferData","textureBindGroupLayout","useAnimationFrame","TypedBufferMap","createColorMaskBindGroup","createGlareBindGroup","createRotationValuesBindGroup","colorMaskFragment","newGlareFragment","attachBindGroups","blend","createMaskPipeline","createRainbowHoloPipeline","createHoloPipeline","createReverseHoloPipeline","getDefaultTarget","mainVertex","subscribeToOrientationChange","colorMaskToTyped","createColorMask","createGlareOptions","addV3d","clampV3d","componentsFromV3d","degToRad","divV3d","negateV2dY","rotateV2d","scaleV2d","scaleV3d","subtractV3d","transformV2d","zeroV3d","jsx","_jsx","Content","addHolo","addReverseHolo","addTextureMask","colorMaskOptions","glareOptions","height","imageTexture","maskTexture","root","touchPosition","useTouchControl","width","device","ref","context","presentationFormat","navigator","gpu","getPreferredCanvasFormat","renderRef","pixelRatio","get","size","x","y","pixelSize","v","Math","max","round","landscape","rotation","initialGravity","calibSum","calibCount","calibrated","gravitySensor","GRAVITY","interval","bufferMap","animatedStyle","rotX","value","rotY","transform","perspective","rotateX","rotateY","isLandscape","z","g","sensor","CALIBRATION_SAMPLES","alpha","scale","init","dg","m","Number","screen","smoothOffset","smooth","canvasElement","canvas","configure","format","alphaMode","sampler","createSampler","magFilter","minFilter","imageTextureBindGroup","createBindGroup","texture","unwrap","createView","rotationBuffer","addBuffer","vec3f","rotationBindGroup","glareBuffer","glareBindGroup","colorMaskBuffer","baseColor","colorMaskBindGroup","pipelineMap","glare","withVertex","withFragment","createPipeline","colorMask","mask","reverseHolo","holo","modifyBuffers","write","renderPipelines","view","getCurrentTexture","initialAttachment","clearValue","loadOp","storeOp","loadingAttachment","pairs","push","forEach","pipeline","attachment","withColorAttachment","draw","presentContext","present","current","style","children","transparent","OS"],"sourceRoot":"../../../src","sources":["components/Content.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Shine.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { useDevice } from 'react-native-wgpu';
+import { getOrInitRoot } from "../roots.js";
+import { loadBitmap } from "../shaders/resourceManagement/textures.js";
+import Content from "./Content.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Shine({
+  imageURI,
+  maskURI,
+  ...props
+}) {
+  const {
+    device
+  } = useDevice();
+  const root = device && getOrInitRoot(device);
+  const [imageTexture, setImageTexture] = useState();
+  const [maskTexture, setMaskTexture] = useState();
+  useEffect(() => {
+    if (root) loadBitmap(root, imageURI, setImageTexture);
+  }, [root, imageURI]);
+  useEffect(() => {
+    if (root && maskURI) loadBitmap(root, maskURI, setMaskTexture);
+  }, [root, imageURI, maskURI]);
+  return root && imageTexture && /*#__PURE__*/_jsx(Content, {
+    ...props,
+    root: root,
+    imageTexture: imageTexture,
+    maskTexture: maskTexture
+  });
+}
+//# sourceMappingURL=Shine.js.map

package/lib/module/components/Shine.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useDevice","getOrInitRoot","loadBitmap","Content","jsx","_jsx","Shine","imageURI","maskURI","props","device","root","imageTexture","setImageTexture","maskTexture","setMaskTexture"],"sourceRoot":"../../../src","sources":["components/Shine.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,SAAS,QAAQ,mBAAmB;AAE7C,SAASC,aAAa,QAAQ,aAAU;AACxC,SAASC,UAAU,QAAQ,2CAAwC;AACnE,OAAOC,OAAO,MAA4B,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOtD,OAAO,SAASC,KAAKA,CAAC;EAAEC,QAAQ;EAAEC,OAAO;EAAE,GAAGC;AAAkB,CAAC,EAAE;EACjE,MAAM;IAAEC;EAAO,CAAC,GAAGV,SAAS,CAAC,CAAC;EAC9B,MAAMW,IAAI,GAAGD,MAAM,IAAIT,aAAa,CAACS,MAAM,CAAC;EAC5C,MAAM,CAACE,YAAY,EAAEC,eAAe,CAAC,GAAGd,QAAQ,CAAc,CAAC;EAC/D,MAAM,CAACe,WAAW,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAAc,CAAC;EAE7DD,SAAS,CAAC,MAAM;IACd,IAAIa,IAAI,EAAET,UAAU,CAACS,IAAI,EAAEJ,QAAQ,EAAEM,eAAe,CAAC;EACvD,CAAC,EAAE,CAACF,IAAI,EAAEJ,QAAQ,CAAC,CAAC;EAEpBT,SAAS,CAAC,MAAM;IACd,IAAIa,IAAI,IAAIH,OAAO,EAAEN,UAAU,CAACS,IAAI,EAAEH,OAAO,EAAEO,cAAc,CAAC;EAChE,CAAC,EAAE,CAACJ,IAAI,EAAEJ,QAAQ,EAAEC,OAAO,CAAC,CAAC;EAE7B,OACEG,IAAI,IACJC,YAAY,iBACVP,IAAA,CAACF,OAAO;IAAA,GACFM,KAAK;IACTE,IAAI,EAAEA,IAAK;IACXC,YAAY,EAAEA,YAAa;IAC3BE,WAAW,EAAEA;EAAY,CAC1B,CACF;AAEL","ignoreList":[]}

package/lib/module/components/ShineGroup.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import { useEffect, useRef, useState } from 'react';
+import { View, StyleSheet, Image, PixelRatio } from 'react-native';
+import ViewShot, { captureRef } from 'react-native-view-shot';
+import { sizeFromV2d, sizeToV2d } from "../utils/size.js";
+import { areV2dEqual, multiplyV2d, round2D } from "../utils/vector.js";
+import { Shine } from "./Shine.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ShineGroup({
+  children,
+  glareOptions,
+  colorMaskOptions,
+  maskURI,
+  touchPosition,
+  useTouchControl = false,
+  addTextureMask = false,
+  addHolo = false,
+  addReverseHolo = false
+}) {
+  const viewShotRef = useRef(null);
+  const [capturedURI, setCapturedURI] = useState(null);
+  const [size, setSize] = useState(null);
+  const onInnerLayout = e => {
+    const layoutV2d = sizeToV2d(e.nativeEvent.layout);
+    if (!size || !areV2dEqual(size, layoutV2d)) {
+      setSize(layoutV2d);
+    }
+  };
+
+  // When we have a valid measured size, take a snapshot (after a short tick)
+  // Short timeout helps when children include images that finish layout a few ms later
+  useEffect(() => {
+    if (!viewShotRef.current || !size) return;
+    let mounted = true;
+    const t = setTimeout(async () => {
+      try {
+        const pixel = round2D(multiplyV2d(size, PixelRatio.get()));
+        const uri = await captureRef(viewShotRef, {
+          format: 'png',
+          quality: 1,
+          ...sizeFromV2d(pixel)
+        });
+        if (mounted) setCapturedURI(uri);
+      } catch (err) {
+        console.warn('ShineGroup capture failed', err);
+      }
+    }, 50);
+    return () => {
+      mounted = false;
+      clearTimeout(t);
+    };
+  }, [size, children]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(ViewShot, {
+      ref: viewShotRef,
+      options: {
+        format: 'png',
+        quality: 1
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        onLayout: onInnerLayout,
+        style: styles.inner,
+        children: children
+      })
+    }), capturedURI && size && /*#__PURE__*/_jsx(Image, {
+      src: capturedURI,
+      ...sizeFromV2d(size)
+    }), capturedURI && size && /*#__PURE__*/_jsx(Shine, {
+      ...sizeFromV2d(size),
+      imageURI: capturedURI,
+      glareOptions: glareOptions,
+      colorMaskOptions: colorMaskOptions,
+      maskURI: maskURI,
+      touchPosition: touchPosition,
+      useTouchControl: useTouchControl,
+      addTextureMask: addTextureMask,
+      addReverseHolo: addReverseHolo,
+      addHolo: addHolo
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10
+  },
+  inner: {}
+});
+//# sourceMappingURL=ShineGroup.js.map

package/lib/module/components/ShineGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","useState","View","StyleSheet","Image","PixelRatio","ViewShot","captureRef","sizeFromV2d","sizeToV2d","areV2dEqual","multiplyV2d","round2D","Shine","jsx","_jsx","jsxs","_jsxs","ShineGroup","children","glareOptions","colorMaskOptions","maskURI","touchPosition","useTouchControl","addTextureMask","addHolo","addReverseHolo","viewShotRef","capturedURI","setCapturedURI","size","setSize","onInnerLayout","e","layoutV2d","nativeEvent","layout","current","mounted","t","setTimeout","pixel","get","uri","format","quality","err","console","warn","clearTimeout","style","styles","container","ref","options","onLayout","inner","src","imageURI","create","display","flexDirection","gap"],"sourceRoot":"../../../src","sources":["components/ShineGroup.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/enums/waveCallback.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import tgpu from 'typegpu';
+import * as std from 'typegpu/std';
+import * as d from 'typegpu/data';
+export const WAVE_CALLBACKS = {
+  default: pos => {
+    'kernel';
+
+    const x = pos.x;
+    const y = pos.y;
+    const waveX = std.sin(x * 2.0);
+    const waveY = std.cos(y * 2.0);
+    return d.vec2f(waveX, waveY);
+  }
+};
+export const waveCallbackSlot = tgpu.slot();
+export const waveCallbackFn = tgpu.fn([d.vec2f], d.vec2f);
+//# sourceMappingURL=waveCallback.js.map

package/lib/module/enums/waveCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tgpu","std","d","WAVE_CALLBACKS","default","pos","x","y","waveX","sin","waveY","cos","vec2f","waveCallbackSlot","slot","waveCallbackFn","fn"],"sourceRoot":"../../../src","sources":["enums/waveCallback.ts"],"mappings":";;AAAA,OAAOA,IAAI,MAAuB,SAAS;AAC3C,OAAO,KAAKC,GAAG,MAAM,aAAa;AAClC,OAAO,KAAKC,CAAC,MAAM,cAAc;AAEjC,OAAO,MAAMC,cAAc,GAAG;EAC5BC,OAAO,EAAGC,GAAU,IAAK;IACvB,QAAQ;;IAER,MAAMC,CAAC,GAAGD,GAAG,CAACC,CAAC;IACf,MAAMC,CAAC,GAAGF,GAAG,CAACE,CAAC;IAEf,MAAMC,KAAK,GAAGP,GAAG,CAACQ,GAAG,CAACH,CAAC,GAAG,GAAG,CAAC;IAC9B,MAAMI,KAAK,GAAGT,GAAG,CAACU,GAAG,CAACJ,CAAC,GAAG,GAAG,CAAC;IAE9B,OAAOL,CAAC,CAACU,KAAK,CAACJ,KAAK,EAAEE,KAAK,CAAC;EAC9B;AACF,CAAU;AAEV,OAAO,MAAMG,gBAAgB,GAAGb,IAAI,CAACc,IAAI,CAAoC,CAAC;AAG9E,OAAO,MAAMC,cAAc,GAAGf,IAAI,CAACgB,EAAE,CAAC,CAACd,CAAC,CAACU,KAAK,CAAC,EAAEV,CAAC,CAACU,KAAK,CAAC","ignoreList":[]}

package/lib/module/hooks/useAnimationFrame.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { useCallback, useEffect, useRef } from 'react';
+export default function useAnimationFrame(cb) {
+  const requestId = useRef(null);
+  const onFrame = useCallback(function () {
+    cb();
+    requestId.current = requestAnimationFrame(onFrame);
+  }, [cb]);
+  useEffect(() => {
+    requestId.current = requestAnimationFrame(onFrame);
+    return () => {
+      requestId.current === null || cancelAnimationFrame(requestId.current);
+    };
+  }, [onFrame]);
+}
+//# sourceMappingURL=useAnimationFrame.js.map

package/lib/module/hooks/useAnimationFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useEffect","useRef","useAnimationFrame","cb","requestId","onFrame","current","requestAnimationFrame","cancelAnimationFrame"],"sourceRoot":"../../../src","sources":["hooks/useAnimationFrame.ts"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEtD,eAAe,SAASC,iBAAiBA,CAACC,EAAc,EAAE;EACxD,MAAMC,SAAS,GAAGH,MAAM,CAAS,IAAI,CAAC;EAEtC,MAAMI,OAAO,GAAGN,WAAW,CACzB,YAAY;IACVI,EAAE,CAAC,CAAC;IACJC,SAAS,CAACE,OAAO,GAAGC,qBAAqB,CAACF,OAAO,CAAC;EACpD,CAAC,EACD,CAACF,EAAE,CACL,CAAC;EAEDH,SAAS,CAAC,MAAM;IACdI,SAAS,CAACE,OAAO,GAAGC,qBAAqB,CAACF,OAAO,CAAC;IAElD,OAAO,MAAM;MACXD,SAAS,CAACE,OAAO,KAAK,IAAI,IAAIE,oBAAoB,CAACJ,SAAS,CAACE,OAAO,CAAC;IACvE,CAAC;EACH,CAAC,EAAE,CAACD,OAAO,CAAC,CAAC;AACf","ignoreList":[]}

package/lib/module/hooks/useOrientation.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { subscribeToOrientationChange } from "../shaders/utils.js";
+export const useOrientation = () => {
+  const [orientation, setOrientation] = useState();
+  useEffect(() => subscribeToOrientationChange(isLandscape => setOrientation(isLandscape ? 'LANDSCAPE' : 'PORTRAIT')), []);
+  return orientation;
+};
+//# sourceMappingURL=useOrientation.js.map

package/lib/module/hooks/useOrientation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","subscribeToOrientationChange","useOrientation","orientation","setOrientation","isLandscape"],"sourceRoot":"../../../src","sources":["hooks/useOrientation.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3C,SAASC,4BAA4B,QAAQ,qBAAkB;AAI/D,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGJ,QAAQ,CAAc,CAAC;EAE7DD,SAAS,CACP,MACEE,4BAA4B,CAAEI,WAAW,IACvCD,cAAc,CAACC,WAAW,GAAG,WAAW,GAAG,UAAU,CACvD,CAAC,EACH,EACF,CAAC;EAED,OAAOF,WAAW;AACpB,CAAC","ignoreList":[]}