How to apply 2-pass postprocessing without using EffectComposer?

0
votes

I need to post-process the scene that I rendered previously on textureA (as render target), with my custom shader and save the result to textureB (input:textureA, output:textureB). Therefore, I don't need a scene and a camera. I think it's too simple to even bother with three.js classes like EffectComposer, Shaderpass, CopyShader, TexturePass, etc.

So, how do I setup this computing-like post-processing in a simple way?

1
three.jspost-processing

1 Answers

1
votes

I've create for you a fiddle that shows a basic post-processing effect without EffectComposer. The idea behind this code is to work with an instance of WebGLRenderTarget.

First, you draw the scene into this render target. In the next step, you use this render target as a texture for a plane which is rendered with an orthographic camera. The code in the render loop looks like this:

renderer.clear();

renderer.render( scene, camera, renderTarget );

renderer.render( sceneFX, cameraFX );

The corresponding material of this plane is your custom shader. I've used a luminosity shader from the official repo.

Therefore, I don't need a scene and a camera.

Please do it like in the example. That's the intended way of the library.

Demo: https://jsfiddle.net/f2Lommf5/5149/

three.js R91