Skip to content

Character UI

Jonas Mortensen edited this page Feb 13, 2020 · 7 revisions

This demo showcases how camera stacking can be used to present interesting 3D UI elements to the player. Having 3D elements as part of the user interface is a common case in video games and effectively integrates the game world into the UI.

In this example, overlay cameras are used when interacting with NPC's in the game world. An overlay camera will render the NPC as part of the UI with matching lighting and animation.

  • Can be found at _CompletedDemos/3DCharacterUI
  • Uses Camera Stacking which is part of the URP Package
  • Uses Overlay Cameras to render characters as part of UI
  • Uses a Renderer Feature to blur background when UI is open

The Setup

The Renderers

When the UI is open, we want to blur the background. This calls for having different renderers in the render pipeline asset: One that blurs the background image and one that doesn't.

The 3DCharacterUI-RP-Asset_Renderer is standard and does not do anything special.

The 3DCharacterUI-RP-Asset_Blur has a renderer feature added. This feature contains settings that are used for blurring the rendered image:

Based on a number of Blur Passes, a blit with a blur shader is performed several times from the current image on screen. Based on when this pass is injected, it will blur different parts of the image. We want to blur only the parts rendered by the previous camera, so the Render Pass Event is set to Before Rendering Opaques. The blur material itself takes the average of 5 sampled pixels that are seleced based on an offset.

Camera Setup

The scene is set up with three cameras. BaseCamera for rendering the game, ShopCamera for rendering the NPC's in the UI and PPCamera for applying Post Processing to everything. The last camera is needed because the ShopCamera is being toggled on an off. If Post Processing was applied to the base camera only, the character rendering in the UI would not receive processing.

The camera stack of the BaseCamera is set up such that the Post Processing happens last:

Clone this wiki locally