Maybe macos support issue

Author: ryanzhangofficial

fission/src/systems/simulation/wpilib_brain/SimCameraRenderer.ts

@@ -5,11 +5,12 @@ import World from "@/systems/World"
 export class SimCameraRenderer {
     private _camera: THREE.PerspectiveCamera
     private _renderTarget: THREE.WebGLRenderTarget
-    private _canvas: OffscreenCanvas
-    private _ctx: OffscreenCanvasRenderingContext2D
+    private _canvas: OffscreenCanvas | HTMLCanvasElement
+    private _ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D
     private _robot: MirabufSceneObject
     private _cameraPosition: THREE.Vector3
     private _cameraQuaternion: THREE.Quaternion
+    private _useOffscreenCanvas: boolean
 
     constructor(robot: MirabufSceneObject, width: number = 640, height: number = 480) {
         this._robot = robot
@@ -24,9 +25,20 @@ export class SimCameraRenderer {
             format: THREE.RGBAFormat,
         })
 
-        // Create canvas for frame capture
-        this._canvas = new OffscreenCanvas(width, height)
-        this._ctx = this._canvas.getContext("2d")!
+        this._useOffscreenCanvas = typeof OffscreenCanvas !== 'undefined'
+        
+        if (this._useOffscreenCanvas) {
+            // Use OffscreenCanvas for better performance where available 
+            console.log('[Camera] Using OffscreenCanvas for camera rendering')
+            this._canvas = new OffscreenCanvas(width, height)
+            this._ctx = this._canvas.getContext("2d")!
+        } else {
+            console.log('[Camera] OffscreenCanvas not available, using regular Canvas fallback')
+            this._canvas = document.createElement('canvas')
+            this._canvas.width = width
+            this._canvas.height = height
+            this._ctx = this._canvas.getContext("2d")!
+        }
 
         // Camera position relative to robot
         this._cameraPosition = new THREE.Vector3(0, 0.5, 0.2) // Mounted on robot
@@ -116,13 +128,37 @@ export class SimCameraRenderer {
         this._ctx.putImageData(imageData, 0, 0)
 
         // Convert to JPEG blob
-        return this._canvas.convertToBlob({ type: "image/jpeg", quality: 0.8 })
+        if (this._useOffscreenCanvas) {
+            return (this._canvas as OffscreenCanvas).convertToBlob({ type: "image/jpeg", quality: 0.8 })
+        } else {
+            return new Promise((resolve, reject) => {
+                (this._canvas as HTMLCanvasElement).toBlob(
+                    (blob) => {
+                        if (blob) {
+                            resolve(blob)
+                        } else {
+                            reject(new Error("Failed to convert canvas to blob"))
+                        }
+                    },
+                    "image/jpeg",
+                    0.8
+                )
+            })
+        }
     }
 
     public setResolution(width: number, height: number) {
         this._renderTarget.setSize(width, height)
-        this._canvas.width = width
-        this._canvas.height = height
+        
+        // Update canvas size
+        if (this._useOffscreenCanvas) {
+            this._canvas = new OffscreenCanvas(width, height)
+            this._ctx = this._canvas.getContext("2d")!
+        } else {
+            this._canvas.width = width
+            this._canvas.height = height
+        }
+        
         this._camera.aspect = width / height
         this._camera.updateProjectionMatrix()
     }