Zeichnung UI-Elemente direkt auf der WebGL-Bereich mit Three.js
In Three.js ist es möglich, zu zeichnen direkt auf den WebGL-Bereich (für ein heads-up-display-oder UI-Elemente, zum Beispiel) der Möglichkeit, Sie könnte mit einem normalen HTML5-canvas-element?
Wenn ja, wie kann man den Zusammenhang und was das zeichnen-Befehle sind verfügbar?
Wenn nicht, gibt es einen anderen Weg um dies zu erreichen, durch andere Three.js oder WebGL-spezifische Zeichenbefehle, würde die Zusammenarbeit mit Three.js?
Mein backup-plan ist die Verwendung von HTML-divs als overlays, aber ich denke, es sollte eine bessere Lösung sein.
Dank!
Brandon Jones hat eine gute demo hud-Elemente aus divs: media.tojicode.com/webgl-samples/hud-test.html
Auch haben Sie einen Blick auf diesen thread: github.com/mrdoob/three.js/issues/1959
danke Jungs, diese sind wirklich hilfreich
In threeJS für VR-Zweck, es zu tun in HTML-oder 2D-canvas ist nicht möglich. Erstellen Sie eine weitere Szene, wenn Sie wollen eine eigene HUD von Ihrem Haupt-Szene. wenn Sie interessiert sind, schauen Sie bitte hier: github.com/trinketmage/three.js-vr-hud
Auch haben Sie einen Blick auf diesen thread: github.com/mrdoob/three.js/issues/1959
danke Jungs, diese sind wirklich hilfreich
In threeJS für VR-Zweck, es zu tun in HTML-oder 2D-canvas ist nicht möglich. Erstellen Sie eine weitere Szene, wenn Sie wollen eine eigene HUD von Ihrem Haupt-Szene. wenn Sie interessiert sind, schauen Sie bitte hier: github.com/trinketmage/three.js-vr-hud
InformationsquelleAutor Dev | 2012-10-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie nicht zeichnen, direkt an der WebGL-canvas in der gleichen Weise tun Sie mit regelmäßigen Leinwand. Es gibt jedoch auch andere Methoden, z.B.
Verwendung dieser bedeutet in der Regel das einrichten eines eine orthogonale Kamera.
Allerdings ist dies alles durchaus ein bisschen arbeiten und z.B. das zeichnen von text mit der realen geometrie kann teuer werden. Wenn Sie können nicht mit HTML-divs mit CSS-styling, Sie sollten Sie verwenden, da es sehr schnell aufgebaut. Auch die Zeichnung über die WebGL canvas-Bereich, vielleicht mit Hilfe der Transparenz, der sollte einen deutlichen Hinweis an den browser, um GPU-beschleunigte div Zeichnung, wenn es nicht bereits beschleunigt alles.
Denken Sie auch daran, dass Sie erreichen sehr viel mit CSS3, wie z.B. abgerundete Ecken, alpha-Transparenz, auch perspektivische 3d-Transformationen, wie gezeigt, die von Anton link in der Frage ist Kommentar.
hmmmm...... Ich Frage mich, ob dass der gesamte hintergrund von meiner Seite ein leeres webgl canvas zwingen, den browser zu beschleunigen, alles basiert auf Ihrem Kommentar. Für einige Grund, warum ich nicht denke, es wird funktionieren.
InformationsquelleAutor Tapio
Ich hatte genau das gleiche Problem. Ich habe versucht, erstellen Sie ein HUD (Head-up-display) ohne DOM und ich landete diese Lösung:
Das ist, wie der HUD-code sieht wie folgt aus:
Und das ist, was ich Hinzugefügt, um meine render-Schleife:
Können Sie spielen mit dem vollständigen source-code hier:
http://codepen.io/jaamo/pen/MaOGZV
Lesen und mehr über die Umsetzung in meinem blog:
http://www.evermade.fi/pure-three-js-hud/
clearDepth
für den rendererInformationsquelleAutor user3201996