Zeichnen von UI-Elementen direkt in den Webgl-Bereich mit drei.js

Question

in drei.js ist es möglich, direkt in den webgl-Bereich (z. B. für ein Head-Up-Display- oder UI-Elemente) die Art und Weise, wie Sie mit einem regulären HTML5-Leinwandelement möglich sind, direkt in den Webgl (für ein Head-Up-Display- oder UI-Elemente) zeichnen können.

Wenn ja, wie können Sie den Kontext erhalten und welche Zeichnungsbefehle zur Verfügung stehen?

Falls nicht, gibt es eine andere Möglichkeit, dies durch andere drei.js oder webgl-spezifische Zeichnungsbefehle zu erreichen, die mit drei.js zusammenarbeiten würden?

Mein Backup-Plan besteht darin, HTML-DIVS als Overlays zu verwenden, aber ich denke, es sollte eine bessere Lösung geben.

danke!

Answer 1

Sie können nicht direkt auf die WebGL-Leinwand ziehen, auf dieselbe Weise mit normaler Leinwand. Es gibt jedoch andere Methoden, z. B.

• Zeichnen Sie zu einem versteckten 2D-Leinwand wie üblich und übertragen Sie das auf WebGL, indem Sie ihn als Textur auf ein Quad verwenden verwenden
• Zeichnen Sie Bilder mit textur zugeordneten Quads (z. B. Frames of Your Health Box)
• Zeichnen von Pfaden (und Formen), indem sie ihre Scheitelpunkte an einen VBO einsetzen und das mit dem entsprechenden Polygontyp zeichnen
• Text zeichnen, indem Sie eine Bitmap-Schriftart (grundsätzlich strukturierte Quads) oder echte Geometrie verwenden (drei.js hat Beispiele und Helfer dafür)

  Verwenden Sie diese, wodurch normalerweise eine orthographische Kamera eingestellt wird.

  Das alles ist jedoch ein bisschen Arbeit und z. Zeichnungstext mit echter Geometrie kann teuer sein. Wenn Sie mit HTML Divs mit CSS-Styling mitnehmen können, sollten Sie sie verwenden, da es sehr schnell eingerichtet ist. Die Zeichnung über die WebGL-Leinwand, möglicherweise mit Transparenz, sollte ein starker Tipp an dem Browser an der GPU sein, der seine DIV-Zeichnung beschleunigt, wenn er nicht bereits alles beschleunigt.

  Denken Sie auch daran, dass Sie mit CSS3 ziemlich viel erreichen können, z. Abgerundete Ecken, Alpha-Transparenz, sogar 3D-Perspektiventransformationen, wie von Antons Link in der Kommentar der Frage gezeigt.

Answer 2

Ich hatte genau das gleiche Problem.Ich habe versucht, ein HUD (Head-Up-Display) ohne Dom zu erstellen, und ich erstellte diese Lösung:

.
1. Ich habe eine separate Szene mit orthographischer Kamera erstellt.
2. Ich habe ein Canvas-Element erstellt und 2D-Zeichnungs-Primitiven verwendet, um meine Grafiken zu rendern.
3. Dann habe ich ein Flugzeug erstellt, das den gesamten Bildschirm anliegt und 2D-Leinwandelement als Textur verwendete.
4. Ich habe diese sekundäre Szene auf der ursprünglichen Szene gerendert

   So sieht der HUD-Code aus wie: generasacodicetagpre.

   und das ist das, was ich zu meiner Render-Schleife hinzugefügt habe: generasacodicetagpre.

   Sie können hier mit dem Vollquellcode spielen: http://codepen.io/jaamo/pen/maogzv

   und lesen Sie mehr über die Implementierung in meinem Blog: http://www.evermade.fi/pure-three-js-hud/