react-native-shine 0.2.2 → 0.3.1

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -0,0 +1,143 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  rotationBindGroupLayout,
+  textureBindGroupLayout,
+  glareBindGroupLayout,
+  // colorMaskBindGroupLayout,
+} from '../bindGroupLayouts';
+import { glareColorShift, hueShift, overlayChannels } from '../tgpuUtils';
+
+export const glareFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const centeredCoords = std.sub(std.mul(uv, 2.0), 1); //-1 to 1
+
+  const rot = rotationBindGroupLayout.$.vec;
+  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
+
+  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 mask = colorMaskBindGroupLayout.$.mask;
+  // const maskedColor = mask.baseColor;
+  // const rgbToleranceRange = mask.rgbToleranceRange;
+
+  let color = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  // 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));
+  // if (upperCheck && lowerCheck) {
+  //   return color;
+  // }
+
+  //glareIntensity
+  const dst = std.exp(-std.distance(center, centeredCoords));
+  const distToCenter = std.smoothstep(0.0, 1 / glareIntensity, dst);
+
+  //glowPower
+  let glow = d.vec3f(distToCenter);
+  glow = std.mul(glow, glowPower * color.w);
+
+  //hueBlend
+  const hueBlend = (d.f32(hueBlendPower) * dst) / 10.0;
+
+  //lightIntensity
+  glow = std.add(glow, lightIntensity / 10.0);
+  let shiftedRGB = glareColorShift(color.xyz, dst / (lightIntensity * 2));
+
+  //hueShiftAngleMin/Max
+  const hueShiftAngle = std.smoothstep(
+    hueShiftAngleMin,
+    hueShiftAngleMax,
+    distToCenter
+  );
+  const shiftedHue = hueShift(shiftedRGB, hueShiftAngle);
+  shiftedRGB = overlayChannels(shiftedRGB, shiftedHue);
+
+  color = d.vec4f(std.mix(color.xyz, shiftedRGB, hueBlend), color.w);
+  const baseColor = color;
+  const blendColor = glow;
+
+  const combined = overlayChannels(baseColor.xyz, blendColor);
+  color = d.vec4f(std.mix(color.xyz, combined, glow), color.w);
+
+  return color;
+});
+
+export const newGlareFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const centeredCoords = std.sub(std.mul(uv, 2.0), 1.0);
+
+  const rot = rotationBindGroupLayout.$.vec;
+  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // do not change
+
+  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
+
+  let color = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  const dist = std.distance(center, centeredCoords);
+  const radial = std.exp(-dist); // (0,1], steeper near center
+  const radialScaled = std.mul(
+    radial,
+    std.add(1.0, std.max(0.0, glareIntensity))
+  );
+  const influenceRaw = std.smoothstep(0.0, 1.0, radialScaled); // 0..1
+  const curveExp = std.clamp(glowPower, 0.05, 64.0);
+  const glowMask = std.pow(influenceRaw, std.div(1.0, curveExp)); // 0..1
+
+  const maskedGlow = std.mul(glowMask, color.w); // 0..1
+  const boostedRGB = glareColorShift(color.xyz, maskedGlow);
+
+  const hueT = std.clamp(maskedGlow, 0.0, 1.0);
+  const hueAngle = std.mix(hueShiftAngleMin, hueShiftAngleMax, hueT);
+  const hueShifted = hueShift(boostedRGB, hueAngle);
+
+  const hueMixWeight = std.clamp(
+    std.mul(hueBlendPower / 5.0, maskedGlow),
+    0.0,
+    1.0
+  );
+  const chromaMixed = std.mix(color.xyz, hueShifted, hueMixWeight);
+
+  const glareStrength = std.clamp(lightIntensity, 0.0, 100.0);
+  const glareLayer = std.mul(d.vec3f(maskedGlow), glareStrength);
+
+  const overlaidRGB = overlayChannels(chromaMixed, glareLayer);
+  const finalRGB = std.mix(chromaMixed, overlaidRGB, d.vec3f(maskedGlow));
+
+  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

