react-native-shine 0.0.0 → 0.2.0

package/package.json

@@ -1,24 +1,169 @@
 {
   "name": "react-native-shine",
-  "version": "0.0.0",
-  "description": "Add beautiful shine to your components",
-  "main": "index.js",
+  "version": "0.2.0",
+  "description": "Fast and efficient way of adding interactive effects that are run entirely on shaders using typeGPU.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "example": "yarn workspace react-native-shine-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it --only-version"
   },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wojtus7/react-native-shine.git"
+    "url": "git+https://github.com/wojtus7/react-native-shine.git.git"
   },
-  "keywords": [
-    "glare",
-    "share",
-    "react-native"
-  ],
-  "author": "Wojciech Stanisz",
+  "author": "VoidFrog <shadownn0000@gmail.com> (https://github.com/VoidFrog)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/wojtus7/react-native-shine/issues"
+    "url": "https://github.com/wojtus7/react-native-shine.git/issues"
+  },
+  "homepage": "https://github.com/wojtus7/react-native-shine.git#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/babel-preset": "0.78.2",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "@webgpu/types": "^0.1.64",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-reanimated": "^4.0.1",
+    "react-native-wgpu": "^0.2.1",
+    "react-native-worklets": "^0.4.1",
+    "release-it": "^17.10.0",
+    "typegpu": "^0.7.0",
+    "typescript": "^5.8.3",
+    "unplugin-typegpu": "^0.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-web": "^0.21.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.52.0"
   },
-  "homepage": "https://github.com/wojtus7/react-native-shine#readme"
+  "dependencies": {
+    "expo-asset": "^11.1.7",
+    "react-native-orientation-locker": "^1.7.0",
+    "react-native-reanimated": "^4.0.1",
+    "react-native-wgpu": "^0.2.0",
+    "react-native-worklets": "^0.4.1",
+    "typegpu": "^0.7.0"
+  }
 }

package/src/index.tsx

