Help combining multiple composers?

Questions
1

I’m trying to combine multiple composers, and haven’t been successful.

In particular, I’m trying to create two separate composers with their own shaders, and to create another composer which combines the results of those shaders.

The user’s webcam is the only object in the scene.

For a dummy example, I’ve created a ‘greenComposer’ and ‘blueComposer’, each of which creates a ShaderPass with the ColorifyShader, colorifying the canvas green or blue - these two composers are initialized with WebGLRenderTargets as target parameters.

The final composer is a blend composer, whose uniform diffuse arrays are set as the textures of the targets sent to the other composers.

Running example is here:
https://mattrussell2.github.io/index.html

Unfortunately, this seems to output simply the renderpass of the final composer.

I’ve set the autoClear parameter of the renderer to false, but I’m not sure what I’ve been missing. Any help would greatly be appreciated.

2

Have you tried passing the readbuffer of the composers you want to combine to the textures of the blendShader?
That what worked for me (Although I haven’t used the BlendShader, but a custom one).

It’s part of a bigger engine, but you can see how I do for Polygonjs here:

3

Thanks for the tip, and the example.

Unfortunately, no luck…

Looks like the EffectComposer constructor sets the readbuffer to be the passed-in rendertarget, so they should be the same thing, no?

Other ideas?

4

They should be the same thing, but I had different results when I was passing it. It could be because you may have more controls on how you set it up that way.

Could you make a jsfiddle? It would be easier to try things.

5

Sure thing!

https://jsfiddle.net/zL9juh2p/

6

I think I have it working:

https://jsfiddle.net/zL9juh2p/

I changed the following:

  • you had a typo rendertoScreen instead of renderToScreen (I always recommend using typescript to avoid those, took me a while to notice it)
  • I give the readBuffers to the shader textures, even though I admit not being sure why this is necessary.
  • I replaced the fragment shader of the blendShader with a custom one. Not very different, but made debugging easier.

Hope that helps!

1 Like
7

Yep - got it working!

After fixing the typo, I still needed to change to the shader textures. I agree, it’s unclear why, but hey, if it works, it works :slight_smile:

Thanks so much for your help.

1 Like