Webgpu proto3

example/src/App.tsx

@@ -123,7 +123,13 @@ const App = () => {
               }}
             />
             <Stack.Screen name="API" component={API} />
-            <Stack.Screen name="Breathe" component={Breathe} />
+            <Stack.Screen
+              name="Breathe"
+              component={Breathe}
+              options={{
+                header: () => null,
+              }}
+            />
             <Stack.Screen name="Filters" component={Filters} />
             <Stack.Screen name="Gooey" component={Gooey} />
             <Stack.Screen name="Hue" component={Hue} />

example/src/Examples/Breathe/Breathe.tsx

@@ -1,43 +1,91 @@
-import React, { useEffect,  useRef } from "react";
-import {
-  gpu,
-  SkiaDomView,
-} from "@shopify/react-native-skia";
-import { demo1 } from "./demo1/main";
+import React, { useEffect, useRef, useState } from "react";
+import { gpu, SkiaDomView, useImage } from "@shopify/react-native-skia";
+import { View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { useSharedValue, withSpring } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 
-const triangleVertWGSL = `@vertex
-fn main(
-  @builtin(vertex_index) VertexIndex : u32
-) -> @builtin(position) vec4f {
-  var pos = array<vec2f, 3>(
-    vec2(0.0, 0.5),
-    vec2(-0.5, -0.5),
-    vec2(0.5, -0.5)
-  );
+import { demo3 } from "./demo3";
+import { demo2 } from "./demo2";
+import { demo1 } from "./demo1/main";
+import { demo4 } from "./demo1/demo4";
+import { demo5 } from "./demo1/demo5";
+import { Bitmap, demo7 } from "./demo1/demo7";
+import { demo6 } from "./demo6/main";
 
-  return vec4f(pos[VertexIndex], 0.0, 1.0);
-}
-`;
+const sf = 300;
+const springConfig = (velocity: number) => {
+  "worklet";
+  return {
+    mass: 1,
+    damping: 1,
+    stiffness: 100,
+    overshootClamping: false,
+    restDisplacementThreshold: 0.01,
+    restSpeedThreshold: 2,
+    velocity,
+  };
+};
+//import { demo6 } from "./demo6/main";
 
-const redFragWGSL = `@fragment
-fn main() -> @location(0) vec4f {
-  return vec4(0.3, 0.6, 1.0, 1.0);
-}`;
+const draw = async (
+  context: GPUCanvasContext,
+  image: Bitmap,
+  rotateX: SharedValue<number>,
+  rotateY: SharedValue<number>
+) => {
+  const adapter = await gpu.requestAdapter();
+  const device = await adapter!.requestDevice();
+  const presentationFormat = "rgba8unorm";
+  context.configure({
+    device,
+    format: presentationFormat,
+    alphaMode: "premultiplied",
+  });
+  //await demo5(device, context, image);
+  await demo7(device, context, image, rotateX, rotateY);
+  //context.present();
+};
 
-const draw = async (ctx: GPUCanvasContext) => {
-  await demo1(ctx);
-  ctx.present();
+const usePixels = (mod: number) => {
+  const image = useImage(mod);
+  if (!image) {
+    return null;
+  }
+  return new Bitmap(
+    image.readPixels() as Uint8Array,
+    image.width(),
+    image.height()
+  );
 };
 
 export const Breathe = () => {
+  const image = usePixels(require("./demo6/react.png"));
+  const rotateX = useSharedValue(0);
+  const rotateY = useSharedValue(0);
   const ref = useRef<SkiaDomView>(null);
+  const gesture = Gesture.Pan()
+    .onChange((event) => {
+      rotateY.value += event.changeX / sf;
+      rotateX.value -= event.changeY / sf;
+    })
+    .onEnd(({ velocityX, velocityY }) => {
+      rotateX.value = withSpring(0, springConfig(velocityY / sf));
+      rotateY.value = withSpring(0, springConfig(velocityX / sf));
+    });
   useEffect(() => {
     setTimeout(() => {
-      const ctx = ref.current!.getWGPUContext();
-      draw(ctx);
+      if (image && ref.current) {
+        const ctx = ref.current.getWGPUContext();
+        draw(ctx, image, rotateX, rotateY);
+      }
     }, 1000);
-  }, []);
+  }, [image]);
   return (
-    <SkiaDomView style={{ flex: 1 }} ref={ref} />
+    <View style={{ flex: 1 }}>
+      <GestureDetector gesture={gesture}>
+        <SkiaDomView style={{ flex: 1 }} ref={ref} />
+      </GestureDetector>
+    </View>
   );
 };

example/src/Examples/Breathe/demo1/backup.ts

