Welcome, Guest

Author Topic: Unity3D – Compositing Multiple Coherent UI Views (Tutorial)  (Read 5800 times)


  • Guest
Unity3D – Compositing Multiple Coherent UI Views (Tutorial)
« on: December 05, 2013, 06:41:03 AM »
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 -
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 1024×512 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 1024×570 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 1024×570

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 1024×512. Note that the result will also be tinted by the GUI Texture ‘Color’ property. This could be used to achieve some neat effects.

18) Play!

That’s it! With this technique you can compose as many views as you like anywhere on the screen. Try Coherent UI now!

« Last Edit: December 05, 2013, 06:43:39 AM by acho »


  • Posts: 15
    • View Profile
Re: Unity3D – Compositing Multiple Coherent UI Views (Tutorial)
« Reply #1 on: November 19, 2015, 08:09:48 PM »
Hello developers,

I tried to reproduce all steps in Unity 5.1.1f1  with  Coherent UI for Unity3D (07/02/2015)

I used Render texture and added it to the RawImage component from Unity modern UI (instead of outdated GUITexture) and got strange results!

1) Browser is turned upside down. Ok I checked Flip-Y

2) After Flip-Y all mouse input affects opposite side (top <-> down) of opened browser.

3) I tried add in Update that command

 m_View.SetMousePosition((int)Input.mousePosition.x, (int)Input.mousePosition.y);

as suggested on one forum  and now mouse clicks started appear on right side but clicks itself were at incorrect places! Above  than web elements placed on site. Probable for full screen browser it would work OK, but I have browser 1024x512 which is opened at the middle of the screen 1920x1080 :]

Unfortunately in Coherent examples no one with render texture which would allow to use Coherent system in exists Unity UI interfaces.
So which way is best to fight this incorrect place clicks?  I could attach demo project if it is required!
« Last Edit: November 19, 2015, 08:11:38 PM by KEMBL »


  • Administrator
  • *****
  • Posts: 144
    • View Profile
Re: Unity3D – Compositing Multiple Coherent UI Views (Tutorial)
« Reply #2 on: November 24, 2015, 07:33:43 AM »

Using the m_View.SetMousePosition is the correct way indeed.

There are some important things you should keep in mind when doing so.

Input.mousePosition uses your viewport's X and Y values so when you pass them to the SetMousePosition function you should make sure that you are using your view's coordinates. For example, if you are playing the scene in the Unity3D Editor and your viewport has a dimensions 1200x600 and your view has the same dimensions, then using Input.mousePosition will work just fine. However if you have a view that is smaller (let's say 100x100) and a viewport with the same dimensions as before (1200x600) then you should translate the coordinates from viewport space to view space in order for the input to work properly.

You should also make sure that non of the Locable Focus or Smart Input options of the Coherent UI View Component are checked and there are no InputForward.cs or ObjectPicker.cs scripts attached to any of the Game Objects in your scene.


Tags: unity3d