@@ -0,0 +1,35 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  rotationBindGroupLayout,
+  textureBindGroupLayout,
+} from '../bindGroupLayouts';
+import { hueShift } from '../tgpuUtils';
+import { waveCallbackSlot } from '../../enums/waveCallback';
+
+export const holoFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const uv = texcoord;
+  const textureColor = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+  const rot = rotationBindGroupLayout.$.vec;
+
+  const wave = waveCallbackSlot.$(rot.xy);
+  const waveX = wave.x;
+  const waveY = wave.y;
+
+  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);
+  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);
+});

package/src/shaders/fragmentShaders/maskFragment.ts

@@ -0,0 +1,31 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  textureBindGroupLayout,
+  maskTextureBindGroupLayout,
+} from '../bindGroupLayouts';
+
+const maskFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+
+  const mask = std.textureSample(
+    maskTextureBindGroupLayout.$.texture,
+    maskTextureBindGroupLayout.$.sampler,
+    texcoord
+  );
+  const reversedMask = d.vec4f(std.sub(1.0, mask.xyz), mask.w);
+
+  let color = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  return d.vec4f(color.xyz, reversedMask.x);
+});
+
+export default maskFragment;

package/src/shaders/fragmentShaders/reverseHoloFragment.ts

@@ -0,0 +1,71 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  textureBindGroupLayout,
+  maskTextureBindGroupLayout,
+  rotationBindGroupLayout,
+  glareBindGroupLayout,
+} from '../bindGroupLayouts';
+import { hueShift } from '../tgpuUtils';
+
+export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const texcoord = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const uv = texcoord;
+  const centeredCoords = std.sub(std.mul(uv, 2.0), 1.0);
+
+  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;
+  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 cardColor = std.textureSample(
+    textureBindGroupLayout.$.texture,
+    textureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  const holoMaskColor = std.textureSample(
+    maskTextureBindGroupLayout.$.texture,
+    maskTextureBindGroupLayout.$.sampler,
+    texcoord
+  );
+
+  const dist = std.distance(centeredCoords, center);
+  const rFalloff = std.exp(-dist);
+  const scaledRadial = std.mul(
+    rFalloff,
+    std.add(1.0, std.max(0.0, glareIntensity))
+  );
+  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 holoFactor =
+    (1.0 - holoMaskColor.x) * holoMaskColor.w * std.pow(scaledRadial, 1.5);
+
+  const maskedGlow = std.mul(glowMask, holoFactor); // only affect masked areas
+
+  const hueAmount = std.mix(
+    hueShiftAngleMin,
+    hueShiftAngleMax,
+    std.clamp(maskedGlow, 0.0, 1.0)
+  );
+  const sparkleHue = hueShift(cardColor.xyz, hueAmount);
+  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);
+
+  return d.vec4f(shineLayer, 1 - maskedGlow);
+});

package/src/shaders/pipelineSetups.ts

@@ -1,34 +1,53 @@
-import type { TgpuRenderPipeline } from 'typegpu';
+import type {
+  TgpuBindGroup,
+  TgpuRenderPipeline,
+  TgpuRoot,
+  TgpuTexture,
+} from 'typegpu';
 import type { BindGroupPair } from '../types/types';
+import {
+  maskTextureBindGroupLayout,
+  textureBindGroupLayout,
+} from './bindGroupLayouts';
+import mainVertex from './vertexShaders/mainVertex';
+import maskFragment from './fragmentShaders/maskFragment';
+import { reverseHoloFragment } from './fragmentShaders/reverseHoloFragment';
+import { holoFragment } from './fragmentShaders/holoFragment';
+import {
+  WAVE_CALLBACKS,
+  waveCallbackFn,
+  waveCallbackSlot,
+} from '../enums/waveCallback';
 
 export const attachBindGroups = (
   pipeline: TgpuRenderPipeline,
-  bindGroupPairs: BindGroupPair[]
-) => {
-  for (const pair of bindGroupPairs) {
-    pipeline = pipeline.with(pair.layout, pair.group);
-  }
+  bindGroups: TgpuBindGroup[]
+) =>
+  bindGroups.reduce(
+    (acc, bindGroup) => acc.with(bindGroup.layout, bindGroup),
+    pipeline
+  );
 
