From 7a16083a2ef5c82094d91d3d9d5450352ff0800d Mon Sep 17 00:00:00 2001
From: Andriy Oblivantsev <eslider@gmail.com>
Date: Mon, 2 Mar 2026 22:46:52 +0000
Subject: [PATCH] Guard MapLibre Three.js render against zero-size
 framebuffers.

This syncs renderer size on map resize and skips render frames when canvas or drawing buffer dimensions are zero to prevent GL_INVALID_FRAMEBUFFER_OPERATION errors.

Made-with: Cursor
---
 web/maplibre-demo.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/web/maplibre-demo.js b/web/maplibre-demo.js
index 2b666dd..7e227ff 100644
--- a/web/maplibre-demo.js
+++ b/web/maplibre-demo.js
@@ -168,6 +168,17 @@ async function renderSharedAssetFromQuery() {
 }
 
 function createThreeLayer() {
+  function syncRendererSize(m) {
+    if (!threeRenderer) return;
+    const canvas = m.getCanvas();
+    if (!canvas) return;
+    const width = canvas.clientWidth || canvas.width || 0;
+    const height = canvas.clientHeight || canvas.height || 0;
+    if (width <= 0 || height <= 0) return;
+    threeRenderer.setPixelRatio(window.devicePixelRatio || 1);
+    threeRenderer.setSize(width, height, false);
+  }
+
   return {
     id: "threejs-custom-layer",
     type: "custom",
@@ -187,14 +198,20 @@ function createThreeLayer() {
         antialias: true,
       });
       threeRenderer.autoClear = false;
+      syncRendererSize(m);
+      m.on("resize", () => syncRendererSize(m));
     },
     render(gl, matrix) {
+      const canvas = map.getCanvas();
+      if (!canvas || canvas.width <= 0 || canvas.height <= 0 || gl.drawingBufferWidth <= 0 || gl.drawingBufferHeight <= 0) {
+        return;
+      }
       const m = new THREE.Matrix4().fromArray(matrix);
       threeCamera.projectionMatrix = m;
+      syncRendererSize(map);
       threeRenderer.resetState();
       threeRenderer.render(threeScene, threeCamera);
       map.triggerRepaint();
-      gl.disable(gl.DEPTH_TEST);
     },
   };
 }