@@ -0,0 +1,175 @@
+import { mat4, vec3 } from 'wgpu-matrix';
+
+import {
+  cubeVertexArray,
+  cubeVertexSize,
+  cubeUVOffset,
+  cubePositionOffset,
+  cubeVertexCount,
+} from './cube';
+
+import {basicVertWGSL, vertexPositionColorWGSL} from './shaders';
+import { Dimensions } from 'react-native';
+
+const {width, height} = Dimensions.get("window");
+
+export const demo1 = async (device: GPUDevice, context: GPUCanvasContext) => {
+
+// Create a vertex buffer from the cube data.
+const verticesBuffer = device.createBuffer({
+  size: cubeVertexArray.byteLength,
+  usage: 32,//GPUBufferUsage.VERTEX,
+  mappedAtCreation: true,
+});
+
+new Float32Array(verticesBuffer.getMappedRange(0, cubeVertexArray.byteLength)).set(cubeVertexArray);
+verticesBuffer.unmap();
+const pipeline = device.createRenderPipeline({
+  layout: 'auto',
+  vertex: {
+    module: device.createShaderModule({
+      code: basicVertWGSL,
+    }),
+    entryPoint: "main",
+    buffers: [
+      {
+        arrayStride: cubeVertexSize,
+        attributes: [
+          {
+            // position
+            shaderLocation: 0,
+            offset: cubePositionOffset,
+            format: 'float32x4',
+          },
+          {
+            // uv
+            shaderLocation: 1,
+            offset: cubeUVOffset,
+            format: 'float32x2',
+          },
+        ],
+      },
+    ],
+  },
+  fragment: {
+    module: device.createShaderModule({
+      code: vertexPositionColorWGSL,
+    }),
+    entryPoint: "main",
+    targets: [
+      {
+        format: 'rgba8unorm',
+      },
+    ],
+  },
+  primitive: {
+    topology: 'triangle-list',
+
+    // Backface culling since the cube is solid piece of geometry.
+    // Faces pointing away from the camera will be occluded by faces
+    // pointing toward the camera.
+    cullMode: 'back',
+  },
+
+  // Enable depth testing so that the fragment closest to the camera
+  // is rendered in front.
+  depthStencil: {
+    depthWriteEnabled: true,
+    depthCompare: 'less',
+    format: 'depth24plus',
+  },
+});
+
+const depthTexture = device.createTexture({
+  size: { width, height },
+  format: 'depth24plus',
+  usage: 16,//GPUTextureUsage.RENDER_ATTACHMENT,
+});
+
+const uniformBufferSize = 4 * 16; // 4x4 matrix
+const uniformBuffer = device.createBuffer({
+  size: uniformBufferSize,
+  usage: 72,//GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+  mappedAtCreation: false,
+});
+const uniformBindGroup = device.createBindGroup({
+  layout: pipeline.getBindGroupLayout(0),
+  entries: [
+    {
+      binding: 0,
+      buffer: uniformBuffer,
+      offset: 0,
+      size: uniformBufferSize,
+    },
+  ],
+});
+
+const renderPassDescriptor: GPURenderPassDescriptor = {
+  colorAttachments: [
+    {
+      view: undefined, // Assigned later
+
+      clearValue: [0.5, 0.5, 0.5, 1.0],
+      loadOp: 'clear',
+      storeOp: 'store',
+    },
+  ],
+  depthStencilAttachment: {
+    view: depthTexture.createView(),
+
+    depthClearValue: 1.0,
+    depthLoadOp: 'clear',
+    depthStoreOp: 'store',
+  },
+};
+
+const aspect = width / height;
+const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 100.0);
+const modelViewProjectionMatrix = mat4.create();
+
+function getTransformationMatrix() {
+  const viewMatrix = mat4.identity();
+  mat4.translate(viewMatrix, vec3.fromValues(0, 0, -4), viewMatrix);
+  const now = Date.now() / 1000;
+  mat4.rotate(
+    viewMatrix,
+    vec3.fromValues(Math.sin(now), Math.cos(now), 0),
+    1,
+    viewMatrix
+  );
+
+  mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
+
+  return modelViewProjectionMatrix as Float32Array;
+}
+
+async function frame() {
+  const transformationMatrix = getTransformationMatrix();
+  device.queue.writeBuffer(
+    uniformBuffer,
+    0,
+    transformationMatrix.buffer,
+    0,
+    transformationMatrix.byteLength
+  );
+
+  renderPassDescriptor.colorAttachments[0].view = context
+    .getCurrentTexture()
+    .createView();
+
+  const commandEncoder = device.createCommandEncoder();
+  const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+  //passEncoder.pushDebugGroup("mygroupmarker"); 
+  passEncoder.setPipeline(pipeline);
+  passEncoder.setBindGroup(0, uniformBindGroup);
+  passEncoder.setVertexBuffer(0, verticesBuffer, 0, cubeVertexArray.byteLength);
+  passEncoder.draw(cubeVertexCount);
+  //passEncoder.popDebugGroup();
+  passEncoder.end();
+  device.queue.submit([commandEncoder.finish()]);
+  await device.queue.onSubmittedWorkDone();
+  console.log("DONE!");
+  //requestAnimationFrame(frame);
+}
+requestAnimationFrame(frame);
+};