Machine learning demos

apps/example/ios/Podfile.lock

@@ -935,9 +935,32 @@ PODS:
   - React-Mapbuffer (0.74.2):
     - glog
     - React-debug
-  - react-native-safe-area-context (4.11.0):
+  - react-native-safe-area-context (4.14.1):
     - React-Core
-  - react-native-wgpu (0.1.21):
+  - react-native-skia (1.7.2):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - react-native-wgpu (0.1.22):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1187,7 +1210,7 @@ PODS:
     - React-logger (= 0.74.2)
     - React-perflogger (= 0.74.2)
     - React-utils (= 0.74.2)
-  - ReactNativeHost (0.5.0):
+  - ReactNativeHost (0.5.2):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1209,11 +1232,32 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - ReactTestApp-DevSupport (3.10.8):
+  - ReactTestApp-DevSupport (3.10.22):
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
-  - RNGestureHandler (2.19.0):
+  - RNGestureHandler (2.21.2):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNReanimated (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1233,8 +1277,10 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 3.16.5)
+    - RNReanimated/worklets (= 3.16.5)
     - Yoga
-  - RNReanimated (3.15.2):
+  - RNReanimated/reanimated (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1254,10 +1300,9 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.15.2)
-    - RNReanimated/worklets (= 3.15.2)
+    - RNReanimated/reanimated/apple (= 3.16.5)
     - Yoga
