Three.js: Créer un HUD sur une scène 3D (WebGLRenderer)?

Utilisez HTML

+1 pour HTML. Vous développez pour une plate-forme _designed_ pour l'interface utilisateur; faites-en usage. :)

En fait, je ne vois pas pourquoi vous NE DEVRIEZ PAS utiliser HTML! +1

Oui, à moins qu'il ne soit nécessaire de l'intégrer dans la scène 3D, j'irais avec HTML sur la toile.

Merci.
mrdoob, oui je veux intégrer dans la scène 3d. Je souhaite utiliser WebGL pour certains graphiques 2D. Mais je n'ai pas vu d'exemple fonctionnel pour faire cela avec THREE.js.

Quand vous dites "intégrer dans la scène 3D", vous voulez dire que vous ne voulez pas que l'interface utilisateur soit superposée à la 3D, n'est-ce pas?

Loupax, j'ai un peu changé le titre :) Je veux dire par dessus mais avec WebGL rendu. je veux dire quelque chose comme ça:

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

J'utiliserais simplement du HTML pour l'interface graphique, donc simplement le etc de <div> au-dessus de l'élément <canvas> ...

Si vous voulez que l'interface graphique soit rendue avec Three.js au-dessus de votre scène réelle, j'utiliserais deux éléments de canevas l'un sur l'autre, l'un pour le jeu / la scène / quoi que ce soit, et le premier pour l'interface graphique. Vous devrez vous assurer que celui du haut est transparent entre les éléments de l'interface graphique, mais je ne sais pas si cela est possible avec Three.js ...

Oui, dans la plupart des cas, le HTML est la voie à suivre, c'est beaucoup plus simple.

Si vous voulez avoir de la fantaisie et avoir votre HUD rendu par WebGL (par exemple pour la 3D animée ou certains effets de shader), vous pouvez faire quelque chose comme ceci:

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

(il y a probablement un moyen de le faire sans FBO juste en jouant avec l'écriture / lecture / masquage en profondeur, au moins pour les superpositions 2D)

alteredq, merci pour ce lien. Je n'ai actuellement pas trouvé de moyen de "jouer". Mais j'analyse le code sur WebGLRenderer et j'ai découvert que je peux utiliser quelque chose comme ça:

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

Cela marche.

Mais je suis toujours intéressé par la manière avec le double rendu et le mélange.

Je travaillais sur un projet WebVR et la solution DOM n'était pas une option. J'ai fini par faire le HUD avec Three.js pur. J'ai créé une scène séparée et l'ai rendue en plus de ma scène originale.

Vous pouvez voir l'exemple en direct ici:
http://codepen.io/jaamo/pen/MaOGZV

Et un article de blog sur la solution ici:
http://www.evermade.fi/pure-three-js-hud/

Je travaille actuellement sur un outil HUD pour webVR.
Il est basé sur le StereoEffect.js que vous pouvez trouver dans les exemples three.js.
Il rend les deux parties de la première scène, puis les deux parties de la scène HUD en superposition, le tout avec StereoEffectCamera qui sont PerspectiveCamera.

Il y a une démo avec un réticule et une interaction avec certains éléments de la scène.
https://github.com/trinketmage/three.js-vr-hud/

Je travaille actuellement sur une fonctionnalité "étiquette" dans le tronc de la scène HUD, j'apprécierais des conseils ou de l'aide.
Merci

Si quelqu'un cherche toujours comment rendre une scène Ortho au-dessus d'une scène en perspective (afin que vous puissiez aligner des objets sur les bordures haut / gauche / droite / bas ou avoir des tailles en pixels), j'avais un exemple là-bas .

@cecilemuller - votre projet ne me permet pas d'ouvrir des problèmes donc je commente ici. Est-ce que ça marche? http://jsbin.com/sisutopede/edit?html , js, sortie (j'ai remplacé let const par var ) Je ne vois qu'une sphère bleue, je ne semble pas en voir Éléments de l'interface utilisateur?

@trinketmage - merci d'avoir créé une démo / plugin fantastique et d'avoir pris le temps d'expliquer le problème 1 , en ce moment j'essaye de comprendre le problème 2 : https://github.com/trinketmage/three.js-vr-hud/issues/ 2 - cela fonctionne parfaitement lorsque j'utilise le clavier, au moment où je commence à utiliser mon appareil mobile / Chrome Dev Tools et que je simule l'orientation, il saute ...

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

Sur une note - assez de copier-coller - à un moment donné, je devrais être capable d'écrire mon propre code étant donné toutes les connaissances de ce fil ...

@ stefek99 Il devrait montrer des rectangles colorés au-dessus de la sphère bleue; viens d'essayer le jsbin dans chrome et firefox, voici une capture d'écran:

Bien que oui, il y a quelques fonctionnalités es6 dans le code, vous pouvez donc utiliser Babel REPL pour convertir en es5 s'il ne fonctionne pas.

Nous sommes en 2020, quelle est la meilleure façon de créer une superposition HUD 2D dans ThreeJS sans utiliser de méthodes hybrides ou étranges? Idéalement pour avoir accès à quelque chose comme PixiJS dans ThreeJS?

@sylwesterdigital Vous pouvez utiliser le forum three.js si vous avez besoin d'aide.

Oui ... J'y suis allé et mon compte est en attente, je ne peux donc pas commenter, répondre ou créer de nouveaux sujets. La communauté ThreeJS ne va-t-elle nulle part et tout le monde code f * React pour avoir un paiement mensuel?

Après des années à se débattre, je suppose qu'il n'y a pas de moyen absolu de faire du hud dans WebGL, cela dépend totalement du projet, mais ma pensée est:

• Si vous n'avez pas besoin d'effets spécifiques sur le HUD, optez pour le HTML, il y a un "coût de composition" mais tant que vous n'avez pas trop de superposition (si j'utilise 4 fois / 5 fois des tailles de superpositions d'écran, cela devient lent sur Chrome avec Mac Book Pro Retina mi 2015), exemple de HUD en html: demo waysmaze .
• si vous avez besoin qu'il soit dans le gl pour une raison quelconque, je le mettrais directement dans un groupe pour que chaque image soit placée devant la caméra rendue au-dessus de tout; Calculez l'étendue du groupe à partir de la caméra à une distance z spécifique lors du redimensionnement pour placer l'élément en haut / à droite / en bas / à gauche; Cela donne la flexibilité d'utiliser la perspective (si vous avez besoin d'éléments 3D dans le HUD) ou non et je suppose que cela devrait être le coût le plus bas pour les performances (veuillez me corriger si je me trompe).
• La manière la plus "logique" de @sylwesterdigital , à mon avis, serait de faire un deuxième rendu (orthographique ou perspective) au-dessus de la scène comme texture à l'intérieur de la même scène; Mais l'énorme inconvénient est que c'est la manière la moins performante de provoquer un deuxième moteur de rendu de la taille de l'écran multipliée par le rapport de pixels, ou, si le rendu HUD est plus petit, vous perdez de la qualité.
• Pixi.js au-dessus de Three.js est une mauvaise solution @sylwesterdigital , car je suppose que vous auriez 2 instances WebGL et je suppose que c'est lourd?
• Bonne vieille toile au - dessus de Three.js devrait fonctionner aussi, un de mes collègues m'a incroyable @namide enseigné une grande leçon de développeur: « comment ils l' optimiser pour jeux vidéos », dans l' unité, des moyens communs pour gérer HUD est de CanvasRenderer sur en haut de tout.

Donc, en conclusion, à mon avis, les composants visuels du HUD devraient dépendre du coût des performances que vous pouvez vous permettre.