react-native-shine 0.4.1 → 0.6.0

package/src/enums/colorPresets.ts

@@ -0,0 +1,41 @@
+import type { vec3 } from '../types/types';
+
+export const ColorPresets = {
+  // --- Primary & Secondary ---
+  RED: [255, 0, 0], // #FF0000
+  GREEN: [0, 255, 0], // #00FF00
+  BLUE: [0, 0, 255], // #0000FF
+  YELLOW: [255, 255, 0], // #FFFF00
+  CYAN: [0, 255, 255], // #00FFFF
+  MAGENTA: [255, 0, 255], // #FF00FF
+
+  // --- Grayscale ---
+  WHITE: [255, 255, 255], // #FFFFFF
+  BLACK: [0, 0, 0], // #000000
+  GRAY: [128, 128, 128], // #808080
+  LIGHT_GRAY: [211, 211, 211], // #D3D3D3
+  DARK_GRAY: [105, 105, 105], // #696969
+
+  // --- Common Colors ---
+  ORANGE: [255, 165, 0], // #FFA500
+  PURPLE: [128, 0, 128], // #800080
+  BROWN: [165, 42, 42], // #A52A2A
+  PINK: [255, 192, 203], // #FFC0CB
+  LIME_GREEN: [50, 205, 50], // #32CD32
+  FOREST_GREEN: [34, 139, 34], // #228B22
+  OLIVE: [128, 128, 0], // #808000
+  TEAL: [0, 128, 128], // #008080
+  NAVY: [0, 0, 128], // #000080
+  ROYAL_BLUE: [65, 105, 225], // #4169E1
+  SKY_BLUE: [135, 206, 235], // #87CEEB
+  INDIGO: [75, 0, 130], // #4B0082
+  VIOLET: [238, 130, 238], // #EE82EE
+  MAROON: [128, 0, 0], // #800000
+
+  // --- Hues & Tints ---
+  GOLD: [255, 215, 0], // #FFD700
+  TOMATO: [255, 99, 71], // #FF6347
+  SALMON: [250, 128, 114], // #FA8072
+  BEIGE: [245, 245, 220], // #F5F5DC
+  POTATO: [222, 184, 135], // #DEB887
+} as const satisfies Record<string, vec3>;

package/src/enums/waveCallback.ts

@@ -3,7 +3,7 @@ import * as std from 'typegpu/std';
 import * as d from 'typegpu/data';
 
 const defaultWave = (pos: d.v2f) => {
-  'kernel';
+  'use gpu';
 
   const x = pos.x;
   const y = pos.y;

package/src/index.tsx

@@ -16,3 +16,4 @@ export { ShineGroup } from './components/ShineGroup';
 export type { ShineProps } from './components/Shine';
 export * from './utils/vector';
 export type { V2d, V3d } from './types/vector';
+export * from './enums/colorPresets';

package/src/shaders/bindGroupLayouts.ts

@@ -39,6 +39,16 @@ export const colorMaskSchema = d.struct({
     upper: d.vec3f,
     lower: d.vec3f,
   }),
+  hueToleranceRange: d.struct({
+    upper: d.f32,
+    lower: d.f32,
+  }),
+  useHSV: d.align(16, d.u32),
+  brightnessTolerance: d.f32,
+  saturationTolerance: d.f32,
+  lowSaturationThreshold: d.f32,
+  lowBrightnessThreshold: d.f32,
+  debugMode: d.u32,
 });
 
 export type ColorMaskSchema = typeof colorMaskSchema;

package/src/shaders/fragmentShaders/baseTextureFragment.ts

@@ -0,0 +1,18 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import { textureBindGroupLayout } from '../bindGroupLayouts';
+
+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;
+});

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -5,6 +5,7 @@ import {
   textureBindGroupLayout,
   colorMaskBindGroupLayout,
 } from '../bindGroupLayouts';
+import { rgbToHSV } from '../tgpuUtils';
 
 const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
