react-native-shine 0.2.2 → 0.3.1

package/src/index.tsx

@@ -1,326 +1,18 @@
-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 { useOrientation } from './hooks/useOrientation';
 import {
-  createTexture,
-  loadTexture,
-  clamp,
-  rotate2D,
-  subscribeToOrientationChange,
   getAngleFromDimensions,
+  isLandscapeMode,
+  subscribeToOrientationChange,
 } 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 };
+export {
+  subscribeToOrientationChange,
+  getAngleFromDimensions,
+  isLandscapeMode,
+  useOrientation,
+};
+export { Shine } from './components/Shine';
+export { ShineGroup } from './components/ShineGroup';
+export type { ShineProps } from './components/Shine';
+export * from './utils/vector';
+export type { V2d, V3d } from './types/vector';

package/src/shaders/bindGroupLayouts.ts

@@ -1,28 +1,34 @@
-import tgpu from 'typegpu';
+import tgpu, { type ValidateBufferSchema } from 'typegpu';
 import * as d from 'typegpu/data';
+import type { BufferUsageType } from './resourceManagement/bufferManager';
 
 export const textureBindGroupLayout = tgpu.bindGroupLayout({
   texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
   sampler: { sampler: 'filtering' },
 });
 
-export const rotationValuesBindGroupLayout = tgpu.bindGroupLayout({
+export const maskTextureBindGroupLayout = tgpu.bindGroupLayout({
+  texture: { texture: 'float', dimension: '2d', sampleType: 'float' },
+  sampler: { sampler: 'filtering' },
+});
+
+export const rotationBindGroupLayout = tgpu.bindGroupLayout({
   vec: { uniform: d.vec3f },
 });
 
-export const bloomOptionsSchema = d.struct({
+export const glareSchema = d.struct({
   glowPower: d.f32,
   hueShiftAngleMax: d.f32,
   hueShiftAngleMin: d.f32,
   hueBlendPower: d.f32,
   lightIntensity: d.f32,
-  bloomIntensity: d.f32,
+  glareIntensity: d.f32,
 });
 
-export type bloomOptionsSchema = typeof bloomOptionsSchema;
+export type GlareSchema = typeof glareSchema;
 
-export const bloomOptionsBindGroupLayout = tgpu.bindGroupLayout({
-  bloomOptions: { uniform: bloomOptionsSchema },
+export const glareBindGroupLayout = tgpu.bindGroupLayout({
+  glareOptions: { uniform: glareSchema },
 });
 
 export const colorMaskSchema = d.struct({
@@ -33,8 +39,39 @@ export const colorMaskSchema = d.struct({
   }),
 });
 
-export type colorMaskSchema = typeof colorMaskSchema;
+export type ColorMaskSchema = typeof colorMaskSchema;
 
 export const colorMaskBindGroupLayout = tgpu.bindGroupLayout({
   mask: { uniform: colorMaskSchema },
 });
+
+export const bufferData = {
+  rotation: {
+    schema: d.vec3f,
+    usage: 'uniform',
+  },
+  glare: {
+    schema: glareSchema,
+    usage: 'uniform',
+  },
+  colorMask: {
+    schema: colorMaskSchema,
+    usage: 'uniform',
+  },
+} as const satisfies Record<
+  string,
+  { schema: ValidateBufferSchema<any>; usage: BufferUsageType }
+>;
+
+export type BufferData = typeof bufferData;
+
+// export const holoSchema = d.struct({
+//   intensity: d.f32,
+//   waveCallback: WaveCallback, //TgpuFn<(uv: d.Vec2f) => d.Vec2f>,
+// });
+
+// export type holoSchema = typeof holoSchema;
+
+// export const holoBindGroupLayout = tgpu.bindGroupLayout({
+//   holoOptions: { uniform: holoSchema },
+// });

package/src/shaders/bindGroupUtils.ts

@@ -1,101 +1,86 @@
 import { type TgpuBuffer, type TgpuRoot, type UniformFlag } from 'typegpu';
 import * as d from 'typegpu/data';
 import {
-  bloomOptionsBindGroupLayout,
-  bloomOptionsSchema,
+  glareBindGroupLayout,
+  glareSchema,
   colorMaskBindGroupLayout,
+  type ColorMaskSchema,
+  rotationBindGroupLayout,
+  type GlareSchema,
   colorMaskSchema,
-  rotationValuesBindGroupLayout,
 } from './bindGroupLayouts';
 import type {
-  BloomOptions,
+  GlareOptions,
   ColorMask,
   PartiallyOptional,
 } from '../types/types';
 import {
   colorMaskToTyped,
-  createBloomOptions,
+  createGlareOptions,
   createColorMask,
   mapToF32,
 } from '../types/typeUtils';
+import { componentsFromV3d, zeroV3d } from '../utils/vector';
 
-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)
+export const createRotationBuffer = (root: TgpuRoot, initValues = zeroV3d) =>
+  root
+    .createBuffer(d.vec3f, d.vec3f(...componentsFromV3d(initValues)))
     .$usage('uniform');
 
-  return rotationValuesBuffer;
-};
-
 export const createRotationValuesBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<d.Vec3f> & UniformFlag
-) => {
-  const rotationValuesBindGroup = root.createBindGroup(
-    rotationValuesBindGroupLayout,
-    {
-      vec: buffer,
-    }
-  );
-
-  return rotationValuesBindGroup;
-};
+  buffer: TgpuBuffer<d.Vec3f>
+) =>
+  root.createBindGroup(rotationBindGroupLayout, {
+    vec: root.unwrap(buffer),
+  });
 
-export const createBloomOptionsBuffer = (
+export const createGlareOptionsBuffer = (
   root: TgpuRoot,
-  initValues?: Partial<BloomOptions>
-) => {
-  const bloomOptions: BloomOptions = createBloomOptions({ ...initValues });
-  const bloomOptionsTyped = mapToF32(bloomOptions);
-
-  const bloomOptionsBuffer = root
-    .createBuffer(bloomOptionsSchema, bloomOptionsTyped)
+  initValues?: Partial<GlareOptions>
+) =>
+  root
+    .createBuffer(glareSchema, mapToF32(createGlareOptions({ ...initValues })))
     .$usage('uniform');
 
-  return bloomOptionsBuffer;
-};
-
-export const createBloomOptionsBindGroup = (
+export const createGlareBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<bloomOptionsSchema> & UniformFlag
-) => {
-  const bloomOptionsBindGroup = root.createBindGroup(
-    bloomOptionsBindGroupLayout,
-    {
-      bloomOptions: buffer,
-    }
-  );
-
-  return bloomOptionsBindGroup;
-};
+  buffer: TgpuBuffer<GlareSchema> & UniformFlag
+) =>
+  root.createBindGroup(glareBindGroupLayout, {
+    glareOptions: buffer,
+  });
 
 export const createColorMaskBuffer = (
   root: TgpuRoot,
   initValues: PartiallyOptional<ColorMask, 'baseColor'>
-) => {
-  const colorMask: ColorMask = createColorMask({ ...initValues });
-  const colorMaskTyped = colorMaskToTyped(colorMask);
-
-  const colorMaskBuffer = root
-    .createBuffer(colorMaskSchema, colorMaskTyped)
+) =>
+  root
+    .createBuffer(
+      colorMaskSchema,
+      colorMaskToTyped(createColorMask({ ...initValues }))
+    )
     .$usage('uniform');
 
-  return colorMaskBuffer;
-};
-
 export const createColorMaskBindGroup = (
   root: TgpuRoot,
-  buffer: TgpuBuffer<colorMaskSchema> & UniformFlag
-) => {
-  const colorMaskBindGroup = root.createBindGroup(colorMaskBindGroupLayout, {
+  buffer: TgpuBuffer<ColorMaskSchema> & UniformFlag
+) =>
+  root.createBindGroup(colorMaskBindGroupLayout, {
     mask: buffer,
   });
 
-  return colorMaskBindGroup;
-};
+// export const crateHoloBuffer = (
+//   root: TgpuRoot,
+//   initValues: Partial<HoloOptions>
+// ) => {
+//   const holoOptions: HoloOptions = createHoloOptions({ ...initValues });
+//   const holoOptionsTyped = {
+//     intensity: d.f32(holoOptions.intensity),
+//     waveCallback: holoOptions.waveCallback,
+//   };
+
+//   const holoBuffer = root
+//     .createBuffer(holoSchema, holoOptionsTyped)
+//     .$usage('uniform');
+// };

package/src/shaders/fragmentShaders/colorMaskFragment.ts

@@ -27,9 +27,9 @@ const colorMaskFragment = tgpu['~unstable'].fragmentFn({
   const upperCheck = std.all(std.le(color.xyz, maskedColorUpper));
   const lowerCheck = std.all(std.ge(color.xyz, maskedColorLower));
   if (upperCheck && lowerCheck) {
-    return color;
+    return d.vec4f(color.xyz, 0.0);
   }
-  std.discard();
+  return d.vec4f(1.0);
 });
 
 export default colorMaskFragment;