Full UI widget toolkit rendering in WebGL

Question

Is there currently any full widget toolkit providing components rendering in WebGL only? Similar to the ZebraUI project, which renders a full UI component set in HTML5 canvas?

The idea is to write pure JavaScript, and still be able to shaders to render the components.

Displume

Why? you've got the entire browser to make your UI. It supports all of unicode, all IMEs for other languages, right to left languages, and it readable by various disability extensions. It's also fully styleable by designers. What possible reason would you want WebGL UI that's going to do none of that? – Bahamas

In addition to @gmans comment, html also provides you with perfectly scalable text rendering, simpler layouting and neat effects using css 3d transforms and css filters. The only thing currently missing is css shaders, not sure what's the status on them. – Thickleaf

Where it makes sense to fully build the UI in WebGL: Rendering highly interactive UIs at 4k with 60fps on embedded platforms (e.g. ARM based boards running in TVs, etc.); with the option to go fully 3D at some point in the future. CSS Custom Filters (aka CSS shaders) have been removed from the Webkit code base. – Displume

Also, I suspect a custom-made list widget holding 10k items and rendering only what is needed will behave a lot better than a div with overflow: auto; height: 200px; and 10k elements inside it – Schlesien

@Displume have you got any more traction in this area? – Invariable

@Bahamas Because DOM is SLOOOOW. – Pengelly

I'd like to add, as a comment because it's not ready, that I'm working on a library at github.com/trusktr/infamous with plans to add WebGL soon. It's primary focus (at least at first) is as a UI library. When WebGL is added, it will allow mixing of WebGL content with DOM, and soon after that I'd like to make pure-webgl UI components. I'll come back and post as an answer once I have a WebGL demo... – Pengelly

@Invariable Sorry, someone missed your comment. Not really, the company behind DreemGL stopped the development effort. Personally I'd say that a larger effort supported by a strong community is the way to go. There is a lot of functionality you have to implement to mach the OS features used by the browser. Infamous mentioned in the above comment could be interesting. – Displume

Answer 1

There is a new open source project which supports complete rendering of all widgets using WebGL: The DreemGL toolkit. Here is a screenshot of a DreemGL application. All UI elements are rendered using WebGL (including fonts). It's still alpha or beta quality.

Displume

The software architect of DreemGL is working on a creative coding platform called Makepad now. Source code is on Github, here is the link to the Makepad demo. Like DreemGL, the full UI (including text elements) is fully rendered in WebGL. It's still Alpha quality software, but at some point could be used to create prototypes rendering at 60fps on smartphones like iPhone 6 or later models, as well as Galaxy S6 & Note 5 or later models. – Displume

And has pointed out above it completely fails at supporting any non-roman languages. No Japanese, no Chinese, no Korean, no other IME support whatsoever. It's also SLOOOOW. I tried scrolling down in the text editor and it's scrolling at about 15-20fps where as this page here on Stackoverflow scrolls at 60fps – Bahamas