@@ -15,6 +16,18 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   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,
@@ -26,10 +39,48 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   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));
-  if (upperCheck && lowerCheck) {
-    return d.vec4f(color.xyz, 0.0);
-  }
-  return d.vec4f(color.xyz, color.w);
+  const rgbCheck = upperCheck && lowerCheck;
+
+  const maskedHSV = rgbToHSV(maskedColor);
+  const colorHSV = rgbToHSV(color.xyz);
+
+  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 saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
+  const saturationCheck = saturationDiff <= saturationTolerance;
+
+  const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
+  const brightnessCheck = brightnessDiff <= brightnessTolerance;
+
+  const pixelIsGray = colorHSV.y < lowSaturationThreshold;
+  const targetIsGray = maskedHSV.y < lowSaturationThreshold;
+
+  const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
+  const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
+
+  //hue is unstable when either color is gray or black (low saturation or low brightness)
+  const hueIsUnstable =
+    pixelIsGray || targetIsGray || pixelIsBlack || targetIsBlack;
+
+  hueCheck = std.select(hueCheck, d.bool(true), hueIsUnstable);
+
+  const hsvCheck = hueCheck && saturationCheck && brightnessCheck;
+  const maskCheck = std.select(rgbCheck, hsvCheck, useHSV === d.u32(1));
+
+  color = std.select(color, d.vec4f(color.xyz, 0.0), maskCheck);
+
+  //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)
+  );
+  return color;
 });
 
 export default colorMaskFragment;

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -95,8 +95,8 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
   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; // radians
-  const hueShiftAngleMax = opts.hueShiftAngleMax; // radians
+  const hueShiftAngleMin = opts.hueShiftAngleMin; // degrees
+  const hueShiftAngleMax = opts.hueShiftAngleMax; // degrees
   const lightIntensity = opts.lightIntensity / 1.3; // [0..∞): brightness boost of the glare/bloom
 
   let color = std.textureSample(
@@ -137,7 +137,5 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
 
   const outRGB = std.clamp(finalRGB, d.vec3f(0.0), d.vec3f(1.0));
 
-  // if (maskedGlow > 0.6) return d.vec4f(0.0, 0.0, 0.0, 0.0);
-
   return d.vec4f(outRGB, color.w);
 });

package/src/shaders/fragmentShaders/holoFragment.ts

