fix(🍏): fix instanced draw calls on iOS simulator (#415)

Author: wcandillon

.github/workflows/ci.yml

@@ -137,6 +137,17 @@ jobs:
         working-directory: packages/webgpu
         run: yarn test
 
+      # Upload the snapshot folder so reference images generated on this run
+      # (checkImage writes missing snapshots) and the *.test.png /
+      # *-diff-test.png images from failed comparisons can be inspected.
+      # `always()` so the artifact is available precisely when tests fail.
+      - name: Upload test snapshots
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: webgpu-test-snapshots
+          path: packages/webgpu/src/__tests__/snapshots/
+
       - name: Detect ANDROID_HOME
         run: |
           if [ -n "$ANDROID_HOME" ] && [ -d "$ANDROID_HOME" ]; then
@@ -182,7 +193,7 @@ jobs:
         working-directory: apps/example/android
         env:
           JAVA_OPTS: "-XX:MaxHeapSize=6g"
-        run: ./gradlew assembleDebug --build-cache --warning-mode all
+        run: ./gradlew assembleDebug --build-cache --warning-mode all --stacktrace
 
       # Housekeeping for the self-hosted runner: the start-of-run kill already
       # guarantees a clean slate for the next build, so this is not needed for

apps/example/src/useClient.ts

@@ -14,24 +14,36 @@ export const useClient = (): UseClient => {
   useEffect(() => {
     const url = `ws://${HOST}:${PORT}`;
     let it: ReturnType<typeof setTimeout>;
+    let disposed = false;
     const ws = new WebSocket(url);
+    const scheduleRetry = () => {
+      if (disposed) {
+        return;
+      }
+      it = setTimeout(() => {
+        // incrementing retry to rerun the effect
+        setRetry((r) => r + 1);
+      }, 500);
+    };
     ws.onopen = () => {
       setClient(ws);
       ws.send(JSON.stringify({ OS: Platform.OS, arch: "paper" }));
     };
+    // Reconnect on every close, not only on error: the test server closes the
+    // socket cleanly at the end of each jest run, and without a retry here the
+    // app would need a manual reload before the next run.
     ws.onclose = () => {
       setClient(null);
+      scheduleRetry();
     };
     ws.onerror = () => {
-      it = setTimeout(() => {
-        ws.close();
-        // incrementing retry to rerun the effect
-        setRetry((r) => r + 1);
-      }, 500);
+      // Triggers onclose, which schedules the retry.
+      ws.close();
     };
     return () => {
-      ws.close();
+      disposed = true;
       clearTimeout(it);
+      ws.close();
     };
   }, [retry]);
   return [client, HOST];

packages/webgpu/cpp/rnwgpu/api/GPUAdapter.cpp

@@ -2,12 +2,17 @@
 
 #include <algorithm>
 #include <cstdio>
+#include <cstring>
 #include <memory>
 #include <string>
 #include <unordered_set>
 #include <utility>
 #include <vector>
 
+#ifdef __APPLE__
+#include <TargetConditionals.h>
+#endif
+
 #include "Convertors.h"
 
 #include "GPUFeatures.h"
@@ -150,16 +155,39 @@ async::AsyncTaskHandle GPUAdapter::requestDevice(
             for (const auto &t : dawnToggles->enabledToggles.value()) {
               enabledToggles.push_back(t.c_str());
             }
-            toggles.enabledToggleCount = enabledToggles.size();
-            toggles.enabledToggles = enabledToggles.data();
           }
           if (dawnToggles->disabledToggles) {
             for (const auto &t : dawnToggles->disabledToggles.value()) {
               disabledToggles.push_back(t.c_str());
             }
-            toggles.disabledToggleCount = disabledToggles.size();
-            toggles.disabledToggles = disabledToggles.data();
           }
+        }
+#if defined(TARGET_OS_SIMULATOR) && TARGET_OS_SIMULATOR
+        // The iOS Simulator only advertises MTLFeatureSet_iOS_GPUFamily2, so
+        // Dawn defaults disable_base_instance/disable_base_vertex on and then
+        // rejects every draw with a non-zero firstInstance or baseVertex,
+        // both core WebGPU. The simulator forwards Metal calls to the host
+        // GPU, which does support base vertex/instance drawing, so force the
+        // toggles off. Device builds are unaffected: WebGPU-capable iPhones
+        // and iPads are all GPUFamily3+. These are device-stage toggles, so
+        // they must be chained here rather than on the instance descriptor
+        // (instance-stage toggle parsing silently drops them).
+        static const char *const kSimulatorDisabledToggles[] = {
+            "disable_base_instance", "disable_base_vertex"};
+        for (const char *name : kSimulatorDisabledToggles) {
+          const bool explicitlyEnabled = std::any_of(
+              enabledToggles.begin(), enabledToggles.end(),
+              [name](const char *t) { return std::strcmp(t, name) == 0; });
+          if (!explicitlyEnabled) {
+            disabledToggles.push_back(name);
+          }
+        }
+#endif
+        if (!enabledToggles.empty() || !disabledToggles.empty()) {
+          toggles.enabledToggleCount = enabledToggles.size();
+          toggles.enabledToggles = enabledToggles.data();
+          toggles.disabledToggleCount = disabledToggles.size();
+          toggles.disabledToggles = disabledToggles.data();
           deviceDesc.nextInChain = &toggles;
         }
         _instance.RequestDevice(

packages/webgpu/package.json

@@ -26,6 +26,7 @@
   "scripts": {
     "test": "NODE_OPTIONS='--experimental-require-module' jest -i",
     "test:ref": "REFERENCE=true NODE_OPTIONS='--experimental-require-module' jest -i",
+    "test:node": "NODE_WEBGPU=true NODE_OPTIONS='--experimental-require-module' jest -i",
     "test:plugin": "jest -c plugin/jest.config.js",
     "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache --fix",
     "tsc": "tsc --noEmit",
@@ -107,6 +108,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.20.5",
     "typescript": "^5.2.2",
+    "webgpu": "0.4.0",
     "wgpu-matrix": "^3.0.2",
     "ws": "^8.18.0",
     "yargs": "^17.7.2"

packages/webgpu/src/__tests__/config.ts

@@ -1,2 +1,3 @@
 export const DEBUG = process.env.DEBUG === "true";
 export const REFERENCE = process.env.REFERENCE === "true";
+export const NODE_WEBGPU = process.env.NODE_WEBGPU === "true";