• EON Studio File Formats Working with Viewports The Resources Group Use of Light in a Scene Generate a Foreground User Interface
  • Developer Articles / Beginner Basics

    Generate a Foreground User Interface

    Introduction

    In many 3D applications there’s a need to have some kind of user interface. This can be for providing feedback information, have buttons that can trigger various options etc. Traditionally this has been developed in a few ways - but non has been really optimal. What one would like to have is a way to ensure some 3D content is always rendered last. In EON 9 there’s for this reason a new node named ShapeRenderBucket that can help out.

    ShapeRenderBucket Node

    The ShapeRenderBucket node is an expansion node to the Shape node and was introduced in EON 9.0. The ShapeRenderBucket node will set the rendering order for a specific shape node. This mean you can place any object on top of the 3D rendered scene. To use this node it is simply to add it as an extension for any shape node. There are three fields in the node that are of interest:  
    Field name Description
    Enabled Enable/Disable the node functionalities. Disabling has the same effect as setting default values to QueueId (50) and Priority (100).
    QueueId The QueueId is a value between 0 and 105 whcih set the render order for the shape. Default is 50. See more here
    Priority Within each QueueId you can set different priority from 0 to 100 where 100 is highest priority meaning rendered last/on top.
      NOTE: Use a GLSLMaterial node for the material. The ShaderMaterial node is not supported, mainly because the features in ShaderMaterial is more than what should be needed here - so using a simple GLSLMaterial shader will improve performance a lot.

    Setting up a 3D application

    To setup a 3D application using a Shape node with geometry that’s always on top, do like this: Set the Material of a Shape node to be a GLSLMaterial. You can then use the following vertex and pixel shader codes:
    Vertex Shader Code:
    precision highp int; precision highp float; // Matrices uniform mat4 worldViewProjection; // Input attribute vec4 position; // VS output varying vec4 oUv0; // Field uniform vec2 UVScale; void main() {
    // Vertex position gl_Position = worldViewProjection * position; // Texture coordinate calculation oUv0.xy = uv0.xy*UVScale.xy;
    }
    Pixel Shader code:
    precision highp int; precision highp float; // Field uniform sampler2D DiffuseTexture; // PS input varying vec4 oUv0; void main() {
    // Look up the texture color vec3 color = texture2D(DiffuseTexture, oUv0.xy).rgb; // Output gl_FragColor = vec4(color.xyz, 1.0); }
    Now you can add a Texture to the GLSLMaterial node and if needed change the UV scaling. The setup then looks something like this: Place the UI nodes in a frame under the Camera frame and set the Position of this to be something like 0, 10, 0. This will place the UI in a plane 10 meters in front of the camera. NOTE: Due to how the internal functiionality of the rendering worksa, please turn on TreatAsSemitransparent for the GLSLMaterial.

    Adding possibilities to move UI elements with the mouse

    If you want to have a handy way of designing a user interface, then it can be simple to use the DragObjects prototype. Add a DragObjects prototype under the Camera frame, then add the frame nodes for your user interface elements to the Objects field of the DragObjects prototype. See the example file for how this is used. There are a few things to keep in mind:
    • Using the DragObjects prototype as is mean you move the user interface elements by dragging with right mouse button.
    • See the routes for handling both to turn off navigating when dragging user interface objects and as well to store the new position of the user interface objects.

    Possible future enhancements

    When developing on a desktop, the EO Simulation window is often resized, however, in the end application users many times has a fixed display size like on a mobile device. One simple way to ensure the user interface stays on the display is to set aspect ratio in the Simulation node. Another option could be to use for example a Line node and draw a rectangle that will show how a 4:3 or 16:9 ratio screen will look like - then one can keep the user interface elements inside this area. There are many other way to enhance this like add a snap functionality, add some default user interface components etc. This document however only focus on the possibility to render the objects on top.

    Sample file

    A sample file is available here.
    Copyright 2017 EON Reality Inc. | All Rights Reserved

    Log in with your credentials

    or    

    Forgot your details?

    Create Account

    Skip to toolbar