base: base setup

Author: DennisSmolek

.yarnrc.yml

@@ -1,9 +1,9 @@
-nodeLinker: node-modules
 enableGlobalCache: true
 
-nmHoistingLimits: workspaces
-
-# Enable corepack for proper version management
 enableImmutableInstalls: false
 
+enableScripts: true
 
+nmHoistingLimits: workspaces
+
+nodeLinker: node-modules

apps/example/package.json

@@ -12,15 +12,15 @@
     "clean": "expo prebuild --clean"
   },
   "dependencies": {
-    "@react-three/fiber": "^10.0.0",
+    "@react-three/fiber": "^9.4.0",
     "@react-three/native": "workspace:*",
     "expo": "~52.0.29",
     "expo-asset": "~11.0.1",
     "expo-file-system": "~18.0.7",
     "expo-gl": "~15.0.3",
     "expo-status-bar": "~2.0.0",
     "react": "^19.0.0",
-    "react-native": "0.78.7",
+    "react-native": "0.81.4",
     "three": "^0.171.0"
   },
   "devDependencies": {
@@ -30,4 +30,3 @@
     "typescript": "^5.7.2"
   }
 }
-

apps/webgpu-example/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

apps/webgpu-example/App.tsx

@@ -1,85 +1,43 @@
 # WebGPU Example
 
-Advanced example demonstrating `@react-three/native` with WebGPU acceleration via [react-native-webgpu](https://github.com/wcandillon/react-native-webgpu).
+React Native WebGPU example using [Expo Router](https://docs.expo.dev/router/introduction/), [react-native-wgpu](https://github.com/wcandillon/react-native-webgpu), and Three.js WebGPU renderer.
 
-## Features
-
-- ✅ Hardware-accelerated WebGPU rendering
-- ✅ Complex geometry (torus knot)
-- ✅ Multiple animated objects
-- ✅ Advanced materials with metalness/roughness
-- ✅ Multiple dynamic lights
+This example demonstrates true WebGPU rendering in React Native using the native WebGPU bindings and Three.js's WebGPU renderer (`three/webgpu`).
 
-## Requirements
-
-- **Physical device required** (simulators don't support WebGPU)
-- **iOS 14+** or **Android with Vulkan support**
-- Cannot use Expo Go (requires dev build)
+## Features
 
-## Running
+- Native WebGPU rendering via `react-native-wgpu`
+- Three.js WebGPU renderer integration
+- React Three Fiber with WebGPU backend
+- Custom orbit controls for camera manipulation
+- Multiple 3D geometries (boxes, cylinders, spheres)
 
-### First Time Setup
+## Getting Started
 
-```bash
-# From this directory
-yarn expo prebuild
+Install dependencies:
 
-# Then run on device
-yarn ios     # For iOS
-yarn android # For Android
+```sh
+yarn install
 ```
 
-### After Initial Setup
+Run the app:
 
-```bash
-# From repo root
-yarn dev:webgpu
-
-# Or from this directory
+```sh
 yarn start
 ```
 
-## What's Inside
-
-- **App.tsx** - Advanced 3D scene with multiple objects
-- **react-native-webgpu** - WebGPU context provider
-- Complex materials and lighting
-- Animated elements using `useFrame`
-
-## Performance
-
-WebGPU provides significant performance improvements over WebGL:
-- Better GPU utilization
-- Lower CPU overhead
-- Support for modern GPU features
-- Faster rendering for complex scenes
-
-## Troubleshooting
-
-### Build fails
-
-```bash
-yarn expo prebuild --clean
-yarn ios  # or yarn android
-```
-
-### WebGPU not available
-
-Make sure you're running on a physical device with:
-- iOS 14+ (Metal support)
-- Android with Vulkan 1.1+
+Then press `i` for iOS or `a` for Android. This project requires a custom development client since it uses native modules.
 
-### Changes not reflecting
-
-Rebuild the native app:
-```bash
-yarn expo prebuild
-yarn ios  # or yarn android
-```
+## Key Implementation Details
 
-## Learn More
+- Uses `three/webgpu` imports for WebGPU renderer
+- Custom `makeWebGPURenderer` function wraps the native canvas
+- Integrates with React Three Fiber through custom canvas component
+- Orbit controls implemented for interactive camera movement
 
-- [react-native-webgpu GitHub](https://github.com/wcandillon/react-native-webgpu)
-- [WebGPU Specification](https://www.w3.org/TR/webgpu/)
-- [@react-three/fiber docs](https://docs.pmnd.rs/react-three-fiber)
+## Technical Stack
 
+- **react-native-wgpu**: Native WebGPU bindings for React Native
+- **three**: Three.js 3D library (WebGPU renderer)
+- **@react-three/fiber**: React reconciler for Three.js
+- **expo-router**: File-based routing for Expo apps

apps/webgpu-example/README.md

@@ -1,44 +1,15 @@
 {
   "expo": {
-    "name": "R3F WebGPU Example",
-    "slug": "r3f-webgpu-example",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "newArchEnabled": true,
-    "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#000000"
-    },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "com.reactthree.native.webgpu"
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#000000"
-      },
-      "package": "com.reactthree.native.webgpu"
-    },
+    "scheme": "acme",
+    "userInterfaceStyle": "automatic",
+    "orientation": "default",
     "web": {
-      "favicon": "./assets/favicon.png"
+      "output": "single"
     },
     "plugins": [
-      [
-        "react-native-webgpu",
-        {
-          "ios": {
-            "deploymentTarget": "14.0"
-          }
-        }
-      ]
-    ]
+      "expo-router"
+    ],
+    "name": "webgpu-example",
+    "slug": "webgpu-example"
   }
 }
-