Scene and UI on top of it

How-to Discussions
1

Hey,

I have a 3d scene and I would like to have Panel on top of it so that I can track pointer events.

Here’s my main class:

<App ClearColor="#000" ux:Class="MainView" ux:AutoCtor="false">

  <Scene Camera="CameraEntity">

    <Entity ux:Name="CameraEntity">
      <Frustum FovDegrees="120" ZNear="10" ZFar="10000" ux:Name="CameraFrustum" />
      <Transform3D Position="0, 0, 0" RotationDegrees="0, 0, 0" Scaling="1, 1, 1" ux:Name="CameraTransform" />
    </Entity>

    <MyRenderNode ux:Name="MyRenderNode" CameraFrustum="CameraFrustum" CameraTransform="CameraTransform" />

  </Scene>

</App>

It would make sense to able to add Panel after the Scene, inside App, but this causes a black screen:

<App ClearColor="#000" ux:Class="MainView" ux:AutoCtor="false">

  <Scene Camera="CameraEntity">

    <Entity ux:Name="CameraEntity">
      <Frustum FovDegrees="120" ZNear="10" ZFar="10000" ux:Name="CameraFrustum" />
      <Transform3D Position="0, 0, 0" RotationDegrees="0, 0, 0" Scaling="1, 1, 1" ux:Name="CameraTransform" />
    </Entity>

    <MyRenderNode ux:Name="MyRenderNode" CameraFrustum="CameraFrustum" CameraTransform="CameraTransform" />

  </Scene>

    <Panel Pointer.Pressed="MyRenderNode.PointerPressed" Pointer.Moved="MyRenderNode.PointerMoved" Pointer.Released="MyRenderNode.PointerReleased" Pointer.WheelMoved="MyRenderNode.PointerWheelMoved">
        <SolidColor Color="0,0,0,0"/>
     </Panel>

</App>

I had a fix in version before v.0.8.0 where I put the panel inside the Scene, but now it makes the panel a 3D plane and place it inside my scene.

file
file960×539

Any trick that would help here?

2

Hi!

<App> can only hold a single child node.

You can use a <RenderNode> to group any number of 2D/3D nodes together. Does that work? As in

<App>
    <RenderNode>
        <Panel.. />
        <Scene.. />

Note that higher up in the UX file = higher up (topmost) in Z-order.

3

Thanks!

Ended up adding another RenderNode around my code and now it works.

<App ClearColor="#000" ux:Class="MainView" ux:AutoCtor="false">

    <RenderNode>

      <Scene Camera="CameraEntity">

          <Entity ux:Name="CameraEntity">
                <Frustum FovDegrees="120" ZNear="10" ZFar="10000" ux:Name="CameraFrustum" />
                <Transform3D Position="0, 0, 0" RotationDegrees="0, 0, 0" Scaling="1, 1, 1" ux:Name="CameraTransform" />
          </Entity>

            <MyRenderNode ux:Name="MyRenderNode" CameraFrustum="CameraFrustum" CameraTransform="CameraTransform" />

      </Scene>

      <Panel Pointer.Pressed="MyRenderNode.PointerPressed" Pointer.Moved="MyRenderNode.PointerMoved" Pointer.Released="MyRenderNode.PointerReleased" Pointer.WheelMoved="MyRenderNode.PointerWheelMoved">
          <SolidColor Color="0,0,0,0"/>
       </Panel>

    </RenderNode>

 </App>

MyRenderNode is:

<RenderNode ux:Class="MyRenderNode" ux:AutoCtor="false" />

And it contains my custom rendering logic, like the Lamborgini :smiley:

Also tested and yes I can add custom UI on top of it and it works just great. The Panel is under the Scene because it’s invisible Panel for tracking pointer events for rotating camera etc.