Unity Html5



In this article, I show how surprisingly easy it is to create a UI in Unity using standard HTML, CSS, and JavaScript. If you want to jump to a specific section, you can use the following links:

Unity 3D to HTML5 interactive car configurator streaming demo. Our goal is to create visually stunning 3D applications and end-to-end eCommerce solutions for businesses based on our platform. The Unity WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser.

Why HTML?

Unity has its own proprietary UI system, so why would we want to use HTML? Here are just some of the advantages:

Unity Webgl Player Games

  • You can use the plethora of existing web UI components (like date pickers, charts, Google Maps embed).
  • Rapid development using state-of-the-art front-end tooling (like browser DevTools, hot-reloading, and frameworks like React.js).
  • It's easier to create a responsive design that changes based on screen size (for example, using flexbox).
  • Serving parts of your UI from a web server allows you to update it without updating the entire app.
  • You can leverage your company's web development skills and existing web designs.
  • HTML and CSS are more powerful and flexible than Unity's UI system.

As wonderful as HTML is, there is a tradeoff, which is that embedding a browser does utilize more memory and CPU than just using Unity's built-in UI system. So, it's largely a tradeoff between development speed versus runtime performance. Being able to develop faster often makes this tradeoff worthwhile, however if your application requires the highest possible performance, you may want to stick with Unity's built-in UI system.

Tools needed

Html5

To display HTML, we're going to need a browser. And there's no better browser for Unity than 3D WebView. Here's why:

  • Seamless cross-platform support across most devices (Windows, macOS, Android, iOS, UWP, and more to come).
  • Best-in-class documentation, product quality, and support. These are areas where 3D WebView really blows other solutions out of the water.
  • 3D WebView renders web content to textures that can be displayed anywhere in Unity scenes. In contrast, alternative products usually work by floating a native 2D webview over the Unity game view, which doesn't work for 3D or VR.

Overview of approach

Here's our high-level plan for creating the UI:

  • Place the UI's HTML, CSS, and other assets in the project's StreamingAssets folder.
  • Add a CanvasWebViewPrefab to the scene and set its Initial Url to point to our HTML file using a special streaming-assets:// URL.
  • Use 3D WebView's message passing API to send messages from JavaScript to C#.

Unity Html5 Demo

Implementation

For this example, I decided to create a simple signin UI that asks the user for their credentials, sends an authorization request to an API, and sends the resulting auth token to the app's C# code. You can see the completed project here on GitHub.

  1. I started by creating a new Unity project.
  1. Next, I installed 3D WebView for Windows and macOS from the Asset Store.
  1. I then created a new scene named UnityHtmlUiExample with a CanvasWebViewPrefab configured to occupy the entire screen. I really just copied and pasted 3D WebView's CanvasWebViewDemo scene, but it's also easy just to add a Canvas to a new scene and drag a CanvasWebViewPrefab into it.
  1. After that, I added a new Assets/StreamingAssets directory for the HTML and CSS files to go into.
  1. Then, I implemented the HTML and CSS for a simple signin UI and placed those files into the StreamingAssets directory. Below is the HTML from signin.html. To see the CSS, check out the files on GitHub.

Unity Html5 Ui

  1. In the Unity editor, I then set the CanvasWebViewPrefab's Initial URL field to streaming-assets://signin.html so that it loads the page.

Unity Html5 Mobile

  1. Finally, I hit play to see the UI in action:

I also installed 3D WebView for Android and tested on Android:

Closing thoughts

Although I kept this example simple, it's easy to think of valuable improvements that we could add. For example, we could modify the signin page to give users the option to signin with Google or Facebook. Or we could implement the UI in React.js and share UI components across multiple views. I plan to write articles about both of these topics in the future. If you're interested in creating your own Unity UIs with HTML, go get 3D WebView and let me know if you have questions or feedback!