Fix excessive WebGL context creation with improved resource cleanup, safer logging, and version bump (#21)

* fix(webgl): properly dispose of game view and canvas after capture

* fix(capture): disable logs during production

* chore: bump version to 0.9.2

Author: Kuuzoo

fxmanifest.lua

@@ -1,6 +1,6 @@
 fx_version 'bodacious'
 
-version '0.9.1'
+version '0.9.2'
 
 game "gta5"
 

game/nui/src/capture.ts

@@ -20,6 +20,11 @@ type CaptureRequest = {
   maxHeight?: number;
 };
 
+function log(...args: any[]) {
+  if (import.meta.env.MODE === 'production') return
+  log(...args);
+}
+
 export class Capture {
   #gameView: any;
   #canvas: HTMLCanvasElement | null = null;
@@ -73,7 +78,7 @@ export class Capture {
     this.#canvas.width = width;
     this.#canvas.height = height;
 
-    console.log(`Capturing at ${width}x${height} (original: ${window.innerWidth}x${window.innerHeight})`);
+    log(`Capturing at ${width}x${height} (original: ${window.innerWidth}x${window.innerHeight})`);
 
     this.#gameView = createGameView(this.#canvas);
 
@@ -93,7 +98,10 @@ export class Capture {
     if (!imageData) return console.error('No image available');
 
     await this.httpUploadImage(request, imageData);
+    this.#gameView.dispose();
     this.#canvas.remove();
+    this.#gameView = null;
+    this.#canvas = null;
   }
 
   async httpUploadImage(request: CaptureRequest, imageData: string | Blob) {
@@ -170,12 +178,12 @@ export class Capture {
         }
       }
 
-      console.log(`Using quality ${quality} for ${canvas.width}x${canvas.height} (${pixelCount} pixels)`);
+      log(`Using quality ${quality} for ${canvas.width}x${canvas.height} (${pixelCount} pixels)`);
 
       canvas.toBlob(
         (blob) => {
           if (blob) {
-            console.log(`Generated blob: ${(blob.size / 1024 / 1024).toFixed(2)}MB`);
+            log(`Generated blob: ${(blob.size / 1024 / 1024).toFixed(2)}MB`);
             resolve(blob);
           } else {
             reject('No blob available');

packages/gameview/webgl.ts

@@ -141,14 +141,32 @@ export function createGameView(canvas: HTMLCanvasElement) {
 		canvas,
 		gl,
 		animationFrame: void 0,
+		disposed: false,
 		resize: (width: number, height: number) => {
+			if (gameView.disposed) return;
 			gl.viewport(0, 0, width, height);
 			gl.canvas.width = width;
 			gl.canvas.height = height;
 		},
+		dispose: () => {
+			if (gameView.disposed) return;
+			gameView.disposed = true;
+			if (gameView.animationFrame) {
+				cancelAnimationFrame(gameView.animationFrame);
+				gameView.animationFrame = void 0;
+			}
+			const ext = gl.getExtension('WEBGL_lose_context');
+			if (ext) {
+				ext.loseContext();
+			}
+			if (canvas.parentNode) {
+				canvas.parentNode.removeChild(canvas);
+			}
+		},
 	};
 
 	render = () => {
+		if (gameView.disposed) return;
 		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 		gl.finish();