Dessiner des éléments de l'interface utilisateur directement sur la zone webgl avec trois.js

Question

en trois.js, est-il possible de dessiner directement sur la zone WebGL (pour un affichage de tête ou des éléments d'interface utilisateur, par exemple), comme vous pouviez avec un élément de toile HTML5 régulier?

Si oui, comment pouvez-vous obtenir le contexte et quelles commandes de dessin sont disponibles?

Si non, y a-t-il une autre façon d'accomplir cela, à travers d'autres commandes de dessin spécifiques à trois.js ou webgl, qui coopéreraient avec trois.js?

Mon plan de sauvegarde consiste à utiliser HTML DIVS comme superposition, mais je pense qu'il devrait y avoir une meilleure solution.

merci!

Answer 1

Vous ne pouvez pas dessiner directement sur la toile de webgl dans de la même manière que vous le faites avec une toile régulière. Cependant, il existe d'autres méthodes, par exemple

• Dessine à une toile de 2D cachée comme d'habitude et transférez cela à Webgl en l'utilisant comme une texture sur un quad
• Dessinez des images à l'aide de quads texturé mappés (par exemple des cadres de votre boîte de santé)
• tracez des chemins (et des formes) en mettant leurs sommets à un VBO et en tirant sur celui avec le type de polygone approprié
• Dessinez du texte à l'aide d'une police bitmap (quadruforms essentiellement texturé) ou de la géométrie réelle (trois.js a des exemples et des aides pour cela)

  Utiliser ces moyens généralement de mettre en place une caméra orthographique.

  Cependant, tout cela est tout à fait un peu de travail et par ex. Dessiner du texte avec une vraie géométrie peut être coûteux. Si vous pouvez faire avec HTML DIV avec CSS Styling, vous devez les utiliser car il est très rapide à configurer. En outre, le dessin sur la toile de webgl, peut-être utiliser la transparence, devrait être un indice fort du navigateur au GPU accélérer son dessin div si elle n'accélère pas déjà tout.

  N'oubliez pas que vous pouvez obtenir beaucoup de choses avec CSS3, par ex. coins arrondis, transparence alpha, même transformations en perspective 3D, comme le montre le lien d'Anton dans le commentaire de la question.

Answer 2

J'avais exactement le même problème.J'essayais de créer une HUD (écran de tête) sans DOM et j'ai fini par créer cette solution:

1. J'ai créé une scène séparée avec une caméra orthographique.
2. J'ai créé un élément de toile et utilisé des primitives de dessin 2D pour rendre mes graphismes.
3. Puis j'ai créé un plan d'ajustement de l'écran entier et utilisé l'élément de toile 2D utilisé comme une texture.
4. J'ai rendu cette scène secondaire sur la scène d'origine

   Voici comment le code HUD ressemble à:

   // 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 );
   

   Et c'est ce que j'ai ajouté à ma boucle de rendu:

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

   Vous pouvez jouer avec le code source complet ici: http://codepen.io/jaamo/pen/maogzv

   et en savoir plus sur la mise en œuvre sur mon blog: http://www.evermade.fi/pure-three-js-hud/