react-native-shine 0.6.0 → 0.7.0

package/src/shaders/fragmentShaders/reverseHoloFragment.ts

@@ -24,10 +24,12 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   const opts = reverseHoloDetectionChannelFlagsBindGroupLayout.$.glareOptions;
   const glareIntensity = opts.glareIntensity;
   const glowPower = opts.glowPower;
-  const hueBlendPower = opts.hueBlendPower;
-  const hueShiftAngleMin = opts.hueShiftAngleMin;
-  const hueShiftAngleMax = opts.hueShiftAngleMax;
   const lightIntensity = opts.lightIntensity;
+
+  const glareColor = opts.glareColor;
+  const hueBlendPower = glareColor.hueBlendPower;
+  const hueShiftAngleMin = glareColor.hueShiftAngleMin;
+  const hueShiftAngleMax = glareColor.hueShiftAngleMax;
   //-----------------------------------------------
 
   // detection channel flags-----------------------
@@ -82,7 +84,8 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
     holoMaskColor.w *
     std.pow(scaledRadial, 1.5);
 
-  const maskedGlow = std.mul(glowMask, holoFactor); // only affect masked areas
+  // const decayedGlowMask = std.exp(1.0 - glowMask);
+  const maskedGlow = std.pow(std.mul(glowMask, holoFactor), 2.0); // only affect masked areas
 
   const hueAmount = std.mix(
     hueShiftAngleMin,
@@ -90,11 +93,13 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
     std.clamp(maskedGlow, 0.0, 1.0)
   );
   const sparkleHue = hueShift(cardColor.xyz, hueAmount);
+  const shineStrength = std.clamp(lightIntensity, 1.0, 100.0);
+  const shineIntensity = 1.5 * shineStrength * maskedGlow;
+
   const hueMixAmt = std.clamp((hueBlendPower / 5.0) * maskedGlow, 0.0, 1.0);
   const chromaMix = std.mix(cardColor.xyz, sparkleHue, hueMixAmt);
 
-  const shineStrength = std.clamp(lightIntensity, 1.0, 100.0);
-  const shineLayer = std.mul(chromaMix, 1.5 * shineStrength * maskedGlow);
+  const shineLayer = std.mul(chromaMix, shineIntensity);
 
-  return d.vec4f(shineLayer, 1 - maskedGlow);
+  return d.vec4f(d.vec3f(shineLayer), 1.0 - maskedGlow);
 });

package/src/types/typeUtils.ts

