react-native-shine 0.5.0 → 0.7.0

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/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

@@ -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({
@@ -48,12 +49,23 @@ export const colorMaskSchema = d.struct({
   saturationTolerance: d.f32,
   lowSaturationThreshold: d.f32,
   lowBrightnessThreshold: d.f32,
+  debugMode: d.u32,
 });
 
 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({
@@ -74,6 +86,11 @@ export const reverseHoloDetectionChannelFlagsBindGroupLayout =
     glareOptions: { uniform: glareSchema },
   });
 
+export type BufferSchemas =
+  | ReverseHoloDetectionChannelFlagsSchema
+  | ColorMaskSchema
+  | GlareSchema;
+
 export const bufferData = {
   rotation: {
     schema: d.vec3f,
@@ -84,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/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

@@ -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,64 +14,91 @@ 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;
-
   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;
 
-  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 brightnessTolerance = mask.brightnessTolerance;
+    const saturationTolerance = mask.saturationTolerance;
+    const lowSaturationThreshold = mask.lowSaturationThreshold;
+    const lowBrightnessThreshold = mask.lowBrightnessThreshold;
 
-  const saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
-  const saturationCheck = saturationDiff <= saturationTolerance;
+    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 brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
-  const brightnessCheck = brightnessDiff <= brightnessTolerance;
+    const maskedHSV = rgbToHSV(maskedColor);
 
-  const pixelIsGray = colorHSV.y < lowSaturationThreshold;
-  const targetIsGray = maskedHSV.y < lowSaturationThreshold;
+    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 pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
-  const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
+    const saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
+    const saturationCheck = saturationDiff <= saturationTolerance;
 
-  //hue is unstable when either color is gray or black (low saturation or low brightness)
-  const hueIsUnstable =
-    pixelIsGray || targetIsGray || pixelIsBlack || targetIsBlack;
+    const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
+    const brightnessCheck = brightnessDiff <= brightnessTolerance;
 
-  hueCheck = std.select(hueCheck, d.bool(true), hueIsUnstable);
+    const pixelIsGray = colorHSV.y < lowSaturationThreshold;
+    const targetIsGray = maskedHSV.y < lowSaturationThreshold;
 
-  const hsvCheck = hueCheck && saturationCheck && brightnessCheck;
-  const maskCheck = std.select(rgbCheck, hsvCheck, useHSV === d.u32(1));
+    const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
+    const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
 
-  color = std.select(color, d.vec4f(color.xyz, 0.0), maskCheck);
+    //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;
+
+    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),
+    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; // radians
-  const hueShiftAngleMax = opts.hueShiftAngleMax; // radians
   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,
@@ -137,7 +141,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

@@ -25,11 +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;
 
-  const hueAngle = std.mul(std.abs(band), (10 * Math.PI * rot.x) / 3);
-  const rainbowColor = hueShift(d.vec3f(1.0, 1.0, 1.0), hueAngle);
+  //TODO: fix holo
+  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);
 });

package/src/shaders/fragmentShaders/reverseHoloFragment.ts

@@ -24,10 +24,12 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   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;
+
+  const glareColor = opts.glareColor;
+  const hueBlendPower = glareColor.hueBlendPower;
+  const hueShiftAngleMin = glareColor.hueShiftAngleMin;
+  const hueShiftAngleMax = glareColor.hueShiftAngleMax;
   //-----------------------------------------------
 
   // detection channel flags-----------------------
@@ -82,7 +84,8 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
     holoMaskColor.w *
     std.pow(scaledRadial, 1.5);
 
-  const maskedGlow = std.mul(glowMask, holoFactor); // only affect masked areas
+  // const decayedGlowMask = std.exp(1.0 - glowMask);
+  const maskedGlow = std.pow(std.mul(glowMask, holoFactor), 2.0); // only affect masked areas
 
   const hueAmount = std.mix(
     hueShiftAngleMin,
@@ -90,11 +93,13 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
     std.clamp(maskedGlow, 0.0, 1.0)
   );
   const sparkleHue = hueShift(cardColor.xyz, hueAmount);
+  const shineStrength = std.clamp(lightIntensity, 1.0, 100.0);
+  const shineIntensity = 1.5 * shineStrength * maskedGlow;
+
   const hueMixAmt = std.clamp((hueBlendPower / 5.0) * maskedGlow, 0.0, 1.0);
   const chromaMix = std.mix(cardColor.xyz, sparkleHue, hueMixAmt);
 
-  const shineStrength = std.clamp(lightIntensity, 1.0, 100.0);
-  const shineLayer = std.mul(chromaMix, 1.5 * shineStrength * maskedGlow);
+  const shineLayer = std.mul(chromaMix, shineIntensity);
 
-  return d.vec4f(shineLayer, 1 - maskedGlow);
+  return d.vec4f(d.vec3f(shineLayer), 1.0 - maskedGlow);
 });

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,41 +6,20 @@ 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 yiqQ = std.add(
-    std.mul(rgb.x, 0.211),
-    std.sub(std.mul(rgb.y, -0.523), std.mul(rgb.z, 0.311))
-  );
-
-  // 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));
-
-  // 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));
-
-  return d.vec3f(r, g, b);
+  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['~unstable'].fn(
+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.y, rgb.z, K.w, K.z),
-    d.vec4f(rgb.z, rgb.y, K.x, K.y),
+    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 q = std.mix(
@@ -49,34 +28,50 @@ export const rgbToHSV = tgpu['~unstable'].fn(
     std.step(p.x, rgb.x)
   );
 
-  const d_val = std.sub(q.x, std.min(q.w, q.y));
+  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);
 
-  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 h_temp = 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;
+  const h = std.fract(h_temp);
+  const s = std.div(d_val, std.add(v, epsilon));
 
   return d.vec3f(h, s, v);
 });
 
-export const hsvToRGB = tgpu['~unstable'].fn(
+export const hsvToRGB = tgpu.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;
+  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);
+
+  const i = std.floor(h2);
+  const f = h2 - i;
+
+  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(