react-native-shine 0.7.0 → 0.8.0

package/lib/typescript/src/types/types.d.ts

@@ -1,69 +1,31 @@
-import type { TgpuBindGroup, TgpuBindGroupLayout, TgpuRenderPipeline } from 'typegpu';
+import type { TgpuBindGroup, TgpuBindGroupLayout, TgpuFragmentFn, TgpuRenderPipeline, TgpuRoot, TgpuUniform, ValidateBufferSchema } from 'typegpu';
 import type { WaveCallbackFn } from '../enums/waveCallback';
+import type { AnyWgslData, Infer, Vec2f, Vec4f } from 'typegpu/data';
+import type { ColorMaskSchema, maskTextureBindGroupLayout } from '../shaders/bindGroupLayouts';
 export type vec2 = [number, number];
 export type vec3 = [number, number, number];
 export type vec4 = [number, number, number, number];
 export type quaternion = vec4;
-export type GlareOptions = {
-    glowPower: number;
-    lightIntensity: number;
-    glareIntensity: number;
-    glareColor: {
-        hueBlendPower: number;
-        hueShiftAngleMax: number;
-        hueShiftAngleMin: number;
-    };
+type BaseColorMask = {
+    debugMode: boolean;
 };
-export type ColorMask = {
+export type RGBColorMask = BaseColorMask & {
     baseColor: vec3;
-    useHSV?: boolean;
-    hueToleranceRange: {
-        upper: number;
-        lower: number;
-    };
-    brightnessTolerance?: number;
-    saturationTolerance?: number;
-    lowBrightnessThreshold?: number;
-    lowSaturationThreshold?: number;
     rgbToleranceRange: {
         upper: vec3;
         lower: vec3;
     };
-    debugMode?: boolean;
-};
-export type ColorMaskArrayShaderAssert = [
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any
-];
-export type Effect = {
-    name: 'reverseHolo';
-    options: Partial<ReverseHoloDetectionChannelFlags>;
-} | {
-    name: 'holo';
-    options?: HoloOptions;
 };
-export type ReverseHoloDetectionChannelFlags = {
-    redChannel: number;
-    greenChannel: number;
-    blueChannel: number;
-    hue: number;
-    saturation: number;
-    value: number;
+export type HSLColorMask = BaseColorMask & {
+    hueMin: number;
+    hueMax: number;
+    saturationMin: number;
+    saturationMax: number;
+    lightnessMin: number;
+    lightnessMax: number;
 };
+export type ColorMask = DeepPartiallyOptional<RGBColorMask, 'baseColor'> | DeepPartial<HSLColorMask>;
+export type ColorMaskPreTypedSchema = HSLColorMask & RGBColorMask & Pick<ColorMaskSchema, 'useHSV'>;
 export type HoloOptions = {
     intensity: number;
     waveCallback: WaveCallbackFn;
@@ -75,11 +37,54 @@ export type Primitive = string | number | boolean | bigint | symbol | null | und
 export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Primitive | any[] ? T[P] : DeepPartial<T[P]>;
 };
-export type DeepPartiallyOptional<T, K extends keyof T> = Required<Pick<T, K>> & DeepPartial<Omit<T, K>>;
+export type DeepPartiallyOptional<T, K extends keyof T> = T extends any ? Required<Pick<T, K>> & DeepPartial<Omit<T, K>> : never;
+export type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
 export type BindGroupPair = {
     layout: TgpuBindGroupLayout;
     group: TgpuBindGroup;
 };
 export type ColorAttachment = Parameters<TgpuRenderPipeline['withColorAttachment']>[0];
 export type PipelineAttachmentPair = [TgpuRenderPipeline, ColorAttachment];
+export type FragmentShaderReturnType = Vec4f;
+export type FragmentType = TgpuFragmentFn<{
+    uv: Vec2f;
+}, FragmentShaderReturnType>;
+export type AnySchema = ValidateBufferSchema<AnyWgslData>;
+export type BufferConfig<S extends AnySchema> = {
+    schema: S;
+    defaultOptions: Infer<S>;
+};
+export type TgpuUniformBuffer<S extends AnySchema> = TgpuUniform<S>['buffer'];
+export type TgpuUniformBufferTuple<T extends readonly BufferConfig<AnySchema>[]> = {
+    [K in keyof T]: T[K] extends BufferConfig<infer S> ? TgpuUniformBuffer<S> : never;
+};
+export type BindGroupCreatorArgument = {
+    root: TgpuRoot;
+    maskBindGroup: TgpuBindGroup<UnwrapLayout<typeof maskTextureBindGroupLayout>>;
+};
+export type EffectDefinition<TConfig extends readonly BufferConfig<AnySchema>[]> = {
+    buffers: TConfig;
+    fragment: FragmentType;
+    bindGroupCreator: (argument: BindGroupCreatorArgument, buffers: TgpuUniformBufferTuple<TConfig>) => TgpuBindGroup[];
+    blend?: GPUBlendState;
+};
+type ValidateBuffers<T> = {
+    [K in keyof T]: T[K] extends {
+        schema: infer S;
+    } ? S extends AnySchema ? {
+        schema: S;
+        defaultOptions: Infer<S>;
+    } : never : never;
+};
+export declare function createEffect<const TConfig extends readonly BufferConfig<AnySchema>[]>(definition: EffectDefinition<TConfig> & {
+    buffers: ValidateBuffers<TConfig>;
+}): EffectDefinition<TConfig> & {
+    buffers: ValidateBuffers<TConfig>;
+};
+export type UnwrapLayout<T> = T extends TgpuBindGroupLayout<infer U> ? U : never;
+type GetInferredFromConfig<T> = T extends {
+    schema: infer S;
+} ? S extends AnySchema ? Infer<S> : never : never;
+export type ExtractEffectOptions<TDef> = TDef extends EffectDefinition<infer TConfig> ? UnionToIntersection<GetInferredFromConfig<TConfig[number]>> : never;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-shine",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Fast and efficient way of adding interactive effects that are run entirely on shaders using typeGPU.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Content.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PixelRatio, View, type ViewStyle } from 'react-native';
 import Animated, {
   SensorType,
@@ -15,50 +15,22 @@ import {
 } from 'react-native-wgpu';
 import * as d from 'typegpu/data';
 import type {
+  SampledFlag,
+  StorageFlag,
   TextureProps,
-  TgpuRenderPipeline,
   TgpuRoot,
   TgpuTexture,
 } from 'typegpu';
+import { scheduleOnUI } from 'react-native-worklets';
 import {
-  bufferData,
-  type BufferData,
-  textureBindGroupLayout,
+  colorMaskArraySchema,
+  precomputeColorMaskBindGroupLayout,
+  precomputeColorMaskOutputBindGroupLayout,
+  rotationSchema,
 } from '../shaders/bindGroupLayouts';
 import useAnimationFrame from '../hooks/useAnimationFrame';
-import { TypedBufferMap } from '../shaders/resourceManagement/bufferManager';
-import {
-  createColorMaskBindGroup,
-  createGlareBindGroup,
-  createReverseHoloDetectionChannelFlagsBindGroup,
-  createRotationValuesBindGroup,
-} from '../shaders/bindGroupUtils';
-import colorMaskFragment from '../shaders/fragmentShaders/colorMaskFragment';
-import { newGlareFragment } from '../shaders/fragmentShaders/glareFragment';
-import {
-  attachBindGroups,
-  blend,
-  createMaskPipeline,
-  createRainbowHoloPipeline as createHoloPipeline,
-  createReverseHoloPipeline,
-  getDefaultTarget,
-} from '../shaders/pipelineSetups';
-import mainVertex from '../shaders/vertexShaders/mainVertex';
 import { subscribeToOrientationChange } from '../shaders/utils';
-import type {
-  ColorAttachment,
-  ColorMask,
-  DeepPartiallyOptional,
-  Effect,
-  GlareOptions,
-  PipelineAttachmentPair,
-} from '../types/types';
-import {
-  colorMasksToTyped,
-  createColorMasks,
-  createGlareOptions,
-  createReverseHoloDetectionChannelFlags,
-} from '../types/typeUtils';
+import type { ColorMask } from '../types/types';
 import type { V2d, V3d } from '../types/vector';
 import {
   addV3d,
@@ -75,18 +47,19 @@ import {
   zeroV3d,
 } from '../utils/vector';
 import { baseTextureFragment } from '../shaders/fragmentShaders/baseTextureFragment';
+import { PipelineManager } from '../shaders/resourceManagement/pipelineMap';
+import { blend, type Effect } from '../enums/effectPresets';
+import { createColorMasks } from '../types/typeUtils';
+import { createColorMaskBindGroup } from '../shaders/bindGroupUtils';
+import colorMaskFragment from '../shaders/fragmentShaders/colorMaskFragment';
+import { precomputeColorMask } from '../shaders/computeShaders/precomputeColorMask';
 
 export interface SharedProps {
   width: number;
   height: number;
-  glareOptions?: Partial<GlareOptions>;
-  enableGlare?: boolean;
-  highlightColors?: DeepPartiallyOptional<ColorMask, 'baseColor'>[];
+  highlightColors?: ColorMask[];
   isHighlightInclusive?: boolean;
   lightPosition?: SharedValue<V2d>;
-  // addReverseHolo?: boolean;
-  // reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
-  // addHolo?: boolean;
   translateViewIn3d?:
     | boolean
     | {
@@ -102,55 +75,35 @@ interface ContentProps extends SharedProps {
   root: TgpuRoot;
   imageTexture: TgpuTexture<TextureProps>;
   maskTexture?: TgpuTexture<TextureProps>;
-}
-
-interface PipelineMap {
-  baseTexture: TgpuRenderPipeline;
-  glare: TgpuRenderPipeline | void;
-  colorMask: TgpuRenderPipeline | void;
-  mask: TgpuRenderPipeline | void;
-  reverseHolo: TgpuRenderPipeline | void;
-  holo: TgpuRenderPipeline | void;
+  colorMaskStorageTexture?: TgpuTexture<any> & StorageFlag;
 }
 
 export default function Content({
-  // addHolo,
-  // addReverseHolo,
-  // reverseHoloDetectionChannelOptions,
-  effects,
+  effects = [{ name: 'glare' }],
   highlightColors,
   isHighlightInclusive = true,
-  glareOptions,
-  enableGlare = true,
   height,
   imageTexture,
   maskTexture,
   root,
-  lightPosition: touchPosition,
+  lightPosition,
   width,
   translateViewIn3d = false,
   style,
   containerStyle,
+  colorMaskStorageTexture,
 }: ContentProps) {
   const { device } = root;
   // const { ref, context } = useGPUContext();
   const ref = useRef<CanvasRef>(null);
   const [context, setContext] = useState<RNCanvasContext | null>(null);
-  // const context = ref.current!.getContext('webgpu')!;
 
   useEffect(() => {
     if (ref) setContext(ref.current?.getContext('webgpu')!);
   }, [ref]);
 
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  const renderRef = useRef<() => void>(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 isCanvasReady = useSharedValue(true);
 
   const landscape = useSharedValue<boolean>(false);
   const rotation = useSharedValue<V3d>(zeroV3d); // final GPU offsets
@@ -162,9 +115,10 @@ export default function Content({
   const calibrated = useSharedValue<boolean>(false);
   const gravitySensor = useAnimatedSensor(SensorType.GRAVITY, { interval: 20 });
 
-  const bufferMap = useMemo(
-    () => new TypedBufferMap<BufferData>(bufferData),
-    []
+  const pipelineCache = useMemo(
+    () =>
+      new PipelineManager(root, presentationFormat, imageTexture, maskTexture),
+    [imageTexture, maskTexture, presentationFormat, root]
   );
 
   const animatedStyle = useAnimatedStyle(() => {
@@ -200,9 +154,9 @@ export default function Content({
   useDerivedValue(() => {
     'worklet';
 
-    if (touchPosition) {
-      rotation.value = touchPosition
-        ? { x: touchPosition.value.x, y: touchPosition.value.y, z: 0 }
+    if (lightPosition) {
+      rotation.value = lightPosition
+        ? { x: lightPosition.value.x, y: lightPosition.value.y, z: 0 }
         : zeroV3d;
 
       return;
@@ -251,11 +205,88 @@ export default function Content({
     );
   });
 
-  // Render loop
+  //TODO: is this needed here?
+  const effectsCache =
+    JSON.stringify(effects) + JSON.stringify(highlightColors);
+
   useEffect(() => {
-    if (!context) return;
+    const initPipelines = async () => {
+      pipelineCache.pipelinesMap.clear();
+
+      pipelineCache.addPipeline(baseTextureFragment);
+
+      effects.forEach(({ name, options }) => {
+        pipelineCache.addPipelineWithBuffer(name, options);
+      });
+
+      //TODO: move to effect definition
+      if (highlightColors) {
+        const colorMaskBuffer = pipelineCache.buffersMap.syncUniformBuffer(
+          colorMaskArraySchema,
+          createColorMasks(highlightColors, isHighlightInclusive)
+        );
+        const colorMaskBindGroup = createColorMaskBindGroup(
+          root,
+          colorMaskBuffer
+        );
+
+        if (colorMaskStorageTexture) {
+          const precomputeColorMaskBindGroup = root.createBindGroup(
+            precomputeColorMaskBindGroupLayout,
+            {
+              colorMaskStorage: colorMaskStorageTexture as TgpuTexture<{
+                size: readonly number[];
+                format: 'rgba8unorm';
+              }> &
+                StorageFlag,
+            }
+          );
+          const precomputeColorMaskOutputBindGroup = root.createBindGroup(
+            precomputeColorMaskOutputBindGroupLayout,
+            {
+              colorMaskOutput: colorMaskStorageTexture as TgpuTexture<{
+                size: readonly number[];
+                format: 'rgba8unorm';
+              }> &
+                SampledFlag,
+            }
+          );
+          pipelineCache.addComputePipeline(precomputeColorMask, [
+            colorMaskBindGroup,
+            precomputeColorMaskBindGroup,
+          ]);
+          await pipelineCache.runComputePipeline(precomputeColorMask);
+          // colorMaskOutputTexture.write(colorMaskStorageTexture);
+
+          pipelineCache.addPipeline(
+            colorMaskFragment,
+            [colorMaskBindGroup, precomputeColorMaskOutputBindGroup],
+            blend
+          );
+        }
+      }
+    };
+    initPipelines();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    effectsCache,
+    isHighlightInclusive,
+    pipelineCache,
+    root,
+    colorMaskStorageTexture,
+  ]);
+
+  useEffect(() => {
+    if (!context) {
+      return;
+    }
+    // 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))
+    );
 
-    //this sets the underlying resolution of the canvas to prevent blurriness
     const canvasElement = context.canvas;
 
     if (
@@ -265,203 +296,33 @@ export default function Content({
       canvasElement.width = pixelSize.x;
       canvasElement.height = pixelSize.y;
     }
-
-    context.configure({
-      device,
-      format: presentationFormat,
-      alphaMode: 'premultiplied',
-    });
-
-    // const sampler = device.createSampler({
-    //   magFilter: 'linear',
-    //   minFilter: 'linear',
-    //   mipmapFilter: 'linear',
-    // });
-
-    const sampler = root['~unstable'].createSampler({
-      magFilter: 'linear',
-      minFilter: 'linear',
-      mipmapFilter: 'linear',
-    }) as any as GPUSampler; //TODO: delete this cast when TgpuFixedSampler gets exposed
-
-    const imageTextureBindGroup = root.createBindGroup(textureBindGroupLayout, {
-      texture: root.unwrap(imageTexture).createView(),
-      sampler,
+    //this is a workaround to prevent error logs but it should be handled by webgpu
+    scheduleOnUI(() => {
+      'worklet';
+      context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied',
+      });
+      isCanvasReady.value = true;
     });
+  }, [context, device, height, presentationFormat, width, isCanvasReady]);
 
-    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',
-      colorMasksToTyped(
-        createColorMasks(
-          highlightColors ?? [{ baseColor: [-20, -20, -20], useHSV: false }]
-        ),
-        isHighlightInclusive
-      )
-    );
-    const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
-
-    const reverseHoloEffect = effects
-      ? effects.find((e) => e.name === 'reverseHolo')
-      : undefined;
-    const reverseHoloDetectionChannelFlagsBuffer = bufferMap.addBuffer(
-      root,
-      'reverseHoloDetectionChannelFlags',
-      createReverseHoloDetectionChannelFlags(reverseHoloEffect?.options)
-    );
-    const reverseHoloDetectionChannelFlagsBindGroup =
-      createReverseHoloDetectionChannelFlagsBindGroup(
-        root,
-        reverseHoloDetectionChannelFlagsBuffer,
-        glareBuffer
-      );
-
-    const holoEffect = effects
-      ? effects.find((e) => e.name === 'holo')
-      : undefined;
-
-    const pipelineMap: PipelineMap = {
-      baseTexture: attachBindGroups(
-        root['~unstable']
-          .withVertex(mainVertex, {})
-          .withFragment(
-            baseTextureFragment,
-            getDefaultTarget(presentationFormat)
-          )
-          .createPipeline(),
-        [imageTextureBindGroup, rotationBindGroup]
-      ),
-      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,
-          reverseHoloDetectionChannelFlagsBindGroup,
-        ],
-        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: ColorAttachment = {
-        view,
-        clearValue: [0, 0, 0, 0],
-        loadOp: 'clear',
-        storeOp: 'store',
-      };
-      const loadingAttachment: ColorAttachment = {
-        view,
-        clearValue: [0, 0, 0, 0],
-        loadOp: 'load',
-        storeOp: 'store',
-      };
-
-      const { baseTexture, glare, mask, colorMask, holo, reverseHolo } =
-        pipelineMap;
-
-      const pairs: PipelineAttachmentPair[] = [
-        [baseTexture, initialAttachment],
-      ];
-
-      if ((glareOptions || !enableGlare) && glare) {
-        pairs.push([glare, loadingAttachment]);
-      }
-      if (mask) pairs.push([mask, loadingAttachment]);
-      if (reverseHoloEffect && reverseHolo)
-        pairs.push([reverseHolo, loadingAttachment]);
-      if (holoEffect && holo) pairs.push([holo, loadingAttachment]);
-      if (colorMask) pairs.push([colorMask, loadingAttachment]);
-
-      pairs.forEach(([pipeline, attachment]) =>
-        pipeline.withColorAttachment(attachment).draw(6)
-      );
-    };
-
-    const presentContext = () => context.present();
+  const frameCallback = useCallback(() => {
+    if (!context || !isCanvasReady.value) {
+      return;
+    }
 
-    renderRef.current = () => {
-      modifyBuffers();
-      renderPipelines();
-      presentContext();
-    };
+    pipelineCache.buffersMap
+      .get(rotationSchema)
+      ?.write(d.vec3f(...componentsFromV3d(rotation.value)));
 
-    // const res = tgpu.resolve({ externals: { reverseHoloFragment } });
-    // console.log('reverseHoloFragment resolve:', res);
-  }, [
-    device,
-    context,
-    root,
-    presentationFormat,
-    imageTexture,
-    maskTexture,
-    rotation,
-    bufferMap,
-    glareOptions,
-    enableGlare,
-    highlightColors,
-    pixelSize,
-    effects,
-    isHighlightInclusive,
-  ]);
+    const view = context.getCurrentTexture().createView();
+    pipelineCache.renderPipelines(view);
+    context.present();
+  }, [context, pipelineCache, rotation, isCanvasReady]);
 
-  useAnimationFrame(() => renderRef.current?.());
+  useAnimationFrame(frameCallback);
 
   return (
     <View