Webgl Custom Inputs

This is just something random I was thinking about. What is the best way to do inputs (buttons, sliders, text input, …) for a WebGL application. Can you just force html inputs to overlay a canvas? Is it better to create custom Javascript objects? I’m thinking it would probably be less work to use html inputs, but as far as speed and the ability to customize the inputs, which is best? Thanks.

I played with both for my Barfight game (http://tubagames.net) - and eventually decided that HTML controls were the best. I’m not sure that they are necessarily the fastest - but the ability to theme them with CSS3 and have standard fonts and such won me over.

I ended up with a much higher quality GUI than I’d otherwise have gone for - and it took only a matter of hours to write.

I would expect you could maybe get better frame rates by rendering them using a texture-mapped font in WebGL…but with hardware HTML rendering & compositing in the latest wave of browsers, I could be wrong about that too.

You can use the CSS style element to set a “z-index” property (which is really a “layer” number rather than true Z value) - that’s how I get my menu to hover over the 3D scene…then I use the DOM to set the “visibility” property to hide or reveal the HTML object as I need it in-game.

As a technique, it’s very compelling. I’m fairly passionate about doing as little as possible in JavaScript (because it’s so slow) - so these kinds of feature of the browser are attractive.

– Steve