デフォルトでは、Three.js でレンダリングしたものはすべて画面に送信されます。結局のところ、それが見えない場合、レンダリングすることに何の意味があるのでしょうか? 非常に重要な点があることがわかりました。それは、データが画面に送信される (したがって失われる)前にデータをキャプチャすることです。
これにより、色補正、カラーシフト、ブラーなどの後処理効果を適用しやすくなり、シェーダ効果にも役立ちます。
この手法は、テクスチャへのレンダリングまたはフレームバッファへのレンダリングと呼ばれ、最終結果はテクスチャに保存されます。その後、それを画面にレンダリングできます。この投稿では、これを行う方法を示し、次に、移動する立方体を別の移動する立方体の表面にレンダリングする実際の例を説明します。
注:このチュートリアルは、Three.js に関する一定の基本知識があることを前提としています。または、GLTF エディターにアクセスして、three.js のテクスチャ処理機能について学習できることを前提としています。
基本的な実現
これを行う方法の例はたくさんあり、多くの場合、より複雑なエフェクトに組み込まれています。Three.js のテクスチャに何かをレンダリングするために必要な最低限のものは次のとおりです。
// @著者オマール・シェハタ。2016.
// ここで CDN から Three.js ライブラリをロードしています:
これは基本的なシーンのセットアップです
var シーン = 新しい THREE.Scene();
var 幅、高さ = window.innerWidth、window.innerHeight;
var カメラ = 新しい THREE.PerspectiveCamera( 70, 幅/高さ, 1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize(幅,高さ);
document.body.appendChild( renderer.domElement );
ここでオフスクリーン レンダー ターゲットを作成します。
// バッファ オブジェクトを保持する別のシーンを作成します
varbufferScene = new THREE.Scene();
// 結果を保存するテクスチャを作成します
varbufferTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter});
// ここに、bufferScene でレンダリング/キャプチャしたいものを追加します //
関数 render() { requestAnimationFrame( render );
// Render onto our off-screen texture
renderer.render(bufferScene, camera, bufferTexture);
// Finally, draw to the screen
renderer.render( scene, camera );
レンダリング
();
// すべてをレンダリングします!
まずは基本的なシーンのセットアップから始めます。次に、別のシーンを作成します。このシーンに追加したオブジェクトは、画面上ではなく画面外のターゲットに描画されます。bufferScene
次に、WebGLRenderTarget を作成します。これは、画面以外の何かにレンダリングできるようにするために Three.js が使用するものです。bufferTexture
最後に、Three.js にレンダリングするように指示します。bufferScene
renderer.render(bufferScene、カメラ、bufferTexture);
これは、3 番目のパラメータであるレンダー ターゲットを指定することを除いて、通常のシーンのレンダリングとまったく同じです。
したがって、手順は次のとおりです。
- オブジェクトを収容するシーンを作成します。
- レンダリングされたコンテンツを保存するテクスチャを作成する
- シーンをテクスチャにレンダリングする
これが基本的に私たちがしなければならないことです。ただし、何も表示されないので、あまり面白くありません。コンテンツを追加しても、まだ何も表示されません。これは、作成したテクスチャを何らかの方法でメイン シーンにレンダリングする必要があるためです。以下にこれを行う方法の例を示します。bufferScene
使用例
シーン内に立方体を作成し、それをテクスチャ上に描画し、それを新しい立方体のテクスチャとして使用します。
1. 基本的なシーンから始める
これが基本シーンで、赤い回転立方体とその後ろに青い飛行機があります。 ここでは特別なことは何も行われていませんが、デモの[CSS] または [JS]タブに切り替えるとコードを表示できます 。
CodePen でフォークして編集できます。
2. このシーンをテクスチャ上にレンダリングします
次に、それをテクスチャにレンダリングします。必要なのは、上記と同様の基本実装を作成し、それにオブジェクトを追加することだけです。bufferScene
CodePen でフォークして編集できます。
正しく実行すると、現時点では画面に何もレンダリングされていないため、何も表示されません。代わりに、シーンがレンダリングされ、 に保存されます。bufferTexture
3. テクスチャ立方体のレンダリング
bufferTexture他のテクスチャーと何ら変わりません。新しいオブジェクトを作成し、それをテクスチャとして使用するだけです。
var boxmaterial = new THREE.MeshBasicmaterial({map:bufferTexture});
var boxGeometry2 = 新しい THREE.BoxGeometry( 5, 5, 5 );
var mainBoxObject = new THREE.Mesh(boxGeometry2,boxmaterial);
// 見えるように後ろに移動します
mainBoxObject.position.z = -10;
// メインシーンに追加
scene.add(mainBoxObject);
CodePen でフォークして編集できます。
最初のテクスチャに何でも描画して、それを任意のテクスチャにレンダリングできます。
潜在的な用途
最もすぐに使用できるのは、あらゆる種類の後処理エフェクトです。オブジェクトごとではなく、シーンに何らかの色補正や変換を適用したい場合は、シーン全体を 1 つのテクスチャにレンダリングし、画面にレンダリングする前に最終テクスチャに必要なエフェクトを適用できます。
元のリンク: three.js テクスチャ (mvrlink.com)