Three.js: Criando HUD sobre cena 3D (WebGLRenderer)?

Use HTML

1 para HTML. Você está desenvolvendo para uma plataforma _designed_ para UI; fazer uso dele. :)

Na verdade, não vejo por que você NÃO DEVE usar HTML! +1

Sim, a menos que precise ser integrado na cena 3D, eu iria com HTML no topo da tela.

Obrigado.
mrdoob, sim, eu quero integrar na cena 3D. Eu quero usar WebGL para alguns gráficos 2D. Mas eu não vi um exemplo de trabalho para fazer isso com THREE.js.

Quando você diz "integrar na cena 3D", quer dizer que não quer a interface do usuário como uma sobreposição em cima do 3D, certo?

Loupax, mudei um pouco o título :) Quer dizer, no topo, mas com renderização WebGL. quero dizer algo assim:

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

Eu simplesmente usaria HTML para a GUI, então simplesmente <div> etc no topo do elemento <canvas> ...

Se você quiser que a GUI seja renderizada com Three.js no topo de sua cena real, eu usaria dois elementos de tela um em cima do outro, um para o jogo / cena / qualquer coisa, e o primeiro para a gui. Você precisaria garantir que o de cima seja transparente entre os elementos da GUI, mas não sei se isso é possível com Three.js ...

Sim, na maioria dos casos, HTML é o caminho a percorrer, é muito mais simples.

Se você quiser ficar sofisticado e ter seu HUD renderizado por WebGL (por exemplo, para 3D animado ou alguns efeitos de sombreamento), você pode fazer algo assim:

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

(provavelmente há alguma maneira de fazer isso sem FBO apenas brincando com a escrita / leitura / mascaramento de profundidade, pelo menos para sobreposições 2D)

alteredq, obrigado por este link. Atualmente não encontrei uma maneira de "brincar". Mas eu analiso o código no WebGLRenderer e descobri que posso usar algo assim:

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

Isso funciona.

Mas ainda estou interessado na maneira como a renderização dupla e a combinação disso.

Eu estava trabalhando em um projeto WebVR e a solução DOM não era uma opção. Acabei fazendo o HUD com o Three.js puro. Eu criei uma cena separada e a renderizei em cima da minha cena original.

Você pode ver o exemplo ao vivo aqui:
http://codepen.io/jaamo/pen/MaOGZV

E postar no blog sobre a solução aqui:
http://www.evermade.fi/pure-three-js-hud/

Na verdade, estou trabalhando em uma ferramenta de HUD para webVR.
É baseado no StereoEffect.js que você pode encontrar nos exemplos do three.js.
Ele renderiza as duas partes da primeira cena, depois as duas partes da cena do HUD na sobreposição, todas com StereoEffectCamera que são PerspectiveCamera.

Há uma demonstração com uma cruz e interação com alguns elementos da cena.
https://github.com/trinketmage/three.js-vr-hud/

Atualmente, estou trabalhando em um recurso de "rótulo" dentro do frustum da cena do HUD, gostaria de receber qualquer dica ou qualquer ajuda.
obrigado

Se alguém ainda está procurando como renderizar uma cena Ortho em cima de uma perspectiva (para que você possa alinhar objetos nas bordas superior / esquerda / direita / inferior ou ter tamanhos em pixels), eu tinha um exemplo ali .

@cecilemuller - seu projeto não me permite abrir questões, então estou comentando aqui. Funciona? http://jsbin.com/sisutopede/edit?html , js, output (substituí let const por var ) Só consigo ver uma esfera azul, não consigo ver nenhuma Elementos da interface do usuário?

@trinketmage - obrigado por criar uma demonstração / plugin fantástica e por 1 , agora estou tentando descobrir o problema 2 : https://github.com/trinketmage/three.js-vr-hud/issues/ 2 - funciona perfeitamente quando estou usando o teclado, no momento em que começo a usar meu dispositivo móvel / Chrome Dev Tools e simulo a orientação, ele está pulando ...

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

Em uma nota secundária - basta copiar e colar - em algum ponto eu devo ser capaz de escrever meu próprio código, dado todo o conhecimento neste tópico ...

@ stefek99 Deve mostrar retângulos coloridos no topo da esfera azul; acabei de experimentar o jsbin no chrome e firefox, aqui está uma captura de tela:

Embora sim, existem alguns recursos do es6 no código, então você pode usar o Babel REPL para converter para es5 se ele não estiver em execução.

É 2020, qual é a melhor maneira de criar uma sobreposição de HUD 2D dentro do ThreeJS sem usar métodos híbridos ou estranhos? O ideal é ter acesso a algo como PixiJS dentro do ThreeJS?

@sylwesterdigital Você pode usar o fórum three.js se precisar de ajuda.

Sim ... Já estive lá e minha conta está em espera, então não posso comentar, responder ou criar novos tópicos. A comunidade ThreeJS está indo para lugar nenhum e todo mundo está programando f * React para ter um pagamento mensal?

Depois de anos mugindo, acho que não há maneiras absolutas de fazer hud em WebGL, depende totalmente do projeto, mas meu pensamento é:

• Se você não precisa de efeitos específicos no HUD, vá para o HTML, há um "custo de composição", mas contanto que você não tenha muita sobreposição (se eu usar 4 vezes / 5 vezes o tamanho das sobreposições de tela fica lento no Chrome com Mac Book Pro Retina meados de 2015), exemplo de um HUD em html: demo waymaze .
• se precisar que ele esteja no gl por algum motivo, eu colocaria diretamente um Group para que cada frame fosse colocado na frente da câmera renderizada em cima de tudo; Calcule as extensões do grupo da câmera a uma distância z específica no redimensionamento para colocar o item na parte superior / direita / inferior / esquerda; Essa forma dá flexibilidade para fazer uso da perspectiva (se você precisa de elementos 3D no HUD) ou não e acho que deve ser o menor custo para desempenho (corrija-me se eu estiver errado).
• A maneira mais "lógica" @sylwesterdigital , na minha opinião, seria fazer uma segunda renderização (ortográfica ou em perspectiva) no topo da cena como uma textura dentro da mesma cena; Mas a grande desvantagem é que é a maneira menos inteligente de desempenho causar um segundo renderizador do tamanho da tela multiplicado pela proporção de pixels, ou, se o renderizador do HUD for menor, você perde qualidade.
• Pixi.js em cima de Three.js é uma solução ruim @sylwesterdigital , porque eu acho que você teria 2 instâncias de WebGL e acho que é pesado?
• O bom e velho canvas em cima de three.js também deve funcionar, um de meus incríveis colegas de trabalho @namide me ensinou uma grande lição de desenvolvedor: "como eles otimizariam para videogame?", No Unity, maneiras comuns de lidar com HUD é CanvasRenderer em topo de tudo.

Concluindo, na minha opinião, os componentes visuais do HUD devem depender de quanto custo de desempenho você pode pagar.