react-native-shine 0.7.1 → 0.8.0

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -2,50 +2,37 @@ import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
-  textureBindGroupLayout,
+  COLOR_MASK_MAX_COUNT,
   colorMaskBindGroupLayout,
+  type ColorMaskSchema,
+  // sharedBindGroupLayout,
+  // precomputeColorMaskOutputBindGroupLayout,
 } from '../bindGroupLayouts';
-import { rgbToHSV } from '../tgpuUtils';
-import type { ColorMaskArrayShaderAssert } from '../../types/types';
+import { getPixelColorFromNonReversedVector } from '../tgpuUtils';
+import { RGBToHSL } from '../colorConversions';
 
 const colorMaskFragment = 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 = getPixelColorFromNonReversedVector(input.uv);
 
-  let color = std.textureSample(
-    textureBindGroupLayout.$.texture,
-    textureBindGroupLayout.$.sampler,
-    texcoord
-  );
-  const masks = colorMaskBindGroupLayout.$.colorMasks
-    .masks as ColorMaskArrayShaderAssert;
+  const masks = colorMaskBindGroupLayout.$.colorMasks.masks;
   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 colorHSL = RGBToHSL(color.xyz);
 
   //TODO: optimize this more
-  for (let i = 0; i < 16; i++) {
+  for (let i = 0; i < COLOR_MASK_MAX_COUNT; i++) {
     if (usedMaskCount <= i) break;
 
-    const mask = masks[i];
+    const mask = masks[i] as ColorMaskSchema;
     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 maskedColorLower = std.sub(maskedColor, rgbToleranceRange.lower);
     const maskedColorUpper = std.add(maskedColor, rgbToleranceRange.upper);
@@ -53,37 +40,29 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
     const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
     const rgbCheck = upperCheck && lowerCheck;
 
-    const maskedHSV = rgbToHSV(maskedColor);
-
-    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 saturationDiff = std.abs(std.sub(colorHSV.y, maskedHSV.y));
-    const saturationCheck = saturationDiff <= saturationTolerance;
-
-    const brightnessDiff = std.abs(std.sub(colorHSV.z, maskedHSV.z));
-    const brightnessCheck = brightnessDiff <= brightnessTolerance;
-
-    const pixelIsGray = colorHSV.y < lowSaturationThreshold;
-    const targetIsGray = maskedHSV.y < lowSaturationThreshold;
-
-    const pixelIsBlack = colorHSV.z < lowBrightnessThreshold;
-    const targetIsBlack = maskedHSV.z < lowBrightnessThreshold;
-
-    //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);
+    const saturationAndLightness = colorHSL.yz;
+    const hueStart = mask.hueStart;
+    const hueDiff = colorHSL.x - hueStart;
+    const distance = std.mod(std.add(hueDiff, 360), 360);
+    const hueCheck = std.step(distance, mask.hueRange);
+
+    // step(min, val) -> returns 1.0, if val >= min
+    // step(val, max) -> returns 1.0, if max >= val
+    const checkVec = std.mul(
+      std.step(mask.minLimits, saturationAndLightness),
+      std.step(saturationAndLightness, mask.maxLimits)
+    );
+
+    const saturationAndLightnessMask = std.mul(checkVec.x, checkVec.y);
+
+    const hslCheck = std.mul(hueCheck, saturationAndLightnessMask);
+
+    const maskCheck = std.select(
+      d.u32(rgbCheck),
+      hslCheck,
+      mask.useHSV === d.u32(1)
+    );
+    cumulativeMaskCheck = cumulativeMaskCheck + maskCheck;
     colorMaskDebug = colorMaskDebug + mask.debugMode;
   }
 

package/src/shaders/fragmentShaders/glareFlareFragment.ts

@@ -0,0 +1,79 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  glareFlareBindGroupLayout,
+  sharedBindGroupLayout,
+} from '../bindGroupLayouts';
+import { getPixelColorFromVector } from '../tgpuUtils';
+import { HSLToRGB, RGBToHSL } from '../colorConversions';
+
+export const glareFlareFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const centeredCoords = std.sub(std.mul(uv, 2.0), 1.0);
+
+  let color = getPixelColorFromVector(uv);
+
+  const rot = sharedBindGroupLayout.$.rot;
+  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // do not change
+  let dist = std.distance(center, centeredCoords);
+
+  // Normalize UV coordinates to be between -1 and 1
+  let uv_norm = std.sub(std.mul(input.uv, 2.0), 1.0);
+
+  // Calculate distance from center and ensure it does not exceed 1
+  let angle = std.atan2(std.add(rot.y, uv_norm.y), std.sub(rot.x, uv_norm.x));
+
+  dist = std.clamp(dist, 0.0, 1.0);
+  // Parameters for flare components
+  let flare_intensity = glareFlareBindGroupLayout.$.glareFlare.flareIntensity;
+  let spot_intensity = glareFlareBindGroupLayout.$.glareFlare.flareIntensity;
+  let ring_intensity = glareFlareBindGroupLayout.$.glareFlare.ringIntensity;
+  let ray_intensity = glareFlareBindGroupLayout.$.glareFlare.rayIntensity;
+  let falloff = glareFlareBindGroupLayout.$.glareFlare.falloff;
+  let ray_count = glareFlareBindGroupLayout.$.glareFlare.rayCount;
+
+  // Central bright spot with distance-based falloff
+  let spot = spot_intensity / (dist * falloff + 0.1);
+
+  // Rings calculation, also respecting the texture boundary
+  let ring1 = (std.sin(dist * 10.0) * ring_intensity) / (dist * falloff + 0.5);
+  let ring2 = (std.sin(dist * 20.0) * ring_intensity) / (dist * falloff + 0.3);
+
+  const noise = std.abs(std.sin(rot.x)) + std.abs(std.cos(rot.y));
+  // Ray calculation: create a series of sharp radial spikes
+  let ray_angle = angle * ray_count + noise;
+
+  // Enhanced variability in ray length and size
+  let ray_length_factor =
+    0.25 + 0.95 * std.abs(std.sin(angle * 3.0 * noise)) * noise;
+  let ray_size_factor =
+    0.05 + 1.15 * std.abs(std.cos(angle * 13.0 * noise)) + noise;
+
+  // Apply variability to rays
+  let ray =
+    std.pow(std.abs(std.sin(ray_angle)), 15.0 * ray_size_factor) *
+    ray_intensity *
+    (1.0 - dist * ray_length_factor) *
+    noise;
+
+  // Combine all flare components
+  let flare = spot + ring1 + ring2 + ray;
+
+  // Calculate fade factor to black based on distance to the edge
+  let edge_fade = 1.0 - dist;
+
+  // Apply edge fade
+  const flareFaded = flare * edge_fade;
+  const flareFinal = std.clamp(flareFaded * flare_intensity, 0.0, 1.0);
+
+  const hslColor = RGBToHSL(color.xyz);
+  const lightness = std.clamp(hslColor.z + flareFinal, 0.0, 1.0);
+  const combined = HSLToRGB(d.vec3f(hslColor.xy, lightness));
+  // Final color with flare intensity, clamped to prevent oversaturation
+  // color = d.vec4f(std.mix(color.xyz, combined, glow), color.w);
+  return d.vec4f(combined, color.w);
+});

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -2,95 +2,24 @@ import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
-  rotationBindGroupLayout,
-  textureBindGroupLayout,
+  sharedBindGroupLayout,
   glareBindGroupLayout,
