Full browser WebGL templates with CSS

Posted by admin on July 12, 2015 in Unity3d, webgl |

There is a number of layout options for embedding the WebGL player in an HTML page now. Unity gets shipped with two standard WebGL templates and custom templates feature. This is an update to my previous post here.

The standard templates include the default and the minimal template.
The minimal template comes only with the minimal files for runnung the WebGL player only and doesn’t provide any output for the loading time. During the build process the minimal template generates the .htaccess and index files together with the Release/ and Compressed/ data folders inside the build folder.
The default template also adds a TemplateData/ folder with the UnityProgress.js file in it. On loading the webpage the UnityProgress.js generates and adds the loading elements to the parent node of the canvas element in the index document and then uses them to visualise the loading progress.

I came across a very interesting blog post here. The most important I have learned from it is that all the resizing can be done purely with css so there is no need of any javascript for canvas size initial setup or onResize action.
I started from the default template and then forked it a bit, getting three new templates:

  • full browser window flexible
  • full window flexible & footer
  • full window flexible & sidebar

full browser window flexible template

full window flexible & footer template

full window flexible & sidebar template


Comparing to the default template – in the full browser flexible template I have given up the canvas background element and styled the page backrgound instead, because they have the same size. Then I will be able to easily pass on the styling data with the $_GET or $_POST to the index.php file.

I found this very useful for one of my projects where I have one common loading scene and over a hundread of target scenes loaded from AssetBundles. Then I pass the url of requested scene bundle as an argument to the index.php file.  Now I can use the same argument to set the loading screen background.

The loading process has a data downloading phase which is illustrated by a progress bar and then follows a data processing phase, when – in the default template – user is being made to wait and nothing is happening. In all these templates I have added an animated gif for that.

These templates are ready for download inside unityPackage below:



Leave a Reply

Copyright © 2011-2024 virtualPlayground All rights reserved.
VP based on Desk Mess Mirrored v1.8.3 theme from BuyNowShop.com.