react-native-shine 0.3.5 → 0.4.0

package/src/components/Content.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react';
-import { PixelRatio, Platform, View } from 'react-native';
+import { PixelRatio, View } from 'react-native';
 import Animated, {
   SensorType,
   type SharedValue,
@@ -26,6 +26,7 @@ import { TypedBufferMap } from '../shaders/resourceManagement/bufferManager';
 import {
   createColorMaskBindGroup,
   createGlareBindGroup,
+  createReverseHoloDetectionChannelFlagsBindGroup,
   createRotationValuesBindGroup,
 } from '../shaders/bindGroupUtils';
 import colorMaskFragment from '../shaders/fragmentShaders/colorMaskFragment';
@@ -46,11 +47,13 @@ import type {
   DeepPartiallyOptional,
   GlareOptions,
   PipelineAttachmentPair,
+  ReverseHoloDetectionChannelFlags,
 } from '../types/types';
 import {
   colorMaskToTyped,
   createColorMask,
   createGlareOptions,
+  createReverseHoloDetectionChannelFlags,
 } from '../types/typeUtils';
 import type { V2d, V3d } from '../types/vector';
 import {
@@ -75,9 +78,10 @@ export interface SharedProps {
   colorMaskOptions?: DeepPartiallyOptional<ColorMask, 'baseColor'>;
   useTouchControl?: boolean;
   touchPosition?: SharedValue<V2d>;
-  addTextureMask?: boolean;
   addReverseHolo?: boolean;
+  reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
   addHolo?: boolean;
+  translateViewIn3d?: boolean;
 }
 
 interface ContentProps extends SharedProps {
@@ -97,7 +101,7 @@ interface PipelineMap {
 export default function Content({
   addHolo,
   addReverseHolo,
-  addTextureMask,
+  reverseHoloDetectionChannelOptions,
   colorMaskOptions,
   glareOptions,
   height,
@@ -107,6 +111,7 @@ export default function Content({
   touchPosition,
   useTouchControl,
   width,
+  translateViewIn3d = false,
 }: ContentProps) {
   const { device } = root;
   const { ref, context } = useGPUContext();
@@ -146,7 +151,6 @@ export default function Content({
         { perspective: 300 },
         { rotateX: `${-rotY}deg` },
         { rotateY: `${rotX}deg` },
-        // { rotateZ: `${rotX * 5}deg` },
       ],
     };
   });
@@ -275,6 +279,18 @@ export default function Content({
     );
     const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
 
+    const reverseHoloDetectionChannelFlagsBuffer = bufferMap.addBuffer(
+      root,
+      'reverseHoloDetectionChannelFlags',
+      createReverseHoloDetectionChannelFlags(reverseHoloDetectionChannelOptions)
+    );
+    const reverseHoloDetectionChannelFlagsBindGroup =
+      createReverseHoloDetectionChannelFlagsBindGroup(
+        root,
+        reverseHoloDetectionChannelFlagsBuffer,
+        glareBuffer
+      );
+
     const pipelineMap: PipelineMap = {
       glare: attachBindGroups(
         root['~unstable']
@@ -308,7 +324,11 @@ export default function Content({
       reverseHolo: createReverseHoloPipeline(
         root,
         maskTexture,
-        [imageTextureBindGroup, rotationBindGroup, glareBindGroup],
+        [
+          imageTextureBindGroup,
+          rotationBindGroup,
+          reverseHoloDetectionChannelFlagsBindGroup,
+        ],
         sampler,
         presentationFormat
       ),
@@ -344,7 +364,7 @@ export default function Content({
 
       const pairs: PipelineAttachmentPair[] = [[glare, initialAttachment]];
 
-      if (addTextureMask && mask) pairs.push([mask, loadingAttachment]);
+      if (mask) pairs.push([mask, loadingAttachment]);
       if (addReverseHolo && reverseHolo)
         pairs.push([reverseHolo, loadingAttachment]);
       if (addHolo && holo) pairs.push([holo, loadingAttachment]);
@@ -362,6 +382,9 @@ export default function Content({
       renderPipelines();
       presentContext();
     };
+
+    // const res = tgpu.resolve({ externals: { reverseHoloFragment } });
+    // console.log('reverseHoloFragment resolve:', res);
   }, [
     device,
     context,
@@ -375,29 +398,27 @@ export default function Content({
     colorMaskOptions,
     addHolo,
     addReverseHolo,
-    addTextureMask,
+    reverseHoloDetectionChannelOptions,
     pixelSize,
   ]);
 
   useAnimationFrame(() => renderRef.current?.());
 
   return (
-    <Animated.View style={[animatedStyle]}>
-      <View
-        style={
-          [
-            // styles.container,
-            // { width, height },
-          ]
-        }
-      >
-        <Canvas
-          ref={ref}
-          style={[{ width, height }]}
-          transparent={Platform.OS === 'ios'}
-          // transparent={true}
-        />
-      </View>
-    </Animated.View>
+    <View
+      style={{
+        transform: [
+          {
+            matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1],
+          },
+        ],
+      }}
+    >
+      <Animated.View style={[translateViewIn3d && animatedStyle]}>
+        <View>
+          <Canvas ref={ref} style={[{ width, height }]} transparent={true} />
+        </View>
+      </Animated.View>
+    </View>
   );
 }

package/src/components/ShineGroup.tsx

@@ -20,7 +20,6 @@ export function ShineGroup({
   maskURI,
   touchPosition,
   useTouchControl = false,
-  addTextureMask = false,
   addHolo = false,
   addReverseHolo = false,
 }: ShineGroupProps) {
@@ -82,7 +81,6 @@ export function ShineGroup({
           maskURI={maskURI}
           touchPosition={touchPosition}
           useTouchControl={useTouchControl}
-          addTextureMask={addTextureMask}
           addReverseHolo={addReverseHolo}
           addHolo={addHolo}
         />

package/src/shaders/bindGroupLayouts.ts

@@ -47,6 +47,24 @@ export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
   mask: { uniform: colorMaskSchema },
 });
 
+export const reverseHoloDetectionChannelFlagsSchema = d.struct({
+  redChannel: d.align(16, d.f32),
+  greenChannel: d.f32,
+  blueChannel: d.f32,
+  hue: d.f32,
+  saturation: d.f32,
+  value: d.f32,
+});
+
+export type ReverseHoloDetectionChannelFlagsSchema =
+  typeof reverseHoloDetectionChannelFlagsSchema;
+
+export const reverseHoloDetectionChannelFlagsBindGroupLayout =
+  tgpu.bindGroupLayout({
+    channelFlags: { uniform: reverseHoloDetectionChannelFlagsSchema },
+    glareOptions: { uniform: glareSchema },
+  });
+
 export const bufferData = {
   rotation: {
     schema: d.vec3f,
@@ -60,6 +78,10 @@ export const bufferData = {
     schema: colorMaskSchema,
     usage: 'uniform',
   },
+  reverseHoloDetectionChannelFlags: {
+    schema: reverseHoloDetectionChannelFlagsSchema,
+    usage: 'uniform',
+  },
 } as const satisfies Record<
   string,
   { schema: ValidateBufferSchema<any>; usage: BufferUsageType }

package/src/shaders/bindGroupUtils.ts

@@ -8,6 +8,8 @@ import {
   rotationBindGroupLayout,
   type GlareSchema,
   colorMaskSchema,
+  type ReverseHoloDetectionChannelFlagsSchema,
+  reverseHoloDetectionChannelFlagsBindGroupLayout,
 } from './bindGroupLayouts';
 import type {
   GlareOptions,
@@ -70,6 +72,17 @@ export const createColorMaskBindGroup = (
     mask: buffer,
   });
 
+export const createReverseHoloDetectionChannelFlagsBindGroup = (
+  root: TgpuRoot,
+  detectionChannelBuffer: TgpuBuffer<ReverseHoloDetectionChannelFlagsSchema> &
+    UniformFlag,
+  glareOptionsBuffer: TgpuBuffer<GlareSchema> & UniformFlag
+) =>
+  root.createBindGroup(reverseHoloDetectionChannelFlagsBindGroupLayout, {
+    channelFlags: detectionChannelBuffer,
+    glareOptions: glareOptionsBuffer,
+  });
+
 // export const crateHoloBuffer = (
 //   root: TgpuRoot,
 //   initValues: Partial<HoloOptions>

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -29,7 +29,7 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   if (upperCheck && lowerCheck) {
     return d.vec4f(color.xyz, 0.0);
   }
-  return d.vec4f(1.0);
+  return d.vec4f(color.xyz, color.w);
 });
 
 export default colorMaskFragment;

package/src/shaders/fragmentShaders/holoFragment.ts

@@ -31,5 +31,5 @@ export const holoFragment = tgpu['~unstable'].fragmentFn({
   const rainbowColor = hueShift(d.vec3f(1.0, 1.0, 1.0), hueAngle);
   const finalColor = std.mul(rainbowColor, 1.0);
 
-  return d.vec4f(finalColor, 0.7 * textureColor.w);
+  return d.vec4f(finalColor, 0.9 * textureColor.w);
 });

package/src/shaders/fragmentShaders/reverseHoloFragment.ts

@@ -5,9 +5,9 @@ import {
   textureBindGroupLayout,
   maskTextureBindGroupLayout,
   rotationBindGroupLayout,
-  glareBindGroupLayout,
+  reverseHoloDetectionChannelFlagsBindGroupLayout,
 } from '../bindGroupLayouts';
-import { hueShift } from '../tgpuUtils';
+import { hueShift, rgbToHSV } from '../tgpuUtils';
 
 export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
@@ -20,13 +20,26 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   const rot = rotationBindGroupLayout.$.vec;
   const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // center from device orientation/touch
 
-  const opts = glareBindGroupLayout.$.glareOptions;
+  // glare options---------------------------------
+  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;
+  //-----------------------------------------------
+
+  // detection channel flags-----------------------
+  const detectionChannelFlags =
+    reverseHoloDetectionChannelFlagsBindGroupLayout.$.channelFlags;
+  const redChannelFlag = detectionChannelFlags.redChannel;
+  const greenChannelFlag = detectionChannelFlags.greenChannel;
+  const blueChannelFlag = detectionChannelFlags.blueChannel;
+  const hueFlag = detectionChannelFlags.hue;
+  const saturationFlag = detectionChannelFlags.saturation;
+  const valueFlag = detectionChannelFlags.value;
+  //------------------------------------------------
 
   const cardColor = std.textureSample(
     textureBindGroupLayout.$.texture,
@@ -49,9 +62,25 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   const influence = std.smoothstep(0.0, 1.0, scaledRadial);
   const curvePower = std.clamp(glowPower, 0.05, 64.0);
   const glowMask = std.pow(influence, std.div(1.0, curvePower));
+  const holoMaskColorHSV = rgbToHSV(holoMaskColor.xyz);
+
+  const rgbSelection = d.vec3f(
+    redChannelFlag,
+    greenChannelFlag,
+    blueChannelFlag
+  );
+  const channelFactor = std.dot(holoMaskColor.xyz, rgbSelection);
+
+  const hsvSelection = d.vec3f(hueFlag, saturationFlag, valueFlag);
+  const channelFactorHSV = std.dot(holoMaskColorHSV.xyz, hsvSelection);
+  //TODO: delete this combination to have separate RGB and HSV controls,
+  //      maybe add weights later or choice of combination method
+  const channelFactorCombined = std.mix(channelFactor, channelFactorHSV, 0.0);
 
   const holoFactor =
-    (1.0 - holoMaskColor.x) * holoMaskColor.w * std.pow(scaledRadial, 1.5);
+    (1.0 - channelFactorCombined) *
+    holoMaskColor.w *
+    std.pow(scaledRadial, 1.5);
 
   const maskedGlow = std.mul(glowMask, holoFactor); // only affect masked areas
 

package/src/shaders/tgpuUtils.ts

@@ -33,6 +33,46 @@ export const hueShift = tgpu.fn(
   return d.vec3f(r, g, b);
 });
 
+export const rgbToHSV = 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));
+
+  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;
+
+  return d.vec3f(hue, saturation, value);
+});
+
+export const fmod = tgpu.fn(
+  [d.f32, d.f32],
+  d.f32
+)((number, md) => {
+  const dv = std.div(number, md);
+  const val = std.mul(md, std.floor(dv));
+  const c = std.sub(number, val);
+
+  return c;
+});
+
 export const glareColorShift = tgpu.fn(
   [d.vec3f, d.f32],
   d.vec3f

package/src/types/typeUtils.ts

@@ -1,10 +1,12 @@
 import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
+import * as d from 'typegpu/data';
 import type {
   GlareOptions,
   ColorMask,
   DeepPartiallyOptional,
   vec3,
   HoloOptions,
+  ReverseHoloDetectionChannelFlags,
 } from './types';
 import { div } from 'typegpu/std';
 import { WAVE_CALLBACKS } from '../enums/waveCallback';
@@ -87,6 +89,37 @@ 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),
+    };
+  }
+
+  console.log('createReverseHoloDetectionChannelFlags:', channelFlags);
+  return channelFlags;
+};
+
 export const numberArrToTyped = (vec: number[]) => {
   let convFn: ((...args: number[]) => any) | null = null;
   switch (vec.length) {

package/src/types/types.ts

@@ -27,6 +27,15 @@ export type ColorMask = {
   };
 };
 
+export type ReverseHoloDetectionChannelFlags = {
+  redChannel: number;
+  greenChannel: number;
+  blueChannel: number;
+  hue: number;
+  saturation: number;
+  value: number;
+};
+
 export type HoloOptions = {
   intensity: number;
   waveCallback: WaveCallbackFn;