-  return pipeline;
+export const blend: GPUBlendState = {
+  color: {
+    srcFactor: 'one-minus-src-alpha',
+    dstFactor: 'src-alpha',
+    operation: 'add',
+  } satisfies GPUBlendComponent,
+  alpha: {
+    srcFactor: 'one-minus-src-alpha',
+    dstFactor: 'dst-alpha',
+    operation: 'add',
+  } satisfies GPUBlendComponent,
 };
 
 export const getDefaultTarget = (
-  presentationFormat: GPUTextureFormat
+  presentationFormat: GPUTextureFormat,
+  blendMode?: GPUBlendState
 ): GPUColorTargetState => {
   return {
     format: presentationFormat,
-    blend: {
-      color: {
-        srcFactor: 'src-alpha',
-        dstFactor: 'one-minus-src-alpha',
-        operation: 'add',
-      },
-      alpha: {
-        srcFactor: 'one',
-        dstFactor: 'one-minus-src-alpha',
-        operation: 'add',
-      },
-    },
+    blend: blendMode,
   };
 };
 
@@ -42,3 +61,116 @@ export const attachBindGroupsToPass = (
 
   return pass;
 };
+
+export const createMaskPipeline = (
+  root: TgpuRoot,
+  maskTexture: TgpuTexture | undefined,
+  bindGroups: TgpuBindGroup[],
+  sampler: GPUSampler,
+  presentationFormat: GPUTextureFormat
+): TgpuRenderPipeline | void => {
+  if (!maskTexture) return;
+
+  const maskTextureBindGroup = root.createBindGroup(
+    maskTextureBindGroupLayout,
+    {
+      texture: root.unwrap(maskTexture).createView(),
+      sampler,
+    }
+  );
+  const maskBGP: TgpuBindGroup[] = [maskTextureBindGroup];
+  for (let i = 0; i < bindGroups.length; i++) {
+    maskBGP.push(bindGroups[i]!);
+  }
+  let maskPipeline = root['~unstable']
+    .withVertex(mainVertex, {})
+    .withFragment(maskFragment, getDefaultTarget(presentationFormat, blend))
+    .createPipeline();
+  maskPipeline = attachBindGroups(maskPipeline, maskBGP);
+
+  return maskPipeline;
+};
+
+export const createReverseHoloPipeline = (
+  root: TgpuRoot,
+  texture: TgpuTexture | undefined,
+  bindGroups: TgpuBindGroup[],
+  sampler: GPUSampler,
+  presentationFormat: GPUTextureFormat
+): TgpuRenderPipeline | void => {
+  if (!texture) return;
+
+  const reverseHoloBindGroup = root.createBindGroup(
+    maskTextureBindGroupLayout,
+    {
+      texture: root.unwrap(texture).createView(),
+      sampler,
+    }
+  );
+  const reverseHoloBGP: TgpuBindGroup[] = [...bindGroups, reverseHoloBindGroup];
+
+  let reverseHoloPipeline = root['~unstable']
+    .withVertex(mainVertex, {})
+    .withFragment(
+      reverseHoloFragment,
+      getDefaultTarget(presentationFormat, blend)
+    )
+    .createPipeline();
+  reverseHoloPipeline = attachBindGroups(reverseHoloPipeline, reverseHoloBGP);
+
+  return reverseHoloPipeline;
+};
+
+export const createRainbowHoloPipeline = (
+  root: TgpuRoot,
+  texture: TgpuTexture | undefined,
+  bindGroups: TgpuBindGroup[],
+  sampler: GPUSampler,
+  presentationFormat: GPUTextureFormat
+): TgpuRenderPipeline | void => {
+  if (!texture) return;
+
+  const imageTextureBindGroup = root.createBindGroup(textureBindGroupLayout, {
+    texture: root.unwrap(texture).createView(),
+    sampler,
+  });
+
+  let rainbowHoloPipeline = root['~unstable']
+    .with(waveCallbackSlot, waveCallbackFn(WAVE_CALLBACKS.default))
+    .withVertex(mainVertex, {})
+    .withFragment(holoFragment, getDefaultTarget(presentationFormat, blend))
+    .createPipeline();
+
+  rainbowHoloPipeline = attachBindGroups(rainbowHoloPipeline, [
+    ...bindGroups,
+    imageTextureBindGroup,
+  ]);
+  return rainbowHoloPipeline;
+};
+
+export function renderPipelinesInSinglePass(
+  root: TgpuRoot,
+  pipelines: TgpuRenderPipeline[],
+  view: GPUTextureView
+) {
+  const unstableRoot = root['~unstable'];
+  const attachment: GPURenderPassColorAttachment = {
+    view,
+    clearValue: [0, 0, 0, 0],
+    loadOp: 'clear',
+    storeOp: 'store',
+  };
+
+  unstableRoot.beginRenderPass(
+    {
+      colorAttachments: [attachment],
+    },
+    (pass) => {
+      for (const pipeline of pipelines) {
+        pass.setPipeline(pipeline);
+        pass.draw(6);
+      }
+    }
+  );
+  unstableRoot.flush();
+}

