react-native-shine 0.7.1 → 0.8.0

package/src/enums/effectDefaults.ts

@@ -0,0 +1,57 @@
+import type { ColorMaskPreTypedSchema } from '../types/types';
+
+export const GLARE_DEFAULTS = {
+  glowPower: 0.5,
+  glareIntensity: 0.4,
+  lightIntensity: 1.1,
+  glareColor: {
+    hueBlendPower: 1.0,
+    hueShiftAngleMin: -30,
+    hueShiftAngleMax: 30,
+  },
+} as const;
+
+export const REVERSE_HOLO_DEFAULTS = {
+  redChannel: 1.0,
+  greenChannel: 0.0,
+  blueChannel: 0.0,
+  hue: 0.0,
+  saturation: 0.0,
+  value: 0.0,
+} as const;
+
+export const HOLO_DEFAULTS = {
+  directionDegree: 45,
+  shift: 0.1,
+  rotationShiftPower: 0.6,
+  holoSize: 0.12,
+  holoMultiplier: 2.5,
+  holoEaseSize: 0.2,
+  holoVisibility: 0.88,
+  holoSaturation: 0.5,
+} as const;
+
+export const GLARE_FLARE_DEFAULTS = {
+  flareIntensity: 0.7, // Overall intensity of the flare
+  spotIntensity: 0.4, // Intensity of the central spot
+  ringIntensity: 0.1, // Intensity of the rings
+  rayIntensity: 0.8, // Intensity of the rays
+  falloff: 8.0, // Falloff factor for rings and spots
+  rayCount: 4.0, // Number of rays
+};
+
+export const COLOR_MASK_DEFAULT_OPTIONS: ColorMaskPreTypedSchema = {
+  rgbToleranceRange: {
+    upper: [20, 20, 20],
+    lower: [20, 20, 20],
+  },
+  baseColor: [0, 0, 0],
+  hueMin: 0,
+  hueMax: 360,
+  saturationMin: 0.2,
+  saturationMax: 1,
+  lightnessMin: 0.3,
+  lightnessMax: 0.9,
+  debugMode: false,
+  useHSV: 0,
+} as const;

package/src/enums/effectPresets.ts

@@ -1,11 +1,144 @@
-import type { Effect } from '../types/types';
+import {
+  precomputeColorMaskBindGroupLayout,
+  type ColorMaskArraySchema,
+} from './../shaders/bindGroupLayouts';
+import {
+  glareFlareSchema,
+  glareSchema,
+  holoSchema,
+  reverseHoloDetectionChannelFlagsSchema,
+} from '../shaders/bindGroupLayouts';
+import {
+  createGlareBindGroup,
+  createGlareFlareBindGroup,
+  createHoloBindGroup,
+  createReverseHoloDetectionChannelFlagsBindGroup,
+} from '../shaders/bindGroupUtils';
+import {
+  createEffect,
+  type DeepPartial,
+  type ExtractEffectOptions,
+  type UnwrapLayout,
+} from '../types/types';
+import { glareFragment } from '../shaders/fragmentShaders/glareFragment';
+import { reverseHoloFragment } from '../shaders/fragmentShaders/reverseHoloFragment';
+import {
+  doubleHoloFragment,
+  holoFragment,
+} from '../shaders/fragmentShaders/holoFragment';
+import { glareFlareFragment } from '../shaders/fragmentShaders/glareFlareFragment';
+import type {
+  StorageFlag,
+  TgpuBindGroup,
+  TgpuBuffer,
+  TgpuComputeFn,
+  TgpuRoot,
+  TgpuTexture,
+  UniformFlag,
+  ValidateUniformSchema,
+} from 'typegpu';
+import {
+  GLARE_DEFAULTS,
+  GLARE_FLARE_DEFAULTS,
+  HOLO_DEFAULTS,
+  REVERSE_HOLO_DEFAULTS,
+} from './effectDefaults';
+//TODO: move schema to separate object that would match them with corresponding bindGroups, then they would be defined in the effect
+
+export const blend: GPUBlendState = {
+  color: {
+    srcFactor: 'one-minus-src-alpha',
+    dstFactor: 'src-alpha',
+    operation: 'add',
+  } satisfies GPUBlendComponent,
+  alpha: {
+    srcFactor: 'one-minus-src-alpha',
+    dstFactor: 'dst-alpha',
+    operation: 'add',
+  } satisfies GPUBlendComponent,
+};
+
+const GLARE = createEffect({
+  buffers: [
+    {
+      schema: glareSchema,
+      defaultOptions: GLARE_DEFAULTS,
+    },
+  ],
+  bindGroupCreator: createGlareBindGroup,
+  fragment: glareFragment,
+});
+
+const REVERSE_HOLO = createEffect({
+  buffers: [
+    { schema: glareSchema, defaultOptions: GLARE_DEFAULTS },
+    {
+      schema: reverseHoloDetectionChannelFlagsSchema,
+      defaultOptions: REVERSE_HOLO_DEFAULTS,
+    },
+  ],
+  fragment: reverseHoloFragment,
+  bindGroupCreator: createReverseHoloDetectionChannelFlagsBindGroup,
+  blend,
+});
+
+const HOLO = createEffect({
+  fragment: holoFragment,
+  buffers: [
+    {
+      schema: holoSchema,
+      defaultOptions: HOLO_DEFAULTS,
+    },
+  ],
+  bindGroupCreator: createHoloBindGroup,
+  blend,
+});
+
+const DOUBLE_HOLO = { ...HOLO, fragment: doubleHoloFragment };
+
+const GLARE_FLARE = createEffect({
+  fragment: glareFlareFragment,
+  buffers: [
+    {
+      schema: glareFlareSchema,
+      defaultOptions: GLARE_FLARE_DEFAULTS,
+    },
+  ],
+  bindGroupCreator: createGlareFlareBindGroup,
+});
 
 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>;
