Coherent Blog: Unity3D - compositing multiple Coherent UI Views (tutorial)

In this tutorial we'll show how to compose multiple Coherent UI views simultaneously on the main player camera.

Some example scenarios when you would like to achieve such an effect are:

1) Having both the HUD and a browser simultaneously active on the player screen - both camera-aligned
2) In a strategy game all the unit's portraits could be in one view (using the on-demand view feature for perfect gameplay synchronization) and all other HUD details (unit construction, menus, etc.) in another view
3) If you want to keep some sort of logic separate between views - for instance having the HUD and the menus in different views

These are only a handful of use cases, I'm sure many more can be invented. Keep in mind that most of the the time you could use just one view and separate the content with divs or iframes. For all the cases when this is not possible - here is a quick tutorial.

As it turns out achieving the composition is super easy in Unity3D and requires no code at all.

We'll use as a base the "MenuAndHud" sample available in the Coherent UI package.
In essence we'll render the two views on two render textures and then compose them on the Main camera via "GUI Textures".

1) Create an empty project
2) Import the Coherent UI package
3) Run Assets->Coherent UI->Install Coherent UI
4) Now navigate and open the scene we'll modify - Assets/CoherentUI/Samples/Scenes/Sample03_MenuAndHUD/Game/game.scene
5) First remove the Coherent UI View component that is currently on one of the faces of the cube

6) Remove the Coherent UI View component from the "Main Camera" (under "First Person Controller")
7) Add a Camera Game Object and set it's position to (0, 0, 100) or any other position where it won't be able to 'see' any of the scene or just use the culling mask of the camera

8) Add a Coherent UI View component to this new camera

9) IMPORTANT: Remove the 'GUI layer' component from the newly created camera.
10) Create a Render texture to hold our rendered view

11) Rename the texture to 'browser' and set it to 1024x512 pixels

12) Set the 'browser' texture as Render target for the new camera
13) Repeat steps 6-11 - create again a new camera, remove the GUI Layer component, create a new render texture but this time name it 'hudTex'. Set the Coherent UI View component on the second camera to be 1024x570 pixels and set it's 'Page' to 'coui://UIResources/MenuAndHUD/hud/hud.html'. Make sure the view has also "Is Transparent" and "Support Click Through" set to true.

14) Create a "GUI Texture" Game Object

15) Rename it to 'HudGui', set it's texture to our 'hudTex', it's position to (-512, -256) and it's size to 1024x570

16) Create another "GUI Texture" Game Object
17) Rename it to Browser, set it's texture to our 'browser', it's position to (-512, -256) and it's size to 1024x512. Note that the result will also be tinted by the GUI Texture 'Color' property. This could be used to achieve some neat effects.