react-native-shine 0.0.0 → 0.2.0

package/src/shaders/fragmentShaders/bloomFragment.ts

@@ -0,0 +1,83 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  rotationValuesBindGroupLayout,
+  textureBindGroupLayout,
+  bloomOptionsBindGroupLayout,
+  colorMaskBindGroupLayout,
+} from '../bindGroupLayouts';
+import { bloomColorShift, hueShift, overlayChannels } from '../tgpuUtils';
+
+const bloomFragment = 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 = rotationValuesBindGroupLayout.$.vec;
+  const center = std.add(d.vec2f(0.0), d.vec2f(rot.x, rot.y));
+
+  const bloomOptions = bloomOptionsBindGroupLayout.$.bloomOptions;
+  const bloomIntensity = bloomOptions.bloomIntensity;
+  const glowPower = bloomOptions.glowPower;
+  const hueBlendPower = bloomOptions.hueBlendPower;
+  const hueShiftAngleMax = bloomOptions.hueShiftAngleMax;
+  const hueShiftAngleMin = bloomOptions.hueShiftAngleMin;
+  const lightIntensity = bloomOptions.lightIntensity;
+
+  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;
+  }
+
+  //bloomIntensity
+  const dst = std.exp(-std.distance(center, centeredCoords));
+  const distToCenter = std.smoothstep(0.0, 1 / bloomIntensity, 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 = bloomColorShift(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 default bloomFragment;

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -0,0 +1,35 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+import * as std from 'typegpu/std';
+import {
+  textureBindGroupLayout,
+  colorMaskBindGroupLayout,
+} from '../bindGroupLayouts';
+
+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);
+
+  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;
+  }
+  std.discard();
+});
+
+export default colorMaskFragment;

package/src/shaders/pipelineSetups.ts

@@ -0,0 +1,33 @@
+import type { TgpuRenderPipeline } from 'typegpu';
+import type { BindGroupPair } from '../types/types';
+
+export const attachBindGroups = (
+  pipeline: TgpuRenderPipeline,
+  bindGroupPairs: BindGroupPair[]
+) => {
+  for (const pair of bindGroupPairs) {
+    pipeline = pipeline.with(pair.layout, pair.group);
+  }
+
+  return pipeline;
+};
+
+export const getDefaultTarget = (
+  presentationFormat: GPUTextureFormat
+): 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',
+      },
+    },
+  };
+};

package/src/shaders/resourceManagement.ts

@@ -0,0 +1,22 @@
+import { Asset } from 'expo-asset';
+
+const getBitmapFromURI = async (uri: string): Promise<ImageBitmap> => {
+  if (uriToBitmapMap.has(uri)) return uriToBitmapMap.get(uri)!;
+  console.log('bitmap not found in cache, fetching from URI');
+
+  const ast = Asset.fromURI(uri);
+  await ast.downloadAsync();
+  const fileURI = ast.localUri || ast.uri;
+
+  console.log('fetch completed, creating ImageBitmap');
+  const response = await fetch(fileURI);
+  const blob = await response.blob();
+  const imageBitmap = await createImageBitmap(blob);
+
+  uriToBitmapMap.set(uri, imageBitmap);
+  return imageBitmap;
+};
+
+const uriToBitmapMap = new Map<string, ImageBitmap>();
+
+export default getBitmapFromURI;

package/src/shaders/tgpuUtils.ts

