Home / Tutorial / WebGL Template: Create a custom template

WebGL Template: Create a custom template

/
/
/
6099 Views

WHY USING A WEBGL TEMPLATE

A WebGL template is essential to speed up the development of Unity web projects.

When building a project for the web, the player is embedded in an HTML page so that it can be played in the browser. Unity has its own default templates that provide a minimal/default HTML file.

However, when including the player in a more complex HTML file the default templates are not good enough. Without a template the easiest solution is to manually copy the build files into the final directory each time a new build is completed. However, this is a cumbersome process.

A WebGL template provides Unity the HTML file (and all the necessary assets) when building the project. This way the player is automatically included in the page where it will eventually be deployed.

While it seems secondary, believe me that it will save you some copy/paste time in the long run.

Let’s see how to create a custom template.

ADD A  CUSTOM WEBGL TEMPLATE

WebGL Template Folder
Assets/WebGLTemplates/

To create a new template, add a new directory named /WebGLTemplates inside the /Assets folder.

Then add a new folder for each template with at least an index.html file. It is also possible to include all the necessary resources files such as stylesheets, images, and JavaScript files.

/Assets/WebGLTemplates//index.html

WebGL template chooser
WebGL Template Chooser

You can provide an optional thumbnail.png (128x128px) file to be displayed on the template chooser section of the Player Settings.

Now let’s see how to customize the index.html file of our  template.

CUSTOMIZE THE CUSTOM TEMPLATE

Here is an example index.html

The only requirements for the index.html file is a canvas element with id=”canvas” and the script tag %UNITY_WEBGL_LOADER_GLUE%. The script tag is responsible for embedding the WebGL content on the canvas element and it’s replaced by Unity at build time.

In this example we are using also the following script tags:

webgl-template-product-name
%UNITY_WEB_NAME% is replaced by the Product Name
WebGL template width and height
%UNITY_HEIGHT%  and  %UNITY_WIDTH% is replaced by Default Screen Width and Default Screen Height

Let’s finish with a custom loading screen and detecting when the WebGL content is loaded.

We also added a custom loading screen to our page.

You can also play a video while the content is loading on the background.

The page starts with the loading container visible and the canvas hidden. As soon as the WebGL content loads, they switch. The UnityFunctions.js file is responsible for making the switch.

Please note that the UnityFunctions.js file must be included after the script tag that loads the WebGL Content. Otherwise the Module won’t be defined.

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest
  • Reddit

Leave a Comment

Your email address will not be published. Required fields are marked *