react-native-shine 0.6.0 → 0.7.0

package/src/components/Content.tsx

@@ -49,13 +49,13 @@ import type {
   ColorAttachment,
   ColorMask,
   DeepPartiallyOptional,
+  Effect,
   GlareOptions,
   PipelineAttachmentPair,
-  ReverseHoloDetectionChannelFlags,
 } from '../types/types';
 import {
-  colorMaskToTyped,
-  createColorMask,
+  colorMasksToTyped,
+  createColorMasks,
   createGlareOptions,
   createReverseHoloDetectionChannelFlags,
 } from '../types/typeUtils';
@@ -80,14 +80,22 @@ export interface SharedProps {
   width: number;
   height: number;
   glareOptions?: Partial<GlareOptions>;
-  colorMaskOptions?: DeepPartiallyOptional<ColorMask, 'baseColor'>;
-  touchPosition?: SharedValue<V2d>;
-  addReverseHolo?: boolean;
-  reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
-  addHolo?: boolean;
-  translateViewIn3d?: boolean;
+  enableGlare?: boolean;
+  highlightColors?: DeepPartiallyOptional<ColorMask, 'baseColor'>[];
+  isHighlightInclusive?: boolean;
+  lightPosition?: SharedValue<V2d>;
+  // addReverseHolo?: boolean;
+  // reverseHoloDetectionChannelOptions?: Partial<ReverseHoloDetectionChannelFlags>;
+  // addHolo?: boolean;
+  translateViewIn3d?:
+    | boolean
+    | {
+        perspective?: number;
+        intensity?: number;
+      };
   style?: ViewStyle;
   containerStyle?: ViewStyle;
+  effects?: Effect[];
 }
 
 interface ContentProps extends SharedProps {
@@ -106,16 +114,19 @@ interface PipelineMap {
 }
 
 export default function Content({
-  addHolo,
-  addReverseHolo,
-  reverseHoloDetectionChannelOptions,
-  colorMaskOptions,
+  // addHolo,
+  // addReverseHolo,
+  // reverseHoloDetectionChannelOptions,
+  effects,
+  highlightColors,
+  isHighlightInclusive = true,
   glareOptions,
+  enableGlare = true,
   height,
   imageTexture,
   maskTexture,
   root,
-  touchPosition,
+  lightPosition: touchPosition,
   width,
   translateViewIn3d = false,
   style,
@@ -157,12 +168,19 @@ export default function Content({
   );
 
   const animatedStyle = useAnimatedStyle(() => {
-    const rotX = rotation.value.x * 10;
-    const rotY = rotation.value.y * 10;
+    let perspective: number = 300;
+    let intensity: number = 10;
+    if (typeof translateViewIn3d === 'object') {
+      perspective = translateViewIn3d.perspective ?? perspective;
+      intensity = translateViewIn3d.intensity ?? intensity;
+    }
+
+    const rotX = rotation.value.x * intensity;
+    const rotY = rotation.value.y * intensity;
 
     return {
       transform: [
-        { perspective: 300 },
+        { perspective: perspective },
         { rotateX: `${-rotY}deg` },
         { rotateY: `${rotX}deg` },
       ],
@@ -288,18 +306,22 @@ export default function Content({
     const colorMaskBuffer = bufferMap.addBuffer(
       root,
       'colorMask',
-      colorMaskToTyped(
-        createColorMask(
-          colorMaskOptions ?? { baseColor: [-20, -20, -20], useHSV: false }
-        )
+      colorMasksToTyped(
+        createColorMasks(
+          highlightColors ?? [{ baseColor: [-20, -20, -20], useHSV: false }]
+        ),
+        isHighlightInclusive
       )
     );
     const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
 
+    const reverseHoloEffect = effects
+      ? effects.find((e) => e.name === 'reverseHolo')
+      : undefined;
     const reverseHoloDetectionChannelFlagsBuffer = bufferMap.addBuffer(
       root,
       'reverseHoloDetectionChannelFlags',
-      createReverseHoloDetectionChannelFlags(reverseHoloDetectionChannelOptions)
+      createReverseHoloDetectionChannelFlags(reverseHoloEffect?.options)
     );
     const reverseHoloDetectionChannelFlagsBindGroup =
       createReverseHoloDetectionChannelFlagsBindGroup(
@@ -308,6 +330,10 @@ export default function Content({
         glareBuffer
       );
 
+    const holoEffect = effects
+      ? effects.find((e) => e.name === 'holo')
+      : undefined;
+
     const pipelineMap: PipelineMap = {
       baseTexture: attachBindGroups(
         root['~unstable']
@@ -394,13 +420,13 @@ export default function Content({
         [baseTexture, initialAttachment],
       ];
 
-      if (glareOptions && glare) {
+      if ((glareOptions || !enableGlare) && glare) {
         pairs.push([glare, loadingAttachment]);
       }
       if (mask) pairs.push([mask, loadingAttachment]);
-      if (addReverseHolo && reverseHolo)
+      if (reverseHoloEffect && reverseHolo)
         pairs.push([reverseHolo, loadingAttachment]);
-      if (addHolo && holo) pairs.push([holo, loadingAttachment]);
+      if (holoEffect && holo) pairs.push([holo, loadingAttachment]);
       if (colorMask) pairs.push([colorMask, loadingAttachment]);
 
       pairs.forEach(([pipeline, attachment]) =>
@@ -428,11 +454,11 @@ export default function Content({
     rotation,
     bufferMap,
     glareOptions,
-    colorMaskOptions,
-    addHolo,
-    addReverseHolo,
-    reverseHoloDetectionChannelOptions,
+    enableGlare,
+    highlightColors,
     pixelSize,
+    effects,
+    isHighlightInclusive,
   ]);
 
   useAnimationFrame(() => renderRef.current?.());
@@ -440,11 +466,13 @@ export default function Content({
   return (
     <View
       style={{
-        transform: [
-          {
-            matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1],
-          },
-        ],
+        transform: translateViewIn3d
+          ? [
+              {
+                matrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 50, 1],
+              },
+            ]
+          : [],
         ...containerStyle,
       }}
     >

package/src/components/ShineGroup.tsx

@@ -16,11 +16,15 @@ type ShineGroupProps = PropsWithChildren<Partial<ShineProps>>;
 export function ShineGroup({
   children,
   glareOptions,
-  colorMaskOptions,
+  highlightColors,
   maskURI,
-  touchPosition,
-  addHolo = false,
-  addReverseHolo = false,
+  lightPosition: touchPosition,
+  effects,
+  enableGlare = true,
+  isHighlightInclusive = true,
+  translateViewIn3d = false,
+  containerStyle,
+  style,
 }: ShineGroupProps) {
   const viewShotRef = useRef<ViewShot>(null);
   const [capturedURI, setCapturedURI] = useState<string | null>(null);
@@ -76,11 +80,15 @@ export function ShineGroup({
           {...sizeFromV2d(size)}
           imageURI={capturedURI}
           glareOptions={glareOptions}
-          colorMaskOptions={colorMaskOptions}
+          highlightColors={highlightColors}
           maskURI={maskURI}
-          touchPosition={touchPosition}
-          addReverseHolo={addReverseHolo}
-          addHolo={addHolo}
+          lightPosition={touchPosition}
+          effects={effects}
+          translateViewIn3d={translateViewIn3d}
+          enableGlare={enableGlare}
+          containerStyle={containerStyle}
+          isHighlightInclusive={isHighlightInclusive}
+          style={style}
         />
       )}
     </View>

package/src/enums/colorHighlightPresets.ts

@@ -0,0 +1,33 @@
+import { ColorPresets } from './colorPresets';
+import { type ColorMask, type vec3 } from '../types/types';
+
+type ColorHighlightPresetMap = {
+  readonly [K in keyof typeof ColorPresets]: ColorMask;
+};
+
+export const ColorHighlightPresets = Object.fromEntries(
+  (Object.entries(ColorPresets) as [keyof typeof ColorPresets, vec3][]).map(
+    ([key, color]) => {
+      return [
+        key,
+        {
+          baseColor: color,
+          useHSV: true,
+          hueToleranceRange: { upper: 15, lower: 15 },
+        } as ColorMask,
+      ];
+    }
+  )
+) as ColorHighlightPresetMap;
+
+export const createHighlightColor = (
+  rgb: vec3,
+  useHSV: boolean = true,
+  hueToleranceRange: { upper: number; lower: number } = { upper: 15, lower: 15 }
+) => {
+  return {
+    baseColor: rgb,
+    useHSV,
+    hueToleranceRange,
+  } as ColorMask;
+};

package/src/enums/effectPresets.ts

@@ -0,0 +1,11 @@
+import type { Effect } from '../types/types';
+
+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>;

package/src/index.tsx

@@ -17,3 +17,5 @@ export type { ShineProps } from './components/Shine';
 export * from './utils/vector';
 export type { V2d, V3d } from './types/vector';
 export * from './enums/colorPresets';
+export * from './enums/effectPresets';
+export * from './enums/colorHighlightPresets';

package/src/shaders/bindGroupLayouts.ts

@@ -3,14 +3,12 @@ import * as d from 'typegpu/data';
 import type { BufferUsageType } from './resourceManagement/bufferManager';
 
 export const textureBindGroupLayout = tgpu.bindGroupLayout({
-  // texture: { texture: d.texture2d(d.f32) } //TODO: revert this change after bumping typegpu version (currently there is a bug with texture formats)
-  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  texture: { texture: d.texture2d(d.f32) },
   sampler: { sampler: 'filtering' },
 });
 
 export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
-  // texture: { texture: d.texture2d(d.f32) }, //TODO: same as above
-  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  texture: { texture: d.texture2d(d.f32) },
   sampler: { sampler: 'filtering' },
 });
 
@@ -19,10 +17,12 @@ export const rotationBindGroupLayout = tgpu.bindGroupLayout({
 });
 
 export const glareSchema = d.struct({
-  glowPower: d.f32,
-  hueShiftAngleMax: d.f32,
-  hueShiftAngleMin: d.f32,
-  hueBlendPower: d.f32,
+  glareColor: d.struct({
+    hueShiftAngleMax: d.f32,
+    hueShiftAngleMin: d.f32,
+    hueBlendPower: d.f32,
+  }),
+  glowPower: d.align(16, d.f32),
   lightIntensity: d.f32,
   glareIntensity: d.f32,
 });
@@ -33,6 +33,7 @@ export const glareBindGroupLayout = tgpu.bindGroupLayout({
   glareOptions: { uniform: glareSchema },
 });
 
+//TODO: change the buffer so it reserves memory for an array of colorMaskSchemas
 export const colorMaskSchema = d.struct({
   baseColor: d.vec3f,
   rgbToleranceRange: d.struct({
@@ -53,8 +54,18 @@ export const colorMaskSchema = d.struct({
 
 export type ColorMaskSchema = typeof colorMaskSchema;
 
+export const COLOR_MASK_MAX_COUNT = 16;
+
+export const colorMaskArraySchema = d.struct({
+  masks: d.arrayOf(colorMaskSchema, COLOR_MASK_MAX_COUNT),
+  usedMaskCount: d.i32,
+  reverseHighlight: d.i32,
+});
+
+export type ColorMaskArraySchema = typeof colorMaskArraySchema;
+
 export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
-  mask: { uniform: colorMaskSchema },
+  colorMasks: { uniform: colorMaskArraySchema },
 });
 
 export const reverseHoloDetectionChannelFlagsSchema = d.struct({
@@ -75,6 +86,11 @@ export const reverseHoloDetectionChannelFlagsBindGroupLayout =
     glareOptions: { uniform: glareSchema },
   });
 
+export type BufferSchemas =
+  | ReverseHoloDetectionChannelFlagsSchema
+  | ColorMaskSchema
+  | GlareSchema;
+
 export const bufferData = {
   rotation: {
     schema: d.vec3f,
@@ -85,7 +101,7 @@ export const bufferData = {
     usage: 'uniform',
   },
   colorMask: {
-    schema: colorMaskSchema,
+    schema: colorMaskArraySchema,
     usage: 'uniform',
   },
   reverseHoloDetectionChannelFlags: {

package/src/shaders/bindGroupUtils.ts

@@ -4,24 +4,14 @@ import {
   glareBindGroupLayout,
   glareSchema,
   colorMaskBindGroupLayout,
-  type ColorMaskSchema,
   rotationBindGroupLayout,
   type GlareSchema,
-  colorMaskSchema,
   type ReverseHoloDetectionChannelFlagsSchema,
   reverseHoloDetectionChannelFlagsBindGroupLayout,
+  type ColorMaskArraySchema,
 } from './bindGroupLayouts';
-import type {
-  GlareOptions,
-  ColorMask,
-  PartiallyOptional,
-} from '../types/types';
-import {
-  colorMaskToTyped,
-  createGlareOptions,
-  createColorMask,
-  mapToF32,
-} from '../types/typeUtils';
+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) =>
@@ -42,7 +32,10 @@ export const createGlareOptionsBuffer = (
   initValues?: Partial<GlareOptions>
 ) =>
   root
-    .createBuffer(glareSchema, mapToF32(createGlareOptions({ ...initValues })))
+    .createBuffer(
+      glareSchema,
+      glareOptionsToTyped(createGlareOptions({ ...initValues }))
+    )
     .$usage('uniform');
 
 export const createGlareBindGroup = (
@@ -53,23 +46,23 @@ export const createGlareBindGroup = (
     glareOptions: buffer,
   });
 
-export const createColorMaskBuffer = (
-  root: TgpuRoot,
-  initValues: PartiallyOptional<ColorMask, 'baseColor'>
-) =>
-  root
-    .createBuffer(
-      colorMaskSchema,
-      colorMaskToTyped(createColorMask({ ...initValues }))
-    )
-    .$usage('uniform');
+// export const createColorMaskBuffer = (
+//   root: TgpuRoot,
+//   initValues: PartiallyOptional<ColorMask, 'baseColor'>[]
+// ) =>
+//   root
+//     .createBuffer(
+//       colorMaskSchema,
+//       colorMasksToTyped(createColorMasks(initValues))
+//     )
+//     .$usage('uniform');
 
 export const createColorMaskBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<ColorMaskSchema> & UniformFlag
+  buffer: TgpuBuffer<ColorMaskArraySchema> & UniformFlag
 ) =>
   root.createBindGroup(colorMaskBindGroupLayout, {
-    mask: buffer,
+    colorMasks: buffer,
   });
 
 export const createReverseHoloDetectionChannelFlagsBindGroup = (

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -6,6 +6,7 @@ import {
   colorMaskBindGroupLayout,
 } from '../bindGroupLayouts';
 import { rgbToHSV } from '../tgpuUtils';
+import type { ColorMaskArrayShaderAssert } from '../../types/types';
 
 const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
@@ -13,72 +14,90 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
 })((input) => {
   const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
 
-  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,
     textureBindGroupLayout.$.sampler,
     texcoord
   );
+  const masks = colorMaskBindGroupLayout.$.colorMasks
+    .masks as ColorMaskArrayShaderAssert;
+  const usedMaskCount = colorMaskBindGroupLayout.$.colorMasks.usedMaskCount;
+  const reverseHighlight =
+    colorMaskBindGroupLayout.$.colorMasks.reverseHighlight;
+
+  let colorMaskDebug = d.u32(0);
+  let cumulativeMaskCheck = d.u32(0);
+  const colorHSV = rgbToHSV(color.xyz);
 
-  const maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
-  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));
-  const rgbCheck = upperCheck && lowerCheck;
+  //TODO: optimize this more
+  for (let i = 0; i < 16; i++) {
+    if (usedMaskCount <= i) break;
 
-  const maskedHSV = rgbToHSV(maskedColor);
-  const colorHSV = rgbToHSV(color.xyz);
+    const mask = masks[i];
+    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;
 
-  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 maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
+    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));
+    const rgbCheck = upperCheck && lowerCheck;
 
-  const saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
-  const saturationCheck = saturationDiff <= saturationTolerance;
+    const maskedHSV = rgbToHSV(maskedColor);
 
-  const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
-  const brightnessCheck = brightnessDiff <= brightnessTolerance;
+    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 pixelIsGray = colorHSV.y < lowSaturationThreshold;
-  const targetIsGray = maskedHSV.y < lowSaturationThreshold;
+    const saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
+    const saturationCheck = saturationDiff <= saturationTolerance;
 
-  const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
-  const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
+    const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
+    const brightnessCheck = brightnessDiff <= brightnessTolerance;
 
-  //hue is unstable when either color is gray or black (low saturation or low brightness)
-  const hueIsUnstable =
-    pixelIsGray || targetIsGray || pixelIsBlack || targetIsBlack;
+    const pixelIsGray = colorHSV.y < lowSaturationThreshold;
+    const targetIsGray = maskedHSV.y < lowSaturationThreshold;
 
-  hueCheck = std.select(hueCheck, d.bool(true), hueIsUnstable);
+    const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
+    const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
 
-  const hsvCheck = hueCheck && saturationCheck && brightnessCheck;
-  const maskCheck = std.select(rgbCheck, hsvCheck, useHSV === d.u32(1));
+    //hue is unstable when either color is gray or black (low saturation or low brightness)
+    //TODO: investigate the '||' operator usage, it seems to severely slow down the shader?
+    const hueIsUnstable =
+      pixelIsGray || targetIsGray || pixelIsBlack || targetIsBlack;
 
-  color = std.select(color, d.vec4f(color.xyz, 0.0), maskCheck);
+    hueCheck = std.select(hueCheck, d.bool(true), hueIsUnstable);
 
+    const hsvCheck = hueCheck && saturationCheck && brightnessCheck;
+    const maskCheck = std.select(rgbCheck, hsvCheck, useHSV === d.u32(1));
+    cumulativeMaskCheck = cumulativeMaskCheck + d.u32(maskCheck);
+    colorMaskDebug = colorMaskDebug + mask.debugMode;
+  }
+
+  const maskingLogic = std.select(
+    cumulativeMaskCheck > 0,
+    cumulativeMaskCheck === 0,
+    reverseHighlight === 1
+  );
+  color = std.select(color, d.vec4f(color.xyz, 0.0), maskingLogic);
   //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)
+    maskingLogic && colorMaskDebug > 0
   );
   return color;
 });

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -23,11 +23,13 @@ export const glareFragment = tgpu['~unstable'].fragmentFn({
   const glareOptions = glareBindGroupLayout.$.glareOptions;
   const glareIntensity = glareOptions.glareIntensity;
   const glowPower = glareOptions.glowPower;
-  const hueBlendPower = glareOptions.hueBlendPower;
-  const hueShiftAngleMax = glareOptions.hueShiftAngleMax;
-  const hueShiftAngleMin = glareOptions.hueShiftAngleMin;
   const lightIntensity = glareOptions.lightIntensity;
 
+  const glareColor = glareOptions.glareColor;
+  const hueBlendPower = glareColor.hueBlendPower;
+  const hueShiftAngleMax = glareColor.hueShiftAngleMax;
+  const hueShiftAngleMin = glareColor.hueShiftAngleMin;
+
   // const mask = colorMaskBindGroupLayout.$.mask;
   // const maskedColor = mask.baseColor;
   // const rgbToleranceRange = mask.rgbToleranceRange;
@@ -94,11 +96,13 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
   const opts = glareBindGroupLayout.$.glareOptions;
   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; // degrees
-  const hueShiftAngleMax = opts.hueShiftAngleMax; // degrees
   const lightIntensity = opts.lightIntensity / 1.3; // [0..∞): brightness boost of the glare/bloom
 
+  const glareColor = opts.glareColor;
+  const hueBlendPower = glareColor.hueBlendPower; // [0..1+]: how much hue-shifted color blends in
+  const hueShiftAngleMin = glareColor.hueShiftAngleMin; // degrees
+  const hueShiftAngleMax = glareColor.hueShiftAngleMax; // degrees
+
   let color = std.textureSample(
     textureBindGroupLayout.$.texture,
     textureBindGroupLayout.$.sampler,

package/src/shaders/fragmentShaders/holoFragment.ts

@@ -25,17 +25,17 @@ export const holoFragment = tgpu['~unstable'].fragmentFn({
   const waveX = wave.x;
   const waveY = wave.y;
 
-  const band = std.add(0.2 * waveX * uv.x, 2 * waveY * uv.y);
+  const band = std.add(waveX * uv.x, waveY * uv.y * 2.0);
+  // const band = waveX * uv.x;
 
   //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 frequency = d.f32(1.0);
+  const hueAngle = d.f32(180) * std.mul(band, frequency * Math.PI * rot.x);
+  const rainbowColor = hueShift(d.vec3f(uv.x, 0.0, 0.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);
 });