I’ve been making a lot of progress on my game engine, starting to work on some of the overlay user interface as can be seen in the screenshot below. However, I’m not quite sure what’s the best approach for rendering the character portraits. These will be small postage-stamp views near the edge of the screen, and they won’t change often - at least, I don’t think I have the spare CPU cycles to animate them at the same frame rate as the main window. I’m guessing some kind of render-to-canvas strategy would work, but I am curious as to what people would recommend?
How are you rendering the rest of the UI?
Normally I would use a HTML overlay for UI. I have heard some people say overlaying HTML on the canvas is bad for performance but I haven’t found this personally, as long as I avoid expensive CSS rules (shadows on the HTML elements was the main one I noticed).
Alternatives are: sprites positioned at the edge of the screen, or a second scene rendered with an orthographic camera.
1 Like
There are a few examples that use a “picture-in-picture” approach. You basically render you main scene full-screen, then without clearing the color buffer, you render a smaller window in the corner by using renderer.setViewport()
https://threejs.org/examples/?q=lines#webgl_lines_fat
But if you don’t plan on animating the portrait, then a simple <img> tag with position: absolute should do the trick. Like looeee said, it’s not expensive to add UI on top of the canvas via HTML. I do it all the time without any drop in performance.
1 Like
Mostly my overlays are SVGs drawn in Inkscape and optimized with SVGO.
In fact, I’ve built a custom SVG path-warping function that implements the classic “nine-patch” stretching behavior, by adding in a conditional offset to the control points.
I haven’t noticed any slowdowns as a result of the compositing - at least, I know where the major performance bottlenecks are (the multi-biome terrain shader is a big one) and the UI isn’t one of them.
1 Like
When I did notice slowdown it was as a result of stress testing an app and adding hundreds of HTML labels to meshes in the scene. In this extreme case, I did notice slowdown that went away when I removed box shadows from the labels.
But yeah, in general I don’t think it’s a problem.