2015-08-11 11 views
6

Gibt es derzeit ein vollständiges Widget-Toolkit bietet Komponenten Rendering nur in WebGL? Ähnlich wie die ZebraUI project, die eine vollständige UI-Komponente in HTML5-Canvas darstellt?Full UI-Widget Toolkit-Rendering in WebGL

Screenshot of Zebra UI toolkit rendering in HTML5 canvas

Die Idee ist reine JavaScript, um zu schreiben und noch zu Shadern der Lage sein, die Komponenten zu machen.

+3

Warum? Sie haben den gesamten Browser, um Ihre UI zu machen. Es unterstützt alle Unicode, alle IMEs für andere Sprachen, von rechts nach links Sprachen, und es lesbar durch verschiedene Behinderungen Erweiterungen. Es ist auch vollständig von Designern gestaltbar. Welchen möglichen Grund möchten Sie, dass die WebGL-Benutzeroberfläche das nicht tut? – gman

+0

Zusätzlich zu @gmans Kommentar bietet Ihnen html auch perfekt skalierbares Text-Rendering, einfacheres Layout und saubere Effekte mit [css 3d transforms] (http://desandro.github.io/3dtransforms/) und [css filters] (https : //developer.mozilla.org/en-US/docs/Web/CSS/filter). Das einzige, was * derzeit * fehlt, ist [CSS-Shader] (http://www.adobe.com/devnet/archive/html5/articles/css-shaders.html), nicht sicher, welchen Status sie haben. –

+0

Wo es sinnvoll ist, die Benutzeroberfläche in WebGL vollständig zu erstellen: Rendern hochinteraktiver UIs bei 4k mit 60fps auf eingebetteten Plattformen (z. B. ARM-basierte Boards, die auf Fernsehgeräten laufen usw.); mit der Option, irgendwann einmal in 3D zu arbeiten. Benutzerdefinierte CSS-Filter (auch bekannt als CSS-Shader) wurden [aus der Webkit-Codebasis entfernt] (https://lists.webkit.org/pipermail/webkit-dev/2014-January/026098.html). –

Antwort

5

Es gibt ein neues Open-Source-Projekt, das die vollständige Darstellung aller Widgets mit WebGL unterstützt: Die DreemGL toolkit. Hier ist ein Screenshot einer DreemGL-Anwendung. Alle UI-Elemente werden mit WebGL gerendert (einschließlich Schriftarten). Es ist immer noch Alpha oder Beta Qualität.

DreemGL application rendering the full UI in WebGL

+0

Der Softwarearchitekt von DreemGL ​​arbeitet jetzt an einer kreativen Kodierungsplattform namens [Makepad] (https://github.com/makepad/makepad.github.io). Der Quellcode ist auf Github, hier ist der Link zur [Makepad Demo] (https://makepad.github.io/makepad.html). Wie bei DreemGL ​​wird die vollständige Benutzeroberfläche (einschließlich der Textelemente) vollständig in WebGL gerendert. Es ist immer noch Alpha-Qualität-Software, aber irgendwann könnte verwendet werden, um Prototypen mit 60fps auf Smartphones wie iPhone 6 oder späteren Modellen sowie Galaxy S6 & Note 5 oder späteren Modellen zu erstellen. –

+0

Und oben wurde darauf hingewiesen, dass es überhaupt keine nicht-römischen Sprachen unterstützt. Kein Japanisch, kein Chinesisch, kein Koreanisch, keine andere IME-Unterstützung. Es ist auch SLOOOOW. Ich habe versucht, im Texteditor nach unten zu scrollen, und es scrollt mit etwa 15-20 fps, während diese Seite hier auf Stackoverflow mit 60 fps scrollt – gman