Search code examples
javascriptandroidwebgl

Resizing WebGL canvas on old Android devices

The next code snippet works as expected on Android 13. It resizes WebGL canvas in Chrome Android browser without problems: https://plnkr.co/edit/H3Swhi3WweVmwgxa

enter image description here

But on Android 7 (Redmi 4X) it draws only the default size of canvas (300x150):

enter image description here

Is it possible to solve it? I set a view port like this:

            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();
            };

Cross-refs:

Solution

  • I don't know why but when I set antialias to false it works without the problem for pure WebGL, Three.js, and Babylon.js. My solution - do not use antialias:

    WebGL:

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

    Three.js

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

    Babylon.js:

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