search

plnkr / feedback

Feedback on Plunker
19 stars 11 forks source link

Why I see a half of triangle on Android? #615

Closed 8Observer8 closed 5 months ago

8Observer8 commented 5 months ago

Hello,

I have an example that draws a triangle. It works on desktop without problems. But if you open this link on Android https://plnkr.co/edit/Osn3MpGQ5fLVgAZd (short url: shorturl.at/DEJNT) and click on the full screen button you will see a half of triangle.

ggoodman commented 5 months ago

It's likely that the preview iframe is being resized by Plunker after your code's initialization has completed and the certain sizes have been frozen in time. You might want to try using a ResizeObserver on the <canvas>.

8Observer8 commented 5 months ago

It is related with resizing because if I use a fixed size of canvas I don't see the problem. I comment this:

<!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->

Now the example works without the problem in full screen mode on Plunker: https://shorturl.at/hpAX5

8Observer8 commented 5 months ago

This problem happens on old devices only. In my case it works without problem on Android 13 but doesn't work on Android 7.

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

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();
            };
8Observer8 commented 5 months ago

Solution! Disable antialias!

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