Three.js: HUD über 3D-Szene erstellen (WebGLRenderer)?

Verwenden Sie HTML

+1 für HTML. Sie entwickeln für eine Plattform, die für die Benutzeroberfläche entwickelt wurde. nutze es. :) :)

Eigentlich verstehe ich nicht, warum Sie kein HTML verwenden sollten! +1

Ja, wenn es nicht in die 3D-Szene integriert werden muss, würde ich HTML über der Leinwand verwenden.

Vielen Dank.
mrdoob, ja ich möchte mich in die 3d szene integrieren. Ich möchte WebGL für einige 2D-Grafiken verwenden. Aber ich habe kein funktionierendes Beispiel dafür mit THREE.js gesehen.

Wenn Sie "In die 3D-Szene integrieren" sagen, meinen Sie damit, dass Sie die Benutzeroberfläche nicht als Overlay über der 3D-Szene haben möchten, oder?

Loupax, ich habe den Titel ein wenig geändert :) Ich meine oben, aber mit WebGL gerendert. Ich meine so etwas:

http://www.smokycogs.com/blog/o3d-tutorial-4-the-beginnings-of-a-hud/
http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/o3d-webgl-samples/hud-2d-overlay.html?spec=svn218&r=218

Ich würde einfach HTML für die GUI verwenden, also einfach <div> usw. über dem <canvas> -Element ...

Wenn Sie möchten, dass die GUI mit Three.js über Ihrer eigentlichen Szene gerendert wird, würde ich zwei Canvas-Elemente übereinander verwenden, eines für das Spiel / die Szene / was auch immer und das oberste für die GUI. Sie müssten sicherstellen, dass das oberste zwischen den GUI-Elementen transparent ist, aber ich weiß nicht, ob dies mit Three.js möglich ist ...

Ja, in den meisten Fällen ist HTML der richtige Weg, es ist viel einfacher.

Wenn Sie Lust haben und Ihr HUD von WebGL rendern lassen möchten (z. B. für animiertes 3D oder einige Shader-Effekte), können Sie Folgendes tun:

http://mrdoob.github.com/three.js/examples/webgl_rtt.html

(Es gibt wahrscheinlich eine Möglichkeit, dies zu tun, ohne dass FBO nur mit Tiefenschreiben / Lesen / Maskieren spielt, zumindest für 2D-Überlagerungen.)

veränderteq, danke für diesen Link. Ich habe momentan keinen Weg mit "Spielen" gefunden. Aber ich analysiere den Code auf WebGLRenderer und habe herausgefunden, dass ich so etwas verwenden kann:

var sprite = new THREE.Sprite ({map: tex, useScreenCoordinates: true});
scene.addChild (Sprite);

Das funktioniert.

Aber ich interessiere mich immer noch für den Weg mit Dual-Rendering und Blending.

Ich habe an einem WebVR-Projekt gearbeitet und eine DOM-Lösung war keine Option. Am Ende habe ich das HUD mit reinem Three.js gemacht. Ich habe eine separate Szene erstellt und diese über meiner ursprünglichen Szene gerendert.

Sie können das Live-Beispiel hier sehen:
http://codepen.io/jaamo/pen/MaOGZV

Und Blogpost über die Lösung hier:
http://www.evermade.fi/pure-three-js-hud/

Ich arbeite gerade an einem HUD-Tool für webVR.
Es basiert auf den StereoEffect.js, die Sie in den Beispielen von three.js finden.
Es werden die beiden Teile der ersten Szene und dann die beiden Teile der HUD-Szene beim Overlay mit StereoEffectCamera gerendert, die PerspectiveCamera sind.

Es gibt eine Demo mit einem Fadenkreuz und Interaktion mit einigen Elementen in der Szene.
https://github.com/trinketmage/three.js-vr-hud/

Ich arbeite derzeit an einem "Label" -Feature im Kegelstumpf der HUD-Szene. Ich würde mich über Tipps oder Hilfe freuen.
Vielen Dank

Wenn noch jemand nach einer Möglichkeit sucht, eine Ortho-Szene über einer perspektivischen Szene zu rendern (damit Sie Objekte an den oberen / linken / rechten / unteren Rändern ausrichten oder Größen in Pixel haben können), hatte ich dort ein Beispiel .