@@ -11,84 +11,126 @@ import type {
 import { div } from 'typegpu/std';
 import { WAVE_CALLBACKS } from '../enums/waveCallback';
 import { colorMaskDebug } from '../config/debugMode';
+import { COLOR_MASK_MAX_COUNT } from '../shaders/bindGroupLayouts';
 
 export const createGlareOptions = (
   options: Partial<GlareOptions>
 ): GlareOptions => {
-  const {
-    glowPower,
-    hueShiftAngleMax,
-    hueShiftAngleMin,
-    hueBlendPower,
-    lightIntensity,
-    glareIntensity,
-  } = options;
+  const { glowPower, glareColor, lightIntensity, glareIntensity } = options;
+  const { hueBlendPower, hueShiftAngleMax, hueShiftAngleMin } =
+    glareColor || {};
 
   const glareOp = {
     glowPower: glowPower ?? 1.0,
-    hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
-    hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
-    hueBlendPower: hueBlendPower ?? 1.0,
     lightIntensity: lightIntensity ?? 1.0,
     glareIntensity: glareIntensity ?? 1.0,
+    glareColor: {
+      hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
+      hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
+      hueBlendPower: hueBlendPower ?? 1.0,
+    },
   };
 
   return glareOp;
 };
 
-export const mapToF32 = <T extends Record<string, number>>(
-  obj: T
-): {
-  [K in keyof T]: ReturnType<typeof f32>;
-} => {
-  const result = {} as any;
-  for (const key in obj) {
-    result[key] = f32(obj[key]);
-  }
-
-  return result;
+export const glareOptionsToTyped = (glareOptions: GlareOptions) => {
+  return {
+    glowPower: f32(glareOptions.glowPower),
+    lightIntensity: f32(glareOptions.lightIntensity),
+    glareIntensity: f32(glareOptions.glareIntensity),
+    glareColor: {
+      hueShiftAngleMax: f32(glareOptions.glareColor.hueShiftAngleMax),
+      hueShiftAngleMin: f32(glareOptions.glareColor.hueShiftAngleMin),
+      hueBlendPower: f32(glareOptions.glareColor.hueBlendPower),
+    },
+  };
 };
 
-export const createColorMask = (
-  colorMask: DeepPartiallyOptional<ColorMask, 'baseColor'>
-): ColorMask => {
-  const {
-    baseColor,
-    rgbToleranceRange,
-    useHSV,
-    hueToleranceRange,
-    brightnessTolerance,
-    saturationTolerance,
-    lowBrightnessThreshold,
-    lowSaturationThreshold,
-  } = colorMask;
-  const baseTolerance = {
-    upper: [20, 20, 20] as vec3,
-    lower: [20, 20, 20] as vec3,
-  };
-  const baseHueTolerance = {
-    upper: 20,
-    lower: 20,
-  };
-  const tolerance = { ...baseTolerance, ...rgbToleranceRange };
-  const hueTolerance = { ...baseHueTolerance, ...hueToleranceRange };
+export const createColorMasks = (
+  colorMasks: DeepPartiallyOptional<ColorMask, 'baseColor'>[]
+): ColorMask[] => {
+  const newColorMasks: ColorMask[] = [];
+  for (const i in colorMasks) {
+    const {
+      baseColor,
+      rgbToleranceRange,
+      useHSV,
+      hueToleranceRange,
+      brightnessTolerance,
+      saturationTolerance,
+      lowBrightnessThreshold,
+      lowSaturationThreshold,
+    } = colorMasks[i]!;
+    const baseTolerance = {
+      upper: [20, 20, 20] as vec3,
+      lower: [20, 20, 20] as vec3,
+    };
+    const baseHueTolerance = {
+      upper: 20,
+      lower: 20,
+    };
+    const tolerance = { ...baseTolerance, ...rgbToleranceRange };
+    const hueTolerance = { ...baseHueTolerance, ...hueToleranceRange };
+    const newColorMask: ColorMask = {
+      baseColor: baseColor,
+      rgbToleranceRange: tolerance,
+      useHSV: useHSV!!,
+      hueToleranceRange: hueTolerance,
+      brightnessTolerance: brightnessTolerance ?? 1.0,
+      saturationTolerance: saturationTolerance ?? 1.0,
+      lowBrightnessThreshold: lowBrightnessThreshold ?? 0.0,
+      lowSaturationThreshold: lowSaturationThreshold ?? 0.0,
+      debugMode: colorMaskDebug,
+    };
+
+    newColorMasks[i] = newColorMask;
+  }
 
   // TODO: add radian and degree angle handling
   // '123deg' <- interpret as a numeric angle value
   //     2     <- interpret as a radian value
-  const mask: ColorMask = {
-    baseColor: baseColor,
-    rgbToleranceRange: tolerance,
-    useHSV: useHSV!!,
-    hueToleranceRange: hueTolerance,
-    brightnessTolerance: brightnessTolerance ?? 1.0,
-    saturationTolerance: saturationTolerance ?? 1.0,
-    lowBrightnessThreshold: lowBrightnessThreshold ?? 0.0,
-    lowSaturationThreshold: lowSaturationThreshold ?? 0.0,
-    debugMode: colorMaskDebug,
-  };
 
-  return mask;
+  return newColorMasks;
+};
+
+const fillColorMaskBufferWithDummies = (
+  colorMasks: ColorMask[]
+): ColorMask[] => {
+  const dummyFilledColorMasks = new Array(COLOR_MASK_MAX_COUNT);
+  for (let i = 0; i < dummyFilledColorMasks.length; i++) {
+    if (i < colorMasks.length) {
+      dummyFilledColorMasks[i] = colorMasks[i];
+    } else {
+      dummyFilledColorMasks[i] = {
+        baseColor: [0, 0, 0],
+        useHSV: false,
+        rgbToleranceRange: {
+          upper: [0, 0, 0],
+          lower: [0, 0, 0],
+        },
+        hueToleranceRange: {
+          upper: 0,
+          lower: 0,
+        },
+      };
+    }
+  }
+  return dummyFilledColorMasks;
+};
+
+export const colorMasksToTyped = (
+  colorMasks: ColorMask[],
+  reverseHighlight: boolean
+) => {
+  const typedColorMasks = fillColorMaskBufferWithDummies(colorMasks).map(
+    (mask) => colorMaskToTyped(mask)
+  );
+  return {
+    masks: typedColorMasks,
+    usedMaskCount: colorMasks.length,
+    reverseHighlight: reverseHighlight ? 1 : 0,
+  };
 };
 
 export const colorMaskToTyped = (colorMask: ColorMask) => {
@@ -109,6 +151,7 @@ export const colorMaskToTyped = (colorMask: ColorMask) => {
     lowBrightnessThreshold: f32(colorMask.lowBrightnessThreshold),
     debugMode: d.u32(colorMask.debugMode ? d.u32(1) : d.u32(0)),
   };
+
   return result;
 };
 

package/src/types/types.ts

@@ -12,11 +12,13 @@ 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 = {
@@ -24,8 +26,8 @@ export type ColorMask = {
   useHSV?: boolean;
   hueToleranceRange: { upper: number; lower: number };
   brightnessTolerance?: number;
-  lowBrightnessThreshold?: number;
   saturationTolerance?: number;
+  lowBrightnessThreshold?: number;
   lowSaturationThreshold?: number;
   rgbToleranceRange: {
     upper: vec3;
@@ -34,6 +36,36 @@ export type ColorMask = {
   debugMode?: boolean;
 };
 
+//TODO: figure out how to tell compiler that im sure that it's long enough ;-;
+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;