@@ -0,0 +1,289 @@
+import { useEffect, useRef, useState } from 'react';
+import { Canvas, useDevice, useGPUContext } from 'react-native-wgpu';
+import { getOrInitRoot } from './roots';
+import mainVertex from './shaders/vertexShaders/mainVertex';
+import getBitmapFromURI from './shaders/resourceManagement';
+import {
+  createTexture,
+  loadTexture,
+  clamp,
+  rotate2D,
+  subscribeToOrientationChange,
+  getAngleFromDimensions,
+} from './shaders/utils';
+import type { TgpuTexture } from 'typegpu';
+import {
+  bloomOptionsBindGroupLayout,
+  colorMaskBindGroupLayout,
+  rotationValuesBindGroupLayout,
+  textureBindGroupLayout,
+} from './shaders/bindGroupLayouts';
+import {
+  SensorType,
+  useAnimatedSensor,
+  useDerivedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import * as d from 'typegpu/data';
+import { Platform } from 'react-native';
+import bloomFragment from './shaders/fragmentShaders/bloomFragment';
+import {
+  createBloomOptionsBindGroup,
+  createBloomOptionsBuffer,
+  createColorMaskBindGroup,
+  createColorMaskBuffer,
+  createRotationBuffer,
+  createRotationValuesBindGroup,
+} from './shaders/bindGroupUtils';
+import {
+  createBindGroupPairs,
+  createBloomOptions,
+  createColorMask,
+} from './types/typeUtils';
+import type {
+  BindGroupPair,
+  BloomOptions,
+  ColorMask,
+  DeepPartiallyOptional,
+} from './types/types';
+import { attachBindGroups, getDefaultTarget } from './shaders/pipelineSetups';
+import colorMaskFragment from './shaders/fragmentShaders/colorMaskFragment';
+interface ShineProps {
+  width: number;
+  height: number;
+  imageURI: string;
+  bloomOptions?: Partial<BloomOptions>;
+  colorMaskOptions?: DeepPartiallyOptional<ColorMask, 'baseColor'>;
+}
+
+export function Shine({
+  width,
+  height,
+  imageURI,
+  bloomOptions,
+  colorMaskOptions,
+}: ShineProps) {
+  const { device = null } = useDevice();
+  const root = device ? getOrInitRoot(device) : null;
+  const { ref, context } = useGPUContext();
+  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+  const frameRef = useRef<number | null>(null);
+
+  const [imageTexture, setImageTexture] = useState<TgpuTexture | null>(null);
+
+  const orientationAngle = useSharedValue<number>(0); // degrees
+  const rotationShared = useSharedValue<[number, number, number]>([0, 0, 0]); // final GPU offsets
+
+  // Calibration shared values (UI thread)
+  const initialGravity = useSharedValue<[number, number, number]>([0, 0, 0]);
+  const calibSum = useSharedValue<[number, number, number]>([0, 0, 0]);
+  const calibCount = useSharedValue<number>(0);
+  const calibrated = useSharedValue<boolean>(false);
+
+  const gravitySensor = useAnimatedSensor(SensorType.GRAVITY, { interval: 20 });
+
+  // Subscribe to orientation changes and reset calibration on change
+  useEffect(() => {
+    orientationAngle.value = getAngleFromDimensions();
+    const unsubscribe = subscribeToOrientationChange((angleDeg) => {
+      orientationAngle.value = angleDeg;
+    });
+
+    return () => unsubscribe();
+  }, [orientationAngle]);
+
+  // Calibration & mapping logic
+  useDerivedValue(() => {
+    'worklet';
+
+    // console.log(orientationAngle.value);
+    const v: any = gravitySensor.sensor?.value ??
+      gravitySensor.sensor.value ?? { x: 0, y: 0, z: 0 };
+    const gx = v.x ?? 0;
+    const gy = v.y ?? 0;
+    const gz = v.z ?? 0;
+
+    const CALIBRATION_SAMPLES = 40;
+    const alpha = 0.15; // smoothing
+    const scale = 0.6;
+
+    if (!calibrated.value) {
+      // accumulate baseline in device coordinates
+      const s = calibSum.value;
+      const c = calibCount.value + 1;
+      calibSum.value = [s[0] + gx, s[1] + gy, s[2] + gz];
+      calibCount.value = c;
+
+      if (c >= CALIBRATION_SAMPLES) {
+        const avg = calibSum.value;
+        initialGravity.value = [avg[0] / c, avg[1] / c, avg[2] / c];
+        calibrated.value = true;
+      }
+
+      rotationShared.value = [0, 0, 0];
+      return;
+    }
+
+    const init = initialGravity.value;
+    const dx = gx - init[0];
+    const dy = gy - init[1];
+    const dz = gz - init[2];
+
+    // Rotate into screen coordinates so offsets auto-swap with orientation
+    const [mx, my] = rotate2D([dx, dy], -orientationAngle.value);
+    const screenX = mx;
+    const screenY = -my;
+
+    const prev = rotationShared.value;
+    const smoothX = prev[0] * (1 - alpha) + screenX * alpha;
+    const smoothY = prev[1] * (1 - alpha) + screenY * alpha;
+    const smoothZ = prev[2] * (1 - alpha) + dz * alpha;
+
+    if (orientationAngle.value === 90) {
+      rotationShared.value = [
+        clamp(smoothY * scale, -1, 1),
+        clamp(-smoothX * scale, -1, 1),
+        clamp(smoothZ * scale, -1, 1),
+      ];
+    } else {
+      rotationShared.value = [
+        clamp(smoothX * scale, -1, 1),
+        clamp(smoothY * scale, -1, 1),
+        clamp(smoothZ * scale, -1, 1),
+      ];
+    }
+  });
+
+  // Resource setup
+  useEffect(() => {
+    if (!root || !device || !context) return;
+    (async () => {
+      const bitmap = await getBitmapFromURI(imageURI);
+      const texture = await createTexture(root, bitmap);
+      setImageTexture(texture);
+      await loadTexture(root, bitmap, texture);
+    })();
+  }, [root, device, context, imageURI]);
+
+  // Render loop
+  useEffect(() => {
+    if (!root || !device || !context || !imageTexture) return;
+
+    context.configure({
+      device,
+      format: presentationFormat,
+      alphaMode: 'premultiplied',
+    });
+
+    const sampler = device.createSampler({
+      magFilter: 'linear',
+      minFilter: 'linear',
+    });
+    const textureBindGroup = root.createBindGroup(textureBindGroupLayout, {
+      texture: root.unwrap(imageTexture).createView(),
+      sampler,
+    });
+
+    const rotationBuffer = createRotationBuffer(root);
+    const rotationBindGroup = createRotationValuesBindGroup(
+      root,
+      rotationBuffer
+    );
+
+    const bloomOptionsBuffer = createBloomOptionsBuffer(
+      root,
+      createBloomOptions(bloomOptions ?? {})
+    );
+    const bloomOptionsBindGroup = createBloomOptionsBindGroup(
+      root,
+      bloomOptionsBuffer
+    );
+
+    const colorMaskBuffer = createColorMaskBuffer(
+      root,
+      createColorMask(colorMaskOptions ?? { baseColor: [-20, -20, -20] })
+    );
+    const colorMaskBindGroup = createColorMaskBindGroup(root, colorMaskBuffer);
+
+    const bloomBGP: BindGroupPair[] = createBindGroupPairs(
+      [
+        textureBindGroupLayout,
+        rotationValuesBindGroupLayout,
+        bloomOptionsBindGroupLayout,
+        colorMaskBindGroupLayout,
+      ],
+      [
+        textureBindGroup,
+        rotationBindGroup,
+        bloomOptionsBindGroup,
+        colorMaskBindGroup,
+      ]
+    );
+
+    const maskBGP: BindGroupPair[] = createBindGroupPairs(
+      [textureBindGroupLayout, colorMaskBindGroupLayout],
+      [textureBindGroup, colorMaskBindGroup]
+    );
+
+    let bloomPipeline = root['~unstable']
+      .withVertex(mainVertex, {})
+      .withFragment(bloomFragment, getDefaultTarget(presentationFormat))
+      .createPipeline();
+    bloomPipeline = attachBindGroups(bloomPipeline, bloomBGP);
+
+    let maskPipeline = root['~unstable']
+      .withVertex(mainVertex, {})
+      .withFragment(colorMaskFragment, getDefaultTarget(presentationFormat))
+      .createPipeline();
+    maskPipeline = attachBindGroups(maskPipeline, maskBGP);
+
+    const render = () => {
+      const rot = rotationShared.value;
+      rotationBuffer.write(d.vec3f(rot[0]!, rot[1]!, rot[2]!));
+
+      bloomPipeline
+        .withColorAttachment({
+          view: context.getCurrentTexture().createView(),
+          clearValue: [0, 0, 0, 0],
+          loadOp: 'clear',
+          storeOp: 'store',
+        })
+        .draw(6);
+
+      maskPipeline
+        .withColorAttachment({
+          view: context.getCurrentTexture().createView(),
+          loadOp: 'load',
+          storeOp: 'store',
+        })
+        .draw(6);
+
+      context.present();
+      frameRef.current = requestAnimationFrame(render);
+    };
+    frameRef.current = requestAnimationFrame(render);
+
+    return () => {
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
+  }, [
+    device,
+    context,
+    root,
+    presentationFormat,
+    imageTexture,
+    rotationShared,
+    bloomOptions,
+    colorMaskOptions,
+  ]);
+
+  return (
+    <Canvas
+      ref={ref}
+      style={{ width, height, aspectRatio: width / height }}
+      transparent={Platform.OS === 'ios'}
+    />
+  );
+}
+
+export { subscribeToOrientationChange, getAngleFromDimensions };

package/src/roots.ts

@@ -0,0 +1,16 @@
+import { tgpu, type TgpuRoot } from 'typegpu';
+
+const deviceToRootMap = new WeakMap<GPUDevice, TgpuRoot>();
+
+function getOrInitRoot(device: GPUDevice): TgpuRoot {
+  let root = deviceToRootMap.get(device);
+
+  if (!root) {
+    root = tgpu.initFromDevice({ device });
+    deviceToRootMap.set(device, root);
+  }
+
+  return root;
+}
+
+export { getOrInitRoot };

package/src/shaders/bindGroupLayouts.ts

@@ -0,0 +1,40 @@
+import tgpu from 'typegpu';
+import * as d from 'typegpu/data';
+
+export const textureBindGroupLayout = tgpu.bindGroupLayout({
+  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  sampler: { sampler: 'filtering' },
+});
+
+export const rotationValuesBindGroupLayout = tgpu.bindGroupLayout({
+  vec: { uniform: d.vec3f },
+});
+
+export const bloomOptionsSchema = d.struct({
+  glowPower: d.f32,
+  hueShiftAngleMax: d.f32,
+  hueShiftAngleMin: d.f32,
+  hueBlendPower: d.f32,
+  lightIntensity: d.f32,
+  bloomIntensity: d.f32,
+});
+
+export type bloomOptionsSchema = typeof bloomOptionsSchema;
+
+export const bloomOptionsBindGroupLayout = tgpu.bindGroupLayout({
+  bloomOptions: { uniform: bloomOptionsSchema },
+});
+
+export const colorMaskSchema = d.struct({
+  baseColor: d.vec3f,
+  rgbToleranceRange: d.struct({
+    upper: d.vec3f,
+    lower: d.vec3f,
+  }),
+});
+
+export type colorMaskSchema = typeof colorMaskSchema;
+
+export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
+  mask: { uniform: colorMaskSchema },
+});

