react-native-shine 0.7.0 → 0.8.0

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,

package/src/shaders/pipelineSetups.ts

@@ -1,45 +1,31 @@
 import type {
   TgpuBindGroup,
+  TgpuComputePipeline,
   TgpuRenderPipeline,
   TgpuRoot,
   TgpuTexture,
 } from 'typegpu';
-import type { BindGroupPair } from '../types/types';
-import {
-  maskTextureBindGroupLayout,
-  textureBindGroupLayout,
-} from './bindGroupLayouts';
+import { maskTextureBindGroupLayout } 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';
+import { blend } from '../enums/effectPresets';
 
-export const attachBindGroups = (
+export function attachBindGroups(
   pipeline: TgpuRenderPipeline,
   bindGroups: TgpuBindGroup[]
-) =>
-  bindGroups.reduce(
-    (acc, bindGroup) => acc.with(bindGroup.layout, bindGroup),
-    pipeline
-  );
+): TgpuRenderPipeline;
 
-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 function attachBindGroups(
+  pipeline: TgpuComputePipeline,
+  bindGroups: TgpuBindGroup[]
+): TgpuComputePipeline;
+
+export function attachBindGroups(
+  pipeline: TgpuRenderPipeline | TgpuComputePipeline,
+  bindGroups: TgpuBindGroup[]
+) {
+  return bindGroups.reduce((acc, bindGroup) => acc.with(bindGroup), pipeline);
+}
 
 export const getDefaultTarget = (
   presentationFormat: GPUTextureFormat,
@@ -51,17 +37,6 @@ export const getDefaultTarget = (
   };
 };
 
