Получение текстурной обратной связи с THREE.EffectComposer - PullRequest
Новая
       6

Получение текстурной обратной связи с THREE.EffectComposer

0 голосов
/ 07 января 2019

Перемещение некоторых старых эффектов в EffectComposer из alteredq и в настоящее время неуверенный способ достижения эффектов обратной связи текстуры.

В других приложениях это действительно простой процесс. Я посылаю сигнал в шейдер обратной связи (который масштабируется / умножается / вращается), отправляю сигнал в другую цепочку эффектов, а затем возвращаюсь в обратную связь для следующего прохода. С Three это было не так просто, но мне удалось заставить его работать, пинг-понг fbos.

Мне интересно оптимизировать этот процесс с помощью 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);

Третий , промежуточный композитор, ответственный за добавление шейдеров mid-feedback . Это должно быть передано обратно в шейдер обратной связи. 

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 (), который делает то же самое, но я не совсем уверен, куда идти.

...