koobas.hobune.stream
[SOLVED] Very pixelated page/view (unity webgl)
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. 
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;
}
