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 回答