-export const attachBindGroupsToPass = (
-  pass: any,
-  bindGroupPairs: BindGroupPair[]
-) => {
-  for (const pair of bindGroupPairs) {
-    pass.setBindGroup(pair.layout, pair.group);
-  }
-
-  return pass;
-};
-
 export const createMaskPipeline = (
   root: TgpuRoot,
   maskTexture: TgpuTexture | undefined,
@@ -90,87 +65,3 @@ export const createMaskPipeline = (
 
   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/bufferManager.ts

@@ -1,10 +1,15 @@
+import { type BufferSchemas } from './../bindGroupLayouts';
 import type { TgpuRoot, TgpuBuffer, ValidateBufferSchema } from 'typegpu';
 import { debug } from '../../config/debugMode';
+import type { Infer } from 'typegpu/data';
 
 export type BufferUsageType = 'uniform' | 'storage' | 'vertex';
 
 type BufferWithUsageFromEntry<
-  TEntry extends { schema: ValidateBufferSchema<any>; usage: BufferUsageType },
+  TEntry extends {
+    schema: ValidateBufferSchema<BufferSchemas>;
+    usage: BufferUsageType;
+  },
 > = TEntry['usage'] extends 'uniform'
   ? TgpuBuffer<TEntry['schema']> & { usableAsUniform: true }
   : TEntry['usage'] extends 'storage'
@@ -16,7 +21,7 @@ type BufferWithUsageFromEntry<
 export class TypedBufferMap<
   TSchemas extends Record<
     string,
-    { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+    { schema: ValidateBufferSchema<BufferSchemas>; usage: BufferUsageType }
   >,
 > {
   private buffers: {
@@ -41,7 +46,7 @@ export class TypedBufferMap<
   addBuffer<K extends keyof TSchemas>(
     root: TgpuRoot,
     key: K,
-    initValues?: TSchemas[K]['schema']['_TSType']
+    initValues?: Infer<TSchemas[K]['schema']>
   ): BufferWithUsageFromEntry<TSchemas[K]> {
     const entry = this.schemas[key];
     if (!entry) {

package/src/shaders/resourceManagement/buffersMap.ts

@@ -0,0 +1,80 @@
+import type {
+  StorageFlag,
+  TgpuBuffer,
+  TgpuRoot,
+  ValidateStorageSchema,
+  ValidateUniformSchema,
+} from 'typegpu';
+import type { AnyWgslData, Infer } from 'typegpu/data';
+import { debug } from '../../config/debugMode';
+import type { DeepPartial, TgpuUniformBuffer } from '../../types/types';
+import { deepMerge } from '../utils';
+
+export class BuffersMap extends Map<AnyWgslData, TgpuBuffer<AnyWgslData>> {
+  constructor(private root: TgpuRoot) {
+    super();
+  }
+  syncUniformBuffer<Key extends ValidateUniformSchema<AnyWgslData>>(
+    schema: Key,
+    defaultOptions: Infer<Key>,
+    options?: DeepPartial<Infer<Key>>
+  ): TgpuUniformBuffer<Key> {
+    const resolvedOptions = options
+      ? deepMerge(defaultOptions, options)
+      : defaultOptions;
+
+    if (this.has(schema)) {
+      if (debug) {
+        console.warn(
+          `Buffer "${String(schema)}" already exists. Updating values.`
+        );
+      }
+
+      const buffer = this.get(schema)!;
+      buffer.write(resolvedOptions);
+      return buffer as TgpuUniformBuffer<Key>;
+    }
+
+    const result = this.root.createUniform(
+      schema as ValidateUniformSchema<Key>,
+      resolvedOptions
+    );
+    const buffer = result.buffer;
+
+    this.set(schema, buffer);
+
+    return buffer;
+  }
+
+  syncStorageBuffer<Key extends ValidateStorageSchema<AnyWgslData>>(
+    schema: Key,
+    defaultOptions: Infer<Key>,
+    options?: DeepPartial<Infer<Key>>
+  ): TgpuBuffer<Key> & StorageFlag {
+    const resolvedOptions = options
+      ? deepMerge(defaultOptions, options)
+      : defaultOptions;
+
+    if (this.has(schema)) {
+      if (debug) {
+        console.warn(
+          `Buffer "${String(schema)}" already exists. Updating values.`
+        );
+      }
+
+      const buffer = this.get(schema)!;
+      buffer.write(resolvedOptions);
+      return buffer as TgpuBuffer<Key> & StorageFlag;
+    }
+
+    const result = this.root.createMutable(
+      schema as ValidateStorageSchema<Key>,
+      resolvedOptions
+    );
+    const buffer = result.buffer;
+
+    this.set(schema, buffer);
+
+    return buffer;
+  }
+}

package/src/shaders/resourceManagement/pipelineMap.ts

@@ -0,0 +1,169 @@
+import type {
+  TextureProps,
+  TgpuBindGroup,
+  TgpuComputeFn,
+  TgpuComputePipeline,
+  TgpuRenderPipeline,
+  TgpuRoot,
+  TgpuTexture,
+} from 'typegpu';
+import { vec3f } from 'typegpu/data';
+import mainVertex from '../vertexShaders/mainVertex';
+import type {
+  AnySchema,
+  BufferConfig,
+  ColorAttachment,
+  FragmentShaderReturnType,
+  FragmentType,
+  UnwrapLayout,
+} from '../../types/types';
+import { baseTextureFragment } from '../fragmentShaders/baseTextureFragment';
+import {
+  sharedBindGroupLayout,
+  rotationSchema,
+  maskTextureBindGroupLayout,
+} from '../bindGroupLayouts';
+import { BuffersMap } from './buffersMap';
+import { Effects } from '../../enums/effectPresets';
+
+type PipelineMap<Key> = Map<Key, TgpuRenderPipeline<FragmentShaderReturnType>>;
+type ComputePipelineMap<Key> = Map<Key, TgpuComputePipeline>;
+
+const defaultAttachment = {
+  clearValue: [0, 0, 0, 0],
+  loadOp: 'load',
+  storeOp: 'store',
+} as const;
+
+export class PipelineManager {
+  sharedBindGroup: TgpuBindGroup<UnwrapLayout<typeof sharedBindGroupLayout>>;
+  maskBindGroup: TgpuBindGroup<UnwrapLayout<typeof maskTextureBindGroupLayout>>;
+  buffersMap: BuffersMap;
+  pipelinesMap: PipelineMap<FragmentType>;
+  computePipelinesMap: ComputePipelineMap<TgpuComputeFn>;
+  constructor(
+    private root: TgpuRoot,
+    private presentationFormat: GPUTextureFormat,
+    imageTexture: TgpuTexture<TextureProps>,
+    maskTexture?: TgpuTexture<TextureProps>
+  ) {
+    this.buffersMap = new BuffersMap(root);
+    this.pipelinesMap = new Map();
+    const rotationBuffer = this.buffersMap.syncUniformBuffer(
+      rotationSchema,
+      vec3f(0.0)
+    );
+    this.computePipelinesMap = new Map();
+
+    const sampler = root['~unstable'].createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+      mipmapFilter: 'linear',
+    });
+    this.sharedBindGroup = root.createBindGroup(sharedBindGroupLayout, {
+      texture: root.unwrap(imageTexture).createView(),
+      sampler,
+      rot: rotationBuffer,
+    });
+    //todo: make this optional and create when needed
+    this.maskBindGroup = root.createBindGroup(maskTextureBindGroupLayout, {
+      texture: root.unwrap(maskTexture || imageTexture).createView(),
+      sampler,
+    });
+  }
+
+  addPipeline(
+    fragment: FragmentType,
+    bindGroupProp?: TgpuBindGroup[],
+    blend?: GPUBlendState
+  ) {
+    if (this.pipelinesMap.has(fragment)) {
+      return this.pipelinesMap.get(fragment);
+    }
+
+    let pipeline = this.root['~unstable']
+      .withVertex(mainVertex, {})
+      .withFragment(fragment, { format: this.presentationFormat, blend })
+      .createPipeline();
+
+    let bindGroups: TgpuBindGroup<any>[] = [this.sharedBindGroup];
+
+    if (bindGroupProp) {
+      bindGroups = [...bindGroups, ...bindGroupProp];
+    }
+
+    for (const bindGroup of bindGroups) {
+      pipeline = pipeline.with(bindGroup);
+    }
+
+    this.pipelinesMap.set(fragment, pipeline);
+    return pipeline;
+  }
+
+  addComputePipeline(compute: TgpuComputeFn, bindGroupProp?: TgpuBindGroup[]) {
+    if (this.computePipelinesMap.has(compute)) {
+      return this.computePipelinesMap.get(compute);
+    }
+
+    let pipeline = this.root['~unstable'].withCompute(compute).createPipeline();
+
+    let bindGroups: TgpuBindGroup<any>[] = [this.sharedBindGroup];
+
+    if (bindGroupProp) {
+      bindGroups = [...bindGroups, ...bindGroupProp];
+    }
+
+    for (const bindGroup of bindGroups) {
+      pipeline = pipeline.with(bindGroup);
+    }
+
+    this.computePipelinesMap.set(compute, pipeline);
+    return pipeline;
+  }
+
+  //TODO: fix any typing
+  addPipelineWithBuffer(name: keyof typeof Effects, options?: any) {
+    const { fragment, blend, buffers, bindGroupCreator } = Effects[name];
+
+    const genericBuffers = buffers as readonly BufferConfig<AnySchema>[];
+
+    const updatedBuffers = genericBuffers.map(({ schema, defaultOptions }) =>
+      this.buffersMap.syncUniformBuffer(schema, defaultOptions, options)
+    );
+
+    if (this.pipelinesMap.has(fragment)) {
+      return this.pipelinesMap.get(fragment);
+    }
+
+    const bindGroup = bindGroupCreator(
+      { root: this.root, maskBindGroup: this.maskBindGroup },
+      updatedBuffers as any
+    );
+
+    return this.addPipeline(fragment, bindGroup, blend);
+  }
+
+  async runComputePipeline(compute: TgpuComputeFn) {
+    const pipeline = this.computePipelinesMap.get(compute);
+    if (!pipeline) {
+      throw new Error('Compute pipeline not found');
+    }
+    pipeline.dispatchWorkgroups(1, 1, 1);
+    await this.root.device.queue.onSubmittedWorkDone();
+  }
+
+  renderPipelines(view: GPUTextureView) {
+    this.pipelinesMap.forEach((pipeline, fragment) => {
+      const attachment: ColorAttachment = {
+        ...defaultAttachment,
+        view,
+      };
+
+      if (fragment === baseTextureFragment) {
+        attachment.loadOp = 'clear';
+      }
+
+      pipeline.withColorAttachment(attachment).draw(6);
+    });
+  }
+}

package/src/shaders/resourceManagement/textures.ts

@@ -37,13 +37,13 @@ export async function loadBitmap(
 ) {
   const bitmap = await getBitmapFromURI(imageURI);
   let texture = await createTexture(root, bitmap);
-  texture = await addTextureUsage(texture, usage);
+  texture = addTextureUsage(texture, usage);
 
   setTexture(texture);
   await loadTexture(root, bitmap, texture);
 }
 
-export async function addTextureUsage(
+function addTextureUsage(
   texture: TgpuTexture,
   usage: ('sampled' | 'render')[]
 ) {

package/src/shaders/tgpuUtils.ts

@@ -1,6 +1,7 @@
 import tgpu from 'typegpu';
 import * as std from 'typegpu/std';
 import * as d from 'typegpu/data';
+import { sharedBindGroupLayout } from './bindGroupLayouts';
 
 export const hueShift = tgpu.fn(
   [d.vec3f, d.f32],
@@ -160,3 +161,31 @@ export const linearstep = tgpu.fn(
   const t = (x - num1) / (num2 - num1);
   return std.clamp(t, 0, 1);
 });
+
+export const getPixelColorFromVector = tgpu.fn(
+  [d.vec2f],
+  d.vec4f
+)((coords) => {
+  return std.textureSample(
+    sharedBindGroupLayout.$.texture,
+    sharedBindGroupLayout.$.sampler,
+    coords
+  );
+});
+
+export const getPixelColorFromNonReversedVector = tgpu.fn(
+  [d.vec2f],
+  d.vec4f
+)((input) => {
+  const coords = d.vec2f(input.x, 1.0 - input.y);
+  return getPixelColorFromVector(coords);
+});
+
+export const random = tgpu.fn(
+  [d.vec2f],
+  d.f32
+)((st) => {
+  return std.fract(
+    std.sin(std.dot(st, d.vec2f(12.9898, 78.233))) * 437358.845701
+  );
+});

package/src/shaders/utils.ts

@@ -57,3 +57,32 @@ export function subscribeToOrientationChange(
 
   return () => subscription.remove();
 }
+
+export function deepMerge<T>(target: T, source: unknown): T {
+  if (
+    typeof target !== 'object' ||
+    target === null ||
+    typeof source !== 'object' ||
+    source === null
+  ) {
+    return source as T;
+  }
+
+  const result = { ...target } as any;
+  const src = source as any;
+
+  for (const key in src) {
+    if (Object.prototype.hasOwnProperty.call(src, key)) {
+      if (
+        key in result &&
+        typeof result[key] === 'object' &&
+        result[key] !== null
+      ) {
+        result[key] = deepMerge(result[key], src[key]);
+      } else {
+        result[key] = src[key];
+      }
+    }
+  }
+  return result;
+}

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 { rotationBindGroupLayout } from '../bindGroupLayouts';
+import { sharedBindGroupLayout } from '../bindGroupLayouts';
 
 const mainRotationEffectVertex = tgpu['~unstable'].vertexFn({
   in: { vertexIndex: d.builtin.vertexIndex },
   out: { position: d.builtin.position, uv: d.vec2f },
 })((input) => {
-  const rot = rotationBindGroupLayout.$.vec;
+  const rot = sharedBindGroupLayout.$.rot;
 
   // Maximum rotation angles in radians
   const maxAngle = d.f32((25.0 * Math.PI) / 180.0);