1

THREE.js のマテリアルで FBO を使用しようとしています。最終的なビジュアライゼーションをフレーム バッファ オブジェクトに出力する GPU ベースの流体シミュレーションがあり、これを使用してメッシュのテクスチャを作成したいと考えています。これが私の単純なフラグメントシェーダーです:

varying vec2 vUv;
uniform sampler2D tDiffuse;

void main() {

    gl_FragColor = texture2D( tDiffuse, vUv );

}

次に、単純な THREE.ShaderMaterial を使用しようとしています。

var material = new THREE.ShaderMaterial( {

    uniforms: { tDiffuse: { type: "t", value: outputFBO } },
    //other stuff... which shaders to use etc
} );

しかし、コンソールにはエラーが表示されていませんが、メッシュは黒く表示されます。同じシェーダーとシェーダー マテリアルを使用しても、THREE.ImageUtils.loadTexture("someImageOrOther") の結果を均一としてシェーダーに提供すると、正しくレンダリングされるので、問題は FBO にあると思います。WebGL で FBO から Texture2D に変換する便利な方法はありますか?

編集：

さらに実験を重ねると、これは問題ではないように見えます。テクスチャを画面に出力するだけの別のシェーダーに FBO を渡すと、正常に表示されます。照明や法線などが原因で、マテリアルが黒く見えることはありますか?

編集2：

UV と法線は THREE から直接来ているので、そうではないと思います。問題の一部は、ほとんどのシェーダー エラーが報告されないことです。何らかの形で WebGLTexture をマッピングできれば、おそらくこのようにすべてが簡単になります

var newMaterial = new THREE.MeshLambertMaterial({ map : outputFBO.texture });

しかし、もちろんそれはうまくいきません。THREE が WebGLTextures から直接読み取ることができることを示唆するドキュメントを見つけることができませんでした。

4

2 に答える 2

0

Three.js データ構造を使用してもかまわない場合は、次のようにします。

Three.js はフレームバッファをテクスチャとして使用します

于 2014-02-08T20:48:15.007 に答える
0

WebGLRenderer のソースを少し調べて ( https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L6643以降を参照)、3 つを作成してみてください。 js テクスチャにダミーの画像を__webglTexture追加し、独自の webgltexture を配置して、このテクスチャのデータ メンバーを変更します。

また、初期化コードが実行されないように、テクスチャ オブジェクトtrueのデータ メンバに設定する必要がある場合があります(thenは への呼び出しによって上書きされるため) 。__webglInit__webglTexture_gl.createTexture();

于 2013-03-27T17:28:48.583 に答える