-  - RNReanimated/reanimated (3.15.2):
+  - RNReanimated/reanimated/apple (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1278,7 +1323,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated/worklets (3.15.2):
+  - RNReanimated/worklets (3.16.5):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1336,6 +1381,7 @@ DEPENDENCIES:
   - React-logger (from `../../../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../../../node_modules/react-native/ReactCommon`)
   - react-native-safe-area-context (from `../../../node_modules/react-native-safe-area-context`)
+  - "react-native-skia (from `../../../node_modules/@shopify/react-native-skia`)"
   - react-native-wgpu (from `../../../node_modules/react-native-wgpu`)
   - React-nativeconfig (from `../../../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1435,6 +1481,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon"
   react-native-safe-area-context:
     :path: "../../../node_modules/react-native-safe-area-context"
+  react-native-skia:
+    :path: "../../../node_modules/@shopify/react-native-skia"
   react-native-wgpu:
     :path: "../../../node_modules/react-native-wgpu"
   React-nativeconfig:
@@ -1527,8 +1575,9 @@ SPEC CHECKSUMS:
   React-jsitracing: 0fa7f78d8fdda794667cb2e6f19c874c1cf31d7e
   React-logger: 29fa3e048f5f67fe396bc08af7606426d9bd7b5d
   React-Mapbuffer: bf56147c9775491e53122a94c423ac201417e326
-  react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
-  react-native-wgpu: 5308faeb6d85925394351968f7970cd00eead0cc
+  react-native-safe-area-context: 141eca0fd4e4191288dfc8b96a7c7e1c2983447a
+  react-native-skia: c85483f709f2b58d30a11fc005c2938ee87d6656
+  react-native-wgpu: fc73fc100b757c6c89e489ffbcc927214bd270f8
   React-nativeconfig: 9f223cd321823afdecf59ed00861ab2d69ee0fc1
   React-NativeModulesApple: ff7efaff7098639db5631236cfd91d60abff04c0
   React-perflogger: 32ed45d9cee02cf6639acae34251590dccd30994
@@ -1552,11 +1601,11 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 56b642bf605ba5afa500d35790928fc1d51565ad
   React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
   ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
-  ReactNativeHost: 76fb17eac13a9a2200f659deffc91c054731a7e2
-  ReactTestApp-DevSupport: 690d06567b7ecae4f2f98dff5e4881c8d25be8e2
+  ReactNativeHost: 619621c39cdb4339c1336cea844b66cdf43c4d84
+  ReactTestApp-DevSupport: 42abce6b0c88dfb47c86e80aa22831b2abcc3144
   ReactTestApp-Resources: 857244f3a23f2b3157b364fa06cf3e8866deff9c
-  RNGestureHandler: 67e78f16895947f7e57ab91e75e914d3e9ef7239
-  RNReanimated: 4c72fc2c0f4c6a9c36932e653cd68e4521b6c4ac
+  RNGestureHandler: 6fee3422fd8c81c5ee756fa72e3d1780e9943d9d
+  RNReanimated: 77bde2fb01415b61799ed173f9420010632b76e1
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: ae3c32c514802d30f687a04a6a35b348506d411f
 

apps/example/package.json

@@ -20,6 +20,10 @@
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.4.0",
     "@react-three/fiber": "^8.17.6",
+    "@shopify/react-native-skia": "^1.7.3",
+    "@tensorflow/tfjs": "^4.22.0",
+    "@tensorflow/tfjs-backend-webgpu": "^4.22.0",
+    "@tensorflow/tfjs-vis": "^1.5.1",
     "fast-text-encoding": "^1.0.6",
     "react": "18.2.0",
     "react-native": "0.74.2",

apps/example/src/App.tsx

@@ -18,6 +18,7 @@ import { RenderBundles } from "./RenderBundles";
 import { ABuffer } from "./ABuffer";
 import { OcclusionQuery } from "./OcclusionQuery";
 import { ComputeBoids } from "./ComputeBoids";
+import { MNISTInference } from "./MNISTInference";
 import { Wireframe } from "./Wireframe";
 import { Resize } from "./Resize";
 import { Particules } from "./Particles";
@@ -27,6 +28,7 @@ import { ReversedZ } from "./ReversedZ";
 import { ThreeJS } from "./ThreeJS";
 import { GradientTiles } from "./GradientTiles";
 import { CanvasAPI } from "./CanvasAPI";
+import { Tensorflow } from "./Tensorflow";
 
 // The two lines below are needed by three.js
 import "fast-text-encoding";
@@ -50,6 +52,7 @@ function App() {
             component={HelloTriangleMSAA}
           />
           <Stack.Screen name="ThreeJS" component={ThreeJS} />
+          <Stack.Screen name="Tensorflow" component={Tensorflow} />
           <Stack.Screen name="CanvasAPI" component={CanvasAPI} />
           <Stack.Screen name="Cube" component={Cube} />
           <Stack.Screen name="InstancedCube" component={InstancedCube} />
@@ -64,6 +67,7 @@ function App() {
           <Stack.Screen name="ReversedZ" component={ReversedZ} />
           <Stack.Screen name="ABuffer" component={ABuffer} />
           <Stack.Screen name="OcclusionQuery" component={OcclusionQuery} />
+          <Stack.Screen name="MNISTInference" component={MNISTInference} />
           <Stack.Screen name="ComputeBoids" component={ComputeBoids} />
           <Stack.Screen name="ShadowMapping" component={ShadowMapping} />
           <Stack.Screen name="DeferedRendering" component={DeferedRendering} />

apps/example/src/ComputeBoids/ComputeBoids.tsx

@@ -41,7 +41,7 @@ const renderBindGroupLayout = tgpu.bindGroupLayout({
 
 const computeBindGroupLayout = tgpu.bindGroupLayout({
   currentTrianglePos: { storage: TriangleDataArray },
-  nextTrianglePos: { storage: TriangleDataArray, access: 'mutable' },
+  nextTrianglePos: { storage: TriangleDataArray, access: "mutable" },
   params: { uniform: Parameters },
 });
 
@@ -122,7 +122,7 @@ export function ComputeBoids() {
 
     const triangleAmount = 1000;
     const trianglePosBuffers = Array.from({ length: 2 }, () =>
-      root.createBuffer(TriangleDataArray(triangleAmount)).$usage("storage")
+      root.createBuffer(TriangleDataArray(triangleAmount)).$usage("storage"),
     );
 
     randomizePositions.current = () => {
@@ -234,7 +234,7 @@ export function ComputeBoids() {
       computePass.setPipeline(computePipeline);
       computePass.setBindGroup(
         0,
-        root.unwrap(even ? computeBindGroups[0] : computeBindGroups[1])
+        root.unwrap(even ? computeBindGroups[0] : computeBindGroups[1]),
       );
       computePass.dispatchWorkgroups(triangleAmount);
       computePass.end();
@@ -244,7 +244,7 @@ export function ComputeBoids() {
       passEncoder.setVertexBuffer(0, triangleVertexBuffer.buffer);
       passEncoder.setBindGroup(
         0,
-        root.unwrap(even ? renderBindGroups[1] : renderBindGroups[0])
+        root.unwrap(even ? renderBindGroups[1] : renderBindGroups[0]),
       );
       passEncoder.draw(3, triangleAmount);
       passEncoder.end();

apps/example/src/GradientTiles/GradientTiles.tsx

@@ -4,7 +4,7 @@ import { Canvas, useDevice, useGPUContext } from "react-native-wgpu";
 import { struct, u32 } from "typegpu/data";
 import tgpu, { type TgpuBindGroup, type TgpuBuffer } from "typegpu";
 
-import { vertWGSL, fragWGSL } from './gradientWgsl';
+import { vertWGSL, fragWGSL } from "./gradientWgsl";
 
 const Span = struct({
   x: u32,
@@ -18,15 +18,15 @@ const bindGroupLayout = tgpu.bindGroupLayout({
 interface RenderingState {
   pipeline: GPURenderPipeline;
   spanBuffer: TgpuBuffer<typeof Span>;
-  bindGroup: TgpuBindGroup<(typeof bindGroupLayout)['entries']>;
+  bindGroup: TgpuBindGroup<(typeof bindGroupLayout)["entries"]>;
 }
 
 function useRoot() {
   const { device } = useDevice();
 
   return useMemo(
     () => (device ? tgpu.initFromDevice({ device }) : null),
-    [device]
+    [device],
   );
 }
 

apps/example/src/Home.tsx

@@ -23,6 +23,10 @@ export const examples = [
     screen: "ThreeJS",
     title: "☘️ Three.js",
   },
+  {
+    screen: "Tensorflow",
+    title: "🤖 tensorflow.js",
+  },
   {
     screen: "Cube",
     title: "🧊 Cube",
@@ -67,6 +71,10 @@ export const examples = [
     screen: "ComputeBoids",
     title: "🐦‍⬛ Compute Boids",
   },
+  {
+    screen: "MNISTInference",
+    title: "1️⃣ MNIST Inference",
+  },
   ...(Platform.OS !== "ios"
     ? ([
         {