react-native-shine 0.4.0 → 0.5.0

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/tgpuUtils.ts

@@ -33,33 +33,50 @@ export const hueShift = tgpu.fn(
   return d.vec3f(r, g, b);
 });
 
-export const rgbToHSV = tgpu.fn(
+export const rgbToHSV = tgpu['~unstable'].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)
+  const K = d.vec4f(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  const p = std.mix(
+    d.vec4f(rgb.y, rgb.z, K.w, K.z),
+    d.vec4f(rgb.z, rgb.y, K.x, K.y),
+    std.step(rgb.z, rgb.y)
   );
-  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));
+  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)
+  );
+
+  const d_val = std.sub(q.x, std.min(q.w, q.y));
+  const epsilon = d.f32(1.0e-10);
 
-  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 h = std.abs(
+    std.add(
+      q.z,
+      std.div(std.sub(q.w, q.y), std.add(std.mul(6.0, d_val), epsilon))
+    )
+  );
+  const s = std.div(d_val, std.add(q.x, epsilon));
+  const v = q.x;
+
+  return d.vec3f(h, s, v);
+});
 
-  return d.vec3f(hue, saturation, value);
+export const hsvToRGB = tgpu['~unstable'].fn(
+  [d.vec3f],
+  d.vec3f
+)((hsv) => {
+  const K = d.vec4f(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  const p = std.abs(
+    std.sub(std.mul(std.fract(std.add(hsv.xxx, K.xxx)), 6.0), K.zzz)
+  );
+  const rgb = std.mul(
+    hsv.z,
+    std.mix(K.xxx, std.saturate(std.sub(p, K.xxx)), hsv.y)
+  );
+  return rgb;
 });
 
 export const fmod = tgpu.fn(

package/src/types/typeUtils.ts

@@ -51,16 +51,39 @@ 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,
   };
 
   return mask;
@@ -73,6 +96,15 @@ 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),
   };
   return result;
 };
@@ -116,7 +148,6 @@ export const createReverseHoloDetectionChannelFlags = (
     };
   }
 
-  console.log('createReverseHoloDetectionChannelFlags:', channelFlags);
   return channelFlags;
 };
 

package/src/types/types.ts

@@ -21,6 +21,12 @@ 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;

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 };