Add web bindings + simple example web app

Author: scottmas

apps/web-example/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

apps/web-example/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# 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
+
+.yarn
+ios
+android

apps/web-example/App.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { StyleSheet, View, PixelRatio } from "react-native";
+import { Canvas, useCanvasEffect } from "react-native-wgpu";
+
+import { redFragWGSL, triangleVertWGSL } from "./triangle";
+
+export default function App() {
+  const ref = useCanvasEffect(async () => {
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+      throw new Error("No adapter");
+    }
+    const device = await adapter.requestDevice();
+    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+    const context = ref.current.getContext("webgpu");
+    const canvas = context.canvas;
+    canvas.width = canvas.clientWidth * PixelRatio.get();
+    canvas.height = canvas.clientHeight * PixelRatio.get();
+
+    if (!context) {
+      throw new Error("No context");
+    }
+
+    context.configure({
+      device,
+      format: presentationFormat,
+      alphaMode: "opaque",
+    });
+
+    const pipeline = device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module: device.createShaderModule({
+          code: triangleVertWGSL,
+        }),
+        entryPoint: "main",
+      },
+      fragment: {
+        module: device.createShaderModule({
+          code: redFragWGSL,
+        }),
+        entryPoint: "main",
+        targets: [
+          {
+            format: presentationFormat,
+          },
+        ],
+      },
+      primitive: {
+        topology: "triangle-list",
+      },
+    });
+
+    const commandEncoder = device.createCommandEncoder();
+
+    const textureView = context.getCurrentTexture().createView();
+
+    const renderPassDescriptor = {
+      colorAttachments: [
+        {
+          view: textureView,
+          clearValue: [0, 0, 0, 1],
+          loadOp: "clear",
+          storeOp: "store",
+        },
+      ],
+    };
+
+    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
+    passEncoder.setPipeline(pipeline);
+    passEncoder.draw(3);
+    passEncoder.end();
+
+    device.queue.submit([commandEncoder.finish()]);
+
+    context.present();
+  });
+
+  return (
+    <View style={style.container}>
+      <Canvas ref={ref} style={style.webgpu} />
+    </View>
+  );
+}
+
+const style = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  webgpu: {
+    flex: 1,
+  },
+});

apps/web-example/app.json

@@ -0,0 +1,8 @@
+{
+  "expo": {
+    "name": "web-example",
+    "slug": "web-example",
+    "version": "1.0.0",
+    "platforms": ["web"]
+  }
+}

apps/web-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo']
+  };
+};

apps/web-example/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

apps/web-example/metro.config.js

@@ -0,0 +1,34 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+const config = getDefaultConfig(__dirname);
+
+config.watchFolders = [
+  path.resolve(__dirname, "../.."),
+  path.resolve(__dirname, "../../packages/webgpu"),
+];
+
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  if (moduleName === "react-native-wgpu") {
+    //For monorepo convenience only, use the "react-native" field in package.json
+    context.mainFields = ["react-native"];
+  }
+
+  try {
+    //Force monorepo dependencies to first use THIS node_modules when resolving their packages.
+    return context.resolveRequest(
+      {
+        ...context,
+        originModulePath: __dirname + "/shim.js",
+      },
+      moduleName,
+      platform
+    );
+  } catch (e) {
+    //Do nothing. Just trying this node_modules first
+  }
+
+  return context.resolveRequest(context, moduleName, platform);
+};
+
+module.exports = config;

apps/web-example/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@expo/metro-runtime": "~3.2.3",
+    "expo": "~51.0.28",
+    "expo-status-bar": "~1.12.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-web": "~0.19.10",
+    "react-native-wgpu": "link:../../packages/webgpu"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@rnx-kit/metro-config": "^2.0.1"
+  },
+  "private": true
+}

apps/web-example/shim.js

@@ -0,0 +1 @@
+export {};

apps/web-example/triangle.js

@@ -0,0 +1,17 @@
+export 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)
+  );
+
+  return vec4f(pos[VertexIndex], 0.0, 1.0);
+}`;
+
+export const redFragWGSL = `@fragment
+fn main() -> @location(0) vec4f {
+  return vec4(1.0, 0.0, 0.0, 1.0);
+}`;

apps/web-example/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}