@cecilemuller - Ihr Projekt erlaubt mir nicht, Probleme zu öffnen, deshalb kommentiere ich hier. Funktioniert es? http://jsbin.com/sisutopede/edit?html , js, Ausgabe (Ich habe let const durch var ) Ich kann nur eine blaue Kugel sehen, ich scheine keine zu sehen UI-Elemente?

@trinketmage - Vielen Dank, dass Sie eine fantastische Demo / ein fantastisches Plugin erstellt und sich Zeit genommen haben, um Problem 1 zu erklären. Im Moment versuche ich, Problem 2 herauszufinden: https://github.com/trinketmage/three.js-vr-hud/issues/ 2 - es funktioniert einwandfrei, wenn ich die Tastatur benutze, sobald ich mein mobiles Gerät / Chrome Dev Tools benutze und die Ausrichtung simuliere, springt es ...

• Video: https://www.youtube.com/watch?v=fO_yJ1bcSCM (23s)
• live: https://stefek99.github.io/three.js-vr-hud/example/

Auf einer Nebenbemerkung - genug von Kopieren und Einfügen - sollte ich irgendwann in der Lage sein, meinen eigenen Code zu schreiben, wenn ich alle Kenntnisse in diesem Thread habe ...

@ stefek99 Es sollte farbige Rechtecke über der blauen Kugel

Obwohl ja, es gibt einige es6-Funktionen im Code, so dass Sie die Babel REPL verwenden können , um in es5 zu konvertieren, wenn es nicht ausgeführt wird.

Es ist 2020. Was ist der beste Weg, um ein 2D-HUD-Overlay in ThreeJS zu erstellen, ohne hybride oder seltsame Methoden zu verwenden? Ideal, um Zugriff auf etwas wie PixiJS in ThreeJS zu haben?

@sylwesterdigital Sie können das three.js- Forum verwenden, wenn Sie Hilfe benötigen.

Ja ... Ich war dort und mein Konto ist gesperrt, daher kann ich keine Kommentare abgeben, antworten oder neue Themen erstellen. Geht die ThreeJS-Community nirgendwo hin und jeder codiert f * Reagiert auf eine monatliche Zahlung?

Nach Jahren des Herumalberns denke ich, dass es in WebGL keine absoluten Möglichkeiten gibt, Hud zu machen. Es hängt völlig vom Projekt ab, aber meine Gedanken sind:

• Wenn Sie keine spezifischen Effekte für HUD benötigen, entscheiden Sie sich für HTML, es fallen "Compositing-Kosten" an, aber solange Sie nicht zu viel Overlay haben (wenn ich 4-fache / 5-fache Bildschirmüberlagerungen verwende, wird es verzögert auf Chrome mit Mac Book Pro Retina (Mitte 2015), Beispiel eines HUD in HTML: Demo Waysmaze .
• Wenn Sie es aus irgendeinem Grund brauchen, um in der Gl zu sein, würde ich es direkt einer Gruppe zuordnen, dass jedes Bild vor der Kamera platziert wird, die über alles gerendert wird. Berechnen Sie die Ausdehnung der Gruppe von der Kamera in einem bestimmten z-Abstand bei Größenänderung, um das Objekt oben / rechts / unten / links zu platzieren. Diese Möglichkeiten bieten Flexibilität, um die Perspektive zu nutzen (wenn Sie 3D-Elemente in HUD benötigen) oder nicht, und ich denke, es sollten die niedrigsten Kosten für die Leistung sein (bitte korrigieren Sie mich, wenn ich falsch liege).
• Der "logischere" Weg @sylwesterdigital wäre meiner Meinung nach, ein zweites Rendering (ob orthografisch oder perspektivisch) über der Szene als Textur innerhalb derselben Szene durchzuführen. Der große Nachteil ist jedoch, dass dies weniger leistungsmäßig ist, da ein zweiter Renderer die Bildschirmgröße multipliziert mit dem Pixelverhältnis verursacht. Wenn der HUD-Renderer kleiner ist, verlieren Sie an Qualität.
• Pixi.js über Three.js ist eine schlechte Lösung @sylwesterdigital , weil ich denke, Sie hätten 2 WebGL-Instanzen und ich denke, es ist schwer?
• Gute alte Leinwand über drei.js sollte auch funktionieren, einer meiner erstaunlichen Kollegen @namide hat mir eine große Entwicklerstunde CanvasRenderer die übliche Art, mit HUD

Zusammenfassend sollten die visuellen Komponenten des HUD meiner Meinung nach davon abhängen, welche Leistungskosten Sie sich leisten können.