The WebGL Platform

WebGL is a web-based platform which allows for 2D and 3D applications to be run through browsers. It utilizes GPU hardware as well, allowing for some fairly impressive rendering. One of the most appealing aspects of WebGL is its ease of accessibility. Since the internet is so widely used today, just being able to send a link along or embed a game/application into an existing web page can get people viewing your content without them having to invest much at all.

There are numerous libraries which work to assist in building web applications which use WebGL, such as three.js, A-Frame, BabylonJS, and more. Within the past few years, game engines like Unity and Unreal Engine 4 have also rolled out support for building for WebGL.

WebGL does have some limitations, such as memory considerations, large builds taking long times to download, and worse performance when compared to natively run applications as opposed to in a browser. These all need to be taken into account when designing and building for this platform.

The Building Process

In order to build for WebGL in Unity, you must first import the WebGL component into the version of Unity you are using. If using Unity’s new Hub application, this can be done when installing a unity version or can be added post-install by clicking the three dots next to the Unity install and click “Add Component”. For Unity versions not added through the Hub, if you open the build settings and select WebGL as your target, it will provide a link to download the WebGL component if you do not have it.

Once WebGL’s component is added, you must then look at the Player Settings to configure some build settings. As mentioned earlier, memory considerations are a big issue, so spend the time to figure out how much memory your build will need to be allocated. The way WebGL works with memory is that it tells the browser it runs in how much memory the application could use and the browser will pre-allocate that much. Remember that too little memory will cause a crash and too much may give the browser trouble allocating it. Unity’s Profiler Window is extremely valuable when it comes to figuring this part out.

Finally, Unity offers to strip all assets and dependencies that aren’t being actively used in the build in order to reduce the build size and memory footprint. In order to do this, make sure that “Strip Engine Code” is checked in the Player Settings > Other Settings.

Build Issues

Clinical Encounters has run into a number of issues when it comes to WebGL. Our main issues stemmed from memory limitations. When debugging, it was discovered that the system for the character editor was taking up most of the memory and also took up around 2/3 of the project size. Builds created before this was discovered would always run out of memory when opened in a browser, even if the memory limit was set to the max of 2GB. Removing the Character Editor for a slimmed down, WebGL build has definitely gotten the project closer to WebGL integration.

On top of removing the character, we have also built using WebAssembly instead of asm.js. Unity has been moving to support WebAssembly in the past few years, and as their blog explains:

“WebAssembly is essentially a bytecode format for the asm.js JavaScript subset (asm.js is used to deploy Unity code to WebGL). Compared to the currently used text-based representation, the bytecode format is significantly reducing the size footprint of code compiled to asm.js.”

The benefits of WebAssembly include smaller build sizes, less memory usage, and speeds comparable to applications run natively. It was initially added as an experimental feature in Unity 5.6, but now in 2018.2, it will be enabled by default since most modern browsers support this feature.

Now, even though we have a build with a size and footprint that is acceptable, we are still encountering build errors. These are mostly errors that occur during the build process only for WebGL. Other platforms seem unaffected. There are not many people who seem to have experienced these issues, so while we are able to squeeze a working build out here and there, we may contact Unity support to figure out what the issues are.

Our WebGL Plans

Once we have a build in hand, our plans are to use only the case-viewer side to offer specific cases embedded into chosen web pages. Since Clinical Tools offers several online courses for learning and practicing medical personnel, we want to provide a practical experience for our other users. By using WebGL, we can offer them the chance to quickly and easily experience one of our cases. In the future, we may expand the build and include the main menu so that users can access Clinical Encounters easily from the web as opposed to having to download our software.

You can read more about the Clinical Encounters platform at its website.

WebGL and the WebGL logo are trademarks of the Khronos Group Inc.