react-native-shine 0.0.0 → 0.2.1

package/lib/typescript/src/types/types.d.ts

@@ -0,0 +1,33 @@
+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;
+    };
+};
+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;
+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;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAElE,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AACpC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAC5C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC;AAE9B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,EAAE,IAAI,CAAC;IAChB,iBAAiB,EAAE;QACjB,KAAK,EAAE,IAAI,CAAC;QACZ,KAAK,EAAE,IAAI,CAAC;KACb,CAAC;CACH,CAAC;AAGF,MAAM,MAAM,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;KACnD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACf,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAExB,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,IAAI,GACJ,SAAS,CAAC;AAId,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,SAAS,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAC5E,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAE1B,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,mBAAmB,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC"}

package/package.json

@@ -1,24 +1,171 @@
 {
   "name": "react-native-shine",
-  "version": "0.0.0",
-  "description": "Add beautiful shine to your components",
-  "main": "index.js",
+  "version": "0.2.1",
+  "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",
+    "postinstall": "node ./scripts/postinstall.js",
+    "install-peers": "node ./scripts/install-peers.js"
   },
+  "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-reanimated": "^4.0.1",
+    "react-native-wgpu": "^0.2.0",
+    "react-native-worklets": "^0.4.1",
+    "typegpu": "^0.7.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",
+    "unplugin-typegpu": "^0.2.2"
+  }
 }

package/src/index.tsx

@@ -0,0 +1,326 @@
+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 });
+
+  console.log('render');
+
+  // 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 colorMaskPipeline = root['~unstable']
+      .withVertex(mainVertex, {})
+      .withFragment(colorMaskFragment, getDefaultTarget(presentationFormat))
+      .createPipeline();
+    colorMaskPipeline = attachBindGroups(colorMaskPipeline, maskBGP);
+
+    const rot = d.vec3f(0.0);
+    let view: GPUTextureView;
+    let bloomAttachment;
+    let colorMaskAttachment;
+    const render = () => {
+      rot[0] = rotationShared.value[0];
+      rot[1] = rotationShared.value[1];
+      rot[2] = rotationShared.value[2];
+      rotationBuffer.write(rot);
+
+      view = context.getCurrentTexture().createView();
+      bloomAttachment = {
+        view: view,
+        clearValue: [0, 0, 0, 0],
+        loadOp: 'clear' as GPULoadOp,
+        storeOp: 'store' as GPUStoreOp,
+      };
+
+      colorMaskAttachment = {
+        view: view,
+        loadOp: 'load' as GPULoadOp,
+        storeOp: 'store' as GPUStoreOp,
+      };
+
+      // root['~unstable'].beginRenderPass(
+      //   {
+      //     colorAttachments: [
+      //       {
+      //         view,
+      //         clearValue: [0, 0, 0, 0],
+      //         loadOp: 'clear',
+      //         storeOp: 'store',
+      //       },
+      //     ],
+      //   },
+      //   (pass) => {
+      //     pass.setPipeline(bloomPipeline);
+      //     // pass = attachBindGroupsToPass(pass, bloomBGP);
+      //     pass.setBindGroup(textureBindGroupLayout, textureBindGroup);
+      //     pass.setBindGroup(rotationValuesBindGroupLayout, rotationBindGroup);
+      //     pass.setBindGroup(bloomOptionsBindGroupLayout, bloomOptionsBindGroup);
+      //     pass.setBindGroup(colorMaskBindGroupLayout, colorMaskBindGroup);
+      //     pass.draw(6);
+
+      //     // Mask draw
+      //     pass.setPipeline(colorMaskPipeline);
+      //     pass.setBindGroup(textureBindGroupLayout, textureBindGroup);
+      //     pass.setBindGroup(colorMaskBindGroupLayout, colorMaskBindGroup);
+      //     pass.draw(6);
+      //   }
+      // );
+      // root['~unstable'].flush();
+
+      bloomPipeline.withColorAttachment(bloomAttachment).draw(6);
+      colorMaskPipeline.withColorAttachment(colorMaskAttachment).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 },
+});