[SOLVED] Very pixelated page/view (unity webgl)

Questions & Answers
1

Hell everyone,
i am developing a 3D application for the unity webgl platform.
After i have built and deployed my application to a server and went ahead to load the webpage, i got this very pixelated looking page (see picture).
Upon reloading the page or resizing the browser everything is fine. This problem occurs when i want to load the page from a new PC/browser which has never opened the page before or occaisionally on the same PC/browser.
I have looked in the browsers console/inspector but found no errors linked to problem.

Any help would be very appreciated.
very pixelated

2

Fixed it.
The issue was that the canvas had too small dimensions of 300 x 150.
We are using the BetterMinimal WebgGL-Template, in the template index.html the ‘resize’ event is added to the HTML window and calls a function (onResize) when the browser is resized and when the HTML body is loaded (onload=“onResize”). In the onResize function the canvas style width and height are scaled, not the actual dimensions. After i changed it to scale the actual width and height everything workd perfectly.

I also added the screen scaling factor to the function so the canvas would also scale correctly if the screen scaling is not standard (100%).

Here is the Code:

function onResize() {
            var canvas = gameInstance.Module.canvas;
            var container = gameInstance.container;
            var w;
            var h;

            if (scaleToFit) {
                w = window.innerWidth;
                h = window.innerHeight;

                var r = 900 / 1600;

                if (w * r > window.innerHeight) {
                    w = Math.min(w, Math.ceil(h / r));
                }
                h = Math.floor(w * r);
            } else {
                w = 1600;
                h = 900;
            }

            container.style.width = w + "px";
            container.style.height = h + "px";
            container.style.top = Math.floor((window.innerHeight - h) / 2) + "px";
            container.style.left = Math.floor((window.innerWidth - w) / 2) + "px";

            // This is the screen scale
            var ratio = window.devicePixelRatio;
            // Scale canvas height and width not style like the container above
            canvas.height = h * ratio;
            canvas.width = w * ratio;
}