Hacker News Reader

Comment by hencq | Hacker News Reader

If I understand immediate mode GUIs correctly, you basically redraw the UI every iteration of your (game) loop. How does that work in this case? Do you call these functions in a loop? Does it automatically remove the dom nodes at the end of every loop iteration? That seems quite wasteful, so I doubt that's what happens, but I'm curious to how it actually works.

View on HN

Immediate mode GUIs don't necessarily rerender all the pixels every loop iteration either. The thing that gets "redrawn" every loop iteration is the programmatic representation of what the UI should look like. Eg every iteration you say "draw a button of this size with this text, then draw a dropdown with this size, then if the button was clicked draw this else draw that, ..." . The library then compares what you want against what's already on screen, and renders the difference.

Not sure how they actually work but I can imagine that it's not that bad in OpenGL, DirectX, Vulkan, etc. You can just fill a preallocated buffer with a certain capacity with the right data on the fly and send it to the GPU in one swoop. Should be fine for a couple of thousand of elements, as long as you don't invoke OpenGL commands for each individual elements, but only for the buffer containing all elements.

For html, it's probably much tougher since the DOM is statefull and fares badly with frame-wise changes to it. That might require caching elements to avoid layout invalidation and rebuilding the dom.

It can work much like React does, using dom diffing. You can run to collect virtual dom, diff, and update only what changed.

Reply on news.ycombinator.com