react-native-shine 0.7.0 → 0.8.0

package/src/types/typeUtils.ts

@@ -1,158 +1,70 @@
-import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
+import { vec2f, vec3f, vec4f } from 'typegpu/data';
 import * as d from 'typegpu/data';
 import type {
-  GlareOptions,
   ColorMask,
-  DeepPartiallyOptional,
   vec3,
   HoloOptions,
-  ReverseHoloDetectionChannelFlags,
+  vec2,
+  vec4,
+  ColorMaskPreTypedSchema,
 } from './types';
-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, glareColor, lightIntensity, glareIntensity } = options;
-  const { hueBlendPower, hueShiftAngleMax, hueShiftAngleMin } =
-    glareColor || {};
-
-  const glareOp = {
-    glowPower: glowPower ?? 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;
-};
+import {
+  COLOR_MASK_MAX_COUNT,
+  type ColorMaskSchema,
+} from '../shaders/bindGroupLayouts';
+import { div } from 'typegpu/std';
+import { deepMerge } from '../shaders/utils';
+import { COLOR_MASK_DEFAULT_OPTIONS } from '../enums/effectDefaults';
 
-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),
-    },
-  };
-};
+const COLOR_MASK_PLACEHOLDER = new Array(COLOR_MASK_MAX_COUNT).fill(
+  COLOR_MASK_DEFAULT_OPTIONS
+);
 
 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
-
-  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)
-  );
+  const dummyFilledArray = [
+    ...colorMasks.map((mask) => {
+      const merged = deepMerge(COLOR_MASK_DEFAULT_OPTIONS, mask);
+      if ('hueMin' in mask || 'hueMax' in mask) {
+        merged.useHSV = 1;
+      }
+      return merged;
+    }),
+    ...COLOR_MASK_PLACEHOLDER.slice(
+      0,
+      COLOR_MASK_MAX_COUNT - colorMasks.length
+    ),
+  ] as ColorMaskPreTypedSchema[];
+
   return {
-    masks: typedColorMasks,
+    masks: dummyFilledArray.map(colorMaskToTyped),
     usedMaskCount: colorMasks.length,
     reverseHighlight: reverseHighlight ? 1 : 0,
   };
 };
 
-export const colorMaskToTyped = (colorMask: ColorMask) => {
-  const result = {
+export const colorMaskToTyped = ({
+  hueMin,
+  hueMax,
+  ...colorMask
+}: ColorMaskPreTypedSchema): ColorMaskSchema => {
+  const hueRange = (hueMax - hueMin + 360) % 360;
+  return {
+    ...colorMask,
     baseColor: div(numberArrToTyped(colorMask.baseColor), 255),
     rgbToleranceRange: {
       upper: div(numberArrToTyped(colorMask.rgbToleranceRange.upper), 255),
       lower: div(numberArrToTyped(colorMask.rgbToleranceRange.lower), 255),
     },
-    useHSV: d.u32(colorMask.useHSV ? 1 : 0),
-    hueToleranceRange: {
-      lower: div(f32(colorMask.hueToleranceRange.lower), 360),
-      upper: div(f32(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)),
+    hueStart: hueMin,
+    hueRange: hueRange === 0 && hueMin !== hueMax ? 360 : hueRange,
+    minLimits: d.vec2f(colorMask.saturationMin, colorMask.lightnessMin),
+    maxLimits: d.vec2f(colorMask.saturationMax, colorMask.lightnessMax),
+    debugMode: colorMask.debugMode ? 1 : 0,
   };
-
-  return result;
 };
 
 export const createHoloOptions = (
@@ -167,38 +79,12 @@ export const createHoloOptions = (
   return holoOpt;
 };
 
-export const createReverseHoloDetectionChannelFlags = (
-  options?: Partial<ReverseHoloDetectionChannelFlags>
-) => {
-  let channelFlags;
-  if (options) {
-    const { redChannel, greenChannel, blueChannel, hue, saturation, value } =
-      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),
-    };
-  } 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),
-    };
-  }
-
-  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;
@@ -210,9 +96,12 @@ export const numberArrToTyped = (vec: number[]) => {
       convFn = vec4f;
       break;
     default:
-      throw new Error('numberArrToTyped: Vector must be of length [2-4]');
+      throw new Error(
+        'numberArrToTyped: Vector must be of length [2-4] but it was ' +
+          vec.length
+      );
   }
 
   const typed = convFn(...vec);
   return typed;
-};
+}

package/src/types/types.ts

@@ -1,80 +1,48 @@
 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;
-  };
-};
-
-export type ColorMask = {
+type BaseColorMask = { debugMode: boolean };
+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;
 };
-
-//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;
-  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;
@@ -100,8 +68,15 @@ 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;
@@ -113,3 +88,79 @@ export type ColorAttachment = Parameters<
 >[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 function createEffect<
+  const TConfig extends readonly BufferConfig<AnySchema>[],
+>(
+  definition: EffectDefinition<TConfig> & {
+    buffers: ValidateBuffers<TConfig>;
+  }
+) {
+  return definition;
+}
+
+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;