A Video Style Viewer for WebGL Scenes

Unity's default WebGL template is handy but has some shortcomings:

1. the scene loads immediately when the HTML page opens and this is not always convenient. Particularly when the scene loading is heavy and the visitor does not have high bandwidth connection he may feel trapped and ... get out of there!
2. Also because of this immediate load there is no time to present a cover image that promotes the scene adequately and motivates visitors. In short we can say that this seems like a book with no cover and the scene comes out from a dark ...nowhere!
   (this is mainly valid for the free version of Unity editor)

We made previous attempts tho overcome this by tweaking the splash screen but a better idea come out inspired by video's way: play button and cover image.

A video style play button brings the option to proceed or not with the loading and the usual associated cover image to publicize the scene theme is also a plus. This was our starting motivation for Babel Default WebGL template.

Figure 1 - Video style viewer for WebGL Scenes (built with Babel Default WebGL template).

Demo: http://odisseia.babelx3d.net/Unity3DTests/WebGLTemplates/Babel_Default/index.html

1. Features

• Play Button to start the scene loading,
• Cover Image to publicize the scene theme,
• Window Resize on bottom right corner. Before loading the user can resize the scene window to a better fit (Figure 2),
• Other small tweaks; among them a message "Loading ..." to reassure the visitor in case of long/slow downloads,
• Optional URL command to start the scene immediately in case we need it; details and examples below. (this command works on pages published on a web server. It's ignored if tested on a local hard disk)

URL command details
As standard the scene only loads by clicking the play button but, in case of need, this can be changed by adding a command to the scene's URL.
If, for some reason, in a specific situation we want to start the scene automatically that is done by adding a command "?start=yes" to the URL, like this:
http://odisseia.babelx3d.net/Unity3DTests/WebGLTemplates/Babel_Default/index.html?start=yes

Notice that by design this URL command shows the Cover Image for a little bit, 3 seconds, and then proceeds loading the scene. The wait time can also be defined by using in the URL command a value in milliseconds instead of the yes argument.

Examples: with "?start=5000" the wait is 5 seconds; with "?start=0" there is no wait and the scene is loaded immediately without showing the Cover Image:
http://odisseia.babelx3d.net/Unity3DTests/WebGLTemplates/Babel_Default/index.html?start=0

WebGL Window resizing
This feature allows the user to resize the window before loading. Useful when viewing with high resolution/large screens. The resizing is done by clicking and holding the bottom right corner (Figure 2).

Figure 2 - WebGL window resizing (user feature)

Besides the enhancements we tried to keep the publishing page with the overall Unity's look, familiar to users. The play button is located at bottom and has a soft tone in order to interfere as less as possible with the cover image view.
>>Update:  in version v1.1 when the user moves the mouse over the cover image the play button outer circle enlightens a bit to make the user more aware of the play button location.

2. Installation and use

The package is available in our BabelX3D packages public folder. (current version v1.1)

Figure 3 - Installation and use

To install, as seen in Figure 3 above:

1. To Install select  Assets>> Import Package >> Custom Package and install the downloaded package. This creates a WebGL Templates folder in Assets with Babel Default Template.

To use:

2. On File >> Build Settings, choose WebGL>> Player Settings >> Resolution and Presentation
3. Babel Default icon appears and can be selected to export the scene with this template.
   
    
4. Finally, do not forget!, after building/exporting your scene to WebGL, replace the 900x600 px coverImage.jpg in the published web folder by your own, to promote the scene to web visitors :-D (>> but keep the same name: coverImage.jpg  and if possible the same size for best results <<)

3. Discussion and support on BabelX3D forum

https://portal.babelx3d.net/content/add-play-button-and-cover-image-webgl-launch

Enjoy!

vcard