Skip to content

UI.Image

Name Mandatory Description Default Type
⬅️ Input The image to display. ImageGFX.Texture2D
Output ➡️ The output of this shard will be its input. ImageGFX.Texture2D
Scale No Scaling to apply to the source image. @f2(1 1) Float2Var(Float2)
Size No The size to render the image at. none Float2Var(Float2)
ScalingAware No When set to true, this image's pixels will be rendered 1:1 regardless of UI context point size. none BoolVar(Bool)None

Display an image in the UI.

Examples

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
GFX.MainWindow(Contents: {
  ; Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  ; UI
  UI({
    UI.CentralPanel({
      LoadImage("../../assets/ShardsLogo.png") = image
      image | UI.Image(Scale: @f2(0.1 0.1))
    })
  })

  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})


[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[info] textureFree 1
[info] textureFree 2
[info] textureFree 3
[info] textureFree 4
[info] textureFree 5
[info] textureFree 6
[warning] Context has 8 commandBuffers at release (0 released, 0 kept)
[warning] Context has 4 buffers at release (2 released, 4 kept)
[warning] Context has 13 textures at release (1 released, 13 kept)
 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
GFX.MainWindow(Contents: {
  ; Setup
  GFX.DrawQueue = ui-draw-queue
  GFX.UIPass(ui-draw-queue) >> render-steps

  ; UI
  UI({
    UI.CentralPanel({
      ; Setup
      LoadImage("data/ShardsLogo.png") >= image
      GFX.Texture >= texture
      ; Draw UI image by loading the image into graphics memory when needed
      image | UI.Image(Scale: @f2(0.1 0.1))
      ; Draw UI image directly from a texture
      texture | UI.Image(Scale: @f2(0.1 0.1))
    })
  })

  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})


[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[info] textureFree 1
[info] textureFree 2
[info] textureFree 3
[info] textureFree 4
[info] textureFree 5
[info] textureFree 6
[warning] Context has 8 commandBuffers at release (0 released, 0 kept)
[warning] Context has 6 buffers at release (2 released, 6 kept)
[warning] Context has 14 textures at release (2 released, 14 kept)
 

 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
GFX.MainWindow(Contents: {
  Once({
    GFX.DrawQueue = ui-draw-queue
    GFX.UIPass(ui-draw-queue) >> render-steps

    ; Setup image loading with different alpha handling
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: true) | GFX.Texture = premultiplied-alpha-image-1
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: false) | PremultiplyAlpha | GFX.Texture = premultiplied-alpha-image-2
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: true) | DemultiplyAlpha | PremultiplyAlpha | GFX.Texture = premultiplied-alpha-image-3
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: false) | DemultiplyAlpha | PremultiplyAlpha | PremultiplyAlpha | GFX.Texture = premultiplied-alpha-image-4

    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: false) | GFX.Texture = non-premultiplied-alpha-image-1
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: false) | PremultiplyAlpha | DemultiplyAlpha | GFX.Texture = non-premultiplied-alpha-image-2
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: false) | PremultiplyAlpha | DemultiplyAlpha | DemultiplyAlpha | GFX.Texture = non-premultiplied-alpha-image-3
    LoadImage("data/Damaged_Effect_5.png" PremultiplyAlpha: true) | PremultiplyAlpha | DemultiplyAlpha | GFX.Texture = non-premultiplied-alpha-image-4
  })

  ; UI
  UI({
    UI.CentralPanel({
      UI.Horizontal(Contents: {
        UI.Vertical(Contents: {
          premultiplied-alpha-image-1 | UI.Image(Scale: @f2(0.25 0.25))
          premultiplied-alpha-image-2 | UI.Image(Scale: @f2(0.25 0.25))
          premultiplied-alpha-image-3 | UI.Image(Scale: @f2(0.25 0.25))
          premultiplied-alpha-image-4 | UI.Image(Scale: @f2(0.25 0.25))
        })
        UI.Vertical(Contents: {
          non-premultiplied-alpha-image-1 | UI.Image(Scale: @f2(0.25 0.25))
          non-premultiplied-alpha-image-2 | UI.Image(Scale: @f2(0.25 0.25))
          non-premultiplied-alpha-image-3 | UI.Image(Scale: @f2(0.25 0.25))
          non-premultiplied-alpha-image-4 | UI.Image(Scale: @f2(0.25 0.25))
        })
      })
    })
  })

  ; Render
  UI.Render(ui-draw-queue)
  GFX.Render(Steps: render-steps)
})


[warning] Missing downlevel flags: DownlevelFlags(VERTEX_AND_INSTANCE_INDEX_RESPECTS_RESPECTIVE_FIRST_VALUE_IN_INDIRECT_DRAW)
The underlying API or device in use does not support enough features to be a fully compliant implementation of WebGPU. A subset of the features can still be used. If you are running this program on native and not in a browser and wish to limit the features you use to the supported subset, call Adapter::downlevel_properties or Device::downlevel_properties to get a listing of the features the current platform supports.
[warning] DownlevelCapabilities {
    flags: DownlevelFlags(
        COMPUTE_SHADERS | FRAGMENT_WRITABLE_STORAGE | INDIRECT_EXECUTION | BASE_VERTEX | READ_ONLY_DEPTH_STENCIL | NON_POWER_OF_TWO_MIPMAPPED_TEXTURES | CUBE_ARRAY_TEXTURES | COMPARISON_SAMPLERS | INDEPENDENT_BLEND | VERTEX_STORAGE | ANISOTROPIC_FILTERING | FRAGMENT_STORAGE | MULTISAMPLED_SHADING | DEPTH_TEXTURE_AND_BUFFER_COPIES | WEBGPU_TEXTURE_FORMAT_SUPPORT | BUFFER_BINDINGS_NOT_16_BYTE_ALIGNED | UNRESTRICTED_INDEX_BUFFER | FULL_DRAW_INDEX_UINT32 | DEPTH_BIAS_CLAMP | VIEW_FORMATS | UNRESTRICTED_EXTERNAL_TEXTURE_COPIES | SURFACE_VIEW_FORMATS | NONBLOCKING_QUERY_RESOLVE,
    ),
    limits: DownlevelLimits,
    shader_model: Sm5,
}
[warning] Context has 30 commandBuffers at release (0 released, 0 kept)
[warning] Context has 18 buffers at release (2 released, 18 kept)
[warning] Context has 13 textures at release (1 released, 13 kept)