1

まず、私はglslとThree.jsの初心者です:)。

これが、shader1の頂点シェーダーとフラグメントシェーダー（非常に単純）です。

 void main() {

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position,1.0);             
}       

void main() {
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}

私のinit（）関数には次のものがあります。

var geometry = new THREE.CubeGeometry(2, 2, 2);
var material = new THREE.MeshLambertMaterial({color: 0xffaaff});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var effect1 = new THREE.ShaderPass(THREE.ShaderExtras[ "shader1" ]);
effect1.renderToScreen=true;
composer = new THREE.EffectComposer( renderer);
composer.addPass(renderScene);
composer.addPass(effect1);

私の関数render（）で：

Renderer.clear() ;
composer.render();

しかし、最終的には、キューブだけでなく、すべての画面が赤になります。どうしたの ？

ありがとうございました。

4

2 に答える 2

1

Three.js はわかりませんが、シェーダーをインストールする方法は、ジオメトリには適用されず、フルスクリーンの後処理効果として使用されているように見えます — 無条件に出力ピクセルを赤にするため、全体が画面が赤い。キューブ (またはシーン内のすべてのジオメトリ) のレンダリングにシェーダーを使用することを Three.js に伝えるには、他の操作を使用する必要があります。

于 2012-07-07T14:59:37.637 に答える
0

後処理シェーダーを特定の画面領域またはオブジェクトに適用するには、ステンシル (OpenGL 用語) を使用する必要があります。

少し複雑なトピックなので、一般的な OpenGL チュートリアルでそれらについて読むか、ステンシルを行う既存の Three.js の例を調べることをお勧めします。

この例は関連することをしたと思います：

http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html

于 2012-07-08T16:17:05.833 に答える