-  // colorMaskBindGroupLayout,
 } from '../bindGroupLayouts';
-import { glareColorShift, hueShift, overlayChannels } from '../tgpuUtils';
+import {
+  getPixelColorFromVector,
+  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 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;
-
-  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 rot = sharedBindGroupLayout.$.rot;
   const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // do not change
 
   const opts = glareBindGroupLayout.$.glareOptions;
@@ -103,11 +32,7 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
   const hueShiftAngleMin = glareColor.hueShiftAngleMin; // degrees
   const hueShiftAngleMax = glareColor.hueShiftAngleMax; // degrees
 
-  let color = std.textureSample(
-    textureBindGroupLayout.$.texture,
-    textureBindGroupLayout.$.sampler,
-    texcoord
-  );
+  let color = getPixelColorFromVector(uv);
 
   const dist = std.distance(center, centeredCoords);
   const radial = std.exp(-dist); // (0,1], steeper near center

package/src/shaders/fragmentShaders/holoFragment.ts

@@ -2,24 +2,152 @@ import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
-  rotationBindGroupLayout,
-  textureBindGroupLayout,
+  holoBindGroupLayout,
+  sharedBindGroupLayout,
 } from '../bindGroupLayouts';
-import { hueShift } from '../tgpuUtils';
+import {
+  getPixelColorFromVector,
+  hsvToRGB,
+  hueShift,
+  overlayChannels,
+  random,
+} from '../tgpuUtils';
 import { waveCallbackSlot } from '../../enums/waveCallback';
 