@@ -27,9 +27,15 @@ export const holoFragment = tgpu['~unstable'].fragmentFn({
 
   const band = std.add(0.2 * waveX * uv.x, 2 * waveY * uv.y);
 
-  const hueAngle = std.mul(std.abs(band), (10 * Math.PI * rot.x) / 3);
+  //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 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/resourceManagement/bitmaps.ts

@@ -1,19 +1,20 @@
 import { Asset } from 'expo-asset';
+import { debug } from '../../config/debugMode';
 
 const getBitmapFromURI = async (uri: string): Promise<ImageBitmap> => {
   if (uriToBitmapMap.has(uri)) return uriToBitmapMap.get(uri)!;
-  console.log('bitmap not found in cache, fetching from URI');
+  if (debug) console.log('bitmap not found in cache, fetching from URI');
 
   const ast = Asset.fromURI(uri);
   await ast.downloadAsync();
   const fileURI = ast.localUri || ast.uri;
 
-  console.log('fetch completed, creating ImageBitmap');
+  if (debug) console.log('fetch completed, creating ImageBitmap');
   const response = await fetch(fileURI);
   const blob = await response.blob();
   const imageBitmap = await createImageBitmap(blob);
 
-  console.log('bitmap size: ', imageBitmap);
+  if (debug) console.log('bitmap size: ', imageBitmap);
   uriToBitmapMap.set(uri, imageBitmap);
   return imageBitmap;
 };

package/src/shaders/resourceManagement/bufferManager.ts

@@ -1,4 +1,5 @@
 import type { TgpuRoot, TgpuBuffer, ValidateBufferSchema } from 'typegpu';
+import { debug } from '../../config/debugMode';
 
 export type BufferUsageType = 'uniform' | 'storage' | 'vertex';
 
@@ -49,7 +50,15 @@ export class TypedBufferMap<
 
     const { schema, usage } = entry;
     if (this.buffers[key]) {
-      console.warn(`Buffer "${String(key)}" already exists. Skipping...`);
+      if (debug) console.warn(`Buffer "${String(key)}" already exists.`);
+
+      if (initValues) {
+        (this.buffers[key] as TgpuBuffer<any>).write(initValues);
+        if (debug)
+          console.log(
+            `Buffer "${String(key)}" updated with new initial values.`
+          );
+      }
       return this.buffers[key]!;
     }
 

package/src/shaders/resourceManagement/textures.ts

@@ -7,8 +7,8 @@ export const createTexture = async (
     width: number;
     height: number;
   }
-  //TODO: check why the error message screams about 'texture_2d' and 'texture_multisampled_2d'
-): Promise<TgpuTexture> => {
+  //TODO: change any to the texture types (make a type that includes a union of all texture formats that are used)
+): Promise<TgpuTexture<any>> => {
   const texture = root['~unstable'].createTexture({
     size: [size.width, size.height, 1],
     format: 'rgba8unorm',
@@ -20,7 +20,7 @@ export const createTexture = async (
 export const loadTexture = async (
   root: TgpuRoot,
   imageBitmap: ImageBitmap,
-  texture: TgpuTexture
+  texture: TgpuTexture<any>
 ) => {
   root.device.queue.copyExternalImageToTexture(
     { source: imageBitmap },

package/src/shaders/tgpuUtils.ts

@@ -6,60 +6,72 @@ export const hueShift = tgpu.fn(
   [d.vec3f, d.f32],
   d.vec3f
 )((rgb, angle) => {
-  const yiqY = std.add(
-    std.mul(rgb.x, 0.299),
-    std.add(std.mul(rgb.y, 0.587), std.mul(rgb.z, 0.114))
-  );
-  const yiqI = std.add(
-    std.mul(rgb.x, 0.596),
-    std.sub(std.mul(rgb.y, -0.274), std.mul(rgb.z, 0.322))
+  const hsv = rgbToHSV(rgb);
+  const shiftedH = std.fract(std.add(hsv.x, angle / 360.0));
+  const shiftedRGB = hsvToRGB(d.vec3f(shiftedH, hsv.y, hsv.z));
+  return shiftedRGB;
+});
+
+export const rgbToHSV = tgpu.fn(
+  [d.vec3f],
+  d.vec3f
+)((rgb) => {
+  const K = d.vec4f(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  const p = std.mix(
+    d.vec4f(rgb.z, rgb.y, K.w, K.z),
+    d.vec4f(rgb.y, rgb.z, K.x, K.y),
+    std.step(rgb.z, rgb.y)
   );
-  const yiqQ = std.add(
-    std.mul(rgb.x, 0.211),
-    std.sub(std.mul(rgb.y, -0.523), std.mul(rgb.z, 0.311))
+  const q = std.mix(
+    d.vec4f(p.x, p.y, p.w, rgb.x),
+    d.vec4f(rgb.x, p.y, p.z, p.x),
+    std.step(p.x, rgb.x)
   );
 
-  // Rotate hue
-  const cosA = std.cos(angle);
-  const sinA = std.sin(angle);
-  const i = std.sub(std.mul(yiqI, cosA), std.mul(yiqQ, sinA));
-  const q = std.add(std.mul(yiqI, sinA), std.mul(yiqQ, cosA));
+  const v = std.max(q.x, q.y);
+  const d_val = std.sub(v, std.min(q.y, q.w));
+  const epsilon = d.f32(1.0e-10);
 
-  // Convert back to RGB
-  const r = std.add(std.add(yiqY, std.mul(i, 0.956)), std.mul(q, 0.621));
-  const g = std.add(std.add(yiqY, std.mul(i, -0.272)), std.mul(q, -0.647));
-  const b = std.add(std.add(yiqY, std.mul(i, -1.105)), std.mul(q, 1.702));
+  const h_temp = std.add(
+    q.z,
+    std.div(std.sub(q.w, q.y), std.add(std.mul(6.0, d_val), epsilon))
+  );
+  const h = std.fract(h_temp);
+  const s = std.div(d_val, std.add(v, epsilon));
 
-  return d.vec3f(r, g, b);
+  return d.vec3f(h, s, v);
 });
 
-export const rgbToHSV = tgpu.fn(
+export const hsvToRGB = tgpu.fn(
   [d.vec3f],
   d.vec3f
-)((rgb) => {
-  const cMax = std.max(std.max(rgb.x, rgb.y), rgb.z);
-  const cMin = std.min(std.min(rgb.x, rgb.y), rgb.z);
-  const delta = std.sub(cMax, cMin);
-
-  const hueDeltaZero = d.f32(0.0);
-  const hueRmax = d.f32(60.0) * fmod((rgb.y - rgb.z) / delta, d.f32(6.0));
-  const hueGmax = d.f32(60.0) * ((rgb.z - rgb.x) / delta + d.f32(2.0));
-  const hueBmax = d.f32(60.0) * ((rgb.x - rgb.y) / delta + d.f32(4.0));
-
-  let hue = std.select(
-    hueDeltaZero,
-    hueRmax,
-    cMax === rgb.x && delta !== d.f32(0.0)
-  );
-  hue = std.select(hue, hueGmax, cMax === rgb.y && delta !== d.f32(0.0));
-  hue = std.select(hue, hueBmax, cMax === rgb.z && delta !== d.f32(0.0));
-  hue = std.select(hue, d.f32(0.0), delta === d.f32(0.0));
+)((hsv) => {
+  const h = hsv.x;
+  const s = hsv.y;
+  const v = hsv.z;
+
+  // Multiply by 6.0 to convert [0,1] hue range to [0,6] sector range
+  const h2 = h * d.f32(6.0);
 
-  hue = std.mod(hue, d.f32(360.0));
-  const saturation = std.select(delta / cMax, d.f32(0.0), cMax === d.f32(0.0));
-  const value = cMax;
+  const i = std.floor(h2);
+  const f = h2 - i;
 
-  return d.vec3f(hue, saturation, value);
+  const p = v * (d.f32(1) - s);
+  const q = v * (d.f32(1) - s * f);
+  const t = v * (d.f32(1) - s * (d.f32(1) - f));
+
+  const i1 = d.f32(i === 1);
+  const i2 = d.f32(i === 2);
+  const i3 = d.f32(i === 3);
+  const i4 = d.f32(i === 4);
+  const i5 = d.f32(i === 5);
+  const i0 = d.f32(d.u32(i5 + i1 + i2 + i3 + i4) === d.u32(0)); //doesnt work, clamps on 300
+
+  const r = i0 * v + i1 * q + i2 * p + i3 * p + i4 * t + i5 * v;
+  const g = i0 * t + i1 * v + i2 * v + i3 * q + i4 * p + i5 * p;
+  const b = i0 * p + i1 * p + i2 * t + i3 * v + i4 * v + i5 * q;
+
+  return d.vec3f(r, g, b);
 });
 
 export const fmod = tgpu.fn(

package/src/types/typeUtils.ts

@@ -10,6 +10,7 @@ import type {
 } from './types';
 import { div } from 'typegpu/std';
 import { WAVE_CALLBACKS } from '../enums/waveCallback';
+import { colorMaskDebug } from '../config/debugMode';
 
 export const createGlareOptions = (
   options: Partial<GlareOptions>
@@ -51,16 +52,40 @@ export const mapToF32 = <T extends Record<string, number>>(
 export const createColorMask = (
   colorMask: DeepPartiallyOptional<ColorMask, 'baseColor'>
 ): ColorMask => {
-  const { baseColor, rgbToleranceRange } = 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 };
 
+  // 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;
@@ -73,6 +98,16 @@ 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),
+    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)),
   };
   return result;
 };
@@ -116,7 +151,6 @@ export const createReverseHoloDetectionChannelFlags = (
     };
   }
 
-  console.log('createReverseHoloDetectionChannelFlags:', channelFlags);
   return channelFlags;
 };
 

package/src/types/types.ts

@@ -21,10 +21,17 @@ export type GlareOptions = {
 
 export type ColorMask = {
   baseColor: vec3;
+  useHSV?: boolean;
+  hueToleranceRange: { upper: number; lower: number };
+  brightnessTolerance?: number;
+  lowBrightnessThreshold?: number;
+  saturationTolerance?: number;
+  lowSaturationThreshold?: number;
   rgbToleranceRange: {
     upper: vec3;
     lower: vec3;
   };
+  debugMode?: boolean;
 };
 
 export type ReverseHoloDetectionChannelFlags = {

package/src/utils/vector.ts

@@ -129,4 +129,8 @@ export function degToRad(deg: number): number {
   return (deg * Math.PI) / 180;
 }
 
+export function createV3d(x: number, y: number, z: number): V3d {
+  return { x: x, y: y, z: z };
+}
+
 export const zeroV3d = { x: 0, y: 0, z: 0 };