13

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?

Screenshot of Zebra UI toolkit rendering in HTML5 canvas

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

raju-bitter
  • 8,906
  • 4
  • 42
  • 53
  • 3
    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? – gman Aug 12 '15 at 00:11
  • In addition to @gmans comment, html also provides you with perfectly scalable text rendering, simpler layouting and neat effects using [css 3d transforms](http://desandro.github.io/3dtransforms/) and [css filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). The only thing *currently* missing is [css shaders](http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html), not sure what's the status on them. – LJᛃ Aug 12 '15 at 01:41
  • 2
    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](https://lists.webkit.org/pipermail/webkit-dev/2014-January/026098.html). – raju-bitter Aug 12 '15 at 23:23
  • 1
    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 – alexandernst Oct 21 '15 at 19:40
  • @raju-bitter have you got any more traction in this area? – wprater Jun 18 '16 at 17:59
  • 7
    @gman Because DOM is SLOOOOW. – trusktr Mar 15 '17 at 05:24
  • I'd like to add, as a comment because it's not ready, that I'm working on a library at http://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... – trusktr Mar 15 '17 at 05:50
  • @wprater 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. – raju-bitter Mar 16 '17 at 12:17

1 Answers1

9

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.

DreemGL application rendering the full UI in WebGL

raju-bitter
  • 8,906
  • 4
  • 42
  • 53
  • 1
    The software architect of DreemGL is working on a creative coding platform called [Makepad](https://github.com/makepad/makepad.github.io) now. Source code is on Github, here is the link to the [Makepad demo](https://makepad.github.io/makepad.html). 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. – raju-bitter Sep 20 '16 at 06:20
  • 1
    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 – gman Mar 15 '17 at 05:30