Three.js后处理运动模糊呈现黑屏

时间:2018-06-09 10:51:00

标签: javascript three.js 3d

我做了codepen showing the issue。问题是:渲染黑屏而不是旋转立方体。

我在three.js上使用https://github.com/vanruesc/postprocessing

核心后处理代码如下:

const composer = new POSTPROCESSING.EffectComposer(renderer)
const renderPass = new POSTPROCESSING.RenderPass(scene, camera)
renderPass.renderToScreen = false
composer.addPass(renderPass)

const renderTargetParameters = { format: THREE.RGBAFormat, stencilBuffer: true }
const renderTarget2 = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters)
const effectSaveTarget = new POSTPROCESSING.SavePass(renderTarget2)
effectSaveTarget.clear = false

// motion blur
const effectBlend = new POSTPROCESSING.ShaderPass(THREE.BlendShader, 'tDiffuse1')
effectBlend.material.uniforms[ 'tDiffuse2' ].value = effectSaveTarget.renderTarget
effectBlend.material.uniforms[ 'mixRatio' ].value = 0.0
effectBlend.material.needsUpdate = true
effectSaveTarget.renderToScreen = false
effectBlend.renderToScreen = true
console.log(effectBlend)

composer.addPass(effectBlend)
composer.addPass(effectSaveTarget)

然后在主渲染循环中我只放composer.render(delta)

1 个答案:

答案 0 :(得分:1)

three.js话语论坛为我提供了一个解决方案ubing vanilla three.js:

https://discourse.threejs.org/t/trying-to-do-simple-motion-blur-but-only-get-a-black-screen/3076

https://jsfiddle.net/f2Lommf5/6731/

我认为我的错误是在预期ShaderMaterial时为ShaderPass提供着色器对象。

public class Entity {
    private String name;
    private File file;

    // Getters & setters
}