Scaling Unity WebGL Canvas causes a bad performance
Hello.
I'm scaling WebGL canvas according to the size of the browser window as below.
This works well as I want, but the game performance becomes quite bad when the canvas is big, especially when playing on Android mobile.
On the other hand, when I pinch out the mobile screen and make the canvas big without using these JavaScript and CSS, the game performance doesn't become bad, and it doesn't reduce the resolution. So this is exactly what I want.
I'd like to have this performance with the canvas fitting to the window without pinching out manually.
Is there any way to scale the WebGL canvas without making the performance bad?
Thank you.
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | soap7</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="Build/UnityLoader.js"></script>
<script type="text/javascript" src="script.js"></script>
<script>
UnityLoader.instantiate("unityContainer", "Build/WebGL.json");
</script>
</head>
<body>
<div class="webgl-content">
<h1 id="unityContainer"></h1>
</div>
</body>
</html>
style.css:
h1 {
width: 360px;
height: 640px;
margin: auto;
}
script.js:
window.onload = function(){Resize();}
window.onresize = function(){Resize();}
function Resize()
{
var gameWidth = 360;
var gameHeight = 640;
var h1 = document.getElementById( 'unityContainer' );
var width, height;
var gameRatio = gameWidth / gameHeight;
var windowRatio = window.innerWidth / window.innerWidth;
if(gameRatio > windowRatio )
{
width = window.innerWidth;
height = width / gameRatio;
}
else
{
height = window.innerHeight;
width = height * gameRatio;
}
h1.style.width = width + 'px';
h1.style.height = height + 'px';
}
Your answer
Follow this Question
Related Questions
"ReferenceError: UnityLoader.js is not defined" on Kongregate 1 Answer
Is possible to Embed WebGL Compiled Game in Blogger? if Possible How? 2 Answers
I am getting this error in WebGL 0 Answers
Delaying WebGL player loading until user input 0 Answers
EditorUtility.OpenFilePanel for UnityWebGL (Runtime) 1 Answer