1

私のプロジェクトでは、3 つの目立たないレイヤーがあることを知っています。

  1. バックグラウンド
  2. ミッドグラウンド
  3. 前景

これらのレイヤーのそれぞれは、潜在的に非常に異なる単位スケールを持ち、ジオメトリが重複する可能性があります。しかし、同じ「スペース」を占有しているかのようにレンダリングしたくありません。3D 空間での順序ではなく、論理レイヤーの順序でレンダリングするようにします。

たとえば、バックグラウンドが半径 10 単位の細いチューブで、トンネルのような効果を実現するためにカメラの上に置くとします。次に、カメラから遠く離れたシーンに、各側面に 100 単位の大きな立方体をForegroundとして配置したいと考えています。

このシナリオでは、立方体とトンネルが交差し、互いに覆い隠しています。トンネル全体をレンダリングしてからキューブ全体をレンダリングし、そのレンダリングされたキューブをレンダリングされたトンネルの上に配置する方法を探しています。そして、その立方体のテクスチャ/シェーダーのアルファ透明度をきれいに合成して、レンダリングされたトンネルを透明ピクセルの後ろに表示したいと思います。

そう：

  1. 存在する技術や機能について説明していますか? もしそうなら、それは何と呼ばれていますか？
  2. WebGLはこれを行うことができますか?
  3. three.jsはこれを行うことができますか?
  4. フレーム全体を一度にレンダリングすると、パフォーマンスが大幅に低下しますか?
  5. これを設定するには、three.js でレンダリングをどのように構成しますか?

*GLグラフィックプログラミングはまだ新しいので、語彙が正確でない場合は申し訳ありません。それは私がググるのに役立つので、ペダンティックな語彙の修正は高く評価されます!

4

3 に答える 3

3

この例をリバースエンジニアリングした後、これを管理したと思います： http://mrdoob.github.com/three.js/examples/webgl_rtt.html

基本的

renderer.autoClear = false;

次に、次のように 1 つのシーンをレンダリングする代わりに:

render: function() {
  renderer.render(scene, camera);
}

複数のシーンをレンダリングする前に手動でクリアします:

render: function() {
  renderer.clear()
  renderer.render(background, camera);
  renderer.render(midground,  camera);
  renderer.render(foreground, camera);
}

ただし、パフォーマンスへの影響についてはまだ完全にはわかりません。

于 2012-12-09T07:35:25.427 に答える
1

まず、3 つの異なるキャンバスをレンダリングし、それらの z-index と位置を設定するだけで、それらがオーバーラップし、ブラウザーがそれらを合成します。

すべてを 1 つのキャンバスで実行したい場合は、基本的に、何かを描画した後に深度バッファーをクリアするだけです。

drawStuffInBack();

// clear the depth (and stencil buffers)
gl.clear(gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

drawStuffInMiddle();

// clear the depth (and stencil buffers)
gl.clear(gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);

drawStuffInFront();
于 2012-12-10T08:14:22.513 に答える