在旧 Android 设备上调整 WebGL 画布大小

Question

下一个代码片段在 Android 13 上按预期工作。它可以毫无问题地在 Chrome Android 浏览器中调整 WebGL 画布的大小：https://plnkr.co/edit/H3Swhi3WweVmwgxa

但在Android 7（Redmi 4X）上它仅绘制画布的默认尺寸（300x150）：

可以解决吗？我设置了这样的视口：

            window.onresize = () => {
                const dpr = window.devicePixelRatio;
                gl.canvas.width = Math.round(gl.canvas.clientWidth * dpr);
                gl.canvas.height = Math.round(gl.canvas.clientHeight * dpr);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
                draw();
            };

交叉参考：

• https://community.khronos.org/t/resizing-webgl-canvas-on-old-android-devices/110474
• https://www.sitepoint.com/community/t/resizing-webgl-canvas-on-old-android-devices/439288

Answer 1

我不知道为什么，但是当我将抗锯齿设置为 false 时，对于纯 WebGL、Three.js 和 Babylon.js，它可以正常工作而不会出现问题。我的解决方案 - 不要使用

antialias

:

WebGL：

const gl = canvas.getContext("webgl", { antialias: false });

三.js

const renderer = new THREE.WebGLRenderer({ antialias: false });

Babylon.js：

const engine = new BABYLON.Engine(canvas, false);

• Three.js 主题：https://github.com/mrdoob/ Three.js/issues/27723
• Babylon.js 主题：https://forum.babylonjs.com/t/the-viewport-doesnt-scale-on-old-device-redmi-4x-android-7-chrome/47952