Skip to content

Latest commit

 

History

History
71 lines (47 loc) · 3.45 KB

webgl-templates.md

File metadata and controls

71 lines (47 loc) · 3.45 KB
Raw

WebGL Templates

Important: To use the templates feature in WebGL, you need prior knowledge of JavaScript concepts and terminology.

A WebGL template is a configuration setting that lets you control the appearance of the HTML page, so that you can: test, demonstrate, and preview your WebGL application in a browser.

We provide our custom HISPlayerTemplate for you to use our SDK. In the case you want to create your own template, please, refer to Custom WebGL Template.

A WebGL Template is always needed for creating a WebGL application and it will always be stored within Assets > WebGL Templates to be used. You can refer to Unity: WebGL Templates for more information.

HISPlayer Template

The HISPlayer Template folder is located in Packages > HISPlayer SDK > WebGL Templates > HisPlayerTemplate. In the case you want to use it, please refer to Configure Unity for WebGL.

The most important files within HISPlayer Template are:

  • HisPlayerTemplate > index.html
  • HisPlayerTemplate > hisplayer.js
  • HisPlayerTemplate > js > HisPlayerUnity.js

Please, keep in mind that you will always need these files for HISPlayer SDK to work on your project.

Index File

The index.html contains the code necessary to load the build. Use this file to modify the entire page where your application will be running.

The <head> is containing the references to hisplayer.js and HisPlayerUnity.js. You can always modify this file, but these references are needed. Otherwise, HISPlayer won't work on your sample.

  <head>
    ...
    <script src="./hisplayer.js"></script>
    <script src="./js/HisPlayerUnity.js"></script>
    ...
  </head>

Custom WebGL Template

It is also possible to create your own template from scratch. The easiest way to create a new custom WebGL template is to make a copy of the built-in Default or Minimal templates, which are stored in corresponding subfolders under <Unity Installation> > PlaybackEngines > WebGLSupport > BuildTools > WebGLTemplates.

Every Unity Project includes these templates by default. Copy a template and place it in your own Assets > WebGLTemplates folder, and rename it to something meaningful so you can identify your template later.

Once you have created your own template, please, copy the files hisplayer.js and HisPlayerUnity.js into your files, open the index.html file and refer to those files following the previous point Index File.

The files are located in:

  • Packages > HISPlayer SDK > WebGL Templates > HisPlayerTemplate > hisplayer.js
  • Packages > HISPlayer SDK > WebGL Templates > HisPlayerTemplate > js > HisPlayerUnity.js

Finally, open Edit > Project Settings > Player > Resolution and Presentation and choose your template.

At this point, you can also ignore the error that appears on the HISPlayer Settings related with the WebGL HISPlayer Template: