react-native-shine 0.2.2 → 0.3.0

package/src/shaders/fragmentShaders/holoFragment.ts

@@ -0,0 +1,43 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  rotationValuesBindGroupLayout,
+  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 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 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 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);
+
+  return d.vec4f(finalColor, 1 - falloff * dist * 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,
+  rotationValuesBindGroupLayout,
+  glareOptionsBindGroupLayout,
+} 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 = rotationValuesBindGroupLayout.$.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 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,5 +1,19 @@
-import type { TgpuRenderPipeline } from 'typegpu';
+import type { 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';
+import { holoFragment } from './fragmentShaders/holoFragment';
+import {
+  WAVE_CALLBACKS,
+  waveCallbackFn,
+  waveCallbackSlot,
+} from '../enums/waveCallback';
 
 export const attachBindGroups = (
   pipeline: TgpuRenderPipeline,
@@ -12,23 +26,26 @@ export const attachBindGroups = (
   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 +59,133 @@ export const attachBindGroupsToPass = (
 
   return pass;
 };
+
+export const createMaskPipeline = (
+  root: TgpuRoot,
+  maskTexture: TgpuTexture | null,
+  BGP: BindGroupPair[],
+  sampler: GPUSampler,
+  presentationFormat: GPUTextureFormat
+): TgpuRenderPipeline | null => {
+  if (!maskTexture) return null;
+
+  const maskTextureBindGroup = root.createBindGroup(
+    maskTextureBindGroupLayout,
+    {
+      texture: root.unwrap(maskTexture).createView(),
+      sampler,
+    }
+  );
+  const maskBGP: BindGroupPair[] = createBindGroupPairs(
+    [maskTextureBindGroupLayout],
+    [maskTextureBindGroup]
+  );
+  for (let i = 0; i < BGP.length; i++) {
+    maskBGP.push(BGP[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 | null,
+  BGP: BindGroupPair[],
+  sampler: GPUSampler,
+  presentationFormat: GPUTextureFormat
+): TgpuRenderPipeline | null => {
+  if (!texture) return null;
+
+  const reverseHoloBindGroup = root.createBindGroup(
+    maskTextureBindGroupLayout,
+    {
+      texture: root.unwrap(texture).createView(),
+      sampler,
+    }
+  );
+  const reverseHoloBGP: BindGroupPair[] = BGP;
+  reverseHoloBGP.push(
+    createBindGroupPair(maskTextureBindGroupLayout, 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 | null,
+  BGP: BindGroupPair[],
+  sampler: GPUSampler,
+  presentationFormat: GPUTextureFormat
+): TgpuRenderPipeline | null => {
+  if (!texture) return null;
+
+  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]);
+  return rainbowHoloPipeline;
+};
+
+export const pipelineRenderFunction = (
+  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);
+        }
+      }
+    );
+    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);
+    }
+  }
+};

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,30 @@
+import { type TgpuRoot, type TgpuTexture } from 'typegpu';
+
+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]
+  );
+};

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);
+});

package/src/shaders/utils.ts

@@ -1,36 +1,6 @@
-import { type TgpuRoot, type TgpuTexture } from 'typegpu';
 import type { quaternion, vec3 } from '../types/types';
 import { Dimensions } from 'react-native';
 