@@ -0,0 +1,75 @@
+import tgpu from 'typegpu';
+import * as std from 'typegpu/std';
+import * as d from 'typegpu/data';
+
+export const hueShift = tgpu.fn(
+  [d.vec3f, d.f32],
+  d.vec3f
+)((rgb, angle) => {
+  const yiqY = std.add(
+    std.mul(rgb.x, 0.299),
+    std.add(std.mul(rgb.y, 0.587), std.mul(rgb.z, 0.114))
+  );
+  const yiqI = std.add(
+    std.mul(rgb.x, 0.596),
+    std.sub(std.mul(rgb.y, -0.274), std.mul(rgb.z, 0.322))
+  );
+  const yiqQ = std.add(
+    std.mul(rgb.x, 0.211),
+    std.sub(std.mul(rgb.y, -0.523), std.mul(rgb.z, 0.311))
+  );
+
+  // Rotate hue
+  const cosA = std.cos(angle);
+  const sinA = std.sin(angle);
+  const i = std.sub(std.mul(yiqI, cosA), std.mul(yiqQ, sinA));
+  const q = std.add(std.mul(yiqI, sinA), std.mul(yiqQ, cosA));
+
+  // Convert back to RGB
+  const r = std.add(std.add(yiqY, std.mul(i, 0.956)), std.mul(q, 0.621));
+  const g = std.add(std.add(yiqY, std.mul(i, -0.272)), std.mul(q, -0.647));
+  const b = std.add(std.add(yiqY, std.mul(i, -1.105)), std.mul(q, 1.702));
+
+  return d.vec3f(r, g, b);
+});
+
+export const bloomColorShift = tgpu.fn(
+  [d.vec3f, d.f32],
+  d.vec3f
+)((color, power) => {
+  const maxValue = std.max(std.max(color.x, color.y), color.z);
+  const scale = std.mix(
+    d.f32(1.0),
+    d.f32(1.0) / std.max(maxValue, d.f32(0.001)),
+    power
+  );
+  const boosted = std.mul(color, scale);
+  const saturated = std.mix(color, boosted, power);
+
+  return saturated;
+});
+
+export const overlayChannel = tgpu.fn(
+  [d.f32, d.f32],
+  d.f32
+)((base, blend) => {
+  const mult = std.mul(2.0, std.mul(base, blend));
+
+  const screen = std.sub(
+    1.0,
+    std.mul(2.0, std.mul(std.sub(1.0, base), std.sub(1.0, blend)))
+  );
+
+  return std.select(screen, mult, base < d.f32(0.5));
+});
+
+export const overlayChannels = tgpu.fn(
+  [d.vec3f, d.vec3f],
+  d.vec3f
+)((base, blend) => {
+  return d.vec3f(
+    overlayChannel(base.x, blend.x),
+    overlayChannel(base.y, blend.y),
+    overlayChannel(base.z, blend.z)
+  );
+});

package/src/shaders/utils.ts

