15

Three.js では、通常の HTML5 キャンバス要素でできるように、WebGL 領域 (ヘッドアップ ディスプレイや UI 要素など) に直接描画できますか?

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

そうでない場合、Three.js と連携する他の Three.js または WebGL 固有の描画コマンドを使用して、これを達成する別の方法はありますか?

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

ありがとう！

4

2 に答える 2

11

通常のキャンバスと同じように WebGL キャンバスに直接描画することはできません。ただし、他の方法もあります。

  • 通常どおり非表示の 2D キャンバスに描画し、それをクワッドへのテクスチャとして使用して WebGL に転送します
  • テクスチャ マップされた四角形を使用して画像を描画します (ヘルス ボックスのフレームなど)。
  • 頂点を VBO に配置してパス (およびシェイプ) を描画し、適切なポリゴン タイプで描画します
  • ビットマップ フォント (基本的にテクスチャ付きのクワッド) または実際のジオメトリ (three.js にはこのための例とヘルパーがあります) を使用してテキストを描画します。

これらを使用することは通常、正投影カメラをセットアップすることを意味します。

ただし、これはすべてかなりの作業であり、たとえば、実際のジオメトリでテキストを描画するとコストがかかる場合があります。CSS スタイリングを使用して HTML div で間に合わせることができる場合は、設定が非常に簡単なため、それらを使用する必要があります。また、おそらく透明度を使用して WebGL キャンバス上に描画することは、まだすべてを高速化していない場合に、ブラウザーが GPU で div 描画を高速化するための強力なヒントになるはずです。

また、質問のコメントにあるアントンのリンクで示されているように、角の丸み、アルファ透明度、さらには 3D 透視変換など、CSS3 を使用して多くのことを達成できることも覚えておいてください。

于 2012-10-01T07:30:04.657 に答える
10

まったく同じ問題がありました。DOM なしで HUD (ヘッドアップ ディスプレイ) を作成しようとしていましたが、最終的にこのソリューションを作成しました。

  1. 正投影カメラで別のシーンを作成しました。
  2. canvas 要素を作成し、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-three-js-hud/

于 2015-10-19T10:32:38.613 に答える