-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 const rotateVectorByQuaternion = (
   vec: vec3,
   quaternion: quaternion

package/src/shaders/vertexShaders/mainRotationEffectVertex.ts

@@ -0,0 +1,76 @@
+import tgpu from 'typegpu';
+import * as std from 'typegpu/std';
+import * as d from 'typegpu/data';
+import { rotationValuesBindGroupLayout } 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;
+
+  // Maximum rotation angles in radians
+  const maxAngle = d.f32((25.0 * Math.PI) / 180.0);
+  const ax = d.f32(-rot.y * maxAngle); // rotateX depends on vertical touch
+  const ay = d.f32(-rot.x * 1.0); // rotateY depends on horizontal touch
+
+  const positions: d.v2f[] = [
+    d.vec2f(-1.0, -1.0),
+    d.vec2f(1.0, 1.0),
+    d.vec2f(1.0, -1.0),
+    d.vec2f(-1.0, -1.0),
+    d.vec2f(-1.0, 1.0),
+    d.vec2f(1.0, 1.0),
+  ];
+
+  const uvs: d.v2f[] = [
+    d.vec2f(0.0, 0.0),
+    d.vec2f(1.0, 1.0),
+    d.vec2f(1.0, 0.0),
+    d.vec2f(0.0, 0.0),
+    d.vec2f(0.0, 1.0),
+    d.vec2f(1.0, 1.0),
+  ];
+
+  const index = input.vertexIndex;
+  const pos = d.vec3f(positions[index] as d.v2f, 0.0);
+
+  const pivot = d.vec3f(rot.x, rot.y, 0.0);
+
+  const relative = std.sub(pos, pivot);
+  const cosX = std.cos(ax);
+  const sinX = std.sin(ax);
+  const rotatedX = d.vec3f(
+    relative.x,
+    cosX * relative.y - sinX * relative.z,
+    sinX * relative.y + cosX * relative.z
+  );
+
+  const cosY = std.cos(ay);
+  const sinY = std.sin(ay);
+  const rotatedXY = d.vec3f(
+    cosY * rotatedX.x + sinY * rotatedX.z,
+    rotatedX.y,
+    -sinY * rotatedX.x + cosY * rotatedX.z
+  );
+
+  const finalPos3D = std.add(rotatedXY, pivot);
+  const perspective = 100.0;
+  const zOffset = 2.5;
+  const z = finalPos3D.z + zOffset;
+  const persp = perspective / (perspective + z);
+
+  const finalPos = d.vec4f(
+    finalPos3D.x * persp,
+    finalPos3D.y * persp,
+    0.0,
+    1.0
+  );
+
+  return {
+    position: finalPos,
+    uv: uvs[index] as d.v2f,
+  };
+});
+
+export default mainRotationEffectVertex;

package/src/types/typeUtils.ts

@@ -1,36 +1,38 @@
 import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
 import type {
   BindGroupPair,
-  BloomOptions,
+  GlareOptions,
   ColorMask,
   DeepPartiallyOptional,
   vec3,
+  HoloOptions,
 } from './types';
 import { div } from 'typegpu/std';
 import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
+import { WAVE_CALLBACKS } from '../enums/waveCallback';
 
-export const createBloomOptions = (
-  options: Partial<BloomOptions>
-): BloomOptions => {
+export const createGlareOptions = (
+  options: Partial<GlareOptions>
+): GlareOptions => {
   const {
     glowPower,
     hueShiftAngleMax,
     hueShiftAngleMin,
     hueBlendPower,
     lightIntensity,
-    bloomIntensity,
+    glareIntensity,
   } = options;
 
-  const bloomOp = {
+  const glareOp = {
     glowPower: glowPower ?? 1.0,
     hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
     hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
     hueBlendPower: hueBlendPower ?? 1.0,
     lightIntensity: lightIntensity ?? 1.0,
-    bloomIntensity: bloomIntensity ?? 1.0,
+    glareIntensity: glareIntensity ?? 1.0,
   };
 
-  return bloomOp;
+  return glareOp;
 };
 
 export const mapToF32 = <T extends Record<string, number>>(
@@ -75,6 +77,18 @@ export const colorMaskToTyped = (colorMask: ColorMask) => {
   return result;
 };
 
+export const createHoloOptions = (
+  options: Partial<HoloOptions>
+): HoloOptions => {
+  const { intensity, waveCallback } = options;
+  const holoOpt = {
+    intensity: intensity ?? 0.7,
+    waveCallback: waveCallback ?? WAVE_CALLBACKS.default,
+  };
+
+  return holoOpt;
+};
+
 export const numberArrToTyped = (vec: number[]) => {
   let convFn: ((...args: number[]) => any) | null = null;
   switch (vec.length) {