Three.js: ¿Creando HUD sobre escena 3d (WebGLRenderer)?

Usar HTML

+1 para HTML. Estás desarrollando para una plataforma _ diseñada_ para UI; hacer uso de ella. :)

En realidad, no veo por qué NO DEBE usar HTML. +1

Sí, a menos que sea necesario integrarlo en la escena 3D, iría con HTML en la parte superior del lienzo.

Gracias.
mrdoob, sí, quiero integrarme en la escena 3d. Quiero usar WebGL para algunos gráficos 2d. Pero no vi una muestra funcional para hacer esto con THREE.js.

Cuando dices "integrar en la escena 3D", quieres decir que no quieres que la interfaz de usuario se superponga a la 3D, ¿verdad?

Loupax, he cambiado un poco el título :) Quiero decir en la parte superior pero con WebGL renderizado. me refiero a algo como eso:

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

Simplemente usaría HTML para la GUI, así que simplemente <div>, etc.en la parte superior del elemento <canvas> ...

Si desea que la GUI se renderice con Three.js encima de su escena real, usaría dos elementos de lienzo uno encima del otro, uno para el juego / escena / lo que sea, y el superior para la interfaz gráfica de usuario. Debería asegurarse de que el superior sea transparente entre los elementos de la GUI, pero no sé si eso es posible con Three.js ...

Sí, en la mayoría de los casos, HTML es el camino a seguir, es mucho más simple.

Si desea ser elegante y hacer que WebGL renderice su HUD (por ejemplo, para 3D animado o algunos efectos de sombreado), puede hacer algo como esto:

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

(probablemente haya alguna manera de hacerlo sin FBO simplemente jugando con escritura / lectura / enmascaramiento en profundidad, al menos para superposiciones 2d)

alteredq, gracias por este enlace. Actualmente no he encontrado una forma de "jugar". Pero analicé el código en WebGLRenderer y descubrí que puedo usar algo así:

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

Esto funciona.

Pero todavía estoy interesado en el camino con la representación dual y la combinación de esto.

Estaba trabajando en un proyecto WebVR y la solución DOM no era una opción. Terminé haciendo el HUD con Three.js puro. Creé una escena separada y la rendericé sobre mi escena original.

Puedes ver el ejemplo en vivo aquí:
http://codepen.io/jaamo/pen/MaOGZV

Y una publicación de blog sobre la solución aquí:
http://www.evermade.fi/pure-three-js-hud/

De hecho, estoy trabajando en una herramienta HUD para webVR.
Se basa en StereoEffect.js que puede encontrar en los ejemplos de three.js.
Representa las dos partes de la primera escena, luego las dos partes de la escena del HUD superpuestas, todas con StereoEffectCamera que son PerspectiveCamera.

Hay una demostración con una mira e interacción con algunos elementos de la escena.
https://github.com/trinketmage/three.js-vr-hud/

Actualmente estoy trabajando en una función de "etiqueta" dentro del frustum de la escena de HUD, agradecería cualquier consejo o ayuda.
Gracias

Si alguien todavía está buscando cómo renderizar una escena Ortho en la parte superior de una perspectiva (para que pueda alinear los objetos con los bordes superior / izquierdo / derecho / inferior o tener tamaños en píxeles), tengo un ejemplo allí .

@cecilemuller : su proyecto no me permite abrir problemas, así que estoy comentando aquí. ¿Funciona? http://jsbin.com/sisutopede/edit?html , js, salida (reemplacé let const con var ) Solo puedo ver una esfera azul, no parece que vea ninguna Elementos de la interfaz de usuario?

@trinketmage : gracias por crear una demostración / complemento fantástico y tomarse el tiempo para explicar el problema 1 , ahora mismo estoy tratando de resolver el problema 2 : https://github.com/trinketmage/three.js-vr-hud/issues/ 2 : funciona perfectamente cuando uso el teclado, en el momento en que comienzo a usar mi dispositivo móvil / Chrome Dev Tools y simulo la orientación, está saltando ...

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

En una nota al margen, suficiente de copiar y pegar, en algún momento debería poder escribir mi propio código dado todo el conocimiento en este hilo ...

@ stefek99 Debería mostrar rectángulos de colores encima de la esfera azul; acabo de probar jsbin en chrome y firefox, aquí hay una captura de pantalla:

Aunque sí, hay algunas características de es6 en el código, por lo que puede usar Babel REPL para convertir a es5 si no se está ejecutando.

Es 2020, ¿cuál es la mejor manera de crear una superposición de HUD 2D dentro de ThreeJS sin usar métodos híbridos o extraños? ¿Lo ideal sería tener acceso a algo como PixiJS dentro de ThreeJS?

@sylwesterdigital Puedes usar el foro three.js si necesitas ayuda.

Sí ... He estado allí y mi cuenta está en espera, por lo que no puedo comentar, responder o crear nuevos temas. ¿La comunidad de ThreeJS no va a ninguna parte y todos están codificando f * React para tener un pago mensual?

Después de años de mugir, supongo que no hay formas absolutas de hacer hud en WebGL, depende totalmente del proyecto, pero mi pensamiento es:

• Si no necesita efectos específicos en HUD, opte por HTML, hay un "costo de composición", pero siempre que no tenga demasiada superposición (si uso 4 veces / 5 veces el tamaño de las superposiciones de pantalla, se vuelve lento en Chrome con Mac Book Pro Retina a mediados de 2015), ejemplo de un HUD en html: demo waymaze .
• si necesita que esté en el gl por cualquier motivo, lo pondría directamente en un Grupo que cada fotograma se colocaría frente a la cámara renderizada encima de todo; Calcule la extensión del grupo desde la cámara a una distancia z específica al cambiar el tamaño para colocar el elemento en la parte superior / derecha / inferior / izquierda; Esta forma da flexibilidad para hacer uso de la perspectiva (si necesita elementos 3D en HUD) o no y supongo que debería ser el costo más bajo para el rendimiento (corríjame si me equivoco).
• La forma más "lógica" de @sylwesterdigital , en mi opinión, sería hacer un segundo render (ya sea ortográfico o en perspectiva) encima de la escena como una textura dentro de la misma escena; Pero la gran desventaja es que es la forma menos inteligente en cuanto al rendimiento, ya que causa un segundo renderizador del tamaño de la pantalla multiplicado por la proporción de píxeles, o, si el renderizador HUD es más pequeño, se pierde calidad.
• Pixi.js encima de Three.js es una mala solución @sylwesterdigital , porque supongo que tendrías 2 instancias de WebGL y supongo que es pesado.
• El buen lienzo antiguo encima de three.js también debería funcionar, uno de mis increíbles compañeros de trabajo @namide me enseñó una gran lección de desarrollador: "¿cómo lo optimizarían para videojuegos?", En Unity, las formas comunes de manejar HUD es CanvasRenderer en encima de todo.

Entonces, en conclusión, en mi opinión, los componentes visuales de HUD deberían depender del costo de desempeño que pueda pagar.