@@ -0,0 +1,103 @@
+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
+): vec3 => {
+  'worklet';
+  const t: vec3 = [
+    quaternion[1] * vec[2] - quaternion[2] * vec[1],
+    quaternion[2] * vec[0] - quaternion[0] * vec[2],
+    quaternion[0] * vec[1] - quaternion[1] * vec[0],
+  ];
+
+  // t2 = qw * forward + t
+  const t2: vec3 = [
+    quaternion[3] * vec[0] + t[0],
+    quaternion[3] * vec[1] + t[1],
+    quaternion[3] * vec[2] + t[2],
+  ];
+
+  const crossQT2: vec3 = [
+    quaternion[1] * t2[2] - quaternion[2] * t2[1],
+    quaternion[2] * t2[0] - quaternion[0] * t2[2],
+    quaternion[0] * t2[1] - quaternion[1] * t2[0],
+  ];
+
+  // rotated = vec + 2.0 * cross(q, t2)
+  const rotated: vec3 = [
+    vec[0] + 2.0 * crossQT2[0],
+    vec[1] + 2.0 * crossQT2[1],
+    vec[2] + 2.0 * crossQT2[2],
+  ];
+
+  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() {
+  const { width, height } = Dimensions.get('window');
+  return width >= height ? 90 : 0;
+}
+
+// Subscribe to orientation change via Dimensions API only
+export function subscribeToOrientationChange(
+  callback: (angleDeg: number) => void
+) {
+  callback(getAngleFromDimensions());
+  const handler = () => {
+    callback(getAngleFromDimensions());
+  };
+
+  const dimSub = Dimensions.addEventListener('change', handler);
+  return () => {
+    dimSub.remove();
+  };
+}

package/src/shaders/vertexShaders/mainVertex.ts

@@ -0,0 +1,35 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+
+const mainVertex = tgpu['~unstable'].vertexFn({
+  in: { vertexIndex: d.builtin.vertexIndex },
+  out: { position: d.builtin.position, uv: d.vec2f },
+})((input) => {
+  const position: d.v2f[] = [
+    d.vec2f(-1.0, -1.0), // bottom left
+    d.vec2f(1.0, 1.0), // top right
+    d.vec2f(1.0, -1.0), // bottom right
+    d.vec2f(-1.0, -1.0), // bottom left
+    d.vec2f(-1.0, 1.0), // top left
+    d.vec2f(1.0, 1.0), // top right
+  ];
+
+  const uv: 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 = position[index] as d.v2f;
+
+  return {
+    position: d.vec4f(pos.xy, 0.0, 1.0),
+    uv: uv[index] as d.v2f,
+  };
+});
+
+export default mainVertex;

package/src/types/typeUtils.ts

@@ -0,0 +1,122 @@
+import { f32, vec2f, vec3f, vec4f } from 'typegpu/data';
+import type {
+  BindGroupPair,
+  BloomOptions,
+  ColorMask,
+  DeepPartiallyOptional,
+  vec3,
+} from './types';
+import { div } from 'typegpu/std';
+import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
+
+export const createBloomOptions = (
+  options: Partial<BloomOptions>
+): BloomOptions => {
+  const {
+    glowPower,
+    hueShiftAngleMax,
+    hueShiftAngleMin,
+    hueBlendPower,
+    lightIntensity,
+    bloomIntensity,
+  } = options;
+
+  const bloomOp = {
+    glowPower: glowPower ?? 1.0,
+    hueShiftAngleMax: hueShiftAngleMax ?? 1.0,
+    hueShiftAngleMin: hueShiftAngleMin ?? 0.0,
+    hueBlendPower: hueBlendPower ?? 1.0,
+    lightIntensity: lightIntensity ?? 1.0,
+    bloomIntensity: bloomIntensity ?? 1.0,
+  };
+
+  return bloomOp;
+};
+
+export const mapToF32 = <T extends Record<string, number>>(
+  obj: T
+): {
+  [K in keyof T]: ReturnType<typeof f32>;
+} => {
+  const result = {} as any;
+  for (const key in obj) {
+    result[key] = f32(obj[key]);
+  }
+
+  return result;
+};
+
+export const createColorMask = (
+  colorMask: DeepPartiallyOptional<ColorMask, 'baseColor'>
+): ColorMask => {
+  const { baseColor, rgbToleranceRange } = colorMask;
+  const baseTolerance = {
+    upper: [20, 20, 20] as vec3,
+    lower: [20, 20, 20] as vec3,
+  };
+  const tolerance = { ...baseTolerance, ...rgbToleranceRange };
+
+  const mask: ColorMask = {
+    baseColor: baseColor,
+    rgbToleranceRange: tolerance,
+  };
+
+  return mask;
+};
+
+export const colorMaskToTyped = (colorMask: ColorMask) => {
+  const result = {
+    baseColor: div(numberArrToTyped(colorMask.baseColor), 255),
+    rgbToleranceRange: {
+      upper: div(numberArrToTyped(colorMask.rgbToleranceRange.upper), 255),
+      lower: div(numberArrToTyped(colorMask.rgbToleranceRange.lower), 255),
+    },
+  };
+  return result;
+};
+
+const numberArrToTyped = (vec: number[]) => {
+  let convFn: ((...args: number[]) => any) | null = null;
+  switch (vec.length) {
+    case 2:
+      convFn = vec2f;
+      break;
+    case 3:
+      convFn = vec3f;
+      break;
+    case 4:
+      convFn = vec4f;
+      break;
+    default:
+      throw new Error('numberArrToTyped: Vector must be of length [2-4]');
+  }
+
+  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

@@ -0,0 +1,51 @@
+import type { TgpuBindGroup, TgpuBindGroupLayout } from 'typegpu';
+
+export type vec2 = [number, number];
+export type vec3 = [number, number, number];
+export type vec4 = [number, number, number, number];
+export type quaternion = vec4;
+
+export type BloomOptions = {
+  glowPower: number;
+  hueShiftAngleMax: number;
+  hueShiftAngleMin: number;
+  hueBlendPower: number;
+  lightIntensity: number;
+  bloomIntensity: number;
+};
+
+export type ColorMask = {
+  baseColor: vec3;
+  rgbToleranceRange: {
+    upper: vec3;
+    lower: vec3;
+  };
+};
+
+//makes all keys besides specified optional
+export type PartiallyOptional<T, K extends keyof T> = {
+  [P in K]: T[P];
+} & Partial<Omit<T, K>>;
+
+export type Primitive =
+  | string
+  | number
+  | boolean
+  | bigint
+  | symbol
+  | null
+  | undefined;
+
+//makes every object and its' properties optional
+//unless the objects are contained in any kind of array
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends Primitive | any[] ? T[P] : DeepPartial<T[P]>;
+};
+
+export type DeepPartiallyOptional<T, K extends keyof T> = Required<Pick<T, K>> &
+  DeepPartial<Omit<T, K>>;
+
+export type BindGroupPair = {
+  layout: TgpuBindGroupLayout;
+  group: TgpuBindGroup;
+};