fix(💄): remove ReactNativeCanvas wrapper (#389)

Author: wcandillon

apps/docs/content/docs/integrations/react-three-fiber.mdx

@@ -3,7 +3,7 @@ title: React Three Fiber
 description: Integrations demo - declarative 3D with @react-three/fiber.
 ---
 
-Builds on [Three.js](/docs/integrations/three-js): same `WebGPURenderer`, canvas adapter, and **`present()`** hook - but scenes are JSX reconciled by React Three Fiber.
+Builds on [Three.js](/docs/integrations/three-js): same `WebGPURenderer` and **`present()`** hook - but scenes are JSX reconciled by React Three Fiber.
 
 <WebGPUPlayground demo="three-js" height={280} />
 
@@ -38,7 +38,7 @@ export const FiberCanvas = ({ children, style, scene, camera }) => {
     const context = canvasRef.current!.getContext("webgpu")!;
     const renderer = makeWebGPURenderer(context);
 
-    const canvas = new ReactNativeCanvas(context.canvas) as HTMLCanvasElement;
+    const canvas = context.canvas as HTMLCanvasElement;
     canvas.width = canvas.clientWidth * PixelRatio.get();
     canvas.height = canvas.clientHeight * PixelRatio.get();
 

apps/docs/content/docs/integrations/three-js.mdx

@@ -33,47 +33,17 @@ if (moduleName.startsWith("three/addons/")) {
 
 Import from `three/webgpu`, not `three` (which would pull the WebGL build).
 
-## 2. Canvas adapter
+## 2. Create the renderer
 
-`WebGPURenderer` expects an object with `width`, `height`, `clientWidth`, and `clientHeight`. Wrap the native canvas from `getContext("webgpu")`:
-
-```tsx twoslash
-import type { NativeCanvas } from "react-native-webgpu";
-// ---cut---
-export class ReactNativeCanvas {
-  constructor(private canvas: NativeCanvas) {}
-
-  get width() { return this.canvas.width; }
-  set width(v: number) { this.canvas.width = v; }
-  get height() { return this.canvas.height; }
-  set height(v: number) { this.canvas.height = v; }
-  get clientWidth() { return this.canvas.clientWidth; }
-  get clientHeight() { return this.canvas.clientHeight; }
-
-  // Three.js may call these - no-ops are fine on RN
-  addEventListener() {}
-  removeEventListener() {}
-  dispatchEvent() { return false; }
-  setPointerCapture() {}
-  releasePointerCapture() {}
-}
-```
-
-## 3. Create the renderer
-
-Pass the adapter and the **same** `GPUCanvasContext` you got from React Native WebGPU:
+`WebGPURenderer` expects a DOM-like canvas with `width`, `height`, `clientWidth`, and `clientHeight`, plus a few event methods. The native canvas from `getContext("webgpu")` already satisfies this interface, so pass it directly along with the **same** `GPUCanvasContext`:
 
 ```tsx twoslash
 import * as THREE from "three/webgpu";
-import type { NativeCanvas } from "react-native-webgpu";
-declare const ReactNativeCanvas: new (canvas: NativeCanvas) => unknown;
 // ---cut---
 export function makeWebGPURenderer(context: GPUCanvasContext) {
   return new THREE.WebGPURenderer({
     antialias: true,
-    canvas: new ReactNativeCanvas(
-      context.canvas as unknown as NativeCanvas,
-    ) as unknown as HTMLCanvasElement,
+    canvas: context.canvas,
     context,
   });
 }
@@ -83,7 +53,7 @@ export function makeWebGPURenderer(context: GPUCanvasContext) {
 `WebGPURenderer.init()` is **async**. Do not call `render()` until it resolves - unlike raw WebGPU where pipeline creation is synchronous after `requestDevice`.
 </Callout>
 
-## 4. Render loop + present
+## 3. Render loop + present
 
 Configure the context once ([Canvas](/docs/getting-started/canvas)), then animate:
 

apps/docs/src/demos/makeWebGPURenderer.ts

@@ -1,43 +1,9 @@
-import type { NativeCanvas } from "react-native-webgpu";
 import * as THREE from "three/webgpu";
 
-export class ReactNativeCanvas {
-  constructor(private canvas: NativeCanvas) {}
-
-  get width() {
-    return this.canvas.width;
-  }
-  set width(v: number) {
-    this.canvas.width = v;
-  }
-  get height() {
-    return this.canvas.height;
-  }
-  set height(v: number) {
-    this.canvas.height = v;
-  }
-  get clientWidth() {
-    return this.canvas.clientWidth;
-  }
-  get clientHeight() {
-    return this.canvas.clientHeight;
-  }
-
-  addEventListener() {}
-  removeEventListener() {}
-  dispatchEvent() {
-    return false;
-  }
-  setPointerCapture() {}
-  releasePointerCapture() {}
-}
-
 export function makeWebGPURenderer(context: GPUCanvasContext) {
   return new THREE.WebGPURenderer({
     antialias: true,
-    canvas: new ReactNativeCanvas(
-      context.canvas as unknown as NativeCanvas,
-    ) as unknown as HTMLCanvasElement,
+    canvas: context.canvas,
     context,
   });
 }

apps/docs/tsconfig.tsbuildinfo

@@ -12,7 +12,7 @@ import { PixelRatio } from "react-native";
 import type { CanvasRef } from "react-native-webgpu";
 import { Canvas } from "react-native-webgpu";
 
-import { makeWebGPURenderer, ReactNativeCanvas } from "./makeWebGPURenderer";
+import { makeWebGPURenderer } from "./makeWebGPURenderer";
 
 //global.THREE = global.THREE || THREE;
 
@@ -38,9 +38,7 @@ export const FiberCanvas = ({
     const context = canvasRef.current!.getContext("webgpu")!;
     const renderer = makeWebGPURenderer(context);
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const canvas = new ReactNativeCanvas(context.canvas) as HTMLCanvasElement;
+    const canvas = context.canvas as unknown as HTMLCanvasElement;
     canvas.width = canvas.clientWidth * PixelRatio.get();
     canvas.height = canvas.clientHeight * PixelRatio.get();
     const size = {

apps/example/src/ThreeJS/components/FiberCanvas.tsx

@@ -1,71 +1,11 @@
-import type { NativeCanvas } from "react-native-webgpu";
 import * as THREE from "three";
 
-// Here we need to wrap the Canvas into a non-host object for now
-export class ReactNativeCanvas {
-  constructor(private canvas: NativeCanvas) {}
-
-  get width() {
-    return this.canvas.width;
-  }
-
-  get height() {
-    return this.canvas.height;
-  }
-
-  set width(width: number) {
-    this.canvas.width = width;
-  }
-
-  set height(height: number) {
-    this.canvas.height = height;
-  }
-
-  get clientWidth() {
-    return this.canvas.width;
-  }
-
-  get clientHeight() {
-    return this.canvas.height;
-  }
-
-  set clientWidth(width: number) {
-    this.canvas.width = width;
-  }
-
-  set clientHeight(height: number) {
-    this.canvas.height = height;
-  }
-
-  addEventListener(_type: string, _listener: EventListener) {
-    // TODO
-  }
-
-  removeEventListener(_type: string, _listener: EventListener) {
-    // TODO
-  }
-
-  dispatchEvent(_event: Event) {
-    // TODO
-  }
-
-  setPointerCapture() {
-    // TODO
-  }
-
-  releasePointerCapture() {
-    // TODO
-  }
-}
-
 export const makeWebGPURenderer = (
   context: GPUCanvasContext,
   { antialias = true }: { antialias?: boolean } = {},
 ) =>
   new THREE.WebGPURenderer({
     antialias,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    canvas: new ReactNativeCanvas(context.canvas),
+    canvas: context.canvas,
     context,
   });

apps/example/src/ThreeJS/components/makeWebGPURenderer.ts

@@ -36,6 +36,15 @@ class Canvas : public NativeObject<Canvas> {
 
   void *getSurface() { return _surface; }
 
+  // No-op DOM-compatibility stubs so that web renderers (Three.js,
+  // react-three-fiber) can treat the canvas like an HTMLCanvasElement without
+  // needing a JS wrapper. Extra JS arguments are ignored.
+  void addEventListener() {}
+  void removeEventListener() {}
+  void dispatchEvent() {}
+  void setPointerCapture() {}
+  void releasePointerCapture() {}
+
   static void definePrototype(jsi::Runtime &runtime, jsi::Object &prototype) {
     installGetter(runtime, prototype, "surface", &Canvas::getSurface);
     installGetterSetter(runtime, prototype, "width", &Canvas::getWidth,
@@ -44,6 +53,15 @@ class Canvas : public NativeObject<Canvas> {
                         &Canvas::setHeight);
     installGetter(runtime, prototype, "clientWidth", &Canvas::getClientWidth);
     installGetter(runtime, prototype, "clientHeight", &Canvas::getClientHeight);
+    installMethod(runtime, prototype, "addEventListener",
+                  &Canvas::addEventListener);
+    installMethod(runtime, prototype, "removeEventListener",
+                  &Canvas::removeEventListener);
+    installMethod(runtime, prototype, "dispatchEvent", &Canvas::dispatchEvent);
+    installMethod(runtime, prototype, "setPointerCapture",
+                  &Canvas::setPointerCapture);
+    installMethod(runtime, prototype, "releasePointerCapture",
+                  &Canvas::releasePointerCapture);
   }
 
 private:

packages/webgpu/cpp/rnwgpu/api/Canvas.h

@@ -17,6 +17,13 @@ export interface NativeCanvas {
   height: number;
   clientWidth: number;
   clientHeight: number;
+  // No-op DOM-compatibility stubs so web renderers (Three.js,
+  // react-three-fiber) can treat the canvas like an HTMLCanvasElement.
+  addEventListener(type: string, listener: EventListener): void;
+  removeEventListener(type: string, listener: EventListener): void;
+  dispatchEvent(event: Event): void;
+  setPointerCapture(pointerId: number): void;
+  releasePointerCapture(pointerId: number): void;
 }
 
 export type RNCanvasContext = GPUCanvasContext & {

packages/webgpu/src/Canvas.tsx

@@ -15,6 +15,12 @@ function getNativeSurface(contextId: number) {
     width,
     clientHeight: height,
     clientWidth: width,
+    // On web the real DOM canvas handles events; delegate to it.
+    addEventListener: canvas.addEventListener.bind(canvas),
+    removeEventListener: canvas.removeEventListener.bind(canvas),
+    dispatchEvent: canvas.dispatchEvent.bind(canvas),
+    setPointerCapture: canvas.setPointerCapture.bind(canvas),
+    releasePointerCapture: canvas.releasePointerCapture.bind(canvas),
   };
 }
 

packages/webgpu/src/WebPolyfillGPUModule.ts

@@ -6,6 +6,13 @@ export interface NativeCanvas {
   height: number;
   clientWidth: number;
   clientHeight: number;
+  // No-op DOM-compatibility stubs so web renderers (Three.js,
+  // react-three-fiber) can treat the canvas like an HTMLCanvasElement.
+  addEventListener(type: string, listener: EventListener): void;
+  removeEventListener(type: string, listener: EventListener): void;
+  dispatchEvent(event: Event): void;
+  setPointerCapture(pointerId: number): void;
+  releasePointerCapture(pointerId: number): void;
 }
 
 export type RNCanvasContext = GPUCanvasContext & {