3.jsでUI要素を直接WebGL領域に直接描画する

Question

3.jsでは、通常のHTML5キャンバス要素を使用できる方法を使用できる方法を直接（ヘッドアップディスプレイまたはUI要素の場合）に直接描画することができますか？

もしそうなら、どのようにしてコンテキストを入手でき、どのような描画コマンドが利用可能であるか？

そうでない場合は、3.jsと協力する他の3つの3つまたはwebgl固有の描画コマンドを通して、これを達成するための別の方法がありますか？

マイバックアッププランは、HTML DIVをオーバーレイとして使用することですが、私はより良い解決策があるべきだと思います。

ありがとう！

Answer 1

通常のキャンバスと同じ方法でWebGLキャンバスに直接描画することはできません。しかしながら、他の方法、例えば、

• 通常のように隠された2Dキャンバスに描き、それをテクスチャとしてquad へのテクスチャとして使用することで、webglに転送する
• テクスチャマッピングクワッド（例えば、ヘルスボックスのフレーム）を使用して画像を描く
• 頂点をVBOに置き、適切なポリゴンタイプで頂点を描画することでパス（および形状）を描画します。
• ビットマップフォント（基本テクスチャクワッド）または実際のジオメトリを使用してテキストを描く（3.jsには、このための例とヘルパーがあります）

  これを使用すると、正統カメラを設定することを意味します。

  しかし、これはすべてかなりの作業である。実際のジオメトリでテキストを描くことは高価になる可能性があります。 CSSスタイリングを使用してHTML DIVで行うことができる場合は、設定が非常に迅速に使用する必要があります。また、おそらく透明性を使用しているWebGLキャンバスをめくると、ブラウザへのブラウザへの強いヒントがGPUに既にアクセルされていない場合はDIV図面を加速する必要があります。

  はまた、あなたがCSS3で非常に多くを達成できることを忘れないでください。丸みを帯びたコーナー、アルファ透明度、質問のコメントのAntonのリンクによって実証された3D透視変換でさえ。

Answer 2

私はまったく同じ問題を持っていました。私はDOMなしでHUD（ヘッドアップディスプレイ）を作成しようとしていて、このソリューションの作成に終了しました：

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

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

   .

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

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

   .

   ここで全てのソースコードで遊ぶことができます。 http://codepen.io/jaamo/pen/maogzv

   そして私のブログの実装についてもっと読む： > http://www.evermade.fi/pure-thre-js-hud /