+  glare: GLARE,
+  reverseHolo: REVERSE_HOLO,
+  holo: HOLO,
+  doubleHolo: DOUBLE_HOLO,
+  glareFlare: GLARE_FLARE,
+} as const; //todo: add forced typings
+
+export type Effect = {
+  [K in keyof typeof Effects]: {
+    name: K;
+    options?: DeepPartial<ExtractEffectOptions<(typeof Effects)[K]>>;
+  };
+}[keyof typeof Effects];
+export type ComputePipelineInput = {
+  compute: TgpuComputeFn;
+  buffers: {
+    schema: ValidateUniformSchema<any>;
+    defaultOptions: any;
+  }[];
+  storageTexture: TgpuTexture<{
+    format: 'rgba8unorm';
+    size: readonly number[];
+  }> &
+    StorageFlag;
+  bindGroupCreator: (
+    root: TgpuRoot,
+    storageTexture: TgpuTexture<{
+      format: 'rgba8unorm';
+      size: readonly number[];
+    }> &
+      StorageFlag,
+    colorMaskBuffer: TgpuBuffer<ColorMaskArraySchema> & UniformFlag
+  ) => TgpuBindGroup<UnwrapLayout<typeof precomputeColorMaskBindGroupLayout>>;
+};

package/src/shaders/bindGroupLayouts.ts

@@ -2,9 +2,12 @@ import tgpu, { type ValidateBufferSchema } from 'typegpu';
 import * as d from 'typegpu/data';
 import type { BufferUsageType } from './resourceManagement/bufferManager';
 
-export const textureBindGroupLayout = tgpu.bindGroupLayout({
+export const rotationSchema = d.vec3f;
+
+export const sharedBindGroupLayout = tgpu.bindGroupLayout({
   texture: { texture: d.texture2d(d.f32) },
   sampler: { sampler: 'filtering' },
+  rot: { uniform: rotationSchema },
 });
 
 export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
@@ -12,10 +15,6 @@ export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
   sampler: { sampler: 'filtering' },
 });
 
