How to draw UIs on top of the image

Web vtk.js
1

I want to build flexable UIs just like in webgl games that the UIs looks like they are related to the screen rather than the actual 3D objects in the 3D space, and the UIs looks and feels like 2D, as they are just texts, graphics, image icons, etc., while keeping the image rendered which feels like it is “behind” the UIs.

The current widget solutions use SVG to do that but that is not what I want because eventually I would want to be able to save the whole scene that includes the canvas and the UIs as ImageData for post processing, using SVG introduces complexity for ImageData generation. So I would like to use the current webgl context to draw the UIs alone with the image in the same 3D space.

Is it possible? And where should I start?

2

Not sure this is a VTK question but you may want to check out ImGui. GitHub - ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies

3

Thanks for the quick response, I thought I forgot to add tag, but indeed I’m asking on ‘vtkjs’.

And I would like to clarify a bit more that I want to draw the UIs right in the canvas vtkjs creates, not some other standalone solutions.

1 Like
4

Try the JS library lil-gui https://lil-gui.georgealways.com/

It was easy for me to integrate it using JavaScript in vtk-wasm-demos.

image
image1728×1347 108 KB

2 Likes
5

Yes I know this type of solutions, and I have managed to implement this in projects, with vtkjs of course, but it is just totally different than what I was looking for.

I want to render the UIs inside the geometry of the rendered images/objects, I just don’t know where should I start with, I did not see any examples in vtkjs for text rendering, or simple graphics rendering, in the 3D spaces vtkjs creates. Or maybe I just did not find them.

6

if you want it to use gl context, for text, there is a vtkTextActor. For sliders, there is vtkSliderWidget. I don’t think vtk.js has those equivalent classes.