+export const holo = tgpu.fn(
+  [d.vec2f, d.f32, d.f32, d.f32],
+  d.vec4f
+)((uv, directionDegreeModifier, shiftModifier, rotationShiftPowerModifier) => {
+  const rot = sharedBindGroupLayout.$.rot;
+
+  const textureColor = getPixelColorFromVector(uv);
+
+  const directionDegree = std.add(
+    holoBindGroupLayout.$.holoOptions.directionDegree,
+    directionDegreeModifier
+  );
+  const shift = std.add(holoBindGroupLayout.$.holoOptions.shift, shiftModifier);
+  const rotationShiftPower = std.mul(
+    holoBindGroupLayout.$.holoOptions.rotationShiftPower,
+    rotationShiftPowerModifier
+  );
+  const holoSize = holoBindGroupLayout.$.holoOptions.holoSize;
+  const holoMultiplier = holoBindGroupLayout.$.holoOptions.holoMultiplier;
+
+  //todo: need to redo logic of this, it should base on the calcualted diff size not add additional width
+  const holoEaseSize = holoBindGroupLayout.$.holoOptions.holoEaseSize;
+  const holoVisibility = holoBindGroupLayout.$.holoOptions.holoVisibility;
+  const holoSaturation = holoBindGroupLayout.$.holoOptions.holoSaturation;
+
+  const angelDegrees = std.radians(
+    std.add(
+      holoBindGroupLayout.$.holoOptions.directionDegree,
+      directionDegreeModifier
+    )
+  );
+
+  const yMultiplier = std.abs(std.cos(angelDegrees));
+  const xMultiplier = std.abs(std.sin(angelDegrees));
+  const range = std.add(xMultiplier, yMultiplier);
+
+  const intervalSize = std.div(range, holoMultiplier);
+  const x =
+    std.add(std.mul(uv.x, xMultiplier), std.mul(uv.y, yMultiplier)) + shift + 1; //scale to [0,2)
+
+  const rotationShift = std.add(
+    std.mul(rot.x, xMultiplier),
+    std.mul(rot.y, yMultiplier)
+  );
+  const shiftMultiplied = std.mul(rotationShift, rotationShiftPower);
+  const offset = shiftMultiplied + shift; //why is shitft here?
+
+  const xOffseted = (x + offset) % intervalSize;
+  const diffractionSizeCalculated = std.mul(holoSize, intervalSize);
+  const diffractionNoiseSizeCalcualted = std.mul(
+    diffractionSizeCalculated,
+    holoEaseSize
+  );
+  const diffractionStart = diffractionNoiseSizeCalcualted;
+  const diffractionEnd = std.add(diffractionSizeCalculated, diffractionStart);
+
+  const t =
+    (xOffseted - diffractionStart) / (diffractionEnd - diffractionStart);
+  const holoRotated = std.select(0, Math.PI, directionDegree > 179);
+  const ft = (1 - std.cos(Math.PI * t - holoRotated)) / 2;
+  const hue = -0.06 + ft * 0.85;
+  const hueWithNoise = std.add(std.div(random(uv.xy) - 0.5, 180) * 40, hue); //check with normal distribution
+  const missingRedHue = hueWithNoise + 1.0; // maps negative values to red from the end of hue
+  const rainbowAccurateHue = std.select(
+    missingRedHue,
+    hueWithNoise,
+    hueWithNoise > 0
+  );
+
+  const boundaryCheck = std.any(
+    d.vec2b(xOffseted < diffractionStart, xOffseted > diffractionEnd)
+  );
+  const xBoundary = std.select(
+    diffractionStart - xOffseted,
+    xOffseted - diffractionEnd,
+    xOffseted > diffractionStart
+  );
+  const xBoundaryScalled = std.div(xBoundary, diffractionNoiseSizeCalcualted);
+  const boundaryVisibilityScalled = std.pow(xBoundaryScalled, 2);
+  const calculatedVisibility = std.clamp(
+    std.mix(
+      holoVisibility,
+      1,
+      boundaryVisibilityScalled * d.f32(boundaryCheck)
+    ),
+    0,
+    1
+  );
+
+  const shiftedRGB = hsvToRGB(d.vec3f(rainbowAccurateHue, holoSaturation, 1));
+  const vsibilityAdjustsed = std.mul(calculatedVisibility, textureColor.w);
+  return d.vec4f(shiftedRGB, vsibilityAdjustsed);
+});
+
+export const doubleHoloFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const firstHolo = holo(uv, 0, 0, 1);
+  const secondHolo = holo(uv, 178, 0.59, -1);
+  const aa = std.add(firstHolo.w, secondHolo.w);
+  const vis = std.sub(2.0, aa);
+  const test = std.sub(1, vis);
+  const visibility = std.clamp(test, 0.9, 1);
+  const singleColor = std.select(firstHolo, secondHolo, secondHolo.w !== 1);
+  const addedColor = d.vec4f(
+    overlayChannels(firstHolo.xyz, secondHolo.xyz),
+    visibility
+  );
+  const finalColor = std.select(
+    singleColor,
+    addedColor,
+    std.all(d.vec2b(secondHolo.w !== 1, firstHolo.w !== 1))
+  );
+
+  return finalColor;
+});
+
 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 uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  return holo(uv, 0, 0, 1);
