react-native-shine 0.6.0 → 0.7.1

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

@@ -6,11 +6,13 @@ export type vec4 = [number, number, number, number];
 export type quaternion = vec4;
 export type GlareOptions = {
     glowPower: number;
-    hueShiftAngleMax: number;
-    hueShiftAngleMin: number;
-    hueBlendPower: number;
     lightIntensity: number;
     glareIntensity: number;
+    glareColor: {
+        hueBlendPower: number;
+        hueShiftAngleMax: number;
+        hueShiftAngleMin: number;
+    };
 };
 export type ColorMask = {
     baseColor: vec3;
@@ -20,8 +22,8 @@ export type ColorMask = {
         lower: number;
     };
     brightnessTolerance?: number;
-    lowBrightnessThreshold?: number;
     saturationTolerance?: number;
+    lowBrightnessThreshold?: number;
     lowSaturationThreshold?: number;
     rgbToleranceRange: {
         upper: vec3;
@@ -29,6 +31,31 @@ export type ColorMask = {
     };
     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;

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.6.0",
+  "version": "0.7.1",
   "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",
@@ -62,6 +62,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
+    "@babel/plugin-transform-typescript": "^7.28.5",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",

package/src/components/Content.tsx

@@ -16,6 +16,7 @@ import {
 import * as d from 'typegpu/data';
 import type {
   TextureProps,
+  // TgpuComputePipeline,
   TgpuRenderPipeline,
   TgpuRoot,
   TgpuTexture,
@@ -23,6 +24,7 @@ import type {
 import {
   bufferData,
   type BufferData,
+  // precomputeColorMaskBindGroupLayout,
   textureBindGroupLayout,
 } from '../shaders/bindGroupLayouts';
 import useAnimationFrame from '../hooks/useAnimationFrame';
@@ -49,13 +51,13 @@ import type {
   ColorAttachment,
   ColorMask,
   DeepPartiallyOptional,
+  Effect,
   GlareOptions,
   PipelineAttachmentPair,
-  ReverseHoloDetectionChannelFlags,
 } from '../types/types';
 import {
-  colorMaskToTyped,
-  createColorMask,
+  colorMasksToTyped,
+  createColorMasks,
   createGlareOptions,
   createReverseHoloDetectionChannelFlags,
 } from '../types/typeUtils';
@@ -75,19 +77,28 @@ import {
   zeroV3d,
 } from '../utils/vector';
 import { baseTextureFragment } from '../shaders/fragmentShaders/baseTextureFragment';
+// import { precomputeColorMask } from '../shaders/computeShaders/precomputeColorMask';
 
 export interface SharedProps {
   width: number;
   height: number;
   glareOptions?: Partial<GlareOptions>;
-  colorMaskOptions?: DeepPartiallyOptional<ColorMask, 'baseColor'>;
-  touchPosition?: SharedValue<V2d>;
-  addReverseHolo?: boolean;
-  reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
-  addHolo?: boolean;
-  translateViewIn3d?: boolean;
+  enableGlare?: boolean;
+  highlightColors?: DeepPartiallyOptional<ColorMask, 'baseColor'>[];
+  isHighlightInclusive?: boolean;
+  lightPosition?: SharedValue<V2d>;
+  // addReverseHolo?: boolean;
+  // reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
+  // addHolo?: boolean;
+  translateViewIn3d?:
+    | boolean
+    | {
+        perspective?: number;
+        intensity?: number;
+      };
   style?: ViewStyle;
   containerStyle?: ViewStyle;
+  effects?: Effect[];
 }
 
 interface ContentProps extends SharedProps {
@@ -103,19 +114,23 @@ interface PipelineMap {
   mask: TgpuRenderPipeline | void;
   reverseHolo: TgpuRenderPipeline | void;
   holo: TgpuRenderPipeline | void;
+  // precomputeColorMaskPipeline: TgpuComputePipeline | void;
 }
 
 export default function Content({
-  addHolo,
-  addReverseHolo,
-  reverseHoloDetectionChannelOptions,
-  colorMaskOptions,
+  // addHolo,
+  // addReverseHolo,
+  // reverseHoloDetectionChannelOptions,
+  effects,
+  highlightColors,
+  isHighlightInclusive = true,
   glareOptions,
+  enableGlare = true,
   height,
   imageTexture,
   maskTexture,
   root,
-  touchPosition,
+  lightPosition,
   width,
   translateViewIn3d = false,
   style,
@@ -157,12 +172,19 @@ export default function Content({
   );
 
   const animatedStyle = useAnimatedStyle(() => {
-    const rotX = rotation.value.x * 10;
-    const rotY = rotation.value.y * 10;
+    let perspective: number = 300;
+    let intensity: number = 10;
+    if (typeof translateViewIn3d === 'object') {
+      perspective = translateViewIn3d.perspective ?? perspective;
+      intensity = translateViewIn3d.intensity ?? intensity;
+    }
+
+    const rotX = rotation.value.x * intensity;
+    const rotY = rotation.value.y * intensity;
 
     return {
       transform: [
-        { perspective: 300 },
+        { perspective: perspective },
         { rotateX: `${-rotY}deg` },
         { rotateY: `${rotX}deg` },
       ],
@@ -182,9 +204,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;
@@ -288,18 +310,24 @@ export default function Content({
     const colorMaskBuffer = bufferMap.addBuffer(
       root,
       'colorMask',
-      colorMaskToTyped(
-        createColorMask(
-          colorMaskOptions ?? { baseColor: [-20, -20, -20], useHSV: false }
-        )
+      colorMasksToTyped(
+        createColorMasks(
+          highlightColors ?? [{ baseColor: [-20, -20, -20], useHSV: false }]
+        ),
+        highlightColors && highlightColors.length
+          ? isHighlightInclusive
+          : !isHighlightInclusive
       )
     );
     const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
 
+    const reverseHoloEffect = effects
+      ? effects.find((e) => e.name === 'reverseHolo')
+      : undefined;
     const reverseHoloDetectionChannelFlagsBuffer = bufferMap.addBuffer(
       root,
       'reverseHoloDetectionChannelFlags',
-      createReverseHoloDetectionChannelFlags(reverseHoloDetectionChannelOptions)
+      createReverseHoloDetectionChannelFlags(reverseHoloEffect?.options)
     );
     const reverseHoloDetectionChannelFlagsBindGroup =
       createReverseHoloDetectionChannelFlagsBindGroup(
@@ -308,6 +336,17 @@ export default function Content({
         glareBuffer
       );
 
+    const holoEffect = effects
+      ? effects.find((e) => e.name === 'holo')
+      : undefined;
+
+    // const precomputeColorMaskBindGroup = root.createBindGroup(
+    //   precomputeColorMaskBindGroupLayout,
+    //   {
+    //     colorMaskTextureDst: colorMaskStorageTexture,
+    //   }
+    // );
+
     const pipelineMap: PipelineMap = {
       baseTexture: attachBindGroups(
         root['~unstable']
@@ -366,6 +405,14 @@ export default function Content({
         sampler,
         presentationFormat
       ),
+      // precomputeColorMaskPipeline: attachBindGroups(
+      //   root['~unstable'].withCompute(precomputeColorMask).createPipeline(),
+      //   [
+      //     imageTextureBindGroup,
+      //     colorMaskBindGroup,
+      //     precomputeColorMaskBindGroup,
+      //   ]
+      // ),
     };
 
     const modifyBuffers = () => {
@@ -387,20 +434,30 @@ export default function Content({
         storeOp: 'store',
       };
 
-      const { baseTexture, glare, mask, colorMask, holo, reverseHolo } =
-        pipelineMap;
+      const {
+        baseTexture,
+        glare,
+        mask,
+        colorMask,
+        holo,
+        reverseHolo,
+        // precomputeColorMaskPipeline,
+      } = pipelineMap;
+
+      //TODO: delete this from here after testing
+      // precomputeColorMaskPipeline!.dispatchWorkgroups(8, 8);
 
       const pairs: PipelineAttachmentPair[] = [
         [baseTexture, initialAttachment],
       ];
 
-      if (glareOptions && glare) {
+      if ((glareOptions || enableGlare) && glare) {
         pairs.push([glare, loadingAttachment]);
       }
       if (mask) pairs.push([mask, loadingAttachment]);
-      if (addReverseHolo && reverseHolo)
+      if (reverseHoloEffect && reverseHolo)
         pairs.push([reverseHolo, loadingAttachment]);
-      if (addHolo && holo) pairs.push([holo, loadingAttachment]);
+      if (holoEffect && holo) pairs.push([holo, loadingAttachment]);
       if (colorMask) pairs.push([colorMask, loadingAttachment]);
 
       pairs.forEach(([pipeline, attachment]) =>
@@ -428,11 +485,11 @@ export default function Content({
     rotation,
     bufferMap,
     glareOptions,
-    colorMaskOptions,
-    addHolo,
-    addReverseHolo,
-    reverseHoloDetectionChannelOptions,
+    enableGlare,
+    highlightColors,
     pixelSize,
+    effects,
+    isHighlightInclusive,
   ]);
 
   useAnimationFrame(() => renderRef.current?.());
@@ -440,11 +497,13 @@ export default function Content({
   return (
     <View
       style={{
-        transform: [
-          {
-            matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1],
-          },
-        ],
+        transform: translateViewIn3d
+          ? [
+              {
+                matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1],
+              },
+            ]
+          : [],
         ...containerStyle,
       }}
     >

package/src/components/Shine.tsx

@@ -15,6 +15,9 @@ export function Shine({ imageURI, maskURI, ...props }: ShineProps) {
   const root = device && getOrInitRoot(device);
   const [imageTexture, setImageTexture] = useState<TgpuTexture>();
   const [maskTexture, setMaskTexture] = useState<TgpuTexture>();
+  // const [colorMaskStorageTexture, colorMaskStorageTexture] =
+  //   useState<TgpuTexture>();
+  //TODO: complete the work with the compute shader, try out the shader
 
   useEffect(() => {
     if (root) loadBitmap(root, imageURI, setImageTexture);
@@ -24,6 +27,11 @@ export function Shine({ imageURI, maskURI, ...props }: ShineProps) {
     if (root && maskURI) loadBitmap(root, maskURI, setMaskTexture);
   }, [root, imageURI, maskURI]);
 
+  // useEffect(() => {
+  //   //TODO: write the logic for allocating the storage texture for the precomputed colorMask
+  //   if (root)
+  // }, [root, imageURI]);
+
   return (
     root &&
     imageTexture && (

package/src/components/ShineGroup.tsx

@@ -16,11 +16,15 @@ type ShineGroupProps = PropsWithChildren<Partial<ShineProps>>;
 export function ShineGroup({
   children,
   glareOptions,
-  colorMaskOptions,
+  highlightColors,
   maskURI,
-  touchPosition,
-  addHolo = false,
-  addReverseHolo = false,
+  lightPosition: touchPosition,
+  effects,
+  enableGlare = true,
+  isHighlightInclusive = true,
+  translateViewIn3d = false,
+  containerStyle,
+  style,
 }: ShineGroupProps) {
   const viewShotRef = useRef<ViewShot>(null);
   const [capturedURI, setCapturedURI] = useState<string | null>(null);
@@ -76,11 +80,15 @@ export function ShineGroup({
           {...sizeFromV2d(size)}
           imageURI={capturedURI}
           glareOptions={glareOptions}
-          colorMaskOptions={colorMaskOptions}
+          highlightColors={highlightColors}
           maskURI={maskURI}
-          touchPosition={touchPosition}
-          addReverseHolo={addReverseHolo}
-          addHolo={addHolo}
+          lightPosition={touchPosition}
+          effects={effects}
+          translateViewIn3d={translateViewIn3d}
+          enableGlare={enableGlare}
+          containerStyle={containerStyle}
+          isHighlightInclusive={isHighlightInclusive}
+          style={style}
         />
       )}
     </View>

package/src/enums/colorHighlightPresets.ts

@@ -0,0 +1,33 @@
+import { ColorPresets } from './colorPresets';
+import { type ColorMask, type vec3 } from '../types/types';
+
+type ColorHighlightPresetMap = {
+  readonly [K in keyof typeof ColorPresets]: ColorMask;
+};
+
+export const ColorHighlightPresets = Object.fromEntries(
+  (Object.entries(ColorPresets) as [keyof typeof ColorPresets, vec3][]).map(
+    ([key, color]) => {
+      return [
+        key,
+        {
+          baseColor: color,
+          useHSV: true,
+          hueToleranceRange: { upper: 15, lower: 15 },
+        } as ColorMask,
+      ];
+    }
+  )
+) as ColorHighlightPresetMap;
+
+export const createHighlightColor = (
+  rgb: vec3,
+  useHSV: boolean = true,
+  hueToleranceRange: { upper: number; lower: number } = { upper: 15, lower: 15 }
+) => {
+  return {
+    baseColor: rgb,
+    useHSV,
+    hueToleranceRange,
+  } as ColorMask;
+};

package/src/enums/effectPresets.ts

@@ -0,0 +1,11 @@
+import type { Effect } from '../types/types';
+
+export const Effects = {
+  REVERSE_HOLO: {
+    name: 'reverseHolo',
+    options: { redChannel: 1.0, greenChannel: 0.0, blueChannel: 0.0 },
+  },
+  HOLO: {
+    name: 'holo',
+  },
+} as const satisfies Record<string, Effect>;

package/src/index.tsx

@@ -17,3 +17,5 @@ export type { ShineProps } from './components/Shine';
 export * from './utils/vector';
 export type { V2d, V3d } from './types/vector';
 export * from './enums/colorPresets';
+export * from './enums/effectPresets';
+export * from './enums/colorHighlightPresets';

package/src/shaders/bindGroupLayouts.ts

@@ -3,14 +3,12 @@ import * as d from 'typegpu/data';
 import type { BufferUsageType } from './resourceManagement/bufferManager';
 
 export const textureBindGroupLayout = tgpu.bindGroupLayout({
-  // texture: { texture: d.texture2d(d.f32) } //TODO: revert this change after bumping typegpu version (currently there is a bug with texture formats)
-  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  texture: { texture: d.texture2d(d.f32) },
   sampler: { sampler: 'filtering' },
 });
 
 export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
-  // texture: { texture: d.texture2d(d.f32) }, //TODO: same as above
-  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  texture: { texture: d.texture2d(d.f32) },
   sampler: { sampler: 'filtering' },
 });
 
@@ -19,10 +17,12 @@ export const rotationBindGroupLayout = tgpu.bindGroupLayout({
 });
 
 export const glareSchema = d.struct({
-  glowPower: d.f32,
-  hueShiftAngleMax: d.f32,
-  hueShiftAngleMin: d.f32,
-  hueBlendPower: d.f32,
+  glareColor: d.struct({
+    hueShiftAngleMax: d.f32,
+    hueShiftAngleMin: d.f32,
+    hueBlendPower: d.f32,
+  }),
+  glowPower: d.align(16, d.f32),
   lightIntensity: d.f32,
   glareIntensity: d.f32,
 });
@@ -33,6 +33,7 @@ export const glareBindGroupLayout = tgpu.bindGroupLayout({
   glareOptions: { uniform: glareSchema },
 });
 
+//TODO: change the buffer so it reserves memory for an array of colorMaskSchemas
 export const colorMaskSchema = d.struct({
   baseColor: d.vec3f,
   rgbToleranceRange: d.struct({
@@ -53,8 +54,18 @@ export const colorMaskSchema = d.struct({
 
 export type ColorMaskSchema = typeof colorMaskSchema;
 
+export const COLOR_MASK_MAX_COUNT = 16;
+
+export const colorMaskArraySchema = d.struct({
+  masks: d.arrayOf(colorMaskSchema, COLOR_MASK_MAX_COUNT),
+  usedMaskCount: d.i32,
+  reverseHighlight: d.i32,
+});
+
+export type ColorMaskArraySchema = typeof colorMaskArraySchema;
+
 export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
-  mask: { uniform: colorMaskSchema },
+  colorMasks: { uniform: colorMaskArraySchema },
 });
 
 export const reverseHoloDetectionChannelFlagsSchema = d.struct({
@@ -75,6 +86,18 @@ export const reverseHoloDetectionChannelFlagsBindGroupLayout =
     glareOptions: { uniform: glareSchema },
   });
 
+export const precomputeColorMaskBindGroupLayout = tgpu.bindGroupLayout({
+  colorMaskTextureDst: {
+    storageTexture: d.textureStorage2d('rgba8unorm', 'read-write'),
+  },
+});
+
+export type BufferSchemas =
+  | d.Vec3f
+  | ReverseHoloDetectionChannelFlagsSchema
+  | ColorMaskArraySchema
+  | GlareSchema;
+
 export const bufferData = {
   rotation: {
     schema: d.vec3f,
@@ -85,7 +108,7 @@ export const bufferData = {
     usage: 'uniform',
   },
   colorMask: {
-    schema: colorMaskSchema,
+    schema: colorMaskArraySchema,
     usage: 'uniform',
   },
   reverseHoloDetectionChannelFlags: {
@@ -94,7 +117,7 @@ export const bufferData = {
   },
 } as const satisfies Record<
   string,
-  { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+  { schema: ValidateBufferSchema<BufferSchemas>; usage: BufferUsageType }
 >;
 
 export type BufferData = typeof bufferData;

package/src/shaders/bindGroupUtils.ts

@@ -4,24 +4,14 @@ import {
   glareBindGroupLayout,
   glareSchema,
   colorMaskBindGroupLayout,
-  type ColorMaskSchema,
   rotationBindGroupLayout,
   type GlareSchema,
-  colorMaskSchema,
   type ReverseHoloDetectionChannelFlagsSchema,
   reverseHoloDetectionChannelFlagsBindGroupLayout,
+  type ColorMaskArraySchema,
 } from './bindGroupLayouts';
-import type {
-  GlareOptions,
-  ColorMask,
-  PartiallyOptional,
-} from '../types/types';
-import {
-  colorMaskToTyped,
-  createGlareOptions,
-  createColorMask,
-  mapToF32,
-} from '../types/typeUtils';
+import type { GlareOptions } from '../types/types';
+import { createGlareOptions, glareOptionsToTyped } from '../types/typeUtils';
 import { componentsFromV3d, zeroV3d } from '../utils/vector';
 
 export const createRotationBuffer = (root: TgpuRoot, initValues = zeroV3d) =>
@@ -42,7 +32,10 @@ export const createGlareOptionsBuffer = (
   initValues?: Partial<GlareOptions>
 ) =>
   root
-    .createBuffer(glareSchema, mapToF32(createGlareOptions({ ...initValues })))
+    .createBuffer(
+      glareSchema,
+      glareOptionsToTyped(createGlareOptions({ ...initValues }))
+    )
     .$usage('uniform');
 
 export const createGlareBindGroup = (
@@ -53,23 +46,23 @@ export const createGlareBindGroup = (
     glareOptions: buffer,
   });
 
-export const createColorMaskBuffer = (
-  root: TgpuRoot,
-  initValues: PartiallyOptional<ColorMask, 'baseColor'>
-) =>
-  root
-    .createBuffer(
-      colorMaskSchema,
-      colorMaskToTyped(createColorMask({ ...initValues }))
-    )
-    .$usage('uniform');
+// export const createColorMaskBuffer = (
+//   root: TgpuRoot,
+//   initValues: PartiallyOptional<ColorMask, 'baseColor'>[]
+// ) =>
+//   root
+//     .createBuffer(
+//       colorMaskSchema,
+//       colorMasksToTyped(createColorMasks(initValues))
+//     )
+//     .$usage('uniform');
 
 export const createColorMaskBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<ColorMaskSchema> & UniformFlag
+  buffer: TgpuBuffer<ColorMaskArraySchema> & UniformFlag
 ) =>
   root.createBindGroup(colorMaskBindGroupLayout, {
-    mask: buffer,
+    colorMasks: buffer,
   });
 
 export const createReverseHoloDetectionChannelFlagsBindGroup = (

package/src/shaders/computeShaders/precomputeColorMask.ts

@@ -0,0 +1,29 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  precomputeColorMaskBindGroupLayout,
+  textureBindGroupLayout,
+} from './../bindGroupLayouts';
+
+export const precomputeColorMask = tgpu['~unstable'].computeFn({
+  in: { gid: d.builtin.globalInvocationId },
+  workgroupSize: [8, 8, 1],
+})((input) => {
+  const x = input.gid.x;
+  const y = input.gid.y;
+  const colorMaskStorageTexture =
+    precomputeColorMaskBindGroupLayout.$.colorMaskTextureDst;
+  const size = std.textureDimensions(colorMaskStorageTexture);
+
+  if (x >= size.x || y >= size.y) return;
+  const uv = d.vec2f(d.f32(x) / d.f32(size.x), d.f32(y) / d.f32(size.y));
+
+  const colorSampled = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    uv
+  );
+
+  std.textureStore(colorMaskStorageTexture, d.vec2u(x, y), colorSampled);
+});