Merge pull request 'fix(web): clamp /play canvas to GPU MAX_TEXTURE_SIZE (wgpu 2048 panic)' (#97) from fix/web-canvas-max-texture-size into master

2026-06-24 00:45:29 +00:00
parent 923a67dc7b 7b5d69e164
commit b3b282ec2d
1 changed files with 35 additions and 2 deletions
@@ -7,11 +7,44 @@
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { background: #000; overflow: hidden; }
-        #bevy-canvas { display: block; width: 100vw; height: 100vh; }
+        /* #bevy-wrap fills the viewport but is capped to the GPU's real
           MAX_TEXTURE_SIZE via an inline max-width/height set before init
           (see the clamp script below). fit_canvas_to_parent sizes the wgpu
           surface to this element, so capping it keeps the surface within
           WebGL2's per-dimension limit. Centered so 2048-limited devices
           letterbox symmetrically. */
        #bevy-wrap {
            width: 100vw; height: 100vh; margin: 0 auto;
            display: flex; align-items: center; justify-content: center;
        }
        #bevy-canvas { display: block; width: 100%; height: 100%; }
    </style>
 </head>
 <body>
-    <canvas id="bevy-canvas"></canvas>
+    <div id="bevy-wrap"><canvas id="bevy-canvas"></canvas></div>
    <script>
        // Clamp the Bevy canvas's backing buffer to the device's real WebGL2
        // MAX_TEXTURE_SIZE *before* the wasm initialises. `fit_canvas_to_parent`
        // sizes the wgpu surface to #bevy-wrap; a surface larger than the GPU
        // limit (only 2048 on many laptop/integrated GPUs — e.g. a 2560-wide
        // 1440p display) makes Surface::configure panic and kills the WASM
        // thread. Querying the real maximum means only devices at the 2048 floor
        // letterbox; everyone else still fills the viewport. Runs synchronously
        // before the deferred module script below.
        (function clampCanvasToGpuLimit() {
            var max = 2048; // WebGL2 spec floor — the safe fallback
            try {
                var probe = document.createElement("canvas").getContext("webgl2");
                if (probe) {
                    var m = probe.getParameter(probe.MAX_TEXTURE_SIZE);
                    if (m && m > 0) max = m;
                }
            } catch (e) { /* keep the safe 2048 floor */ }
            var wrap = document.getElementById("bevy-wrap");
            wrap.style.maxWidth = max + "px";
            wrap.style.maxHeight = max + "px";
        })();
    </script>
    <script type="module">
        import init from "/web/pkg/canvas.js";
        // solitaire_wasm.js provides SolitaireGame with the full debug / automation