with-webgpu

with-webgpu/app.json

@@ -9,7 +9,15 @@
     "plugins": [
       "expo-router",
       "expo-splash-screen",
-      "expo-status-bar"
+      "expo-status-bar",
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "minSdkVersion": 26
+          }
+        }
+      ]
     ]
   }
 }

with-webgpu/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@react-three/fiber": "^9.4.0",
     "expo": "^56.0.4",
+    "expo-build-properties": "~56.0.16",
     "expo-constants": "~56.0.15",
     "expo-linking": "~56.0.11",
     "expo-router": "~56.2.6",
@@ -19,7 +20,7 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
     "react-native-web": "^0.21.0",
-    "react-native-wgpu": "^0.4.1",
+    "react-native-webgpu": "^0.5.14",
     "react-native-worklets": "0.8.3",
     "three": "0.172.0",
     "wgpu-matrix": "^3.0.2"
@@ -29,4 +30,4 @@
     "@types/three": "0.172.0",
     "typescript": "~6.0.3"
   }
-}
+}

with-webgpu/src/components/three-cube.tsx

@@ -1,10 +1,10 @@
 // https://github.com/wcandillon/react-native-webgpu/blob/578ad989b4326724702b14245d5c82622849ee23/apps/example/src/Cube/Cube.tsx#L1
 
-import * as THREE from "three/webgpu";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas } from "react-native-wgpu";
-import { View } from "react-native";
 import { useEffect, useRef } from "react";
+import { View } from "react-native";
+import type { CanvasRef } from "react-native-webgpu";
+import { Canvas } from "react-native-webgpu";
+import * as THREE from "three/webgpu";
 
 import { makeWebGPURenderer } from "@/lib/make-webgpu-renderer";
 
@@ -47,4 +47,4 @@ export const Cube = () => {
       <Canvas ref={ref} style={{ flex: 1 }} />
     </View>
   );
-};
+};

with-webgpu/src/lib/fiber-canvas.tsx

@@ -1,18 +1,21 @@
 // https://github.com/wcandillon/react-native-webgpu/blob/578ad989b4326724702b14245d5c82622849ee23/apps/example/src/ThreeJS/components/FiberCanvas.tsx#L1
-import * as THREE from "three/webgpu";
-import React, { useEffect, useRef } from "react";
 import type { ReconcilerRoot, RootState } from "@react-three/fiber";
 import {
-  extend,
   createRoot,
-  unmountComponentAtNode,
   events,
+  extend,
+  unmountComponentAtNode,
 } from "@react-three/fiber";
+import React, { useEffect, useRef } from "react";
 import type { ViewProps } from "react-native";
 import { PixelRatio } from "react-native";
-import { Canvas, type CanvasRef } from "react-native-wgpu";
+import { Canvas, type CanvasRef } from "react-native-webgpu";
+import * as THREE from "three/webgpu";
 
-import { makeWebGPURenderer, ReactNativeCanvas } from "@/lib/make-webgpu-renderer";
+import {
+  makeWebGPURenderer,
+  ReactNativeCanvas,
+} from "@/lib/make-webgpu-renderer";
 
 interface FiberCanvasProps {
   children: React.ReactNode;
@@ -77,4 +80,4 @@ export const FiberCanvas = ({
   });
 
   return <Canvas ref={canvasRef} style={style} />;
-};
+};

with-webgpu/src/lib/make-webgpu-renderer.ts

@@ -1,5 +1,5 @@
 // https://github.com/wcandillon/react-native-webgpu/blob/578ad989b4326724702b14245d5c82622849ee23/apps/example/src/ThreeJS/components/makeWebGPURenderer.ts#L1
-import type { NativeCanvas } from "react-native-wgpu";
+import type { NativeCanvas } from "react-native-webgpu";
 import * as THREE from "three/webgpu";
 
 // Here we need to wrap the Canvas into a non-host object for now
@@ -69,4 +69,4 @@ export const makeWebGPURenderer = (
     // @ts-expect-error
     canvas: new ReactNativeCanvas(context.canvas),
     context,
-  });
+  });