react-native-shine 0.7.0 → 0.8.0

package/src/components/Shine.tsx

@@ -1,9 +1,13 @@
 import { useEffect, useState } from 'react';
 import { useDevice } from 'react-native-wgpu';
-import type { TgpuTexture } from 'typegpu';
+import type { StorageFlag, TgpuTexture } from 'typegpu';
 import { getOrInitRoot } from '../roots';
-import { loadBitmap } from '../shaders/resourceManagement/textures';
+import {
+  createTexture,
+  loadBitmap,
+} from '../shaders/resourceManagement/textures';
 import Content, { type SharedProps } from './Content';
+import getBitmapFromURI from '../shaders/resourceManagement/bitmaps';
 
 export interface ShineProps extends SharedProps {
   imageURI: string;
@@ -15,15 +19,35 @@ export function Shine({ imageURI, maskURI, ...props }: ShineProps) {
   const root = device && getOrInitRoot(device);
   const [imageTexture, setImageTexture] = useState<TgpuTexture>();
   const [maskTexture, setMaskTexture] = useState<TgpuTexture>();
+  const [colorMaskStorageTexture, setColorMaskStorageTexture] = useState<
+    TgpuTexture<any> & StorageFlag
+  >();
+  //TODO: complete the work with the compute shader, try out the shader
 
   useEffect(() => {
-    if (root) loadBitmap(root, imageURI, setImageTexture);
+    if (root) {
+      loadBitmap(root, imageURI, setImageTexture);
+      const makeStorage = async () => {
+        const bitmap = await getBitmapFromURI(imageURI);
+        const texture = (await createTexture(root, bitmap)).$usage(
+          'storage',
+          'sampled'
+        );
+        setColorMaskStorageTexture(texture);
+      };
+      makeStorage();
+    }
   }, [root, imageURI]);
 
   useEffect(() => {
     if (root && maskURI) loadBitmap(root, maskURI, setMaskTexture);
   }, [root, imageURI, maskURI]);
 
+  // useEffect(() => {
+  //   //TODO: write the logic for allocating the storage texture for the precomputed colorMask
+  //   if (root)
+  // }, [root, imageURI]);
+
   return (
     root &&
     imageTexture && (
@@ -32,6 +56,7 @@ export function Shine({ imageURI, maskURI, ...props }: ShineProps) {
         root={root}
         imageTexture={imageTexture}
         maskTexture={maskTexture}
+        colorMaskStorageTexture={colorMaskStorageTexture}
       />
     )
   );

package/src/components/ShineGroup.tsx

@@ -15,12 +15,10 @@ type ShineGroupProps = PropsWithChildren<Partial<ShineProps>>;
 
 export function ShineGroup({
   children,
-  glareOptions,
   highlightColors,
   maskURI,
   lightPosition: touchPosition,
   effects,
-  enableGlare = true,
   isHighlightInclusive = true,
   translateViewIn3d = false,
   containerStyle,
@@ -79,13 +77,11 @@ export function ShineGroup({
         <Shine
           {...sizeFromV2d(size)}
           imageURI={capturedURI}
-          glareOptions={glareOptions}
           highlightColors={highlightColors}
           maskURI={maskURI}
           lightPosition={touchPosition}
           effects={effects}
           translateViewIn3d={translateViewIn3d}
-          enableGlare={enableGlare}
           containerStyle={containerStyle}
           isHighlightInclusive={isHighlightInclusive}
           style={style}

package/src/enums/colorPresets.ts

@@ -1,4 +1,4 @@
-import type { vec3 } from '../types/types';
+import type { ColorMask, vec3 } from '../types/types';
 
 export const ColorPresets = {
   // --- Primary & Secondary ---
@@ -39,3 +39,61 @@ export const ColorPresets = {
   BEIGE: [245, 245, 220], // #F5F5DC
   POTATO: [222, 184, 135], // #DEB887
 } as const satisfies Record<string, vec3>;
+
+export const HSVColorsPreset = {
+  RED: { hueMin: 330, hueMax: 15 }, // #FF0022
+  ORANGE: { hueMin: 15, hueMax: 45 }, // #FF8000
+  YELLOW: { hueMin: 45, hueMax: 75 }, // #FFFF00
+  GREEN: { hueMin: 75, hueMax: 165 }, // #00FF00
+  BLUE: { hueMin: 165, hueMax: 255 }, // #0080FF
+  VIOLET: { hueMin: 255, hueMax: 285 }, // #8000FF
+  MAGENTA: { hueMin: 285, hueMax: 330 }, // #FF00D5
+
+  TRUE_RED: { hueMin: 345, hueMax: 15 }, // #FF0000
+  CRIMSON: { hueMin: 330, hueMax: 350 }, // #FF0055
+  ROSE: { hueMin: 315, hueMax: 335 }, // #FF0095
+  PINK: { hueMin: 300, hueMax: 330 }, // #FF00BF
+
+  CORAL: { hueMin: 10, hueMax: 30 }, // #FF5500
+  TRUE_ORANGE: { hueMin: 20, hueMax: 45 }, // #FF8C00
+  AMBER: { hueMin: 35, hueMax: 50 }, // #FFB300
+  TRUE_YELLOW: { hueMin: 45, hueMax: 65 }, // #FFD500
+  GOLD: { hueMin: 40, hueMax: 55 }, // #FFCC00
+
+  LIME: { hueMin: 65, hueMax: 90 }, // #BFFF00
+  CHARTREUSE: { hueMin: 70, hueMax: 100 }, // #95FF00
+  TRUE_GREEN: { hueMin: 90, hueMax: 140 }, // #15FF00
+  EMERALD: { hueMin: 130, hueMax: 160 }, // #00FF6A
+  MINT: { hueMin: 140, hueMax: 170 }, // #00FF95
+
+  TEAL: { hueMin: 160, hueMax: 180 }, // #00FFD5
+  CYAN: { hueMin: 170, hueMax: 195 }, // #00F2FF
+  TURQUOISE: { hueMin: 165, hueMax: 190 }, // #00FFF2
+  AZURE: { hueMin: 190, hueMax: 215 }, // #009FFF
+  TRUE_BLUE: { hueMin: 210, hueMax: 240 }, // #0040FF
+  ROYAL_BLUE: { hueMin: 225, hueMax: 250 }, // #0011FF
+  INDIGO: { hueMin: 240, hueMax: 260 }, // #2B00FF
+
+  TRUE_VIOLET: { hueMin: 250, hueMax: 280 }, // #6A00FF
+  PURPLE: { hueMin: 260, hueMax: 290 }, // #9500FF
+  TRUE_MAGENTA: { hueMin: 285, hueMax: 315 }, // #FF00FF
+  FUCHSIA: { hueMin: 295, hueMax: 325 }, // #ff00d5ff
+
+  GRAY: { hueMin: 0, hueMax: 360, saturationMax: 0.2, saturationMin: 0 }, // #738c8cff
+  WHITE: {
+    hueMin: 0,
+    hueMax: 360,
+    saturationMax: 1,
+    saturationMin: 0,
+    lightnessMax: 1,
+    lightnessMin: 0.9,
+  }, // #d9f2f2ff
+  BLACK: {
+    hueMin: 0,
+    hueMax: 360,
+    saturationMax: 1,
+    saturationMin: 0,
+    lightnessMax: 0.2,
+    lightnessMin: 0,
+  }, // #0d2626ff
+} as const satisfies Record<string, ColorMask>;

package/src/enums/effectDefaults.ts

@@ -0,0 +1,57 @@
+import type { ColorMaskPreTypedSchema } from '../types/types';
+
+export const GLARE_DEFAULTS = {
+  glowPower: 0.5,
+  glareIntensity: 0.4,
+  lightIntensity: 1.1,
+  glareColor: {
+    hueBlendPower: 1.0,
+    hueShiftAngleMin: -30,
+    hueShiftAngleMax: 30,
+  },
+} as const;
+
+export const REVERSE_HOLO_DEFAULTS = {
+  redChannel: 1.0,
+  greenChannel: 0.0,
+  blueChannel: 0.0,
+  hue: 0.0,
+  saturation: 0.0,
+  value: 0.0,
+} as const;
+
+export const HOLO_DEFAULTS = {
+  directionDegree: 45,
+  shift: 0.1,
+  rotationShiftPower: 0.6,
+  holoSize: 0.12,
+  holoMultiplier: 2.5,
+  holoEaseSize: 0.2,
+  holoVisibility: 0.88,
+  holoSaturation: 0.5,
+} as const;
+
+export const GLARE_FLARE_DEFAULTS = {
+  flareIntensity: 0.7, // Overall intensity of the flare
+  spotIntensity: 0.4, // Intensity of the central spot
+  ringIntensity: 0.1, // Intensity of the rings
+  rayIntensity: 0.8, // Intensity of the rays
+  falloff: 8.0, // Falloff factor for rings and spots
+  rayCount: 4.0, // Number of rays
+};
+
+export const COLOR_MASK_DEFAULT_OPTIONS: ColorMaskPreTypedSchema = {
+  rgbToleranceRange: {
+    upper: [20, 20, 20],
+    lower: [20, 20, 20],
+  },
+  baseColor: [0, 0, 0],
+  hueMin: 0,
+  hueMax: 360,
+  saturationMin: 0.2,
+  saturationMax: 1,
+  lightnessMin: 0.3,
+  lightnessMax: 0.9,
+  debugMode: false,
+  useHSV: 0,
+} as const;

package/src/enums/effectPresets.ts

@@ -1,11 +1,144 @@
-import type { Effect } from '../types/types';
+import {
+  precomputeColorMaskBindGroupLayout,
+  type ColorMaskArraySchema,
+} from './../shaders/bindGroupLayouts';
+import {
+  glareFlareSchema,
+  glareSchema,
+  holoSchema,
+  reverseHoloDetectionChannelFlagsSchema,
+} from '../shaders/bindGroupLayouts';
+import {
+  createGlareBindGroup,
+  createGlareFlareBindGroup,
+  createHoloBindGroup,
+  createReverseHoloDetectionChannelFlagsBindGroup,
+} from '../shaders/bindGroupUtils';
+import {
+  createEffect,
+  type DeepPartial,
+  type ExtractEffectOptions,
+  type UnwrapLayout,
+} from '../types/types';
+import { glareFragment } from '../shaders/fragmentShaders/glareFragment';
+import { reverseHoloFragment } from '../shaders/fragmentShaders/reverseHoloFragment';
+import {
+  doubleHoloFragment,
+  holoFragment,
+} from '../shaders/fragmentShaders/holoFragment';
+import { glareFlareFragment } from '../shaders/fragmentShaders/glareFlareFragment';
+import type {
+  StorageFlag,
+  TgpuBindGroup,
+  TgpuBuffer,
+  TgpuComputeFn,
+  TgpuRoot,
+  TgpuTexture,
+  UniformFlag,
+  ValidateUniformSchema,
+} from 'typegpu';
+import {
+  GLARE_DEFAULTS,
+  GLARE_FLARE_DEFAULTS,
+  HOLO_DEFAULTS,
+  REVERSE_HOLO_DEFAULTS,
+} from './effectDefaults';
+//TODO: move schema to separate object that would match them with corresponding bindGroups, then they would be defined in the effect
+
+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,
+};
+
+const GLARE = createEffect({
+  buffers: [
+    {
+      schema: glareSchema,
+      defaultOptions: GLARE_DEFAULTS,
+    },
+  ],
+  bindGroupCreator: createGlareBindGroup,
+  fragment: glareFragment,
+});
+
+const REVERSE_HOLO = createEffect({
+  buffers: [
+    { schema: glareSchema, defaultOptions: GLARE_DEFAULTS },
+    {
+      schema: reverseHoloDetectionChannelFlagsSchema,
+      defaultOptions: REVERSE_HOLO_DEFAULTS,
+    },
+  ],
+  fragment: reverseHoloFragment,
+  bindGroupCreator: createReverseHoloDetectionChannelFlagsBindGroup,
+  blend,
+});
+
+const HOLO = createEffect({
+  fragment: holoFragment,
+  buffers: [
+    {
+      schema: holoSchema,
+      defaultOptions: HOLO_DEFAULTS,
+    },
+  ],
+  bindGroupCreator: createHoloBindGroup,
+  blend,
+});
+
+const DOUBLE_HOLO = { ...HOLO, fragment: doubleHoloFragment };
+
+const GLARE_FLARE = createEffect({
+  fragment: glareFlareFragment,
+  buffers: [
+    {
+      schema: glareFlareSchema,
+      defaultOptions: GLARE_FLARE_DEFAULTS,
+    },
+  ],
+  bindGroupCreator: createGlareFlareBindGroup,
+});
 
 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>;
+  glare: GLARE,
+  reverseHolo: REVERSE_HOLO,
+  holo: HOLO,
+  doubleHolo: DOUBLE_HOLO,
+  glareFlare: GLARE_FLARE,
+} as const; //todo: add forced typings
+
+export type Effect = {
+  [K in keyof typeof Effects]: {
+    name: K;
+    options?: DeepPartial<ExtractEffectOptions<(typeof Effects)[K]>>;
+  };
+}[keyof typeof Effects];
+export type ComputePipelineInput = {
+  compute: TgpuComputeFn;
+  buffers: {
+    schema: ValidateUniformSchema<any>;
+    defaultOptions: any;
+  }[];
+  storageTexture: TgpuTexture<{
+    format: 'rgba8unorm';
+    size: readonly number[];
+  }> &
+    StorageFlag;
+  bindGroupCreator: (
+    root: TgpuRoot,
+    storageTexture: TgpuTexture<{
+      format: 'rgba8unorm';
+      size: readonly number[];
+    }> &
+      StorageFlag,
+    colorMaskBuffer: TgpuBuffer<ColorMaskArraySchema> & UniformFlag
+  ) => TgpuBindGroup<UnwrapLayout<typeof precomputeColorMaskBindGroupLayout>>;
+};

package/src/shaders/bindGroupLayouts.ts

@@ -2,9 +2,12 @@ import tgpu, { type ValidateBufferSchema } from 'typegpu';
 import * as d from 'typegpu/data';
 import type { BufferUsageType } from './resourceManagement/bufferManager';
 
-export const textureBindGroupLayout = tgpu.bindGroupLayout({
+export const rotationSchema = d.vec3f;
+
+export const sharedBindGroupLayout = tgpu.bindGroupLayout({
   texture: { texture: d.texture2d(d.f32) },
   sampler: { sampler: 'filtering' },
+  rot: { uniform: rotationSchema },
 });
 
 export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
@@ -12,10 +15,6 @@ export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
   sampler: { sampler: 'filtering' },
 });
 
-export const rotationBindGroupLayout = tgpu.bindGroupLayout({
-  vec: { uniform: d.vec3f },
-});
-
 export const glareSchema = d.struct({
   glareColor: d.struct({
     hueShiftAngleMax: d.f32,
@@ -40,21 +39,17 @@ export const colorMaskSchema = d.struct({
     upper: d.vec3f,
     lower: d.vec3f,
   }),
-  hueToleranceRange: d.struct({
-    upper: d.f32,
-    lower: d.f32,
-  }),
+  hueStart: d.f32,
+  hueRange: d.f32,
   useHSV: d.align(16, d.u32),
-  brightnessTolerance: d.f32,
-  saturationTolerance: d.f32,
-  lowSaturationThreshold: d.f32,
-  lowBrightnessThreshold: d.f32,
+  minLimits: d.vec2f,
+  maxLimits: d.vec2f,
   debugMode: d.u32,
 });
 
-export type ColorMaskSchema = typeof colorMaskSchema;
+export type ColorMaskSchema = d.Infer<typeof colorMaskSchema>;
 
-export const COLOR_MASK_MAX_COUNT = 16;
+export const COLOR_MASK_MAX_COUNT = 8;
 
 export const colorMaskArraySchema = d.struct({
   masks: d.arrayOf(colorMaskSchema, COLOR_MASK_MAX_COUNT),
@@ -86,9 +81,61 @@ export const reverseHoloDetectionChannelFlagsBindGroupLayout =
     glareOptions: { uniform: glareSchema },
   });
 
+export const holoSchema = d.struct({
+  directionDegree: d.align(16, d.f32),
+  shift: d.f32,
+  rotationShiftPower: d.f32,
+  holoSize: d.f32,
+  holoMultiplier: d.f32,
+  holoEaseSize: d.f32,
+  holoVisibility: d.f32,
+  holoSaturation: d.f32,
+});
+
+export type HoloSchema = typeof holoSchema;
+
+export const holoBindGroupLayout = tgpu.bindGroupLayout({
+  holoOptions: { uniform: holoSchema },
+});
+
+export const glareFlareSchema = d.struct({
+  flareIntensity: d.f32,
+  spotIntensity: d.f32,
+  ringIntensity: d.f32,
+  rayIntensity: d.f32,
+  falloff: d.f32,
+  rayCount: d.f32,
+});
+
+export type glareFlareSchema = typeof glareFlareSchema;
+
+export const glareFlareBindGroupLayout = tgpu.bindGroupLayout({
+  glareFlare: { uniform: glareFlareSchema },
+});
+
+export const precomputeTextureSchema = d.textureStorage2d(
+  'rgba8unorm',
+  'read-write'
+);
+
+export type PrecomputeTextureSchema = typeof precomputeTextureSchema;
+
+export const precomputeColorMaskBindGroupLayout = tgpu.bindGroupLayout({
+  colorMaskStorage: {
+    storageTexture: precomputeTextureSchema,
+  },
+});
+
+export const precomputeColorMaskOutputBindGroupLayout = tgpu.bindGroupLayout({
+  colorMaskOutput: {
+    texture: d.texture2d(d.f32),
+  },
+});
+
 export type BufferSchemas =
+  | d.Vec3f
   | ReverseHoloDetectionChannelFlagsSchema
-  | ColorMaskSchema
+  | ColorMaskArraySchema
   | GlareSchema;
 
 export const bufferData = {
@@ -110,18 +157,7 @@ export const bufferData = {
   },
 } as const satisfies Record<
   string,
-  { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+  { schema: ValidateBufferSchema<BufferSchemas>; usage: BufferUsageType }
 >;
 
 export type BufferData = typeof bufferData;
-
-// export const holoSchema = d.struct({
-//   intensity: d.f32,
-//   waveCallback: WaveCallback, //TgpuFn<(uv: d.Vec2f) => d.Vec2f>,
-// });
-
-// export type holoSchema = typeof holoSchema;
-
-// export const holoBindGroupLayout = tgpu.bindGroupLayout({
-//   holoOptions: { uniform: holoSchema },
-// });

package/src/shaders/bindGroupUtils.ts

@@ -1,61 +1,53 @@
-import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
-import * as d from 'typegpu/data';
 import {
-  glareBindGroupLayout,
-  glareSchema,
+  type StorageFlag,
+  type TgpuBuffer,
+  type TgpuRoot,
+  type TgpuTexture,
+  type UniformFlag,
+} from 'typegpu';
+import {
   colorMaskBindGroupLayout,
-  rotationBindGroupLayout,
   type GlareSchema,
   type ReverseHoloDetectionChannelFlagsSchema,
   reverseHoloDetectionChannelFlagsBindGroupLayout,
   type ColorMaskArraySchema,
+  glareBindGroupLayout,
+  holoBindGroupLayout,
+  type HoloSchema,
+  glareFlareSchema,
+  glareFlareBindGroupLayout,
+  precomputeColorMaskBindGroupLayout,
 } from './bindGroupLayouts';
-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) =>
-  root
-    .createBuffer(d.vec3f, d.vec3f(...componentsFromV3d(initValues)))
-    .$usage('uniform');
-
-export const createRotationValuesBindGroup = (
-  root: TgpuRoot,
-  buffer: TgpuBuffer<d.Vec3f>
-) =>
-  root.createBindGroup(rotationBindGroupLayout, {
-    vec: root.unwrap(buffer),
-  });
-
-export const createGlareOptionsBuffer = (
-  root: TgpuRoot,
-  initValues?: Partial<GlareOptions>
-) =>
-  root
-    .createBuffer(
-      glareSchema,
-      glareOptionsToTyped(createGlareOptions({ ...initValues }))
-    )
-    .$usage('uniform');
+import type {
+  BindGroupCreatorArgument,
+  TgpuUniformBuffer,
+} from '../types/types';
 
 export const createGlareBindGroup = (
-  root: TgpuRoot,
-  buffer: TgpuBuffer<GlareSchema> & UniformFlag
-) =>
+  { root }: BindGroupCreatorArgument,
+  [buffer]: readonly [buffer: TgpuUniformBuffer<GlareSchema>]
+) => [
   root.createBindGroup(glareBindGroupLayout, {
     glareOptions: buffer,
-  });
+  }),
+];
 
-// export const createColorMaskBuffer = (
-//   root: TgpuRoot,
-//   initValues: PartiallyOptional<ColorMask, 'baseColor'>[]
-// ) =>
-//   root
-//     .createBuffer(
-//       colorMaskSchema,
-//       colorMasksToTyped(createColorMasks(initValues))
-//     )
-//     .$usage('uniform');
+export const createReverseHoloDetectionChannelFlagsBindGroup = (
+  { root, maskBindGroup }: BindGroupCreatorArgument,
+  [glareOptions, channelFlags]: readonly [
+    g: TgpuUniformBuffer<GlareSchema>,
+    f: TgpuUniformBuffer<ReverseHoloDetectionChannelFlagsSchema>,
+  ]
+) => {
+  const reverseHoloBindGroup = root.createBindGroup(
+    reverseHoloDetectionChannelFlagsBindGroupLayout,
+    {
+      channelFlags,
+      glareOptions,
+    }
+  );
+  return [reverseHoloBindGroup, maskBindGroup];
+};
 
 export const createColorMaskBindGroup = (
   root: TgpuRoot,
@@ -65,28 +57,33 @@ export const createColorMaskBindGroup = (
     colorMasks: buffer,
   });
 
-export const createReverseHoloDetectionChannelFlagsBindGroup = (
-  root: TgpuRoot,
-  detectionChannelBuffer: TgpuBuffer<ReverseHoloDetectionChannelFlagsSchema> &
-    UniformFlag,
-  glareOptionsBuffer: TgpuBuffer<GlareSchema> & UniformFlag
-) =>
-  root.createBindGroup(reverseHoloDetectionChannelFlagsBindGroupLayout, {
-    channelFlags: detectionChannelBuffer,
-    glareOptions: glareOptionsBuffer,
-  });
+export const createHoloBindGroup = (
+  { root }: BindGroupCreatorArgument,
+  [buffer]: readonly [buffer: TgpuUniformBuffer<HoloSchema>]
+) => [
+  root.createBindGroup(holoBindGroupLayout, {
+    holoOptions: buffer,
+  }),
+];
 
-// export const crateHoloBuffer = (
-//   root: TgpuRoot,
-//   initValues: Partial<HoloOptions>
-// ) => {
-//   const holoOptions: HoloOptions = createHoloOptions({ ...initValues });
-//   const holoOptionsTyped = {
-//     intensity: d.f32(holoOptions.intensity),
-//     waveCallback: holoOptions.waveCallback,
-//   };
+export const createGlareFlareBindGroup = (
+  { root }: BindGroupCreatorArgument,
+  [buffer]: readonly [buffer: TgpuUniformBuffer<glareFlareSchema>]
+) => [
+  root.createBindGroup(glareFlareBindGroupLayout, {
+    glareFlare: buffer,
+  }),
+];
 
-//   const holoBuffer = root
-//     .createBuffer(holoSchema, holoOptionsTyped)
-//     .$usage('uniform');
-// };
+export const createPrecomputeColorMaskBindGroup = (
+  root: TgpuRoot,
+  storageTexture: TgpuTexture<{
+    format: 'rgba8unorm';
+    size: readonly number[];
+  }> &
+    StorageFlag
+) => {
+  return root.createBindGroup(precomputeColorMaskBindGroupLayout, {
+    colorMaskStorage: storageTexture,
+  });
+};