Skip to content

Spatial.UI

Name - Description Default Type
<input> Any
<output> Any
Queue The draw queue to insert draw commands into. None &GFX.DrawQueue
View The view that is being used to render. None &GFX.View
Contents The list of UI panels to render. None Shard[ Shard ]
Scale The scale of how many UI units per world unit. 1000 Float
Debug Visualize panel outlines and pointer input being sent to panels. false Bool

Creates a context for spatial UI panels to make sure input is correctly handled between them

Details

This shard defines the starting point for creating interactive world space UI elements.

Every instance of Spatial.Panel should be placed within this shards's Contents parameter.

The draw commands for the UI elements are added to the Queue that is passed in. In contrast to the screen space UI shard, they do not need to be rendered using a GFX.UIPass

Note

When rendering the draw commands, the sorting mode should be set to SortMode.Queue so they are drawn in the correct order. The BuiltinFeatureId.Transform feature should be used

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(Setup
 (GFX.DrawQueue) >= .queue

  ; Create render steps
 (GFX.BuiltinFeature :Id BuiltinFeatureId.Transform) >> .features
 {:Features .features :Queue .queue :Sort SortMode.Queue} (GFX.DrawablePass) >> .render-steps

  ; Panel transforms
 15.0 (Math.DegreesToRadians) (Math.AxisAngleY) (Math.Rotation) >= .tmp
 (Float3 -1.0 0.0 0.0) (Math.Translation) (Math.MatMul .tmp) >= .panel-t-0
 -15.0 (Math.DegreesToRadians) (Math.AxisAngleY) (Math.Rotation) >= .tmp
 (Float3 1.0 0.0 0.0) (Math.Translation) (Math.MatMul .tmp) >= .panel-t-1
 5.0 (Math.DegreesToRadians) (Math.AxisAngleX) (Math.Rotation) >= .tmp
 (Float3 0.0 1.2 0.0) (Math.Translation) (Math.MatMul .tmp) >= .panel-t-2

  ; Camera
 {:Position (Float3 1 2 8) :Target (Float3 0 0 0)} (Math.LookAt) >= .view-transform
 (GFX.View :View .view-transform) >= .view)

(GFX.MainWindow
 :Title "World space UI" :Width 1280 :Height 720
 :Contents
 (->
  .queue (GFX.ClearQueue)
  (Spatial.UI
   :Queue .queue :View .view :Scale 100.0 :Contents
   (->
    (Spatial.Panel
     :Transform .panel-t-0 :Size (Float2 100 100) :Contents
     (->
      (UI.CentralPanel
       (->
        "Left panel" (UI.Label)
        (UI.Button :Label "Button")))))
    (Spatial.Panel
     :Transform .panel-t-1 :Size (Float2 100 100) :Contents
     (->
      (UI.CentralPanel
       (->
        "Right panel" (UI.Label)
        (UI.Button :Label "Button")))))
    (Spatial.Panel
     :Transform .panel-t-2 :Size (Float2 300 60) :Contents
     (->
      (UI.CentralPanel
       (->
        "Wide panel" (UI.Label)
        (Setup
         (LoadImage "../../assets/ShardsLogo.png") (GFX.Texture) >= .button-texture)
        (UI.Horizontal (->
                        .button-texture (UI.ImageButton :Scale (Float2 0.01))
                        .button-texture (UI.ImageButton :Scale (Float2 0.01))
                        .button-texture (UI.ImageButton :Scale (Float2 0.01))))))))))

  (GFX.Render :Steps .render-steps :View .view)))

Image

[info] Set - Warning: setting an already exposed variable "tmp", use Update to avoid this warning.
[info] Set - Warning: setting an already exposed variable "tmp", use Update to avoid this warning.