2.9.16
Coherent GT Unity3D Guide
A modern user interface library for games
Live Views (Picture-in-picture)

Coherent GT supports a powerful feature called Live Views. With it developers can embed dynamic content rendered by the 3D engine in their UI. The feature is ideal for 3D player portraits, equipment screens, rear view mirrors in racing games, but also advanced effects like addingparticle effects or complex 3D content inside the interface.

The Live View will act as any other HTML element and you'll be able to animate it, put elements on it etc.

Coherent GT supports a special syntax in the HTML page that marks a certain image as a Live View. When such a view is linked to a render target texture in the game, this texture will be rendered in the UI and will be dynamic. Any changes on the texture will be immediately reflected in the UI. The link is very high performance. No copying is involved. When Coherent GT has to draw the Live View it uses directly the texture provided to the API by the engine.

Live Views should be used only for dynamic content. If you want a one-time image to be set in the UI please use the "coui://" protocol or the JavaScript API. When content is static, Coherent GT can do certain optimizations that can't be done with Live Views as their content is expected to change every frame.

Live Views setup

A working sample of Live Views can be seen in the "LiveGameViews" sample distributed in the Coherent GT package.

Setting up and using Live Views is very easy. The Live View is represented by a specially set "img" tag inside the HTML page of the UI.

<img id="myLiveView" src="coui://MyLiveView"/>

The src should start with the "coui://" protocol and your LiveGameView component should have an unique LiveView name. In the example case above, LiveView name should be set to "MyLiveView". This tells Coherent GT that the img will actually be a 'live' texture updated by the game engine. The name of the Live View is given after the protocol and in this case is "MyLiveView". The name is very important, because you can have multiple Live Views simultaneously in the same page or across multiple pages and the name is a way to identify them in the code.

Now that we have the Live View setup in the HTML page, we have to link it in the game. This is done by the Coherent GT Live Game View component. It is supposed to be attached to a GameObject with a Camera that will be the source for the view. Otherwise you can set the Source Camera manually or set a RenderTexture as the Source Texture for the live view. You must set the Target View field to the Coherent GT View component that is showing the page with the "coui://" protocol. The Name field determines which live view in the page this component manages.

Live Views performance

Live Views are very high performance. No copying is involved. When Coherent GT has to draw the Live View it uses directly the texture provided to the API by the engine. There is no penalty due to the size of the texture as was the case in Coherent UI 2.x.

If you have HTML elements that intersect a Live View (for instance text on-top of it or elements in the back), they will be re-drawn each frame. This is because the content of the Live View is expected to be dynamic and the parts of the UI that it intersects have to be re-painted with it every frame. If you have many such elements, it is recommended to move the Live View in its own layer. This will prevent it from causing re-draws of elements in the neighbourhood. Moving elements to their own layers is covered in the "Avoiding re-paints with layers" section of the "Best practices" chapter.