-export const rotationBindGroupLayout = tgpu.bindGroupLayout({
-  vec: { uniform: d.vec3f },
-});
-
 export const glareSchema = d.struct({
   glareColor: d.struct({
     hueShiftAngleMax: d.f32,
@@ -40,21 +39,17 @@ export const colorMaskSchema = d.struct({
     upper: d.vec3f,
     lower: d.vec3f,
   }),
-  hueToleranceRange: d.struct({
-    upper: d.f32,
-    lower: d.f32,
-  }),
+  hueStart: d.f32,
+  hueRange: d.f32,
   useHSV: d.align(16, d.u32),
-  brightnessTolerance: d.f32,
-  saturationTolerance: d.f32,
-  lowSaturationThreshold: d.f32,
-  lowBrightnessThreshold: d.f32,
+  minLimits: d.vec2f,
+  maxLimits: d.vec2f,
   debugMode: d.u32,
 });
 
-export type ColorMaskSchema = typeof colorMaskSchema;
+export type ColorMaskSchema = d.Infer<typeof colorMaskSchema>;
 
-export const COLOR_MASK_MAX_COUNT = 16;
+export const COLOR_MASK_MAX_COUNT = 8;
 
 export const colorMaskArraySchema = d.struct({
   masks: d.arrayOf(colorMaskSchema, COLOR_MASK_MAX_COUNT),
@@ -86,9 +81,54 @@ export const reverseHoloDetectionChannelFlagsBindGroupLayout =
     glareOptions: { uniform: glareSchema },
   });
 
+export const holoSchema = d.struct({
+  directionDegree: d.align(16, d.f32),
+  shift: d.f32,
+  rotationShiftPower: d.f32,
+  holoSize: d.f32,
+  holoMultiplier: d.f32,
+  holoEaseSize: d.f32,
+  holoVisibility: d.f32,
+  holoSaturation: d.f32,
+});
+
+export type HoloSchema = typeof holoSchema;
+
+export const holoBindGroupLayout = tgpu.bindGroupLayout({
+  holoOptions: { uniform: holoSchema },
+});
+
+export const glareFlareSchema = d.struct({
+  flareIntensity: d.f32,
+  spotIntensity: d.f32,
+  ringIntensity: d.f32,
+  rayIntensity: d.f32,
+  falloff: d.f32,
+  rayCount: d.f32,
+});
+
+export type glareFlareSchema = typeof glareFlareSchema;
+
+export const glareFlareBindGroupLayout = tgpu.bindGroupLayout({
+  glareFlare: { uniform: glareFlareSchema },
+});
+
+export const precomputeTextureSchema = d.textureStorage2d(
+  'rgba8unorm',
+  'read-write'
+);
+
+export type PrecomputeTextureSchema = typeof precomputeTextureSchema;
+
 export const precomputeColorMaskBindGroupLayout = tgpu.bindGroupLayout({
-  colorMaskTextureDst: {
-    storageTexture: d.textureStorage2d('rgba8unorm', 'read-write'),
+  colorMaskStorage: {
+    storageTexture: precomputeTextureSchema,
+  },
+});
+
+export const precomputeColorMaskOutputBindGroupLayout = tgpu.bindGroupLayout({
+  colorMaskOutput: {
+    texture: d.texture2d(d.f32),
   },
 });
 
@@ -121,14 +161,3 @@ export const bufferData = {
 >;
 
 export type BufferData = typeof bufferData;
-
-// export const holoSchema = d.struct({
-//   intensity: d.f32,
-//   waveCallback: WaveCallback, //TgpuFn<(uv: d.Vec2f) => d.Vec2f>,
-// });
-
-// export type holoSchema = typeof holoSchema;
-
-// export const holoBindGroupLayout = tgpu.bindGroupLayout({
-//   holoOptions: { uniform: holoSchema },
-// });

package/src/shaders/bindGroupUtils.ts

@@ -1,61 +1,53 @@
-import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
-import * as d from 'typegpu/data';
 import {
-  glareBindGroupLayout,
-  glareSchema,
+  type StorageFlag,
+  type TgpuBuffer,
+  type TgpuRoot,
+  type TgpuTexture,
+  type UniformFlag,
+} from 'typegpu';
+import {
   colorMaskBindGroupLayout,
-  rotationBindGroupLayout,
   type GlareSchema,
   type ReverseHoloDetectionChannelFlagsSchema,
   reverseHoloDetectionChannelFlagsBindGroupLayout,
   type ColorMaskArraySchema,
+  glareBindGroupLayout,
+  holoBindGroupLayout,
+  type HoloSchema,
+  glareFlareSchema,
+  glareFlareBindGroupLayout,
+  precomputeColorMaskBindGroupLayout,
 } from './bindGroupLayouts';
-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) =>
-  root
-    .createBuffer(d.vec3f, d.vec3f(...componentsFromV3d(initValues)))
-    .$usage('uniform');
-
-export const createRotationValuesBindGroup = (
-  root: TgpuRoot,
-  buffer: TgpuBuffer<d.Vec3f>
-) =>
-  root.createBindGroup(rotationBindGroupLayout, {
-    vec: root.unwrap(buffer),
-  });
-
-export const createGlareOptionsBuffer = (
-  root: TgpuRoot,
-  initValues?: Partial<GlareOptions>
-) =>
-  root
-    .createBuffer(
-      glareSchema,
-      glareOptionsToTyped(createGlareOptions({ ...initValues }))
-    )
-    .$usage('uniform');
+import type {
+  BindGroupCreatorArgument,
+  TgpuUniformBuffer,
+} from '../types/types';
 
 export const createGlareBindGroup = (
-  root: TgpuRoot,
-  buffer: TgpuBuffer<GlareSchema> & UniformFlag
-) =>
+  { root }: BindGroupCreatorArgument,
+  [buffer]: readonly [buffer: TgpuUniformBuffer<GlareSchema>]
+) => [
   root.createBindGroup(glareBindGroupLayout, {
     glareOptions: buffer,
-  });
+  }),
+];
 
