react-native-shine 0.5.0 → 0.7.0

package/lib/typescript/src/shaders/bindGroupUtils.d.ts

@@ -1,7 +1,7 @@
 import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
 import * as d from 'typegpu/data';
-import { type ColorMaskSchema, type GlareSchema, type ReverseHoloDetectionChannelFlagsSchema } from './bindGroupLayouts';
-import type { GlareOptions, ColorMask, PartiallyOptional } from '../types/types';
+import { type GlareSchema, type ReverseHoloDetectionChannelFlagsSchema, type ColorMaskArraySchema } from './bindGroupLayouts';
+import type { GlareOptions } from '../types/types';
 export declare const createRotationBuffer: (root: TgpuRoot, initValues?: {
     x: number;
     y: number;
@@ -13,58 +13,51 @@ export declare const createRotationValuesBindGroup: (root: TgpuRoot, buffer: Tgp
     };
 }>;
 export declare const createGlareOptionsBuffer: (root: TgpuRoot, initValues?: Partial<GlareOptions>) => TgpuBuffer<d.WgslStruct<{
-    glowPower: d.F32;
-    hueShiftAngleMax: d.F32;
-    hueShiftAngleMin: d.F32;
-    hueBlendPower: d.F32;
+    glareColor: d.WgslStruct<{
+        hueShiftAngleMax: d.F32;
+        hueShiftAngleMin: d.F32;
+        hueBlendPower: d.F32;
+    }>;
+    glowPower: d.Decorated<d.F32, [d.Align<16>]>;
     lightIntensity: d.F32;
     glareIntensity: d.F32;
 }>> & UniformFlag;
 export declare const createGlareBindGroup: (root: TgpuRoot, buffer: TgpuBuffer<GlareSchema> & UniformFlag) => import("typegpu").TgpuBindGroup<{
     glareOptions: {
         uniform: d.WgslStruct<{
-            glowPower: d.F32;
-            hueShiftAngleMax: d.F32;
-            hueShiftAngleMin: d.F32;
-            hueBlendPower: d.F32;
+            glareColor: d.WgslStruct<{
+                hueShiftAngleMax: d.F32;
+                hueShiftAngleMin: d.F32;
+                hueBlendPower: d.F32;
+            }>;
+            glowPower: d.Decorated<d.F32, [d.Align<16>]>;
             lightIntensity: d.F32;
             glareIntensity: d.F32;
         }>;
     };
 }>;
-export declare const createColorMaskBuffer: (root: TgpuRoot, initValues: PartiallyOptional<ColorMask, "baseColor">) => TgpuBuffer<d.WgslStruct<{
-    baseColor: d.Vec3f;
-    rgbToleranceRange: d.WgslStruct<{
-        upper: d.Vec3f;
-        lower: d.Vec3f;
-    }>;
-    hueToleranceRange: d.WgslStruct<{
-        upper: d.F32;
-        lower: d.F32;
-    }>;
-    useHSV: d.Decorated<d.U32, [d.Align<16>]>;
-    brightnessTolerance: d.F32;
-    saturationTolerance: d.F32;
-    lowSaturationThreshold: d.F32;
-    lowBrightnessThreshold: d.F32;
-}>> & UniformFlag;
-export declare const createColorMaskBindGroup: (root: TgpuRoot, buffer: TgpuBuffer<ColorMaskSchema> & UniformFlag) => import("typegpu").TgpuBindGroup<{
-    mask: {
+export declare const createColorMaskBindGroup: (root: TgpuRoot, buffer: TgpuBuffer<ColorMaskArraySchema> & UniformFlag) => import("typegpu").TgpuBindGroup<{
+    colorMasks: {
         uniform: d.WgslStruct<{
-            baseColor: d.Vec3f;
-            rgbToleranceRange: d.WgslStruct<{
-                upper: d.Vec3f;
-                lower: d.Vec3f;
-            }>;
-            hueToleranceRange: d.WgslStruct<{
-                upper: d.F32;
-                lower: d.F32;
-            }>;
-            useHSV: d.Decorated<d.U32, [d.Align<16>]>;
-            brightnessTolerance: d.F32;
-            saturationTolerance: d.F32;
-            lowSaturationThreshold: d.F32;
-            lowBrightnessThreshold: d.F32;
+            masks: d.WgslArray<d.WgslStruct<{
+                baseColor: d.Vec3f;
+                rgbToleranceRange: d.WgslStruct<{
+                    upper: d.Vec3f;
+                    lower: d.Vec3f;
+                }>;
+                hueToleranceRange: d.WgslStruct<{
+                    upper: d.F32;
+                    lower: d.F32;
+                }>;
+                useHSV: d.Decorated<d.U32, [d.Align<16>]>;
+                brightnessTolerance: d.F32;
+                saturationTolerance: d.F32;
+                lowSaturationThreshold: d.F32;
+                lowBrightnessThreshold: d.F32;
+                debugMode: d.U32;
+            }>>;
+            usedMaskCount: d.I32;
+            reverseHighlight: d.I32;
         }>;
     };
 }>;
@@ -81,10 +74,12 @@ export declare const createReverseHoloDetectionChannelFlagsBindGroup: (root: Tgp
     };
     glareOptions: {
         uniform: d.WgslStruct<{
-            glowPower: d.F32;
-            hueShiftAngleMax: d.F32;
-            hueShiftAngleMin: d.F32;
-            hueBlendPower: d.F32;
+            glareColor: d.WgslStruct<{
+                hueShiftAngleMax: d.F32;
+                hueShiftAngleMin: d.F32;
+                hueBlendPower: d.F32;
+            }>;
+            glowPower: d.Decorated<d.F32, [d.Align<16>]>;
             lightIntensity: d.F32;
             glareIntensity: d.F32;
         }>;

package/lib/typescript/src/shaders/bindGroupUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bindGroupUtils.d.ts","sourceRoot":"","sources":["../../../../src/shaders/bindGroupUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAIL,KAAK,eAAe,EAEpB,KAAK,WAAW,EAEhB,KAAK,sCAAsC,EAE5C,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AASxB,eAAO,MAAM,oBAAoB,GAAI,MAAM,QAAQ,EAAE;;;;CAAoB,sCAGnD,CAAC;AAEvB,eAAO,MAAM,6BAA6B,GACxC,MAAM,QAAQ,EACd,QAAQ,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;;;;EAIzB,CAAC;AAEL,eAAO,MAAM,wBAAwB,GACnC,MAAM,QAAQ,EACd,aAAa,OAAO,CAAC,YAAY,CAAC;;;;;;;iBAId,CAAC;AAEvB,eAAO,MAAM,oBAAoB,GAC/B,MAAM,QAAQ,EACd,QAAQ,UAAU,CAAC,WAAW,CAAC,GAAG,WAAW;;;;;;;;;;;EAI3C,CAAC;AAEL,eAAO,MAAM,qBAAqB,GAChC,MAAM,QAAQ,EACd,YAAY,iBAAiB,CAAC,SAAS,EAAE,WAAW,CAAC;;;;;;;;;;;;;;;iBAOjC,CAAC;AAEvB,eAAO,MAAM,wBAAwB,GACnC,MAAM,QAAQ,EACd,QAAQ,UAAU,CAAC,eAAe,CAAC,GAAG,WAAW;;;;;;;;;;;;;;;;;;;EAI/C,CAAC;AAEL,eAAO,MAAM,+CAA+C,GAC1D,MAAM,QAAQ,EACd,wBAAwB,UAAU,CAAC,sCAAsC,CAAC,GACxE,WAAW,EACb,oBAAoB,UAAU,CAAC,WAAW,CAAC,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;EAKvD,CAAC"}
+{"version":3,"file":"bindGroupUtils.d.ts","sourceRoot":"","sources":["../../../../src/shaders/bindGroupUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAClC,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,sCAAsC,EAE3C,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInD,eAAO,MAAM,oBAAoB,GAAI,MAAM,QAAQ,EAAE;;;;CAAoB,sCAGnD,CAAC;AAEvB,eAAO,MAAM,6BAA6B,GACxC,MAAM,QAAQ,EACd,QAAQ,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC;;;;EAIzB,CAAC;AAEL,eAAO,MAAM,wBAAwB,GACnC,MAAM,QAAQ,EACd,aAAa,OAAO,CAAC,YAAY,CAAC;;;;;;;;;iBAOd,CAAC;AAEvB,eAAO,MAAM,oBAAoB,GAC/B,MAAM,QAAQ,EACd,QAAQ,UAAU,CAAC,WAAW,CAAC,GAAG,WAAW;;;;;;;;;;;;;EAI3C,CAAC;AAaL,eAAO,MAAM,wBAAwB,GACnC,MAAM,QAAQ,EACd,QAAQ,UAAU,CAAC,oBAAoB,CAAC,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;;EAIpD,CAAC;AAEL,eAAO,MAAM,+CAA+C,GAC1D,MAAM,QAAQ,EACd,wBAAwB,UAAU,CAAC,sCAAsC,CAAC,GACxE,WAAW,EACb,oBAAoB,UAAU,CAAC,WAAW,CAAC,GAAG,WAAW;;;;;;;;;;;;;;;;;;;;;;;EAKvD,CAAC"}

package/lib/typescript/src/shaders/fragmentShaders/baseTextureFragment.d.ts

@@ -0,0 +1,5 @@
+import * as d from 'typegpu/data';
+export declare const baseTextureFragment: import("typegpu").TgpuFragmentFn<{
+    uv: d.Vec2f;
+}, d.Vec4f>;
+//# sourceMappingURL=baseTextureFragment.d.ts.map

package/lib/typescript/src/shaders/fragmentShaders/baseTextureFragment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseTextureFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/baseTextureFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAIlC,eAAO,MAAM,mBAAmB;;WAY9B,CAAC"}

package/lib/typescript/src/shaders/fragmentShaders/colorMaskFragment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorMaskFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/colorMaskFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAQlC,QAAA,MAAM,iBAAiB;;WAiErB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"colorMaskFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/colorMaskFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AASlC,QAAA,MAAM,iBAAiB;;WA4FrB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/lib/typescript/src/shaders/fragmentShaders/glareFragment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glareFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/glareFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAUlC,eAAO,MAAM,aAAa;;WAqExB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;WA4D3B,CAAC"}
+{"version":3,"file":"glareFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/glareFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAUlC,eAAO,MAAM,aAAa;;WAuExB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;WA4D3B,CAAC"}

package/lib/typescript/src/shaders/fragmentShaders/holoFragment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"holoFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/holoFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AASlC,eAAO,MAAM,YAAY;;WAwBvB,CAAC"}
+{"version":3,"file":"holoFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/holoFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AASlC,eAAO,MAAM,YAAY;;WA8BvB,CAAC"}

package/lib/typescript/src/shaders/fragmentShaders/reverseHoloFragment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reverseHoloFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/reverseHoloFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAUlC,eAAO,MAAM,mBAAmB;;WAwF9B,CAAC"}
+{"version":3,"file":"reverseHoloFragment.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/fragmentShaders/reverseHoloFragment.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAUlC,eAAO,MAAM,mBAAmB;;WA6F9B,CAAC"}

package/lib/typescript/src/shaders/resourceManagement/textures.d.ts

@@ -2,8 +2,8 @@ import { type TextureProps, type TgpuRoot, type TgpuTexture } from 'typegpu';
 export declare const createTexture: (root: TgpuRoot, size: {
     width: number;
     height: number;
-}) => Promise<TgpuTexture>;
-export declare const loadTexture: (root: TgpuRoot, imageBitmap: ImageBitmap, texture: TgpuTexture) => Promise<void>;
+}) => Promise<TgpuTexture<any>>;
+export declare const loadTexture: (root: TgpuRoot, imageBitmap: ImageBitmap, texture: TgpuTexture<any>) => Promise<void>;
 export declare function loadBitmap(root: TgpuRoot, imageURI: string, setTexture: (texture: TgpuTexture<TextureProps>) => void, usage?: ('sampled' | 'render')[]): Promise<void>;
-export declare function addTextureUsage(texture: TgpuTexture, usage: ('sampled' | 'render')[]): Promise<TgpuTexture<TextureProps> & import("typegpu").Sampled & import("typegpu").Render>;
+export declare function addTextureUsage(texture: TgpuTexture, usage: ('sampled' | 'render')[]): Promise<TgpuTexture<TextureProps> & import("typegpu").SampledFlag & import("typegpu").RenderFlag>;
 //# sourceMappingURL=textures.d.ts.map

package/lib/typescript/src/shaders/resourceManagement/textures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textures.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/resourceManagement/textures.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAG7E,eAAO,MAAM,aAAa,GACxB,MAAM,QAAQ,EACd,MAAM;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,KAEA,OAAO,CAAC,WAAW,CAOrB,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,MAAM,QAAQ,EACd,aAAa,WAAW,EACxB,SAAS,WAAW,kBAOrB,CAAC;AAEF,wBAAsB,UAAU,CAC9B,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,IAAI,EACxD,KAAK,GAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,EAA0B,iBAQxD;AAED,wBAAsB,eAAe,CACnC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,EAAE,6FAGhC"}
+{"version":3,"file":"textures.d.ts","sourceRoot":"","sources":["../../../../../src/shaders/resourceManagement/textures.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAG7E,eAAO,MAAM,aAAa,GACxB,MAAM,QAAQ,EACd,MAAM;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,KAEA,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,GACtB,MAAM,QAAQ,EACd,aAAa,WAAW,EACxB,SAAS,WAAW,CAAC,GAAG,CAAC,kBAO1B,CAAC;AAEF,wBAAsB,UAAU,CAC9B,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,YAAY,CAAC,KAAK,IAAI,EACxD,KAAK,GAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,EAA0B,iBAQxD;AAED,wBAAsB,eAAe,CACnC,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,EAAE,qGAGhC"}

package/lib/typescript/src/shaders/tgpuUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tgpuUtils.d.ts","sourceRoot":"","sources":["../../../../src/shaders/tgpuUtils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,eAAO,MAAM,QAAQ,mEA6BnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qDA6BnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qDAanB,CAAC;AAEH,eAAO,MAAM,IAAI,+DASf,CAAC;AAEH,eAAO,MAAM,eAAe,qEAc1B,CAAC;AAEH,eAAO,MAAM,cAAc,gEAYzB,CAAC;AAEH,eAAO,MAAM,eAAe,sEAS1B,CAAC;AAEH,mBAAmB;AACnB,eAAO,MAAM,OAAO,mDAQlB,CAAC;AAEH,eAAO,MAAM,0BAA0B,+DAcrC,CAAC;AAEH,eAAO,MAAM,UAAU,yEAMrB,CAAC"}
+{"version":3,"file":"tgpuUtils.d.ts","sourceRoot":"","sources":["../../../../src/shaders/tgpuUtils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,eAAO,MAAM,QAAQ,mEAQnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qDA4BnB,CAAC;AAEH,eAAO,MAAM,QAAQ,qDA8BnB,CAAC;AAEH,eAAO,MAAM,IAAI,+DASf,CAAC;AAEH,eAAO,MAAM,eAAe,qEAc1B,CAAC;AAEH,eAAO,MAAM,cAAc,gEAYzB,CAAC;AAEH,eAAO,MAAM,eAAe,sEAS1B,CAAC;AAEH,mBAAmB;AACnB,eAAO,MAAM,OAAO,mDAQlB,CAAC;AAEH,eAAO,MAAM,0BAA0B,+DAcrC,CAAC;AAEH,eAAO,MAAM,UAAU,yEAMrB,CAAC"}

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

@@ -1,8 +1,37 @@
-import { f32 } from 'typegpu/data';
 import type { GlareOptions, ColorMask, DeepPartiallyOptional, HoloOptions, ReverseHoloDetectionChannelFlags } from './types';
 export declare const createGlareOptions: (options: Partial<GlareOptions>) => GlareOptions;
-export declare const mapToF32: <T extends Record<string, number>>(obj: T) => { [K in keyof T]: ReturnType<typeof f32>; };
-export declare const createColorMask: (colorMask: DeepPartiallyOptional<ColorMask, "baseColor">) => ColorMask;
+export declare const glareOptionsToTyped: (glareOptions: GlareOptions) => {
+    glowPower: number;
+    lightIntensity: number;
+    glareIntensity: number;
+    glareColor: {
+        hueShiftAngleMax: number;
+        hueShiftAngleMin: number;
+        hueBlendPower: number;
+    };
+};
+export declare const createColorMasks: (colorMasks: DeepPartiallyOptional<ColorMask, "baseColor">[]) => ColorMask[];
+export declare const colorMasksToTyped: (colorMasks: ColorMask[], reverseHighlight: boolean) => {
+    masks: {
+        baseColor: any;
+        rgbToleranceRange: {
+            upper: any;
+            lower: any;
+        };
+        useHSV: number;
+        hueToleranceRange: {
+            lower: number;
+            upper: number;
+        };
+        brightnessTolerance: number;
+        saturationTolerance: number;
+        lowSaturationThreshold: number;
+        lowBrightnessThreshold: number;
+        debugMode: number;
+    }[];
+    usedMaskCount: number;
+    reverseHighlight: number;
+};
 export declare const colorMaskToTyped: (colorMask: ColorMask) => {
     baseColor: any;
     rgbToleranceRange: {
@@ -18,6 +47,7 @@ export declare const colorMaskToTyped: (colorMask: ColorMask) => {
     saturationTolerance: number;
     lowSaturationThreshold: number;
     lowBrightnessThreshold: number;
+    debugMode: number;
 };
 export declare const createHoloOptions: (options: Partial<HoloOptions>) => HoloOptions;
 export declare const createReverseHoloDetectionChannelFlags: (options?: Partial<ReverseHoloDetectionChannelFlags>) => {

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

@@ -1 +1 @@
-{"version":3,"file":"typeUtils.d.ts","sourceRoot":"","sources":["../../../../src/types/typeUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAuB,MAAM,cAAc,CAAC;AAExD,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EAErB,WAAW,EACX,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAIjB,eAAO,MAAM,kBAAkB,GAC7B,SAAS,OAAO,CAAC,YAAY,CAAC,KAC7B,YAoBF,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACvD,KAAK,CAAC,KACL,GACA,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,GAQvC,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,WAAW,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,KACvD,SAqCF,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,SAAS;;;;;;;;;;;;;;;CAkBpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,SAAS,OAAO,CAAC,WAAW,CAAC,KAC5B,WAQF,CAAC;AAEF,eAAO,MAAM,sCAAsC,GACjD,UAAU,OAAO,CAAC,gCAAgC,CAAC;;;;;;;CA2BpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,EAAE,QAkB7C,CAAC"}
+{"version":3,"file":"typeUtils.d.ts","sourceRoot":"","sources":["../../../../src/types/typeUtils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EAErB,WAAW,EACX,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAMjB,eAAO,MAAM,kBAAkB,GAC7B,SAAS,OAAO,CAAC,YAAY,CAAC,KAC7B,YAiBF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,cAAc,YAAY;;;;;;;;;CAW7D,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,YAAY,qBAAqB,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,KAC1D,SAAS,EA2CX,CAAC;AA2BF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,SAAS,EAAE,EACvB,kBAAkB,OAAO;;;;;;;;;;;;;;;;;;;;CAU1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAW,SAAS;;;;;;;;;;;;;;;;CAoBpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,SAAS,OAAO,CAAC,WAAW,CAAC,KAC5B,WAQF,CAAC;AAEF,eAAO,MAAM,sCAAsC,GACjD,UAAU,OAAO,CAAC,gCAAgC,CAAC;;;;;;;CA2BpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,KAAK,MAAM,EAAE,QAkB7C,CAAC"}

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,13 +22,39 @@ export type ColorMask = {
         lower: number;
     };
     brightnessTolerance?: number;
-    lowBrightnessThreshold?: 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;

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":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACpC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAC5C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC;AAE9B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,aAAa,EAAE,MAAM,CAAC;QACtB,gBAAgB,EAAE,MAAM,CAAC;QACzB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iBAAiB,EAAE;QACjB,KAAK,EAAE,IAAI,CAAC;QACZ,KAAK,EAAE,IAAI,CAAC;KACb,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAGF,MAAM,MAAM,0BAA0B,GAAG;IACvC,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;CACJ,CAAC;AAEF,MAAM,MAAM,MAAM,GACd;IACE,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC,gCAAgC,CAAC,CAAC;CACpD,GACD;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,CAAC;AAEN,MAAM,MAAM,gCAAgC,GAAG;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,cAAc,CAAC;CAC9B,CAAC;AAGF,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;KACnD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACf,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAExB,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,IAAI,GACJ,SAAS,CAAC;AAId,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAC5E,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,UAAU,CACtC,kBAAkB,CAAC,qBAAqB,CAAC,CAC1C,CAAC,CAAC,CAAC,CAAC;AAEL,MAAM,MAAM,sBAAsB,GAAG,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-shine",
-  "version": "0.5.0",
+  "version": "0.7.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",
@@ -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",
@@ -88,9 +89,9 @@
     "react-native-wgpu": "^0.3.1",
     "react-native-worklets": "^0.5.2",
     "release-it": "^17.10.0",
-    "typegpu": "0.7.1",
+    "typegpu": "^0.8.2",
     "typescript": "^5.8.3",
-    "unplugin-typegpu": "0.2.2"
+    "unplugin-typegpu": "^0.8.0"
   },
   "peerDependencies": {
     "react": "*",
@@ -98,7 +99,7 @@
     "react-native-reanimated": "^4.1.3",
     "react-native-wgpu": "^0.3.1",
     "react-native-worklets": "^0.5.2",
-    "typegpu": "0.7.1"
+    "typegpu": "^0.8.2"
   },
   "workspaces": [
     "example"

package/src/components/Content.tsx

@@ -49,13 +49,13 @@ import type {
   ColorAttachment,
   ColorMask,
   DeepPartiallyOptional,
+  Effect,
   GlareOptions,
   PipelineAttachmentPair,
-  ReverseHoloDetectionChannelFlags,
 } from '../types/types';
 import {
-  colorMaskToTyped,
-  createColorMask,
+  colorMasksToTyped,
+  createColorMasks,
   createGlareOptions,
   createReverseHoloDetectionChannelFlags,
 } from '../types/typeUtils';
@@ -74,19 +74,28 @@ import {
   transformV2d,
   zeroV3d,
 } from '../utils/vector';
+import { baseTextureFragment } from '../shaders/fragmentShaders/baseTextureFragment';
 
 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 {
@@ -96,24 +105,28 @@ interface ContentProps extends SharedProps {
 }
 
 interface PipelineMap {
-  glare: TgpuRenderPipeline;
-  colorMask: TgpuRenderPipeline;
+  baseTexture: TgpuRenderPipeline;
+  glare: TgpuRenderPipeline | void;
+  colorMask: TgpuRenderPipeline | void;
   mask: TgpuRenderPipeline | void;
   reverseHolo: TgpuRenderPipeline | void;
   holo: TgpuRenderPipeline | 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: touchPosition,
   width,
   translateViewIn3d = false,
   style,
@@ -155,12 +168,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` },
       ],
@@ -252,18 +272,17 @@ export default function Content({
       alphaMode: 'premultiplied',
     });
 
-    const sampler = device.createSampler({
-      magFilter: 'linear',
-      minFilter: 'linear',
-      mipmapFilter: 'linear',
-    });
-
-    // TODO: revert to this one after version bump
-    // const sampler = root['~unstable'].createSampler({
+    // const sampler = device.createSampler({
     //   magFilter: 'linear',
     //   minFilter: 'linear',
     //   mipmapFilter: 'linear',
-    // }) as any as GPUSampler; //TODO: delete this cast when TgpuFixedSampler gets exposed
+    // });
+
+    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(),
@@ -287,18 +306,22 @@ 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 }]
+        ),
+        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(
@@ -307,7 +330,21 @@ export default function Content({
         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, {})
@@ -376,15 +413,21 @@ export default function Content({
         storeOp: 'store',
       };
 
-      const { glare, mask, colorMask, holo, reverseHolo } = pipelineMap;
+      const { baseTexture, glare, mask, colorMask, holo, reverseHolo } =
+        pipelineMap;
 
-      const pairs: PipelineAttachmentPair[] = [[glare, initialAttachment]];
+      const pairs: PipelineAttachmentPair[] = [
+        [baseTexture, initialAttachment],
+      ];
 
+      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]);
-      pairs.push([colorMask, loadingAttachment]);
+      if (holoEffect && holo) pairs.push([holo, loadingAttachment]);
+      if (colorMask) pairs.push([colorMask, loadingAttachment]);
 
       pairs.forEach(([pipeline, attachment]) =>
         pipeline.withColorAttachment(attachment).draw(6)
@@ -411,11 +454,11 @@ export default function Content({
     rotation,
     bufferMap,
     glareOptions,
-    colorMaskOptions,
-    addHolo,
-    addReverseHolo,
-    reverseHoloDetectionChannelOptions,
+    enableGlare,
+    highlightColors,
     pixelSize,
+    effects,
+    isHighlightInclusive,
   ]);
 
   useAnimationFrame(() => renderRef.current?.());
@@ -423,11 +466,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/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/config/debugMode.ts

@@ -1 +1,2 @@
 export const debug = false;
+export const colorMaskDebug = false;