WebGL: Interacting with browser scripting
Cursor locking and fullscreen mode in WebGL

Using WebGL Templates

When you build a WebGL project, Unity embeds the player in an HTML page so that it can be played in the browser. The default page is a simple white page with a loading bar on a grey canvas. Alternatively, you can select a minimal template (with only the necessary boilerplate code to run the WebGL content) in the Player Settings inspector (menu: Edit > Project Settings > Player).

The built-in HTML pages are fine for testing and demonstrating a minimal player but for production purposes, it is often desirable to see the player hosted in the page where it will eventually be deployed. For example, if the Unity content interacts with other elements in the page via the external call interface then it must be tested with a page that provides those interacting elements. Unity allows you to supply your own pages to host the player by using WebGL templates (very similar to Web Player Templates).

Structure of a WebGL Template

Custom templates are added to a project by creating a folder called “WebGLTemplates” in the Assets folder - the templates themselves are sub-folders within this folder. Each template folder contains an index.html file along with any other resources the page needs, such as images or stylesheets.

만든 후, 템플릿 Player Setting 인스펙터의 옵션으로 표시됩니다. (템플릿 이름은 폴더와 동일합니다). 선택적으로 폴더는 _thumbnail.png_라는 파일 이름을 포함할 수 있으며, 128x128 픽셀의 크기로 해야 합니다. 썸네일 이미지는 인스펙터에 표시된 마지막 페이지가 어떻게 표시되는지를 프리뷰합니다.

The html file needs to contain a canvas element with the id “canvas”. Then you must insert the UNITY_WEBGL_LOADER_GLUE tag, which will generate the required script tags to embed the Unity content, which will then render to that canvas element.

템플릿 태그

빌드 프로세스 동안 Unity는 페이지에 포함된 특별한 태그 문자열을 찾아, 에디터에 의해 제공되는 값으로 바꿉니다. 이것은 플레이어 이름, 화면 너비/높이 및 플레이어에 대한 기타 다양한 유용한 정보를 포함합니다.

태그는 페이지 소스에 포함된 퍼센트 기호(%)로 구분됩니다. 예를 들어, 만약 제품 이름이 Player Settings에서 “MyPlayer”로 정의되어 있는 경우 : -


…이것은 템플릿의 index 파일에서는


…으로 대체되어, 빌드에서 생성되는 호스트 페이지가 됩니다. 전체 태그 목록은 다음과 같습니다 : -

  • UNITY_WEB_NAME: Name of the player.

  • UNITY_WEBGL_LOADER_GLUE: This will inject the necessary script tags to embed the WebGL content. This is required to be in the template’s index.html file.

  • UNITY_WIDTH and UNITY_HEIGHT: 픽셀 단위로 플레이어 화면의 폭과 높이.

  • UNITY_DEVELOPMENT_PLAYER: 1 when building a development player, 0 otherwise.

  • UNITY_CUSTOM_SOME_TAG: 만약 이 태그를 index 파일에 UNITY_CUSTOM_XXX라는 형식으로 추가한 경우, 이 태그는 Player Settings에 템플릿이 선택됐을 때 표시됩니다. 예를 들어, 만약

    <title>Unity Web Player | %UNITY_CUSTOM_MYTAG%</title>

…을 소스에 추가하면, Player Settings는 다음과 같이 됩니다:-

태그 이름 옆의 텍스트 상자는, 빌드시 사용자 정의 태그를 대체하는 텍스트를 포함합니다.

To illustrate the use of the template tags, here is the HTML source that Unity uses for its minimal WebGL template.

<!doctype html>
<html lang="en-us">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <link rel="stylesheet" href="TemplateData/style.css">
    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
    <script src="TemplateData/UnityProgress.js"></script>
  <body class="template">
    <p class="header"><span>Unity WebGL Player | </span>%UNITY_WEB_NAME%</p>
    <div class="template-wrap clear">
    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="%UNITY_HEIGHT%px" width="%UNITY_WIDTH%px"></canvas>
      <div class="logo"></div>
      <div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
      <div class="title">%UNITY_WEB_NAME%</div>
    <p class="footer">&laquo; created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> &raquo;</p>

Adding a progress bar

Unity WebGL content will not automatically render a progress bar for you when it loads - the template needs to handle that. The default template included in Unity contains a UnityProgress.js file which implements a simple progress bar. You can reuse that for your own templates, or use it as a reference for creating your own. Since the progress bar is completely implemented in JavaScript, you can completely customize or replace it to show anything you want as a progress indication.

WebGL: Interacting with browser scripting
Cursor locking and fullscreen mode in WebGL