package/src/shaders/{resourceManagement.ts → resourceManagement/bitmaps.ts}

@@ -13,6 +13,7 @@ const getBitmapFromURI = async (uri: string): Promise<ImageBitmap> => {
   const blob = await response.blob();
   const imageBitmap = await createImageBitmap(blob);
 
+  console.log('bitmap size: ', imageBitmap);
   uriToBitmapMap.set(uri, imageBitmap);
   return imageBitmap;
 };

package/src/shaders/resourceManagement/bufferManager.ts

@@ -0,0 +1,82 @@
+import type { TgpuRoot, TgpuBuffer, ValidateBufferSchema } from 'typegpu';
+
+export type BufferUsageType = 'uniform' | 'storage' | 'vertex';
+
+type BufferWithUsageFromEntry<
+  TEntry extends { schema: ValidateBufferSchema<any>; usage: BufferUsageType },
+> = TEntry['usage'] extends 'uniform'
+  ? TgpuBuffer<TEntry['schema']> & { usableAsUniform: true }
+  : TEntry['usage'] extends 'storage'
+    ? TgpuBuffer<TEntry['schema']> & { usableAsStorage: true }
+    : TEntry['usage'] extends 'vertex'
+      ? TgpuBuffer<TEntry['schema']> & { usableAsVertex: true }
+      : never;
+
+export class TypedBufferMap<
+  TSchemas extends Record<
+    string,
+    { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+  >,
+> {
+  private buffers: {
+    [K in keyof TSchemas]?: BufferWithUsageFromEntry<TSchemas[K]>;
+  } = {};
+
+  constructor(private schemas: TSchemas) {}
+
+  set<K extends keyof TSchemas>(
+    key: K,
+    buffer: BufferWithUsageFromEntry<TSchemas[K]>
+  ): void {
+    this.buffers[key] = buffer;
+  }
+
+  get<K extends keyof TSchemas>(
+    key: K
+  ): BufferWithUsageFromEntry<TSchemas[K]> | undefined {
+    return this.buffers[key];
+  }
+
+  addBuffer<K extends keyof TSchemas>(
+    root: TgpuRoot,
+    key: K,
+    initValues?: TSchemas[K]['schema']['_TSType']
+  ): BufferWithUsageFromEntry<TSchemas[K]> {
+    const entry = this.schemas[key];
+    if (!entry) {
+      throw new Error(`No schema found for buffer key "${String(key)}"`);
+    }
+
+    const { schema, usage } = entry;
+    if (this.buffers[key]) {
+      console.warn(`Buffer "${String(key)}" already exists. Skipping...`);
+      return this.buffers[key]!;
+    }
+
+    const buffer = initValues
+      ? root.createBuffer(schema, initValues)
+      : root.createBuffer(schema);
+
+    const typedBuffer = buffer.$usage(usage) as BufferWithUsageFromEntry<
+      TSchemas[K]
+    >;
+    this.buffers[key] = typedBuffer;
+    return typedBuffer;
+  }
+
+  keys(): (keyof TSchemas)[] {
+    return Object.keys(this.buffers) as (keyof TSchemas)[];
+  }
+
+  has<K extends keyof TSchemas>(key: K): boolean {
+    return !!this.buffers[key];
+  }
+
+  delete<K extends keyof TSchemas>(key: K): void {
+    const buf = this.buffers[key];
+    if (buf) {
+      buf.destroy?.();
+      delete this.buffers[key];
+    }
+  }
+}

package/src/shaders/resourceManagement/textures.ts

@@ -0,0 +1,42 @@
+import { type TextureProps, type TgpuRoot, type TgpuTexture } from 'typegpu';
+import getBitmapFromURI from './bitmaps';
+
+export const createTexture = async (
+  root: TgpuRoot,
+  size: {
+    width: number;
+    height: number;
+  }
+): Promise<TgpuTexture> => {
+  const texture = root['~unstable']
+    .createTexture({
+      size: [size.width, size.height],
+      format: 'rgba8unorm',
+    })
+    .$usage('sampled', 'render');
+
+  return texture;
+};
+
+export const loadTexture = async (
+  root: TgpuRoot,
+  imageBitmap: ImageBitmap,
+  texture: TgpuTexture
+) => {
+  root.device.queue.copyExternalImageToTexture(
+    { source: imageBitmap },
+    { texture: root.unwrap(texture) },
+    [imageBitmap.width, imageBitmap.height]
+  );
+};
+
+export async function loadBitmap(
+  root: TgpuRoot,
+  imageURI: string,
+  setTexture: (texture: TgpuTexture<TextureProps>) => void
+) {
+  const bitmap = await getBitmapFromURI(imageURI);
+  const texture = await createTexture(root, bitmap);
+  setTexture(texture);
+  await loadTexture(root, bitmap, texture);
+}

package/src/shaders/tgpuUtils.ts

@@ -33,7 +33,7 @@ export const hueShift = tgpu.fn(
   return d.vec3f(r, g, b);
 });
 
-export const bloomColorShift = tgpu.fn(
+export const glareColorShift = tgpu.fn(
   [d.vec3f, d.f32],
   d.vec3f
 )((color, power) => {
@@ -73,3 +73,38 @@ export const overlayChannels = tgpu.fn(
     overlayChannel(base.z, blend.z)
   );
 });
+
+/** Rec.601 luma */
+export const luma601 = tgpu.fn(
+  [d.vec3f],
+  d.f32
+)((rgb) => {
+  return std.add(
+    std.mul(rgb.x, 0.299),
+    std.add(std.mul(rgb.y, 0.587), std.mul(rgb.z, 0.114))
+  );
+});
+
+export const tiltTowardsLighterNeighbor = tgpu.fn(
+  [d.vec3f, d.f32],
+  d.vec3f
+)((rgb, t) => {
+  const toYellow = d.vec3f(std.max(rgb.x, rgb.y), std.max(rgb.x, rgb.y), rgb.z);
+  const toCyan = d.vec3f(rgb.x, std.max(rgb.y, rgb.z), std.max(rgb.y, rgb.z));
+
+  const yYellow = luma601(toYellow);
+  const yCyan = luma601(toCyan);
+
+  const toColor = std.select(toCyan, toYellow, yYellow >= yCyan);
+
+  const tClamped = std.clamp(t, 0.0, 1.0);
+  return std.mix(rgb, toColor, tClamped);
+});
+
+export const linearstep = tgpu.fn(
+  [d.f32, d.f32, d.f32],
+  d.f32
+)((num1, num2, x) => {
+  const t = (x - num1) / (num2 - num1);
+  return std.clamp(t, 0, 1);
+});