Disegnare gli elementi Ui direttamente all'area WebGL con tre.js

Question

In tre.js, è possibile disegnare direttamente all'area WebGL (per un display a testa o elementi UI, ad esempio) il modo in cui potresti con un normale elemento tela HTML5?

In caso affermativo, come puoi ottenere il contesto e quali comandi di disegno sono disponibili?

In caso contrario, c'è un altro modo per realizzare questo, attraverso altri comandi di disegno di altri tre.js o WebGL che cooperare con tre.js?

Il mio piano di backup è quello di utilizzare i divisi HTML come sovrapposizioni, ma penso che ci dovrebbe essere una soluzione migliore.

Grazie!

Answer 1

Non puoi disegnare direttamente sulla tela WebGL nello stesso modo con cui fai con tela normale. Tuttavia, ci sono altri metodi, e.g.

.
• Disegna a una tela 2D nascosta come al solito e trasferimento di WebGL usandola come texture su un quad
• Disegna immagini usando texture mappati quads (ad esempio fotogrammi della tua scatola sanitaria)
• Disegna percorsi (e forme) mettendo i loro vertici a un vbo e disegnano con il tipo di poligono appropriato
• Disegna il testo utilizzando un font bitmap (quads fondamentalmente strutturati) o una vera geometria (tre.js ha esempi e aiutanti per questo)

  Usando questi di solito significa configurare una fotocamera ortografica.

  Tuttavia, tutto questo è un bel po 'di lavoro e ad es. Disegnare il testo con una vera geometria può essere costoso. Se riesci a fare con HTML Divs con lo styling CSS, dovresti usarli perché è molto veloce da configurare. Inoltre, attingendo sopra la tela di WebGL, magari usando la trasparenza, dovrebbe essere un forte suggerimento al browser alla GPU accelera il suo disegno div se non accelera già tutto.

  Ricorda anche che puoi ottenere molto con CSS3, ad es. angoli arrotondati, trasparenza alfa, anche 3D trasformazioni prospettiche come dimostrato dal collegamento di Anton nel commento della domanda.

Answer 2

Ho avuto esattamente lo stesso problema.Stavo cercando di creare un HUD (display a testa alta) senza DOM e ho finito per creare questa soluzione:

.
1. Ho creato una scena separata con fotocamera ortografica.
2. Ho creato un elemento di tela e ho usato primitivi di disegno 2D per rendere la mia grafica.
3. Quindi ho creato un piano che monta l'intero schermo e l'elemento di tela 2D usato come texture.
4. Ho reso quella scena secondaria in cima alla scena originale

   Ecco come appare il codice HUD:

   // We will use 2D canvas element to render our HUD.  
   var hudCanvas = document.createElement('canvas');
   
   // Again, set dimensions to fit the screen.
   hudCanvas.width = width;
   hudCanvas.height = height;
   
   // Get 2D context and draw something supercool.
   var hudBitmap = hudCanvas.getContext('2d');
   hudBitmap.font = "Normal 40px Arial";
   hudBitmap.textAlign = 'center';
   hudBitmap.fillStyle = "rgba(245,245,245,0.75)";
   hudBitmap.fillText('Initializing...', width / 2, height / 2);
   
   // Create the camera and set the viewport to match the screen dimensions.
   var cameraHUD = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0, 30 );
   
   // Create also a custom scene for HUD.
   sceneHUD = new THREE.Scene();
   
   // Create texture from rendered graphics.
   var hudTexture = new THREE.Texture(hudCanvas) 
   hudTexture.needsUpdate = true;
   
   // Create HUD material.
   var material = new THREE.MeshBasicMaterial( {map: hudTexture} );
   material.transparent = true;
   
   // Create plane to render the HUD. This plane fill the whole screen.
   var planeGeometry = new THREE.PlaneGeometry( width, height );
   var plane = new THREE.Mesh( planeGeometry, material );
   sceneHUD.add( plane );
   

   .

   Ed è quello che ho aggiunto al mio ciclo di rendering:

   // Render HUD on top of the scene.
   renderer.render(sceneHUD, cameraHUD);
   

   .

   Puoi giocare con il codice fonte completo qui: http://codepen.io/jaamo/pen/maoogzv

   e saperne di più sull'implementazione sul mio blog: http://www.evermade.fi/pure-thre-js-hud/