diff --git a/with-webgpu/app.json b/with-webgpu/app.json index 2e8ca6d7..d0e788c3 100644 --- a/with-webgpu/app.json +++ b/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 + } + } + ] ] } } diff --git a/with-webgpu/package.json b/with-webgpu/package.json index a15f4dce..02298c75 100644 --- a/with-webgpu/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/with-webgpu/src/components/three-cube.tsx b/with-webgpu/src/components/three-cube.tsx index 9dad3970..fae192f8 100644 --- a/with-webgpu/src/components/three-cube.tsx +++ b/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 = () => { ); -}; \ No newline at end of file +}; diff --git a/with-webgpu/src/lib/fiber-canvas.tsx b/with-webgpu/src/lib/fiber-canvas.tsx index 4dcef9b5..f0ffcb86 100644 --- a/with-webgpu/src/lib/fiber-canvas.tsx +++ b/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 ; -}; \ No newline at end of file +}; diff --git a/with-webgpu/src/lib/make-webgpu-renderer.ts b/with-webgpu/src/lib/make-webgpu-renderer.ts index 0474d199..8eebf15f 100644 --- a/with-webgpu/src/lib/make-webgpu-renderer.ts +++ b/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, - }); \ No newline at end of file + });