From 3b4c9c2529f5728d0545df94eada8b641cfee20d Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Thu, 14 May 2026 00:16:18 +0200
Subject: [PATCH] feat: add WebGL context loss handler and GPU performance
 config

---
 src/pages/editor/page.tsx | 20 ++++++++++++++++++++
 src/pages/page.tsx        | 26 ++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/src/pages/editor/page.tsx b/src/pages/editor/page.tsx
index 0f8c5b1..5da7919 100644
--- a/src/pages/editor/page.tsx
+++ b/src/pages/editor/page.tsx
@@ -15,6 +15,7 @@ import {
   type SceneLoadingChangeHandler,
   type SceneLoadingState,
 } from "@/types/world/sceneLoading";
+import { logger } from "@/utils/core/Logger";
 
 const SAVE_ERROR_MESSAGE = "Erreur lors de l'enregistrement";
 
@@ -243,8 +244,27 @@ export function EditorPage(): React.JSX.Element {
       <Canvas
         camera={{ position: [0, 50, 100], fov: 50 }}
         style={{ width: "100%", height: "100%" }}
+        gl={{
+          powerPreference: "high-performance",
+          antialias: true,
+          stencil: false,
+        }}
         onCreated={({ gl }) => {
           gl.setClearColor("#050505");
+
+          const canvas = gl.domElement;
+          const handleContextLost = (event: Event) => {
+            event.preventDefault();
+            logger.error("WebGL", "Context lost - GPU resources exhausted");
+          };
+          const handleContextRestored = () => {
+            logger.info("WebGL", "Context restored");
+          };
+          canvas.addEventListener("webglcontextlost", handleContextLost);
+          canvas.addEventListener(
+            "webglcontextrestored",
+            handleContextRestored,
+          );
         }}
       >
         <EditorSceneLoadingTracker
diff --git a/src/pages/page.tsx b/src/pages/page.tsx
index a34c6aa..2285b69 100644
--- a/src/pages/page.tsx
+++ b/src/pages/page.tsx
@@ -12,6 +12,7 @@ import {
   INITIAL_SCENE_LOADING_STATE,
   type SceneLoadingState,
 } from "@/types/world/sceneLoading";
+import { logger } from "@/utils/core/Logger";
 import { World } from "@/world/World";
 
 export function HomePage(): React.JSX.Element {
@@ -51,11 +52,36 @@ export function HomePage(): React.JSX.Element {
     [],
   );
 
+  const handleCanvasCreated = useCallback(
+    ({ gl }: { gl: THREE.WebGLRenderer }) => {
+      const canvas = gl.domElement;
+
+      const handleContextLost = (event: Event) => {
+        event.preventDefault();
+        logger.error("WebGL", "Context lost - GPU resources exhausted");
+      };
+
+      const handleContextRestored = () => {
+        logger.info("WebGL", "Context restored");
+      };
+
+      canvas.addEventListener("webglcontextlost", handleContextLost);
+      canvas.addEventListener("webglcontextrestored", handleContextRestored);
+    },
+    [],
+  );
+
   return (
     <HandTrackingProvider>
       <Canvas
         camera={{ position: [85, 60, 85], fov: 42 }}
         shadows={{ type: THREE.PCFShadowMap }}
+        gl={{
+          powerPreference: "high-performance",
+          antialias: true,
+          stencil: false,
+        }}
+        onCreated={handleCanvasCreated}
       >
         <Suspense fallback={null}>
           <World onLoadingStateChange={handleSceneLoadingStateChange} />