react-native-shine 0.3.0 → 0.3.2

package/src/shaders/bindGroupLayouts.ts

@@ -12,11 +12,11 @@ export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
   sampler: { sampler: 'filtering' },
 });
 
-export const rotationValuesBindGroupLayout = tgpu.bindGroupLayout({
+export const rotationBindGroupLayout = tgpu.bindGroupLayout({
   vec: { uniform: d.vec3f },
 });
 
-export const glareOptionsSchema = d.struct({
+export const glareSchema = d.struct({
   glowPower: d.f32,
   hueShiftAngleMax: d.f32,
   hueShiftAngleMin: d.f32,
@@ -25,10 +25,10 @@ export const glareOptionsSchema = d.struct({
   glareIntensity: d.f32,
 });
 
-export type glareOptionsSchema = typeof glareOptionsSchema;
+export type GlareSchema = typeof glareSchema;
 
-export const glareOptionsBindGroupLayout = tgpu.bindGroupLayout({
-  glareOptions: { uniform: glareOptionsSchema },
+export const glareBindGroupLayout = tgpu.bindGroupLayout({
+  glareOptions: { uniform: glareSchema },
 });
 
 export const colorMaskSchema = d.struct({
@@ -39,22 +39,22 @@ export const colorMaskSchema = d.struct({
   }),
 });
 
-export type colorMaskSchema = typeof colorMaskSchema;
+export type ColorMaskSchema = typeof colorMaskSchema;
 
 export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
   mask: { uniform: colorMaskSchema },
 });
 
 export const bufferData = {
-  rotationBuffer: {
+  rotation: {
     schema: d.vec3f,
     usage: 'uniform',
   },
-  glareBuffer: {
-    schema: glareOptionsSchema,
+  glare: {
+    schema: glareSchema,
     usage: 'uniform',
   },
-  colorMaskBuffer: {
+  colorMask: {
     schema: colorMaskSchema,
     usage: 'uniform',
   },
@@ -63,7 +63,7 @@ export const bufferData = {
   { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
 >;
 
-export type BufferDataMap = typeof bufferData;
+export type BufferData = typeof bufferData;
 
 // export const holoSchema = d.struct({
 //   intensity: d.f32,

package/src/shaders/bindGroupUtils.ts

@@ -1,11 +1,13 @@
 import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
 import * as d from 'typegpu/data';
 import {
-  glareOptionsBindGroupLayout,
-  glareOptionsSchema,
+  glareBindGroupLayout,
+  glareSchema,
   colorMaskBindGroupLayout,
+  type ColorMaskSchema,
+  rotationBindGroupLayout,
+  type GlareSchema,
   colorMaskSchema,
-  rotationValuesBindGroupLayout,
 } from './bindGroupLayouts';
 import type {
   GlareOptions,
@@ -18,88 +20,56 @@ import {
   createColorMask,
   mapToF32,
 } from '../types/typeUtils';
+import { componentsFromV3d, zeroV3d } from '../utils/vector';
 
-export const createRotationBuffer = (
-  root: TgpuRoot,
-  initValues?: { x: number; y: number; z: number }
-) => {
-  const init = initValues
-    ? d.vec3f(initValues.x, initValues.y, initValues.z)
-    : d.vec3f(0.0);
-  const rotationValuesBuffer = root
-    .createBuffer(d.vec3f, init)
+export const createRotationBuffer = (root: TgpuRoot, initValues = zeroV3d) =>
+  root
+    .createBuffer(d.vec3f, d.vec3f(...componentsFromV3d(initValues)))
     .$usage('uniform');
 
-  return rotationValuesBuffer;
-};
-
 export const createRotationValuesBindGroup = (
   root: TgpuRoot,
   buffer: TgpuBuffer<d.Vec3f>
-) => {
-  const rotationValuesBindGroup = root.createBindGroup(
-    rotationValuesBindGroupLayout,
-    {
-      vec: root.unwrap(buffer),
-    }
-  );
-
-  return rotationValuesBindGroup;
-};
+) =>
+  root.createBindGroup(rotationBindGroupLayout, {
+    vec: root.unwrap(buffer),
+  });
 
 export const createGlareOptionsBuffer = (
   root: TgpuRoot,
   initValues?: Partial<GlareOptions>
-) => {
-  const glareOptions: GlareOptions = createGlareOptions({ ...initValues });
-  const glareOptionsTyped = mapToF32(glareOptions);
-
-  const glareOptionsBuffer = root
-    .createBuffer(glareOptionsSchema, glareOptionsTyped)
+) =>
+  root
+    .createBuffer(glareSchema, mapToF32(createGlareOptions({ ...initValues })))
     .$usage('uniform');
 
-  return glareOptionsBuffer;
-};
-
-export const createGlareOptionsBindGroup = (
+export const createGlareBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<glareOptionsSchema> & UniformFlag
-) => {
-  const glareOptionsBindGroup = root.createBindGroup(
-    glareOptionsBindGroupLayout,
-    {
-      glareOptions: buffer,
-    }
-  );
-
-  return glareOptionsBindGroup;
-};
+  buffer: TgpuBuffer<GlareSchema> & UniformFlag
+) =>
+  root.createBindGroup(glareBindGroupLayout, {
+    glareOptions: buffer,
+  });
 
 export const createColorMaskBuffer = (
   root: TgpuRoot,
   initValues: PartiallyOptional<ColorMask, 'baseColor'>
-) => {
-  const colorMask: ColorMask = createColorMask({ ...initValues });
-  const colorMaskTyped = colorMaskToTyped(colorMask);
-
-  const colorMaskBuffer = root
-    .createBuffer(colorMaskSchema, colorMaskTyped)
+) =>
+  root
+    .createBuffer(
+      colorMaskSchema,
+      colorMaskToTyped(createColorMask({ ...initValues }))
+    )
     .$usage('uniform');
 
-  return colorMaskBuffer;
-};
-
 export const createColorMaskBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<colorMaskSchema> & UniformFlag
-) => {
-  const colorMaskBindGroup = root.createBindGroup(colorMaskBindGroupLayout, {
+  buffer: TgpuBuffer<ColorMaskSchema> & UniformFlag
+) =>
+  root.createBindGroup(colorMaskBindGroupLayout, {
     mask: buffer,
   });
 
-  return colorMaskBindGroup;
-};
-
 // export const crateHoloBuffer = (
 //   root: TgpuRoot,
 //   initValues: Partial<HoloOptions>

package/src/shaders/fragmentShaders/glareFragment.ts

@@ -2,9 +2,9 @@ import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
-  rotationValuesBindGroupLayout,
+  rotationBindGroupLayout,
   textureBindGroupLayout,
-  glareOptionsBindGroupLayout,
+  glareBindGroupLayout,
   // colorMaskBindGroupLayout,
 } from '../bindGroupLayouts';
 import { glareColorShift, hueShift, overlayChannels } from '../tgpuUtils';
@@ -17,10 +17,10 @@ export const glareFragment = tgpu['~unstable'].fragmentFn({
   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 = rotationValuesBindGroupLayout.$.vec;
+  const rot = rotationBindGroupLayout.$.vec;
   const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
 
-  const glareOptions = glareOptionsBindGroupLayout.$.glareOptions;
+  const glareOptions = glareBindGroupLayout.$.glareOptions;
   const glareIntensity = glareOptions.glareIntensity;
   const glowPower = glareOptions.glowPower;
   const hueBlendPower = glareOptions.hueBlendPower;
@@ -88,10 +88,10 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
   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 = rotationValuesBindGroupLayout.$.vec;
+  const rot = rotationBindGroupLayout.$.vec;
   const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y)); // do not change
 
-  const opts = glareOptionsBindGroupLayout.$.glareOptions;
+  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
@@ -135,8 +135,9 @@ export const newGlareFragment = tgpu['~unstable'].fragmentFn({
   const overlaidRGB = overlayChannels(chromaMixed, glareLayer);
   const finalRGB = std.mix(chromaMixed, overlaidRGB, d.vec3f(maskedGlow));
 
-  // Optional mild safety clamp to avoid NaNs/overflow artifacts.
   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

@@ -2,7 +2,7 @@ import tgpu from 'typegpu';
 import * as d from 'typegpu/data';
 import * as std from 'typegpu/std';
 import {
-  rotationValuesBindGroupLayout,
+  rotationBindGroupLayout,
   textureBindGroupLayout,
 } from '../bindGroupLayouts';
 import { hueShift } from '../tgpuUtils';
@@ -14,30 +14,22 @@ export const holoFragment = tgpu['~unstable'].fragmentFn({
 })((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 textureColor = std.textureSample(
     textureBindGroupLayout.$.texture,
     textureBindGroupLayout.$.sampler,
     texcoord
   );
-
-  const rot = rotationValuesBindGroupLayout.$.vec;
-  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
+  const rot = rotationBindGroupLayout.$.vec;
 
   const wave = waveCallbackSlot.$(rot.xy);
   const waveX = wave.x;
   const waveY = wave.y;
 
-  const band = std.add(waveX, waveY);
-
-  const dist = std.distance(centeredCoords, center);
-  const intensity = std.clamp(1.0 - dist, 0.0, 1.0);
-  const falloff = std.pow(std.exp(-dist), 1.0 / intensity);
+  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, falloff);
+  const finalColor = std.mul(rainbowColor, 1.0);
 
-  return d.vec4f(finalColor, 1 - falloff * dist * textureColor.w);
+  return d.vec4f(finalColor, 0.7 * textureColor.w);
 });

package/src/shaders/fragmentShaders/reverseHoloFragment.ts

@@ -4,8 +4,8 @@ import * as std from 'typegpu/std';
 import {
   textureBindGroupLayout,
   maskTextureBindGroupLayout,
-  rotationValuesBindGroupLayout,
-  glareOptionsBindGroupLayout,
+  rotationBindGroupLayout,
+  glareBindGroupLayout,
 } from '../bindGroupLayouts';
 import { hueShift } from '../tgpuUtils';
 
@@ -17,10 +17,10 @@ export const reverseHoloFragment = tgpu['~unstable'].fragmentFn({
   const uv = texcoord;
   const centeredCoords = std.sub(std.mul(uv, 2.0), 1.0);
 
-  const rot = rotationValuesBindGroupLayout.$.vec;
+  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 = glareOptionsBindGroupLayout.$.glareOptions;
+  const opts = glareBindGroupLayout.$.glareOptions;
   const glareIntensity = opts.glareIntensity;
   const glowPower = opts.glowPower;
   const hueBlendPower = opts.hueBlendPower;

package/src/shaders/pipelineSetups.ts

@@ -1,10 +1,14 @@
-import type { TgpuRenderPipeline, TgpuRoot, TgpuTexture } from 'typegpu';
+import type {
+  TgpuBindGroup,
+  TgpuRenderPipeline,
+  TgpuRoot,
+  TgpuTexture,
+} from 'typegpu';
 import type { BindGroupPair } from '../types/types';
 import {
   maskTextureBindGroupLayout,
   textureBindGroupLayout,
 } from './bindGroupLayouts';
-import { createBindGroupPair, createBindGroupPairs } from '../types/typeUtils';
 import mainVertex from './vertexShaders/mainVertex';
 import maskFragment from './fragmentShaders/maskFragment';
 import { reverseHoloFragment } from './fragmentShaders/reverseHoloFragment';
@@ -17,14 +21,12 @@ import {
 
 export const attachBindGroups = (
   pipeline: TgpuRenderPipeline,
-  bindGroupPairs: BindGroupPair[]
-) => {
-  for (const pair of bindGroupPairs) {
-    pipeline = pipeline.with(pair.layout, pair.group);
-  }
-
-  return pipeline;
-};
+  bindGroups: TgpuBindGroup[]
+) =>
+  bindGroups.reduce(
+    (acc, bindGroup) => acc.with(bindGroup.layout, bindGroup),
+    pipeline
+  );
 
 export const blend: GPUBlendState = {
   color: {
@@ -62,12 +64,12 @@ export const attachBindGroupsToPass = (
 
 export const createMaskPipeline = (
   root: TgpuRoot,
-  maskTexture: TgpuTexture | null,
-  BGP: BindGroupPair[],
+  maskTexture: TgpuTexture | undefined,
+  bindGroups: TgpuBindGroup[],
   sampler: GPUSampler,
   presentationFormat: GPUTextureFormat
-): TgpuRenderPipeline | null => {
-  if (!maskTexture) return null;
+): TgpuRenderPipeline | void => {
+  if (!maskTexture) return;
 
   const maskTextureBindGroup = root.createBindGroup(
     maskTextureBindGroupLayout,
@@ -76,12 +78,9 @@ export const createMaskPipeline = (
       sampler,
     }
   );
-  const maskBGP: BindGroupPair[] = createBindGroupPairs(
-    [maskTextureBindGroupLayout],
-    [maskTextureBindGroup]
-  );
-  for (let i = 0; i < BGP.length; i++) {
-    maskBGP.push(BGP[i]!);
+  const maskBGP: TgpuBindGroup[] = [maskTextureBindGroup];
+  for (let i = 0; i < bindGroups.length; i++) {
+    maskBGP.push(bindGroups[i]!);
   }
   let maskPipeline = root['~unstable']
     .withVertex(mainVertex, {})
@@ -94,12 +93,12 @@ export const createMaskPipeline = (
 
 export const createReverseHoloPipeline = (
   root: TgpuRoot,
-  texture: TgpuTexture | null,
-  BGP: BindGroupPair[],
+  texture: TgpuTexture | undefined,
+  bindGroups: TgpuBindGroup[],
   sampler: GPUSampler,
   presentationFormat: GPUTextureFormat
-): TgpuRenderPipeline | null => {
-  if (!texture) return null;
+): TgpuRenderPipeline | void => {
+  if (!texture) return;
 
   const reverseHoloBindGroup = root.createBindGroup(
     maskTextureBindGroupLayout,
@@ -108,10 +107,7 @@ export const createReverseHoloPipeline = (
       sampler,
     }
   );
-  const reverseHoloBGP: BindGroupPair[] = BGP;
-  reverseHoloBGP.push(
-    createBindGroupPair(maskTextureBindGroupLayout, reverseHoloBindGroup)
-  );
+  const reverseHoloBGP: TgpuBindGroup[] = [...bindGroups, reverseHoloBindGroup];
 
   let reverseHoloPipeline = root['~unstable']
     .withVertex(mainVertex, {})
@@ -127,65 +123,54 @@ export const createReverseHoloPipeline = (
 
 export const createRainbowHoloPipeline = (
   root: TgpuRoot,
-  texture: TgpuTexture | null,
-  BGP: BindGroupPair[],
+  texture: TgpuTexture | undefined,
+  bindGroups: TgpuBindGroup[],
   sampler: GPUSampler,
   presentationFormat: GPUTextureFormat
-): TgpuRenderPipeline | null => {
-  if (!texture) return null;
+): TgpuRenderPipeline | void => {
+  if (!texture) return;
 
   const imageTextureBindGroup = root.createBindGroup(textureBindGroupLayout, {
     texture: root.unwrap(texture).createView(),
     sampler,
   });
 
-  const texBGP = createBindGroupPair(
-    textureBindGroupLayout,
-    imageTextureBindGroup
-  );
-
   let rainbowHoloPipeline = root['~unstable']
     .with(waveCallbackSlot, waveCallbackFn(WAVE_CALLBACKS.default))
     .withVertex(mainVertex, {})
     .withFragment(holoFragment, getDefaultTarget(presentationFormat, blend))
     .createPipeline();
 
-  rainbowHoloPipeline = attachBindGroups(rainbowHoloPipeline, [...BGP, texBGP]);
+  rainbowHoloPipeline = attachBindGroups(rainbowHoloPipeline, [
+    ...bindGroups,
+    imageTextureBindGroup,
+  ]);
   return rainbowHoloPipeline;
 };
 
-export const pipelineRenderFunction = (
+export function renderPipelinesInSinglePass(
   root: TgpuRoot,
   pipelines: TgpuRenderPipeline[],
-  attachments: any[],
-  view: GPUTextureView,
-  isInSinglePass: boolean
-) => {
-  if (isInSinglePass) {
-    root['~unstable'].beginRenderPass(
-      {
-        colorAttachments: [
-          {
-            view: view,
-            clearValue: [0, 0, 0, 0],
-            loadOp: 'clear',
-            storeOp: 'store',
-          },
-        ],
-      },
-      (pass) => {
-        for (let i = 0; i < pipelines.length; i++) {
-          pass.setPipeline(pipelines[i]!);
-          pass.draw(6);
-        }
+  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);
       }
-    );
-    root['~unstable'].flush();
-  } else {
-    for (let i = 0; i < pipelines.length; i++) {
-      const attachment = attachments[i];
-      if (!attachment) return;
-      pipelines[i]!.withColorAttachment(attachment).draw(6);
     }
-  }
-};
+  );
+  unstableRoot.flush();
+}

package/src/shaders/resourceManagement/textures.ts

@@ -1,4 +1,5 @@
-import { type TgpuRoot, type TgpuTexture } from 'typegpu';
+import { type TextureProps, type TgpuRoot, type TgpuTexture } from 'typegpu';
+import getBitmapFromURI from './bitmaps';
 
 export const createTexture = async (
   root: TgpuRoot,
@@ -28,3 +29,14 @@ export const loadTexture = async (
     [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/utils.ts

@@ -1,5 +1,5 @@
-import type { quaternion, vec3 } from '../types/types';
 import { Dimensions } from 'react-native';
+import type { quaternion, vec3 } from '../types/types';
 
 export const rotateVectorByQuaternion = (
   vec: vec3,
@@ -35,39 +35,25 @@ export const rotateVectorByQuaternion = (
   return [rotated[0], rotated[1], rotated[2]];
 };
 
-export const clamp = (v: number, min = -1, max = 1) => {
-  'worklet';
-  return Math.max(min, Math.min(max, v));
-};
-
-export const rotate2D = (
-  [x, y]: [number, number],
-  angleDeg: number
-): [number, number] => {
-  'worklet';
-  const rad = (angleDeg * Math.PI) / 180;
-  const c = Math.cos(rad);
-  const s = Math.sin(rad);
-  return [x * c - y * s, x * s + y * c];
-};
-
 // Simple helper to get angle from dimensions (0 or 90)
 export function getAngleFromDimensions() {
+  return 90 * Number(isLandscapeMode());
+}
+
+export function isLandscapeMode() {
   const { width, height } = Dimensions.get('window');
-  return width >= height ? 90 : 0;
+
+  return width >= height;
 }
 
 // Subscribe to orientation change via Dimensions API only
 export function subscribeToOrientationChange(
-  callback: (angleDeg: number) => void
+  callback: (isLandscape: boolean) => void
 ) {
-  callback(getAngleFromDimensions());
-  const handler = () => {
-    callback(getAngleFromDimensions());
-  };
+  const handler = () => callback(isLandscapeMode());
+  const subscription = Dimensions.addEventListener('change', handler);
+
+  handler();
 
-  const dimSub = Dimensions.addEventListener('change', handler);
-  return () => {
-    dimSub.remove();
-  };
+  return () => subscription.remove();
 }

package/src/shaders/vertexShaders/mainRotationEffectVertex.ts

@@ -1,13 +1,13 @@
 import tgpu from 'typegpu';
 import * as std from 'typegpu/std';
 import * as d from 'typegpu/data';
-import { rotationValuesBindGroupLayout } from '../bindGroupLayouts';
+import { rotationBindGroupLayout } from '../bindGroupLayouts';
 
 const mainRotationEffectVertex = tgpu['~unstable'].vertexFn({
   in: { vertexIndex: d.builtin.vertexIndex },
   out: { position: d.builtin.position, uv: d.vec2f },
 })((input) => {
-  const rot = rotationValuesBindGroupLayout.$.vec;
+  const rot = rotationBindGroupLayout.$.vec;
 
   // Maximum rotation angles in radians
   const maxAngle = d.f32((25.0 * Math.PI) / 180.0);

package/src/types/size.ts

@@ -0,0 +1,4 @@
+export interface Size {
+  width: number;
+  height: number;
+}

package/src/types/typeUtils.ts

@@ -1,6 +1,5 @@
 import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
 import type {
-  BindGroupPair,
   GlareOptions,
   ColorMask,
   DeepPartiallyOptional,
@@ -8,7 +7,6 @@ import type {
   HoloOptions,
 } from './types';
 import { div } from 'typegpu/std';
-import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
 import { WAVE_CALLBACKS } from '../enums/waveCallback';
 
 export const createGlareOptions = (
@@ -108,29 +106,3 @@ export const numberArrToTyped = (vec: number[]) => {
   const typed = convFn(...vec);
   return typed;
 };
-
-export const createBindGroupPair = (
-  bindGroupLayout: TgpuBindGroupLayout,
-  bindGroup: TgpuBindGroup
-): BindGroupPair => {
-  return { layout: bindGroupLayout, group: bindGroup };
-};
-
-export const createBindGroupPairs = (
-  bindGroupLayouts: TgpuBindGroupLayout[],
-  bindGroups: TgpuBindGroup[]
-): BindGroupPair[] => {
-  if (
-    bindGroupLayouts.length > 0 &&
-    bindGroupLayouts.length !== bindGroups.length
-  )
-    throw new Error(
-      'createBindGroups: bindGroupLayout and bindGroup arrrays must be of the same length'
-    );
-  const pairs: BindGroupPair[] = [];
-  for (let i = 0; i < bindGroupLayouts.length; i++) {
-    pairs.push(createBindGroupPair(bindGroupLayouts[i]!, bindGroups[i]!));
-  }
-
-  return pairs;
-};

package/src/types/types.ts

@@ -1,4 +1,8 @@
-import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
+import type {
+  TgpuBindGroup,
+  TgpuBindGroupLayout,
+  TgpuRenderPipeline,
+} from 'typegpu';
 import type { WaveCallbackFn } from '../enums/waveCallback';
 
 export type vec2 = [number, number];
@@ -55,3 +59,9 @@ export type BindGroupPair = {
   layout: TgpuBindGroupLayout;
   group: TgpuBindGroup;
 };
+
+export type ColorAttachment = Parameters<
+  TgpuRenderPipeline['withColorAttachment']
+>[0];
+
+export type PipelineAttachmentPair = [TgpuRenderPipeline, ColorAttachment];