Question

将一些旧的效果移至alteredq的EffectComposer中，目前尚不确定如何实现纹理反馈效果。

在其他应用程序中，这是一个非常简单的过程。我将信号发送到反馈着色器（按比例缩放/倍增/旋转），将信号发送到另一个效果链，然后返回到反馈以进行另一遍处理。《三人行》并不是那么简单，但我设法通过对fbo进行ping操作来使它起作用。

我有兴趣通过使用EffectComposer来简化此过程，但发现很难重新创建效果。

目前，我可以概念化使用四个作曲家：

首先，它是一种将输入效果应用于当前场景并渲染到目标的输入作曲器。

this.inputComposer = new THREE.EffectComposer(this.manager.renderer, this.rawTexture);
this.inputComposer.setSize(this.manager.width, this.manager.height);

const inputPass = new THREE.RenderPass(this.manager.scene, this.manager.camera.getCamera());

this.inputComposer.addPass(inputPass);

第二，是一个反馈着色器，它接受inputComposer的输出以及后续效果作曲家的输入。

this.feedbackComposer = new THREE.EffectComposer(this.manager.renderer, this.textureB);
this.feedbackComposer.setSize(this.manager.width, this.manager.height);

this.shader_feedback = new THREE.ShaderMaterial({
  uniforms: {
    fb: { value: this.textureA.texture },
    feedback: { value: 0.6 },
    scale: { value: 0.992 },
    vPoint: { value: [0.5,0.5] }
  },
  vertexShader: feedback.vert,
  fragmentShader: feedback.frag
})

const inputPass  = new THREE.TexturePass(this.rawTexture.texture, 1.0);
const feedbackPass  = new THREE.ShaderPass(this.shader_feedback, "feedback");

this.feedbackComposer.addPass(inputPass);
this.feedbackComposer.addPass(feedbackPass);

第三，是中间作曲家，负责添加中间反馈着色器。 这应该反馈到反馈着色器中。

this.intermediateComposer = new THREE.EffectComposer(this.manager.renderer, this.intermediateTarget);
this.intermediateComposer.setSize(this.manager.width, this.manager.height);

this.shader_sharpen = new THREE.ShaderMaterial({
  uniforms: {
    width: { value: 0.8 }
  },
  vertexShader: sharpen.vert,
  fragmentShader: sharpen.frag
})

const inputPass  = new THREE.TexturePass(this.textureB.texture, 1.0);
const sharpenPass  = new THREE.ShaderPass(this.shader_sharpen, "sharpen");

this.intermediateComposer.addPass(inputPass);
this.intermediateComposer.addPass(sharpenPass);

第四，一个后反馈输出作曲器，其后效果应该放在其他一切之上。

this.finalComposer = new THREE.EffectComposer(this.manager.renderer);
this.finalComposer.setSize(this.manager.width, this.manager.height);

this.shader_chroma = new THREE.ShaderMaterial({
  uniforms: {
    barrelPower: { value: 0.4 },
    zoom: { value: 1.0 }
  },
  vertexShader: barrelBlurChroma.vert,
  fragmentShader: barrelBlurChroma.frag
})

const inputPass  = new THREE.TexturePass(this.textureC.texture, 1.0);
const chromaPass = new THREE.ShaderPass(this.shader_chroma, "chroma");

chromaPass.renderToScreen = true;

this.finalComposer.addPass(inputPass);
this.finalComposer.addPass(chromaPass);

，然后最终，在渲染中：

this.inputComposer.render( delta );
this.feedbackComposer.render(delta);
this.intermediateComposer.render( delta );
this.finalComposer.render( delta );

（1）我不确定我是否忽略了一种更为优雅的方法。

（2）我一生都无法确定需要交换哪些目标。我知道EffectComposer具有swapBuffers（），它的功能相同，但是我不完全确定从这里去哪里。

使用THREE.EffectComposer实现纹理反馈

0 个答案: