Three.jsでWebGLエリアにUIエレメントを直接描画する

Question

Three.jsでは、WebGLエリア（ヘッドアップディスプレイやUIエレメントなど）に直接描画することは可能ですか？通常のHTML5キャンバス要素ですか？

もしそうなら、どのようにコンテキストを取得し、どのような描画コマンドを利用できますか？

もしそうでなければ、Three.jsと協力する他のThree.jsまたはWebGL固有の描画コマンドを使用してこれを達成する別の方法がありますか？

私のバックアップ計画はオーバーレイとしてHTML divを使用することですが、もっと良い解決策があるはずです。

ありがとうございます！

Answer 1

通常のキャンバスと同じ方法でWebGLキャンバスに直接描画することはできません。しかしながら、他の方法、例えば、いつものように隠された2Dキャンバスに

• 描画およびクワッドにテクスチャとしてそれを使用することにより、WebGLのにそれを転送
• テクスチャマッピングされた大腿四頭筋（あなたの健康ボックスの例えばフレーム）
• ドローパスを使用して画像を描画VBOに頂点を置いて適切なポリゴンタイプで描画することで、形状を整えることができます。
• ビットマップフォント（基本的にテクスチャ付きクワッド）または実際のジオメトリを使用してテキストを描画します（three.jsには例とヘルパーがあります）

これらを使用することは、通常、正射投影カメラを設定することを意味します。

しかし、これはすべてかなりの作業です。実際のジオメトリを使用したテキストの描画は高価になります。 CSSのスタイルを使ってHTML divを作成することができれば、設定をすばやく行うので、それらを使用する必要があります。また、おそらく透明性を使用して、WebGLキャンバスを描画することは、GPUがすべてを加速していない場合、div描画を高速化するための強力なヒントになるはずです。

また、CSS3でかなりの成果を上げることができます。丸みを帯びたコーナー、アルファ透明度、問題のコメントにアントンのリンクが示すような3Dパースペクティブ変換も含まれます。

Answer 2

私は全く同じ問題を抱えていました。私はDOMなしでHUD（Head-up display）を作成しようとしていましたが、このソリューションを作成しました。

1. 私は正射投影カメラと別のシーンを作成しました。
2. キャンバス要素を作成し、2D描画プリミティブを使用してグラフィックスをレンダリングしました。
3. 次に、画面全体にフィットする平面を作成し、2Dキャンバス要素をテクスチャとして使用しました。

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

   そして、それは私が私のレンダリングループに追加するものです：：

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

   私は元のシーンのトップ

上のセカンダリシーンがHUDコードがどのように見えるかだそのことをレンダリング

ここでは、完全なソースコードで遊ぶことができます： http://codepen.io/jaamo/pen/MaOGZV

そして、私のブログ上の実装について詳しく読む： http://www.evermade.fi/pure-three-js-hud/