HUD over render in webgl


i am interested in creating a HUD in webgl. I know html can be used to overlay over the scene, but having the UI accelerated on the card can have some mighty advantages, mostly integration with the rest of the app, 3D transforms/transparency and shader special effects.

I was wondering if there was a way to dual render a scene and blend/overlay it. For example to render a a first time with a perspective camera, and then render a second HUD layer on top with an orthographic camera and blend it with the first.


Author: Fantashit

1 thought on “HUD over render in webgl

  1. i managed to create the effect i wanted by creating 2 scenes and 2 cameras, one perspective and one ortho. I then render the first scene with the first camera, setting autoclear on the renderer first to clear the surface. Then, i turn off autoclear and render the second hud scene with the second ortho camera, effectively compositing both, the hud over the other.

    now to the experts out there, would this technique of double render be more efficient (performance wise) than using html and letting the browser composite the whole thing in GPU or is there really no gain at all and using html/css over the canvas is just as good? (again the goal is to maximise fps performance)

    many thanks 🙂

Comments are closed.