Resizing WebGL canvas on old Android devices

Other Standards WebGL
1

The next code snippet works as expected on Android 13. It resizes WebGL canvas in Chrome Android browser without problems: Plunker - gl-viewport-js

image
image250×595 11.2 KB

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

image

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

I updated my question.

Cross-refs:

6

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