+});
+
+export const oldHoloFragment = tgpu['~unstable'].fragmentFn({
+  in: { uv: d.vec2f },
+  out: d.vec4f,
+})((input) => {
+  const uv = d.vec2f(input.uv.x, 1.0 - input.uv.y);
+  const textureColor = getPixelColorFromVector(uv);
+  const rot = sharedBindGroupLayout.$.rot;
 
   const wave = waveCallbackSlot.$(rot.xy);
   const waveX = wave.x;

package/src/shaders/fragmentShaders/maskFragment.ts

@@ -1,10 +1,8 @@
 import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
-import {
-  textureBindGroupLayout,
-  maskTextureBindGroupLayout,
-} from '../bindGroupLayouts';
+import { maskTextureBindGroupLayout } from '../bindGroupLayouts';
+import { getPixelColorFromVector } from '../tgpuUtils';
 
 const maskFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
@@ -19,11 +17,7 @@ const maskFragment = tgpu['~unstable'].fragmentFn({
   );
   const reversedMask = d.vec4f(std.sub(1.0, mask.xyz), mask.w);
 
-  let color = std.textureSample(
-    textureBindGroupLayout.$.texture,
-    textureBindGroupLayout.$.sampler,
-    texcoord
-  );
+  let color = getPixelColorFromVector(texcoord);
 
   return d.vec4f(color.xyz, reversedMask.x);
 });

package/src/shaders/fragmentShaders/reverseHoloFragment.ts

@@ -2,12 +2,11 @@ import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
-  textureBindGroupLayout,
   maskTextureBindGroupLayout,
-  rotationBindGroupLayout,
   reverseHoloDetectionChannelFlagsBindGroupLayout,
+  sharedBindGroupLayout,
 } from '../bindGroupLayouts';
-import { hueShift, rgbToHSV } from '../tgpuUtils';
+import { getPixelColorFromVector, hueShift, rgbToHSV } from '../tgpuUtils';
 
 export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   in: { uv: d.vec2f },
@@ -17,7 +16,7 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   const uv = texcoord;
   const centeredCoords = std.sub(std.mul(uv, 2.0), 1.0);
 
-  const rot = rotationBindGroupLayout.$.vec;
+  const rot = sharedBindGroupLayout.$.rot;
   const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // center from device orientation/touch
 
   // glare options---------------------------------
@@ -43,11 +42,7 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   const valueFlag = detectionChannelFlags.value;
   //------------------------------------------------
 
-  const cardColor = std.textureSample(
-    textureBindGroupLayout.$.texture,
-    textureBindGroupLayout.$.sampler,
-    texcoord
-  );
+  const cardColor = getPixelColorFromVector(texcoord);
 
   const holoMaskColor = std.textureSample(
     maskTextureBindGroupLayout.$.texture,