Dibujando elementos de UI directamente al área de WebGL con tres.js

Question

En Three.js, ¿es posible dibujar directamente al área de WebGL (para una visualización de heads-up o elementos de UI, por ejemplo) de la forma en que podría con un elemento de lona HTML5 regular?

Si es así, ¿cómo puede obtener el contexto y qué comandos de dibujo están disponibles?

Si no, ¿hay otra forma de lograr esto, a través de otros comandos de dibujo específicos de Three.js o WebGL que cooperaban con Three.js?

Mi plan de copia de seguridad es usar DIVS HTML como superposiciones, pero creo que debería haber una mejor solución.

¡Gracias!

Answer 1

No se puede dibujar directamente con el lienzo de WebGL de la misma manera que usted tiene con el lienzo regular. Sin embargo, hay otros métodos, por ejemplo.

• dibujar en un lienzo oculto 2D como de costumbre y transferirlo a WebGL al usarlo como una textura a un quad
• Dibujar imágenes con textura quads asignados (por ejemplo, marcos de su caja de salud)
• dibujar caminos (y formas) poniendo sus vértices a un VBO y dibuje con el tipo de polígono apropiado
• dibujar texto usando una fuente de mapa de bits (quads con textura básicamente) o geometría real (tres.js tiene ejemplos y ayudantes para esto)

  Uso de estos generalmente significa configurar una cámara ortográfica.

  Sin embargo, todo esto es un poco de trabajo y por ejemplo. El texto de dibujo con geometría real puede ser costoso. Si puede hacer que se realicen con DIVS HTML con STYLING CSS, debe usarlos, ya que es muy rápido para configurar. Además, el dibujo sobre el lienzo de WebGL, tal vez usando la transparencia, debe ser una sugerencia fuerte al navegador a la GPU acelerar su dibujo DIV si aún no acelera todo.

  También recuerda que puedes lograr mucho con CSS3, por ejemplo. esquinas redondeadas, transparencia alfa, incluso transformaciones de perspectiva 3D como lo demuestran el enlace de Anton en el comentario de la pregunta.

Answer 2

Tuve exactamente el mismo problema.Estaba tratando de crear un HUD (pantalla de la cabeza) sin DOM y terminé creando esta solución:

1. He creado una escena separada con cámara ortográfica.
2. He creado un elemento de lona y usé primitivos de dibujo 2D para hacer mis gráficos.
3. Luego creé un avión que instaló toda la pantalla y usé el elemento de lona 2D como una textura.
4. Presté esa escena secundaria en la parte superior de la escena original

   Así es como se ve el código 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 );
   

   y eso es lo que agregué a mi bucle de renderizado:

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

   Puede jugar con el código fuente completo aquí: http://codepen.io/jaamo/pen/maogzv

   y lee más sobre la implementación en mi blog: http://www.evermade.fi/pure-three-js-hud/