Playcanvas + Dear ImGui

I am trying to integrate Dear ImGui to my next project. To be more specific, I am trying to integrate it’s Javascript binding, which generates the binding using Emscripten from the C sources and then converts all the functions to Typescript equivalents. Its a close match, only some parts are not converted, which still produce great results.

Basically, the library can be built from sources, which produces 2 files in order to run their examples: imgui.umd.js and imgui_impl.umd.js. The first one is the main lib, while the second one is a helper to set up the canvas, webgl context, inputs, etc. The imgui_impl is very useful for a general use cases, when you are working with the canvas directly, like if you use Three.js, for example.

However, it is not needed in my case, snce all the gl backend setup is handled by Playcanvas. In fact, the way imgui_impl is imeplemented, it draws itself in the canvas frame buffer before Playcanvas, and then leaves the context configured in a way that prevents PC to render its own stuff. Anyhow, as mentioned, it is not needed, since we can use imgui.umd directly and feed its data to the index and vertex buffers created in PC. However, I am not yet too familiar with pc.graphicsDevice to manage buffers.

Here is my attempt so far. I’ve made a small project, with a single cube. I am trying to draw a simple window, using imgui. The setup is correct, and I was able to initialize the window, but I am stuck at actually drawing it. The imgui feeds me with the draw data for each frame:

I expect now I would need to create Playcanvas index and vertex buffers and set them to the data, provided by imgui. What would be the correct way of setting the buffers and rendering to UI layer?


There’s some examples of using the new mesh generation code in PlayCanvas from @mvaligursky that could help:

Check the code here for adding mesh instances to layers;

1 Like

we also have Spine integration here:
which is in a way similar. Spine provides us with a list of indices / vertices / material properties and we copy that to Index/VertexBuffer, create material and render it each frame. See Render/SubmitBatch functions in that file. Code is not simple, as it tries to optimize creation of buffers and re-uses few things as possible, but it’s a good example of what you might need to do. Note that this integration is using Vertex/Index buffers directly instead of using MeshAPI for more advanced behavior - to use a single VB and a single VB and use it for multiple meshes.


Project page

Thank you @mvaligursky and @yaustar for the links. They are very helpful! Here is my current result. This is still work in progress as I managed to make it run with raw gl calls at least. I also tried to follow the Spine project, and created the index and vertex buffers. However, I don’t need to iterate over the elements, since I can simply swap the buffer from Imgui. I see the mesh instances correctly get attached to layer, but still no draw on screen. I think I am missing some last step, probably with the active texture. Need to dig some more.

Nevertheless, this version can be used now, although it is not drawn to a layer, but simply blended with the app.

How to use:
It has a folder imgui with 2 files: the imgui lib and the playcanvas implementation. Simply drop imgui folder to your project and wait for imgui:ready event. There is also a small example, that shows it.


That’s amazing @LeXXik, many thanks for sharing.

The example.js script seems easy enough to work with, this opens up a lot of possibilities for complex in game UIs.

1 Like

Hi i have same problem how you get it work? I don’t know what i need do, you can give working example?

Ok i found this project (PlayCanvas | HTML5 Game Engine) thank you!

It works but i can’t interact with gui using mouse
UPD: I fix it but gui is… blurry? low quality?

Hi @Amkar,

Is it only the UI blurry or the whole scene canvas?

If it’s the latter try enabling device pixel ratio in your project settings.

Only UI

And i know this problem it exist in ImGui.NET and related to renderer

And i forgot mention, i replace _device.width and _device.height in imgui_playcanvas.js

If i remove it this happening:

If i move window left this strange X offset decreases, if right increases, if up Y offset decreases, if down increases

@LeXXik any idea? Maybe somewhere the window pixel ratio isn’t taken into consideration?

I don’t have any ideas how to fix it

The project looks fine on my browser:

It works normal in this project but blurry when i using it in my project