react-native-effects 0.1.0 → 0.3.0

package/src/hooks/useWGPUSetup.tsx

@@ -1,13 +1,13 @@
-import { PixelRatio } from 'react-native';
+import { PixelRatio, type LayoutChangeEvent } from 'react-native';
 import {
   useCanvasRef,
   type CanvasRef,
   type RNCanvasContext,
-} from 'react-native-wgpu';
-import { useEffect, useState } from 'react';
-import type { WorkletRuntime } from 'react-native-worklets';
-import { initWebGPU } from '../utils/initWebGPU';
+} from 'react-native-webgpu';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { type WorkletRuntime } from 'react-native-worklets';
 import { BackgroundRuntime } from '../utils/backgroundRuntime';
+import { getSharedGPUDevice } from '../utils/gpuDevice';
 
 type GPUResources = {
   device: GPUDevice;
@@ -15,10 +15,17 @@ type GPUResources = {
   presentationFormat: GPUTextureFormat;
 };
 
+type CanvasWithSize = RNCanvasContext['canvas'] & {
+  width: number;
+  height: number;
+};
+
 type WGPUSetupResult = {
   canvasRef: React.RefObject<CanvasRef>;
   runtime: WorkletRuntime;
   resources: GPUResources | null;
+  /** Wire to `<Canvas onLayout>` so the surface resizes on rotation/layout change. */
+  onCanvasLayout: (event: LayoutChangeEvent) => void;
 };
 
 export function useWGPUSetup(): WGPUSetupResult {
@@ -26,28 +33,31 @@ export function useWGPUSetup(): WGPUSetupResult {
   const [resources, setResources] = useState<GPUResources | null>(null);
   const runtime = BackgroundRuntime;
 
+  // Physical-pixel size the surface is currently configured for. Used to drive
+  // resize (and to skip redundant reconfigures when the layout pass reports the
+  // same size).
+  const configuredSizeRef = useRef<{ width: number; height: number } | null>(
+    null
+  );
+
   useEffect(() => {
     let cancelled = false;
 
     (async () => {
-      const adapter = await navigator.gpu.requestAdapter();
-      if (!adapter || cancelled) {
-        return;
-      }
-
-      const device = await adapter.requestDevice();
-      if (cancelled) {
+      // Shared across every ShaderView — see getSharedGPUDevice. Returns null if
+      // no adapter is available.
+      const device = await getSharedGPUDevice();
+      if (!device || cancelled) {
         return;
       }
 
       const context = canvasRef.current!.getContext('webgpu')!;
-      const canvas = context.canvas as typeof context.canvas & {
-        width: number;
-        height: number;
-      };
+      const canvas = context.canvas as CanvasWithSize;
       const dpr = PixelRatio.get();
-      canvas.width = canvas.width * dpr;
-      canvas.height = canvas.height * dpr;
+      const width = Math.max(1, Math.round(canvas.width * dpr));
+      const height = Math.max(1, Math.round(canvas.height * dpr));
+      canvas.width = width;
+      canvas.height = height;
 
       const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
       context.configure({
@@ -55,8 +65,7 @@ export function useWGPUSetup(): WGPUSetupResult {
         format: presentationFormat,
         alphaMode: 'premultiplied',
       });
-
-      initWebGPU(runtime);
+      configuredSizeRef.current = { width, height };
 
       if (!cancelled) {
         setResources({ device, context, presentationFormat });
@@ -65,9 +74,48 @@ export function useWGPUSetup(): WGPUSetupResult {
 
     return () => {
       cancelled = true;
+      // The device is shared across all ShaderViews and lives for the JS
+      // runtime's lifetime, so it must NOT be destroyed here. This view's own
+      // GPU resources (the uniform buffer) are torn down by the render loop when
+      // it stops; the pipeline/shader modules are released once the loop's
+      // worklet closure is garbage-collected.
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { canvasRef, runtime, resources };
+  // Resize the drawing buffer and reconfigure the surface whenever the view's
+  // layout changes (most notably device rotation). Without this the buffer keeps
+  // its original dimensions and the shader renders stretched / wrong-aspect. The
+  // render loop reads `canvas.width/height` each frame, so the resolution uniform
+  // picks up the new size on the next frame. No-op until GPU resources are ready
+  // (initial sizing is handled by the setup effect above).
+  const onCanvasLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      if (!resources) {
+        return;
+      }
+      const { width, height } = event.nativeEvent.layout;
+      const dpr = PixelRatio.get();
+      const w = Math.max(1, Math.round(width * dpr));
+      const h = Math.max(1, Math.round(height * dpr));
+
+      const prev = configuredSizeRef.current;
+      if (prev && prev.width === w && prev.height === h) {
+        return;
+      }
+
+      const canvas = resources.context.canvas as CanvasWithSize;
+      canvas.width = w;
+      canvas.height = h;
+      resources.context.configure({
+        device: resources.device,
+        format: resources.presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+      configuredSizeRef.current = { width: w, height: h };
+    },
+    [resources]
+  );
+
+  return { canvasRef, runtime, resources, onCanvasLayout };
 }

package/src/index.tsx

@@ -1,23 +1,32 @@
 import CircularGradient from './components/CircularGradient';
 import LinearGradient from './components/LinearGradient';
 import ShaderView from './components/ShaderView';
+import ShaderViewWithPanGesture from './components/ShaderViewWithPanGesture';
 import Iridescence from './components/Iridescence';
 import LiquidChrome from './components/LiquidChrome';
 import Silk from './components/Silk';
 import Campfire from './components/Campfire';
 import CalicoSwirl from './components/CalicoSwirl';
 import Aurora from './components/Aurora';
+import { useParamsSynchronizable } from './hooks/useParamsSynchronizable';
 
-export type { ShaderViewProps } from './components/ShaderView/types';
+export type {
+  ShaderViewProps,
+  ParamsSynchronizable,
+} from './components/ShaderView/types';
+export type { ShaderViewWithPanGestureProps } from './components/ShaderViewWithPanGesture';
+export type { ColorInput } from './utils/colors';
 
 export {
   CircularGradient,
   LinearGradient,
   ShaderView,
+  ShaderViewWithPanGesture,
   Iridescence,
   LiquidChrome,
   Silk,
   Campfire,
   CalicoSwirl,
   Aurora,
+  useParamsSynchronizable,
 };

package/src/shaders/uniforms.ts

@@ -1,8 +1,8 @@
-/** 96 bytes = 6 × vec4<f32> */
-export const UNIFORM_BUFFER_SIZE = 96;
+/** 112 bytes = 7 × vec4<f32> */
+export const UNIFORM_BUFFER_SIZE = 112;
 
 /** Number of float32 values in the uniform buffer */
-export const UNIFORM_FLOAT_COUNT = UNIFORM_BUFFER_SIZE / 4; // 24
+export const UNIFORM_FLOAT_COUNT = UNIFORM_BUFFER_SIZE / 4; // 28
 
 export const UNIFORMS_WGSL = /* wgsl */ `
 struct Uniforms {
@@ -12,6 +12,7 @@ struct Uniforms {
   color1:     vec4<f32>,  // colors[1] RGBA
   params0:    vec4<f32>,  // params[0..3]
   params1:    vec4<f32>,  // params[4..7]
+  live:       vec4<f32>,  // paramsSynchronizable (touch/scroll/audio); (0,0,0,0) when unused
 };
 @group(0) @binding(0) var<uniform> u: Uniforms;
 `;

package/src/utils/gpuDevice.ts

@@ -0,0 +1,38 @@
+let devicePromise: Promise<GPUDevice | null> | null = null;
+
+/**
+ * Lazily requests a single GPUDevice shared by every ShaderView.
+ *
+ * Requesting an adapter + device per view is expensive (real GPU/memory cost and
+ * slower init), and a screen that mounts several effects would otherwise spin up
+ * N devices on the one background runtime. The promise is cached for the lifetime
+ * of the JS runtime so every view awaits the same device.
+ *
+ * If the device is ever lost, the cache is cleared so the next ShaderView mount
+ * requests a fresh one instead of awaiting a dead device forever.
+ */
+export function getSharedGPUDevice(): Promise<GPUDevice | null> {
+  if (devicePromise) {
+    return devicePromise;
+  }
+
+  const promise = (async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      return null;
+    }
+
+    const device = await adapter.requestDevice();
+    device.lost?.then(() => {
+      // Only clear if we're still the cached promise, so we don't clobber a
+      // newer device that a later mount may already have requested.
+      if (devicePromise === promise) {
+        devicePromise = null;
+      }
+    });
+    return device;
+  })();
+
+  devicePromise = promise;
+  return promise;
+}

package/lib/module/utils/initWebGPU.js

@@ -1,40 +0,0 @@
-"use strict";
-
-import { scheduleOnRuntime } from 'react-native-worklets';
-
-/**
- * Installs WebGPU globals on the given worklet runtime.
- *
- * Worklet runtimes run on a separate JS context that lacks browser-like globals.
- * This function captures WebGPU constants and `navigator.gpu` from the RN thread
- * and injects them into the worklet's `globalThis` so that WebGPU code can run
- * as if it were in a browser environment.
- *
- * @param runtime - The worklet runtime to initialize
- */
-export function initWebGPU(runtime) {
-  const navigator = globalThis.navigator;
-  const GPUBufferUsage = globalThis.GPUBufferUsage;
-  const GPUColorWrite = globalThis.GPUColorWrite;
-  const GPUMapMode = globalThis.GPUMapMode;
-  const GPUShaderStage = globalThis.GPUShaderStage;
-  const GPUTextureUsage = globalThis.GPUTextureUsage;
-  scheduleOnRuntime(runtime, () => {
-    'worklet';
-
-    if (globalThis.self) {
-      return;
-    }
-    globalThis.self = globalThis;
-    globalThis.navigator = {
-      gpu: navigator.gpu
-    };
-    globalThis.GPUBufferUsage = GPUBufferUsage;
-    globalThis.GPUColorWrite = GPUColorWrite;
-    globalThis.GPUMapMode = GPUMapMode;
-    globalThis.GPUShaderStage = GPUShaderStage;
-    globalThis.GPUTextureUsage = GPUTextureUsage;
-    globalThis.setImmediate = globalThis.requestAnimationFrame;
-  });
-}
-//# sourceMappingURL=initWebGPU.js.map

package/lib/module/utils/initWebGPU.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["scheduleOnRuntime","initWebGPU","runtime","navigator","globalThis","GPUBufferUsage","GPUColorWrite","GPUMapMode","GPUShaderStage","GPUTextureUsage","self","gpu","setImmediate","requestAnimationFrame"],"sourceRoot":"../../../src","sources":["utils/initWebGPU.ts"],"mappings":";;AAAA,SAASA,iBAAiB,QAA6B,uBAAuB;;AAE9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,OAAuB,EAAE;EAClD,MAAMC,SAAS,GAAGC,UAAU,CAACD,SAAyB;EACtD,MAAME,cAAc,GAAGD,UAAU,CAACC,cAAc;EAChD,MAAMC,aAAa,GAAGF,UAAU,CAACE,aAAa;EAC9C,MAAMC,UAAU,GAAGH,UAAU,CAACG,UAAU;EACxC,MAAMC,cAAc,GAAGJ,UAAU,CAACI,cAAc;EAChD,MAAMC,eAAe,GAAGL,UAAU,CAACK,eAAe;EAElDT,iBAAiB,CAACE,OAAO,EAAE,MAAM;IAC/B,SAAS;;IAET,IAAIE,UAAU,CAACM,IAAI,EAAE;MACnB;IACF;IACAN,UAAU,CAACM,IAAI,GAAGN,UAAU;IAC5BA,UAAU,CAACD,SAAS,GAAG;MAAEQ,GAAG,EAAER,SAAS,CAACQ;IAAI,CAAyB;IACrEP,UAAU,CAACC,cAAc,GAAGA,cAAc;IAC1CD,UAAU,CAACE,aAAa,GAAGA,aAAa;IACxCF,UAAU,CAACG,UAAU,GAAGA,UAAU;IAClCH,UAAU,CAACI,cAAc,GAAGA,cAAc;IAC1CJ,UAAU,CAACK,eAAe,GAAGA,eAAe;IAC5CL,UAAU,CAACQ,YAAY,GACrBR,UAAU,CAACS,qBAA4C;EAC3D,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/typescript/src/utils/initWebGPU.d.ts

@@ -1,23 +0,0 @@
-import { type WorkletRuntime } from 'react-native-worklets';
-/**
- * Installs WebGPU globals on the given worklet runtime.
- *
- * Worklet runtimes run on a separate JS context that lacks browser-like globals.
- * This function captures WebGPU constants and `navigator.gpu` from the RN thread
- * and injects them into the worklet's `globalThis` so that WebGPU code can run
- * as if it were in a browser environment.
- *
- * @param runtime - The worklet runtime to initialize
- */
-export declare function initWebGPU(runtime: WorkletRuntime): void;
-declare global {
-    var self: typeof globalThis;
-    var _WORKLET: boolean | undefined;
-    var performance: {
-        now(): number;
-    };
-    interface Navigator {
-        gpu: GPU;
-    }
-}
-//# sourceMappingURL=initWebGPU.d.ts.map

package/lib/typescript/src/utils/initWebGPU.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"initWebGPU.d.ts","sourceRoot":"","sources":["../../../../src/utils/initWebGPU.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE/E;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,cAAc,QAwBjD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,IAAI,IAAI,EAAE,OAAO,UAAU,CAAC;IAC5B,IAAI,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,IAAI,WAAW,EAAE;QAAE,GAAG,IAAI,MAAM,CAAA;KAAE,CAAC;IAEnC,UAAU,SAAS;QACjB,GAAG,EAAE,GAAG,CAAC;KACV;CACF"}

package/src/utils/initWebGPU.ts

@@ -1,47 +0,0 @@
-import { scheduleOnRuntime, type WorkletRuntime } from 'react-native-worklets';
-
-/**
- * Installs WebGPU globals on the given worklet runtime.
- *
- * Worklet runtimes run on a separate JS context that lacks browser-like globals.
- * This function captures WebGPU constants and `navigator.gpu` from the RN thread
- * and injects them into the worklet's `globalThis` so that WebGPU code can run
- * as if it were in a browser environment.
- *
- * @param runtime - The worklet runtime to initialize
- */
-export function initWebGPU(runtime: WorkletRuntime) {
-  const navigator = globalThis.navigator as NavigatorGPU;
-  const GPUBufferUsage = globalThis.GPUBufferUsage;
-  const GPUColorWrite = globalThis.GPUColorWrite;
-  const GPUMapMode = globalThis.GPUMapMode;
-  const GPUShaderStage = globalThis.GPUShaderStage;
-  const GPUTextureUsage = globalThis.GPUTextureUsage;
-
-  scheduleOnRuntime(runtime, () => {
-    'worklet';
-
-    if (globalThis.self) {
-      return;
-    }
-    globalThis.self = globalThis;
-    globalThis.navigator = { gpu: navigator.gpu } as unknown as Navigator;
-    globalThis.GPUBufferUsage = GPUBufferUsage;
-    globalThis.GPUColorWrite = GPUColorWrite;
-    globalThis.GPUMapMode = GPUMapMode;
-    globalThis.GPUShaderStage = GPUShaderStage;
-    globalThis.GPUTextureUsage = GPUTextureUsage;
-    globalThis.setImmediate =
-      globalThis.requestAnimationFrame as typeof setImmediate;
-  });
-}
-
-declare global {
-  var self: typeof globalThis;
-  var _WORKLET: boolean | undefined;
-  var performance: { now(): number };
-
-  interface Navigator {
-    gpu: GPU;
-  }
-}