1 of 89

Unity and HTML5 = Isomorphic Game Engine?

Lerenzo Malcom

2 of 89

3 of 89

Unity and HTML5 = Isomorphic Game Engine?

Lerenzo Malcom

4 of 89

Unity and HTML5

Why Unity? And what is CEF?
How to integrate Unity and HTML5 Applications
Gotchas and problems

5 of 89

But first...Why not Aframe?

Why would I choose Unity?

6 of 89

7 of 89

8 of 89

9 of 89

And look at those UIs!

10 of 89

11 of 89

12 of 89

13 of 89

14 of 89

Who does this???

15 of 89

2013

16 of 89

17 of 89

18 of 89

NASA Onsite - allows NASA Scientists to work virtually on Mars

19 of 89

CAE Videmix AR

20 of 89

CEF

(Chromium Embedded Framework)

21 of 89

CEF

“The Chromium Embedded Framework (CEF) is an open source framework for embedding a web browser engine based on the Chromium core. It allows developers to add web browser control and implement an HTML5-based layout GUI in a desktop application”

-Wikipedia

(C, C++, Delphi, Go, Java, .NET / Mono, Visual Basic 6.0, and Python and runs on Linux, Mac OS X and Windows)

22 of 89

23 of 89

Why Unity?

Why not just Electron?

24 of 89

Why Unity?

It exports to everything
VR/AR and other hardware support
THE ASSET STORE

25 of 89

It works on everything!

26 of 89

“Unity’s technology is at the heart of 75% of all VR and AR content”

-FastCompany

27 of 89

Asset Store

28 of 89

358

5,700

58, 902

29 of 89

Amazing Editor

30 of 89

Shader Support

31 of 89

Shader Support - Shader Graph

32 of 89

Shader Support - Geometry Shader

33 of 89

Shader Support - Compute Shaders

34 of 89

Cinemachine and Timeline - Unity for Film/Animation

35 of 89

36 of 89

Unity + HTML5

Bridging the Gap

37 of 89

38 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

Set up Unity and Browser
Send Messages From the Browser
Send Messages From Unity

39 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

Browser to Unity

Unity to Browser

40 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

41 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

Embedded Browser

Awesomium browser - not totally up to date with HTML5/CSS3, not actively maintained

Embedded Web Browser Asset

https://assetstore.unity.com/packages/tools/gui/embedded-browser-55459

42 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

43 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

44 of 89

45 of 89

Set up Unity to Listen to the Browser

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

46 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

47 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

48 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

49 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

We also need to create a way for the browser to message with Unity. First thing we do is create a service in our Unity layer that Registers a listener for a global function called “Send Message”

First thing to notice here is that half of the code is greyed out...that’s because we have platform specific compilation. That means that Unity will compile the application differently and use different blocks of code depending on which environment we are going to build for (so WebGL vs desktop vs mobile etc). The top portion only gets used if we’re NOT using webgl, ELSE the bottom portion is used.

This is our Browser Messaging Service which has an overloaded public function “SendBrowserMessage”, which when called will call the underscore version “_SendBrowserMessage”. If we look at this code above we see that this function has DLL Import _Internal syntax, which basically tells unity that the function exists somewhere else and if we just call it it will get used properly. We intend on having this _SendBrowserMessage be a function in our Javascript which we will call from Unity. Let’s have a look at that now.

50 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

51 of 89

2. Have browser send messages to Unity

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

52 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

53 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

To start let’s just look at two things. First when we start the game, the Unity service keeps track of this running game instance so that it can interact with it later. It provides a function to Send a Message to the Unity instance. This sendMessage function, like in the Unity application, is slightly different depending on our environment, but gets called with the same variables in the same way. You’ll notice that if the environment is desktop we’ll call this SendMessage Function which is declared above...all that means in Typescript is that we’re declaring a global variable, which in this case is a function with this specific signature. In webgl we’ll call this function on the gameInstance.

Let’s take a look at that in action, and then we’ll come back to how we receive messages from unity in a bit.

54 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

55 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

56 of 89

57 of 89

3. Unity Messaging the Browser

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

58 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

59 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

60 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

61 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

62 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

63 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

64 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

65 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

66 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

67 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

68 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

69 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

70 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

71 of 89

72 of 89

Unity + WebGL

Isomorphism

73 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

74 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

75 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

76 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

77 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

If we look back again at our BrowserMessageService in Unity, we’ll remember that I specifically kept two functions here, one which is the normal Send Browser Message, and the other which is the overloaded function “_SendBrowserMessage”. The reason I did that is because

This is our Browser Messaging Service which has an overloaded public function “SendBrowserMessage”, which when called will call the underscore version “_SendBrowserMessage”. If we look at this code above we see that this function has DLL Import _Internal syntax, which basically tells unity that the function exists somewhere else and if we just call it it will get used properly. We intend on having this _SendBrowserMessage be a function in our Javascript which we will call from Unity. Let’s have a look at that now.

78 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

If we look back again at our BrowserMessageService in Unity, we’ll remember that I specifically kept two functions here, one which is the normal Send Browser Message, and the other which is the overloaded function “_SendBrowserMessage”. The reason I did that is because

This is our Browser Messaging Service which has an overloaded public function “SendBrowserMessage”, which when called will call the underscore version “_SendBrowserMessage”. If we look at this code above we see that this function has DLL Import _Internal syntax, which basically tells unity that the function exists somewhere else and if we just call it it will get used properly. We intend on having this _SendBrowserMessage be a function in our Javascript which we will call from Unity. Let’s have a look at that now.

79 of 89

Unity + HTML5

Overview
Desktop
Browser/WebGL
Isomorphic?

80 of 89

I wish I knew...

81 of 89

Different Environments

WebGL + Desktop

Oculus Go

+

Mobile

82 of 89

Unity UI vs CEF UI

83 of 89

Language Compatibility Level

Desktop > Mobile > WebGL: Not all libraries work in all environments�

84 of 89

85 of 89

The mission...

86 of 89

87 of 89

88 of 89

89 of 89

Be Creative