仅对某些 3D 对象应用后处理效果答案

【问题标题】：Applying postprocessing effect on certain 3D objects only仅对某些 3D 对象应用后处理效果
【发布时间】：2012-07-09 00:17:28
【问题描述】：

首先我是 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();

但最后我的所有屏幕都是红色的，不仅仅是我的立方体。怎么了？

谢谢。

【问题讨论】：

我忘了打招呼:)

标签： glsl webgl three.js

【解决方案1】：

我不知道 Three.js，但是您安装着色器的方式看起来像是被用作全屏后处理效果，而不是应用于您的几何体——而且因为您无条件地将输出像素设为红色，整个屏幕都是红色的。您需要使用其他一些操作来告诉 Three.js 您希望您的着色器用于渲染您的立方体（或场景中的所有几何体）。

【讨论】：

【解决方案2】：

要将后处理着色器应用于某些屏幕区域或对象，您需要使用模板（OpenGL 术语）。

这是一个有点复杂的话题，所以我建议你要么阅读通用 OpenGL 教程，要么研究现有的 Three.js 做模板的例子。

我认为这个例子做了一些相关的事情：

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

【讨论】：

那个例子没有使用模板。它甚至没有指定 renderTarget。