package/src/shaders/bindGroupUtils.ts

@@ -0,0 +1,101 @@
+import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
+import * as d from 'typegpu/data';
+import {
+  bloomOptionsBindGroupLayout,
+  bloomOptionsSchema,
+  colorMaskBindGroupLayout,
+  colorMaskSchema,
+  rotationValuesBindGroupLayout,
+} from './bindGroupLayouts';
+import type {
+  BloomOptions,
+  ColorMask,
+  PartiallyOptional,
+} from '../types/types';
+import {
+  colorMaskToTyped,
+  createBloomOptions,
+  createColorMask,
+  mapToF32,
+} from '../types/typeUtils';
+
+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)
+    .$usage('uniform');
+
+  return rotationValuesBuffer;
+};
+
+export const createRotationValuesBindGroup = (
+  root: TgpuRoot,
+  buffer: TgpuBuffer<d.Vec3f> & UniformFlag
+) => {
+  const rotationValuesBindGroup = root.createBindGroup(
+    rotationValuesBindGroupLayout,
+    {
+      vec: buffer,
+    }
+  );
+
+  return rotationValuesBindGroup;
+};
+
+export const createBloomOptionsBuffer = (
+  root: TgpuRoot,
+  initValues?: Partial<BloomOptions>
+) => {
+  const bloomOptions: BloomOptions = createBloomOptions({ ...initValues });
+  const bloomOptionsTyped = mapToF32(bloomOptions);
+
+  const bloomOptionsBuffer = root
+    .createBuffer(bloomOptionsSchema, bloomOptionsTyped)
+    .$usage('uniform');
+
+  return bloomOptionsBuffer;
+};
+
+export const createBloomOptionsBindGroup = (
+  root: TgpuRoot,
+  buffer: TgpuBuffer<bloomOptionsSchema> & UniformFlag
+) => {
+  const bloomOptionsBindGroup = root.createBindGroup(
+    bloomOptionsBindGroupLayout,
+    {
+      bloomOptions: buffer,
+    }
+  );
+
+  return bloomOptionsBindGroup;
+};
+
+export const createColorMaskBuffer = (
+  root: TgpuRoot,
+  initValues: PartiallyOptional<ColorMask, 'baseColor'>
+) => {
+  const colorMask: ColorMask = createColorMask({ ...initValues });
+  const colorMaskTyped = colorMaskToTyped(colorMask);
+
+  const colorMaskBuffer = root
+    .createBuffer(colorMaskSchema, colorMaskTyped)
+    .$usage('uniform');
+
+  return colorMaskBuffer;
+};
+
+export const createColorMaskBindGroup = (
+  root: TgpuRoot,
+  buffer: TgpuBuffer<colorMaskSchema> & UniformFlag
+) => {
+  const colorMaskBindGroup = root.createBindGroup(colorMaskBindGroupLayout, {
+    mask: buffer,
+  });
+
+  return colorMaskBindGroup;
+};