From 47396ede6f2ae235e4db197a0b44004adf580d06 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Jun 2025 20:39:06 +0000
Subject: [PATCH 1/3] Initial plan


From 9e97a56eb0c1b5a69a3c420e64d7b37a3bcebe20 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Jun 2025 20:49:49 +0000
Subject: [PATCH 2/3] Fix WebGPU renderer initialization timing issue in
 FiberCanvas

Co-authored-by: wcandillon <306134+wcandillon@users.noreply.github.com>
---
 .../src/ThreeJS/components/FiberCanvas.tsx    | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/apps/example/src/ThreeJS/components/FiberCanvas.tsx b/apps/example/src/ThreeJS/components/FiberCanvas.tsx
index 5146ee4bb..11567b790 100644
--- a/apps/example/src/ThreeJS/components/FiberCanvas.tsx
+++ b/apps/example/src/ThreeJS/components/FiberCanvas.tsx
@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import type { ReconcilerRoot, RootState } from "@react-three/fiber";
 import {
   extend,
@@ -11,7 +11,7 @@ import type { ViewProps } from "react-native";
 import { PixelRatio } from "react-native";
 import { Canvas, useCanvasEffect } from "react-native-wgpu";
 
-import { makeWebGPURenderer, ReactNativeCanvas } from "./makeWebGPURenderer";
+import { ReactNativeCanvas } from "./makeWebGPURenderer";
 
 //global.THREE = global.THREE || THREE;
 
@@ -29,12 +29,12 @@ export const FiberCanvas = ({
   camera,
 }: FiberCanvasProps) => {
   const root = useRef<ReconcilerRoot<OffscreenCanvas>>(null!);
+  const [frameloop, setFrameloop] = useState<"always" | "never">("never");
 
   React.useMemo(() => extend(THREE), []);
 
   const canvasRef = useCanvasEffect(async () => {
     const context = canvasRef.current!.getContext("webgpu")!;
-    const renderer = makeWebGPURenderer(context);
 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
@@ -56,8 +56,22 @@ export const FiberCanvas = ({
       events,
       scene,
       camera,
-      gl: renderer,
-      frameloop: "always",
+      gl: () => {
+        const renderer = new THREE.WebGPURenderer({
+          antialias: true,
+          canvas,
+          context,
+        });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        renderer.xr = { addEventListener: () => {} };
+        // Initialize the renderer asynchronously and update frameloop when ready
+        renderer.init().then(() => {
+          setFrameloop("always");
+        });
+        return renderer;
+      },
+      frameloop,
       dpr: 1, //PixelRatio.get(),
       onCreated: async (state: RootState) => {
         await state.gl.init();
@@ -76,5 +90,12 @@ export const FiberCanvas = ({
     };
   });
 
+  // Update the frameloop when it changes
+  React.useEffect(() => {
+    if (root.current) {
+      root.current.configure({ frameloop });
+    }
+  }, [frameloop]);
+
   return <Canvas ref={canvasRef} style={style} />;
 };

From 0d05bc08a66b4e2c5c29d2a9aed6130b3bf1a645 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 25 Jun 2025 20:51:27 +0000
Subject: [PATCH 3/3] Remove duplicate renderer initialization in FiberCanvas

Co-authored-by: wcandillon <306134+wcandillon@users.noreply.github.com>
---
 apps/example/src/ThreeJS/components/FiberCanvas.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/example/src/ThreeJS/components/FiberCanvas.tsx b/apps/example/src/ThreeJS/components/FiberCanvas.tsx
index 11567b790..a1fa8b5f7 100644
--- a/apps/example/src/ThreeJS/components/FiberCanvas.tsx
+++ b/apps/example/src/ThreeJS/components/FiberCanvas.tsx
@@ -65,7 +65,7 @@ export const FiberCanvas = ({
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         renderer.xr = { addEventListener: () => {} };
-        // Initialize the renderer asynchronously and update frameloop when ready
+        // Initialize the renderer asynchronously
         renderer.init().then(() => {
           setFrameloop("always");
         });
@@ -73,8 +73,8 @@ export const FiberCanvas = ({
       },
       frameloop,
       dpr: 1, //PixelRatio.get(),
-      onCreated: async (state: RootState) => {
-        await state.gl.init();
+      onCreated: (state: RootState) => {
+        // Renderer is already initialized in the gl function
         const renderFrame = state.gl.render.bind(state.gl);
         state.gl.render = (s: THREE.Scene, c: THREE.Camera) => {
           renderFrame(s, c);