0

three.js がレンダーを処理する方法は、各要素を画像に変換し、コンテキストに描画することだと思います。それに関する詳細情報はどこで入手できますか。私が正しければ、その画像を取得して操作する方法はありますか?

任意の情報をいただければ幸いです。

4

1 に答える 1

1

Three.js には、3D 空間でシーンがどのように見えるかが内部的に記述されており、特にすべての頂点とマテリアルが含まれています。レンダリング プロセスは、その 3D 表現を取得し、それを 2D 空間に投影します。Three.js には、 WebGLRenderer (最も一般的なもの)、CanvasRenderer、CSS3DRendererなど、いくつかのレンダラーがあります。それらはすべて異なる方法を使用して、その 2D 投影を描画します。

  • WebGLRenderer は、OpenGLグラフィック コマンドにマップする JavaScript API を使用します。可能な限り、クライアントの GPU は 3D 表現の一部を取り、多かれ少なかれ 2D 投影自体を実行します。各ジオメトリがレンダリングされると、bufferにペイントされます。完全なバッファはフレームであり、これは に表示される 3D 空間の完全な 2D 投影です。<canvas>
  • CanvasRenderer は、2D 描画に JavaScript API を使用します。内部で 2D プロジェクションを実行しますが (これは低速です)、それ以外は WebGLRenderer と同じように高レベルで動作します。
  • CSS3DRenderer は、DOM 要素と CSS3D 変換を使用して 3D シーンを表現します。これは、ブラウザが通常の 2D DOM 要素を取得し、それらを Three.js の 3D 内部表現に一致するように 3D 空間に変換してから、2D でページに投影することを大まかに意味します。

(これはすべて非常に単純化されています。)

WebGL および Canvas 表現でレンダリングされたフレームは、結果として画面に表示される画像であることを理解することが重要ですが、 <img>. 通常、ブラウザは毎秒 60 フレームをレンダリングします。を画像にダンプする<canvas>ことで、フレームを抽出できます。通常、これを行うためにアニメーション ループを停止する必要があります。停止しないと、必要なフレームをキャプチャできない可能性があります。この方法でフレームをキャプチャするのは遅く、ブラウザが毎秒非常に多くのフレームをレンダリングしていることを考えると、すべてのフレームをキャプチャする簡単な方法はありません。

さらに、Chrome には組み込みのキャンバス検査ツールがあり、ブラウザーが描画する各フレームを詳しく調べることができます。

Three.js がフレームをレンダリングしているため、バッファーを簡単にインターセプトすることはできませんが、通常どおりキャンバスに直接描画できます。renderer.contextは、Three.js が描画するグラフィックス コンテキストですrenderer。 は、Three.js シーンを設定するときに作成する Renderer インスタンスです。(グラフィックス コンテキストは基本的に、フレームを構成するバッファーを組み立てるためのヘルパーです。)

于 2013-07-21T02:22:23.667 に答える