-// export const createColorMaskBuffer = (
-//   root: TgpuRoot,
-//   initValues: PartiallyOptional<ColorMask, 'baseColor'>[]
-// ) =>
-//   root
-//     .createBuffer(
-//       colorMaskSchema,
-//       colorMasksToTyped(createColorMasks(initValues))
-//     )
-//     .$usage('uniform');
+export const createReverseHoloDetectionChannelFlagsBindGroup = (
+  { root, maskBindGroup }: BindGroupCreatorArgument,
+  [glareOptions, channelFlags]: readonly [
+    g: TgpuUniformBuffer<GlareSchema>,
+    f: TgpuUniformBuffer<ReverseHoloDetectionChannelFlagsSchema>,
+  ]
+) => {
+  const reverseHoloBindGroup = root.createBindGroup(
+    reverseHoloDetectionChannelFlagsBindGroupLayout,
+    {
+      channelFlags,
+      glareOptions,
+    }
+  );
+  return [reverseHoloBindGroup, maskBindGroup];
+};
 
 export const createColorMaskBindGroup = (
   root: TgpuRoot,
@@ -65,28 +57,33 @@ export const createColorMaskBindGroup = (
     colorMasks: buffer,
   });
 
-export const createReverseHoloDetectionChannelFlagsBindGroup = (
-  root: TgpuRoot,
-  detectionChannelBuffer: TgpuBuffer<ReverseHoloDetectionChannelFlagsSchema> &
-    UniformFlag,
-  glareOptionsBuffer: TgpuBuffer<GlareSchema> & UniformFlag
-) =>
-  root.createBindGroup(reverseHoloDetectionChannelFlagsBindGroupLayout, {
-    channelFlags: detectionChannelBuffer,
-    glareOptions: glareOptionsBuffer,
-  });
+export const createHoloBindGroup = (
+  { root }: BindGroupCreatorArgument,
+  [buffer]: readonly [buffer: TgpuUniformBuffer<HoloSchema>]
+) => [
+  root.createBindGroup(holoBindGroupLayout, {
+    holoOptions: buffer,
+  }),
+];
 
-// export const crateHoloBuffer = (
-//   root: TgpuRoot,
-//   initValues: Partial<HoloOptions>
-// ) => {
-//   const holoOptions: HoloOptions = createHoloOptions({ ...initValues });
-//   const holoOptionsTyped = {
-//     intensity: d.f32(holoOptions.intensity),
-//     waveCallback: holoOptions.waveCallback,
-//   };
+export const createGlareFlareBindGroup = (
+  { root }: BindGroupCreatorArgument,
+  [buffer]: readonly [buffer: TgpuUniformBuffer<glareFlareSchema>]
+) => [
+  root.createBindGroup(glareFlareBindGroupLayout, {
+    glareFlare: buffer,
+  }),
+];
 
-//   const holoBuffer = root
-//     .createBuffer(holoSchema, holoOptionsTyped)
-//     .$usage('uniform');
-// };
+export const createPrecomputeColorMaskBindGroup = (
+  root: TgpuRoot,
+  storageTexture: TgpuTexture<{
+    format: 'rgba8unorm';
+    size: readonly number[];
+  }> &
+    StorageFlag
+) => {
+  return root.createBindGroup(precomputeColorMaskBindGroupLayout, {
+    colorMaskStorage: storageTexture,
+  });
+};

package/src/shaders/colorConversions.ts

