react-native-shine 0.6.0 → 0.7.1

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -6,6 +6,7 @@ import {
   colorMaskBindGroupLayout,
 } from '../bindGroupLayouts';
 import { rgbToHSV } from '../tgpuUtils';
+import type { ColorMaskArrayShaderAssert } from '../../types/types';
 
 const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
@@ -13,72 +14,90 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
 })((input) => {
   const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
 
-  const mask = colorMaskBindGroupLayout.$.mask;
-  const maskedColor = mask.baseColor;
-  const rgbToleranceRange = mask.rgbToleranceRange;
-  const useHSV = mask.useHSV;
-
-  const hueToleranceRange = mask.hueToleranceRange;
-  const hueUpper = hueToleranceRange.upper;
-  const hueLower = hueToleranceRange.lower;
-
-  const brightnessTolerance = mask.brightnessTolerance;
-  const saturationTolerance = mask.saturationTolerance;
-  const lowSaturationThreshold = mask.lowSaturationThreshold;
-  const lowBrightnessThreshold = mask.lowBrightnessThreshold;
-
-  const colorMaskDebug = mask.debugMode;
-
   let color = std.textureSample(
     textureBindGroupLayout.$.texture,
     textureBindGroupLayout.$.sampler,
     texcoord
   );
+  const masks = colorMaskBindGroupLayout.$.colorMasks
+    .masks as ColorMaskArrayShaderAssert;
+  const usedMaskCount = colorMaskBindGroupLayout.$.colorMasks.usedMaskCount;
+  const reverseHighlight =
+    colorMaskBindGroupLayout.$.colorMasks.reverseHighlight;
+
+  let colorMaskDebug = d.u32(0);
+  let cumulativeMaskCheck = d.u32(0);
+  const colorHSV = rgbToHSV(color.xyz);
 
-  const maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
-  const maskedColorUpper = std.add(maskedColor, rgbToleranceRange.upper);
-  const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
-  const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
-  const rgbCheck = upperCheck && lowerCheck;
+  //TODO: optimize this more
+  for (let i = 0; i < 16; i++) {
+    if (usedMaskCount <= i) break;
 
-  const maskedHSV = rgbToHSV(maskedColor);
-  const colorHSV = rgbToHSV(color.xyz);
+    const mask = masks[i];
+    const maskedColor = mask.baseColor;
+    const rgbToleranceRange = mask.rgbToleranceRange;
+    const useHSV = mask.useHSV;
+
+    const hueToleranceRange = mask.hueToleranceRange;
+    const hueUpper = hueToleranceRange.upper;
+    const hueLower = hueToleranceRange.lower;
+
+    const brightnessTolerance = mask.brightnessTolerance;
+    const saturationTolerance = mask.saturationTolerance;
+    const lowSaturationThreshold = mask.lowSaturationThreshold;
+    const lowBrightnessThreshold = mask.lowBrightnessThreshold;
 
-  let hueDiff = std.sub(colorHSV.x, maskedHSV.x);
-  hueDiff = std.select(hueDiff, std.sub(hueDiff, 1.0), hueDiff > d.f32(0.5));
-  hueDiff = std.select(hueDiff, std.add(hueDiff, 1.0), hueDiff < d.f32(-0.5));
-  const lowerHueCheck = hueDiff >= -hueLower;
-  const upperHueCheck = hueDiff <= hueUpper;
-  let hueCheck = lowerHueCheck && upperHueCheck;
+    const maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
+    const maskedColorUpper = std.add(maskedColor, rgbToleranceRange.upper);
+    const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
+    const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
+    const rgbCheck = upperCheck && lowerCheck;
 
-  const saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
-  const saturationCheck = saturationDiff <= saturationTolerance;
+    const maskedHSV = rgbToHSV(maskedColor);
 
-  const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
-  const brightnessCheck = brightnessDiff <= brightnessTolerance;
+    let hueDiff = std.sub(colorHSV.x, maskedHSV.x);
+    hueDiff = std.select(hueDiff, std.sub(hueDiff, 1.0), hueDiff > d.f32(0.5));
+    hueDiff = std.select(hueDiff, std.add(hueDiff, 1.0), hueDiff < d.f32(-0.5));
+    const lowerHueCheck = hueDiff >= -hueLower;
+    const upperHueCheck = hueDiff <= hueUpper;
+    let hueCheck = lowerHueCheck && upperHueCheck;
 
-  const pixelIsGray = colorHSV.y < lowSaturationThreshold;
-  const targetIsGray = maskedHSV.y < lowSaturationThreshold;
+    const saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
+    const saturationCheck = saturationDiff <= saturationTolerance;
 
-  const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
-  const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
+    const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
+    const brightnessCheck = brightnessDiff <= brightnessTolerance;
 
-  //hue is unstable when either color is gray or black (low saturation or low brightness)
-  const hueIsUnstable =
-    pixelIsGray || targetIsGray || pixelIsBlack || targetIsBlack;
+    const pixelIsGray = colorHSV.y < lowSaturationThreshold;
+    const targetIsGray = maskedHSV.y < lowSaturationThreshold;
 
-  hueCheck = std.select(hueCheck, d.bool(true), hueIsUnstable);
+    const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
+    const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
 
-  const hsvCheck = hueCheck && saturationCheck && brightnessCheck;
-  const maskCheck = std.select(rgbCheck, hsvCheck, useHSV === d.u32(1));
+    //hue is unstable when either color is gray or black (low saturation or low brightness)
+    //TODO: investigate the '||' operator usage, it seems to severely slow down the shader?
+    const hueIsUnstable =
+      pixelIsGray || targetIsGray || pixelIsBlack || targetIsBlack;
 
-  color = std.select(color, d.vec4f(color.xyz, 0.0), maskCheck);
+    hueCheck = std.select(hueCheck, d.bool(true), hueIsUnstable);
 
+    const hsvCheck = hueCheck && saturationCheck && brightnessCheck;
+    const maskCheck = std.select(rgbCheck, hsvCheck, useHSV === d.u32(1));
+    cumulativeMaskCheck = cumulativeMaskCheck + d.u32(maskCheck);
+    colorMaskDebug = colorMaskDebug + mask.debugMode;
+  }
+
+  const maskingLogic = std.select(
+    cumulativeMaskCheck > 0,
+    cumulativeMaskCheck === 0,
+    reverseHighlight === 1
+  );
+  color = std.select(color, d.vec4f(color.xyz, 0.0), maskingLogic);
   //debug - shows masked areas coloring them red
   color = std.select(
     color,
     d.vec4f(1.0, 0.0, 0.0, 0.0),
-    maskCheck && colorMaskDebug === d.u32(1)
+    maskingLogic && colorMaskDebug > 0
   );
   return color;
 });

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -23,11 +23,13 @@ export const glareFragment = tgpu['~unstable'].fragmentFn({
   const glareOptions = glareBindGroupLayout.$.glareOptions;
   const glareIntensity = glareOptions.glareIntensity;
   const glowPower = glareOptions.glowPower;
-  const hueBlendPower = glareOptions.hueBlendPower;
-  const hueShiftAngleMax = glareOptions.hueShiftAngleMax;
-  const hueShiftAngleMin = glareOptions.hueShiftAngleMin;
   const lightIntensity = glareOptions.lightIntensity;
 
+  const glareColor = glareOptions.glareColor;
+  const hueBlendPower = glareColor.hueBlendPower;
+  const hueShiftAngleMax = glareColor.hueShiftAngleMax;
+  const hueShiftAngleMin = glareColor.hueShiftAngleMin;
+
   // const mask = colorMaskBindGroupLayout.$.mask;
   // const maskedColor = mask.baseColor;
   // const rgbToleranceRange = mask.rgbToleranceRange;
@@ -94,11 +96,13 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
   const opts = glareBindGroupLayout.$.glareOptions;
   const glareIntensity = opts.glareIntensity; // [0..∞): bigger → wider/stronger area
   const glowPower = opts.glowPower; // (0..∞): curve shaping; bigger → softer/wider glow
-  const hueBlendPower = opts.hueBlendPower; // [0..1+]: how much hue-shifted color blends in
-  const hueShiftAngleMin = opts.hueShiftAngleMin; // degrees
-  const hueShiftAngleMax = opts.hueShiftAngleMax; // degrees
   const lightIntensity = opts.lightIntensity / 1.3; // [0..∞): brightness boost of the glare/bloom
 
+  const glareColor = opts.glareColor;
+  const hueBlendPower = glareColor.hueBlendPower; // [0..1+]: how much hue-shifted color blends in
+  const hueShiftAngleMin = glareColor.hueShiftAngleMin; // degrees
+  const hueShiftAngleMax = glareColor.hueShiftAngleMax; // degrees
+
   let color = std.textureSample(
     textureBindGroupLayout.$.texture,
     textureBindGroupLayout.$.sampler,

package/src/shaders/fragmentShaders/holoFragment.ts

@@ -25,17 +25,17 @@ export const holoFragment = tgpu['~unstable'].fragmentFn({
   const waveX = wave.x;
   const waveY = wave.y;
 
-  const band = std.add(0.2 * waveX * uv.x, 2 * waveY * uv.y);
+  const band = std.add(waveX * uv.x, waveY * uv.y * 2.0);
+  // const band = waveX * uv.x;
 
   //TODO: fix holo
-  const hueAngle =
-    d.f32(180) * std.mul(std.abs(band), (10 * Math.PI * rot.x) / 3);
-  const rainbowColor = hueShift(d.vec3f(1.0, 1.0, 1.0), hueAngle);
+  const frequency = d.f32(1.0);
+  const hueAngle = d.f32(180) * std.mul(band, frequency * Math.PI * rot.x);
+  const rainbowColor = hueShift(d.vec3f(uv.x, 0.0, 0.0), hueAngle);
   const finalColor = std.mul(rainbowColor, 1.0);
 
   // console.log('\ncurrentColor = (', rainbowColor.xyz, ')');
   // console.log('hueAngle = ', hueAngle);
   // console.clear();
-
   return d.vec4f(finalColor, 0.9 * textureColor.w);
 });

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/shaders/pipelineSetups.ts

@@ -1,5 +1,6 @@
 import type {
   TgpuBindGroup,
+  TgpuComputePipeline,
   TgpuRenderPipeline,
   TgpuRoot,
   TgpuTexture,
@@ -19,14 +20,22 @@ import {
   waveCallbackSlot,
 } from '../enums/waveCallback';
 
-export const attachBindGroups = (
+export function attachBindGroups(
   pipeline: TgpuRenderPipeline,
   bindGroups: TgpuBindGroup[]
-) =>
-  bindGroups.reduce(
-    (acc, bindGroup) => acc.with(bindGroup.layout, bindGroup),
-    pipeline
-  );
+): TgpuRenderPipeline;
+
+export function attachBindGroups(
+  pipeline: TgpuComputePipeline,
+  bindGroups: TgpuBindGroup[]
+): TgpuComputePipeline;
+
+export function attachBindGroups(
+  pipeline: TgpuRenderPipeline | TgpuComputePipeline,
+  bindGroups: TgpuBindGroup[]
+) {
+  return bindGroups.reduce((acc, bindGroup) => acc.with(bindGroup), pipeline);
+}
 
 export const blend: GPUBlendState = {
   color: {

package/src/shaders/resourceManagement/bufferManager.ts

@@ -1,10 +1,15 @@
+import { type BufferSchemas } from './../bindGroupLayouts';
 import type { TgpuRoot, TgpuBuffer, ValidateBufferSchema } from 'typegpu';
 import { debug } from '../../config/debugMode';
+import type { Infer } from 'typegpu/data';
 
 export type BufferUsageType = 'uniform' | 'storage' | 'vertex';
 
 type BufferWithUsageFromEntry<
-  TEntry extends { schema: ValidateBufferSchema<any>; usage: BufferUsageType },
+  TEntry extends {
+    schema: ValidateBufferSchema<BufferSchemas>;
+    usage: BufferUsageType;
+  },
 > = TEntry['usage'] extends 'uniform'
   ? TgpuBuffer<TEntry['schema']> & { usableAsUniform: true }
   : TEntry['usage'] extends 'storage'
@@ -16,7 +21,7 @@ type BufferWithUsageFromEntry<
 export class TypedBufferMap<
   TSchemas extends Record<
     string,
-    { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+    { schema: ValidateBufferSchema<BufferSchemas>; usage: BufferUsageType }
   >,
 > {
   private buffers: {
@@ -41,7 +46,7 @@ export class TypedBufferMap<
   addBuffer<K extends keyof TSchemas>(
     root: TgpuRoot,
     key: K,
-    initValues?: TSchemas[K]['schema']['_TSType']
+    initValues?: Infer<TSchemas[K]['schema']>
   ): BufferWithUsageFromEntry<TSchemas[K]> {
     const entry = this.schemas[key];
     if (!entry) {

package/src/types/typeUtils.ts

@@ -1,4 +1,4 @@
-import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
+import { vec2f, vec3f, vec4f } from 'typegpu/data';
 import * as d from 'typegpu/data';
 import type {
   GlareOptions,
@@ -7,88 +7,135 @@ import type {
   vec3,
   HoloOptions,
   ReverseHoloDetectionChannelFlags,
+  vec2,
+  vec4,
 } from './types';
 import { div } from 'typegpu/std';
 import { WAVE_CALLBACKS } from '../enums/waveCallback';
 import { colorMaskDebug } from '../config/debugMode';
+import {
+  COLOR_MASK_MAX_COUNT,
+  type ColorMaskSchema,
+} 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: glareOptions.glowPower,
+    lightIntensity: glareOptions.lightIntensity,
+    glareIntensity: glareOptions.glareIntensity,
+    glareColor: {
+      hueShiftAngleMax: glareOptions.glareColor.hueShiftAngleMax,
+      hueShiftAngleMin: glareOptions.glareColor.hueShiftAngleMin,
+      hueBlendPower: 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) => {
@@ -98,17 +145,18 @@ export const colorMaskToTyped = (colorMask: ColorMask) => {
       upper: div(numberArrToTyped(colorMask.rgbToleranceRange.upper), 255),
       lower: div(numberArrToTyped(colorMask.rgbToleranceRange.lower), 255),
     },
-    useHSV: d.u32(colorMask.useHSV ? 1 : 0),
+    useHSV: colorMask.useHSV ? 1 : 0,
     hueToleranceRange: {
-      lower: div(f32(colorMask.hueToleranceRange.lower), 360),
-      upper: div(f32(colorMask.hueToleranceRange.upper), 360),
+      lower: div(colorMask.hueToleranceRange.lower, 360),
+      upper: div(colorMask.hueToleranceRange.upper, 360),
     },
-    brightnessTolerance: f32(colorMask.brightnessTolerance),
-    saturationTolerance: f32(colorMask.saturationTolerance),
-    lowSaturationThreshold: f32(colorMask.lowSaturationThreshold),
-    lowBrightnessThreshold: f32(colorMask.lowBrightnessThreshold),
-    debugMode: d.u32(colorMask.debugMode ? d.u32(1) : d.u32(0)),
-  };
+    brightnessTolerance: colorMask.brightnessTolerance,
+    saturationTolerance: colorMask.saturationTolerance,
+    lowSaturationThreshold: colorMask.lowSaturationThreshold,
+    lowBrightnessThreshold: colorMask.lowBrightnessThreshold,
+    debugMode: colorMask.debugMode ? 1 : 0,
+  } as d.Infer<ColorMaskSchema>;
+
   return result;
 };
 
@@ -133,29 +181,33 @@ export const createReverseHoloDetectionChannelFlags = (
       options;
 
     channelFlags = {
-      redChannel: redChannel ?? d.f32(0.0),
-      greenChannel: greenChannel ?? d.f32(0.0),
-      blueChannel: blueChannel ?? d.f32(0.0),
-      hue: hue ?? d.f32(0.0),
-      saturation: saturation ?? d.f32(0.0),
-      value: value ?? d.f32(0.0),
+      redChannel: redChannel ?? 0.0,
+      greenChannel: greenChannel ?? 0.0,
+      blueChannel: blueChannel ?? 0.0,
+      hue: hue ?? 0.0,
+      saturation: saturation ?? 0.0,
+      value: value ?? 0.0,
     };
   } else {
     channelFlags = {
-      redChannel: d.f32(1.0),
-      greenChannel: d.f32(0.0),
-      blueChannel: d.f32(0.0),
-      hue: d.f32(0.0),
-      saturation: d.f32(0.0),
-      value: d.f32(0.0),
+      redChannel: 1.0,
+      greenChannel: 0.0,
+      blueChannel: 0.0,
+      hue: 0.0,
+      saturation: 0.0,
+      value: 0.0,
     };
   }
 
   return channelFlags;
 };
 
-export const numberArrToTyped = (vec: number[]) => {
-  let convFn: ((...args: number[]) => any) | null = null;
+export function numberArrToTyped(vec: vec2): d.v2f;
+export function numberArrToTyped(vec: vec3): d.v3f;
+export function numberArrToTyped(vec: vec4): d.v4f;
+export function numberArrToTyped(vec: number[]): d.v2f | d.v3f | d.v4f;
+export function numberArrToTyped(vec: number[]) {
+  let convFn: ((...args: number[]) => d.v2f | d.v3f | d.v4f) | null = null;
   switch (vec.length) {
     case 2:
       convFn = vec2f;
@@ -172,4 +224,4 @@ export const numberArrToTyped = (vec: number[]) => {
 
   const typed = convFn(...vec);
   return typed;
-};
+}

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;