@@ -0,0 +1,88 @@
+import tgpu from 'typegpu';
+import * as std from 'typegpu/std';
+import * as d from 'typegpu/data';
+// branchless implementation
+export const RGBToHSL = tgpu.fn(
+  [d.vec3f],
+  d.vec3f
+)((rgb) => {
+  const chroma_max = std.max(rgb.x, std.max(rgb.y, rgb.z));
+  const chroma_min = std.min(rgb.x, std.min(rgb.y, rgb.z));
+  const chroma = chroma_max - chroma_min;
+  const lightness = (chroma_max + chroma_min) / 2.0;
+
+  const safe_chroma = chroma + d.f32(chroma === 0.0);
+  const saturation_denomitator = 1.0 - std.abs(2.0 * lightness - 1.0);
+  const safe_saturation_denominator =
+    saturation_denomitator + d.f32(saturation_denomitator === 0.0);
+
+  const safe_saturation = chroma / safe_saturation_denominator;
+
+  const hue_red = ((rgb.y - rgb.z) / safe_chroma) % 6;
+  const hue_green = (rgb.z - rgb.x) / safe_chroma + 2.0;
+  const hue_blue = (rgb.x - rgb.y) / safe_chroma + 4.0;
+
+  let hue_prime = hue_red;
+  hue_prime = std.select(hue_prime, hue_green, chroma_max === rgb.y);
+  hue_prime = std.select(hue_prime, hue_blue, chroma_max === rgb.z);
+
+  hue_prime = std.select(hue_prime, hue_prime + 6, hue_prime < 0);
+
+  const safe_hue = hue_prime * 60;
+  const hue = std.select(0.0, safe_hue, chroma !== 0);
+  return d.vec3f(hue, safe_saturation, lightness);
+});
+
+export const HSLToRGB = tgpu.fn(
+  [d.vec3f],
+  d.vec3f
+)((rgb) => {
+  // Your HSL values
+  const h = rgb.x;
+  const s = rgb.y;
+  const l = rgb.z;
+  // 1. Calculate Chroma (c)
+  let c = (1.0 - std.abs(2.0 * l - 1.0)) * s;
+
+  // 2. Calculate H_prime (H') and the intermediate value (x)
+  // H' is H mapped to a 0.0-6.0 range
+  let h_prime = (h / 60.0) % 6.0;
+  let x = c * (1.0 - std.abs((h_prime % 2.0) - 1.0));
+
+  // 3. Get the integer "sector" (0-5)
+  let i = std.floor(h_prime);
+
+  // 4. Find the (r', g', b') triplet using a branchless switch.
+  // We multiply each possible triplet by 1.0 if it's the right
+  // sector, or 0.0 if not, then add them all together.
+  let rgb_prime = d.vec3f(0.0);
+
+  rgb_prime = std.add(
+    rgb_prime,
+    std.mix(d.vec3f(), d.vec3f(c, x, 0.0), d.f32(i === 0.0))
+  );
+  rgb_prime = std.add(
+    rgb_prime,
+    std.mix(d.vec3f(), d.vec3f(x, c, 0.0), d.f32(i === 1.0))
+  );
+  rgb_prime = std.add(
+    rgb_prime,
+    std.mix(d.vec3f(), d.vec3f(0, c, x), d.f32(i === 2.0))
+  );
+  rgb_prime = std.add(
+    rgb_prime,
+    std.mix(d.vec3f(), d.vec3f(0, x, c), d.f32(i === 3.0))
+  );
+  rgb_prime = std.add(
+    rgb_prime,
+    std.mix(d.vec3f(), d.vec3f(x, 0, c), d.f32(i === 4.0))
+  );
+  rgb_prime = std.add(
+    rgb_prime,
+    std.mix(d.vec3f(), d.vec3f(c, 0, x), d.f32(i === 5.0))
+  );
+
+  // 5. Calculate the lightness offset (m) and add it to all components
+  let m = l - c / 2.0;
+  return std.add(rgb_prime, d.vec3f(m));
+});

package/src/shaders/computeShaders/precomputeColorMask.ts

@@ -3,7 +3,7 @@ import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
   precomputeColorMaskBindGroupLayout,
-  textureBindGroupLayout,
+  sharedBindGroupLayout,
 } from './../bindGroupLayouts';
 
 export const precomputeColorMask = tgpu['~unstable'].computeFn({
@@ -13,15 +13,15 @@ export const precomputeColorMask = tgpu['~unstable'].computeFn({
   const x = input.gid.x;
   const y = input.gid.y;
   const colorMaskStorageTexture =
-    precomputeColorMaskBindGroupLayout.$.colorMaskTextureDst;
+    precomputeColorMaskBindGroupLayout.$.colorMaskStorage;
   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,
+    sharedBindGroupLayout.$.texture,
+    sharedBindGroupLayout.$.sampler,
     uv
   );
 

package/src/shaders/fragmentShaders/baseTextureFragment.ts

@@ -1,18 +1,10 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
-import * as std from 'typegpu/std';
-import { textureBindGroupLayout } from '../bindGroupLayouts';
+import { getPixelColorFromNonReversedVector } from '../tgpuUtils';
 
 export const baseTextureFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
   out: d.vec4f,
 })((input) => {
-  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
-  let color = std.textureSample(
-    textureBindGroupLayout.$.texture,
-    textureBindGroupLayout.$.sampler,
-    texcoord
-  );
-
-  return color;
+  return getPixelColorFromNonReversedVector(input.uv);
 });