Merging multiple scenes via a PostProcess.

[lethe]

I have two scenes that need to be combined using a non-trivial filter - currently I have set it up such that the first scene is rendered into a RenderTargetTexture, whilst the second is applied to the canvas object to render normally, but with a PostProcess effect applied, which takes in the first scenes texture as one of its samplers. Problem is, I can find no way to arrange for the first scene be rendered ready for the filter (or indeed, be rendered at all) - the only example I can find (the water tutorial) demonstrates how to have an offscreen buffer rendered before a material is used, but not before a post processing effect is used. Anyone know how to do this?

 

Thanks in advance

 

Folowup:

I have found one approach that almost works - put a PassPostProcess on the first scene, then call render twice in the engine.runRenderLoop function - for the first scene and then the second scene. Using the setTextureFromPostProcess method in the post processor of the second scene makes the output of both scenes avaliable... unfortunatly the alpha for both appears to be set to 1, which is an issue, as I need that to merge the two scenes!

[GameMonetize]

This is an interesting request

 

I think you are almost done:

Set a passPostProcess on first scene and render it

Set a custom postprocess for the scene scene

 

Should look like that for 2nd scene:

var postProcess1 = new BABYLON.PostProcess("Final compose", "./compose", [], ["sceneSampler0"], 1, camera);postProcess1.onApply = function (effect) {        effect.setTextureFromPostProcess("sceneSampler0", postProcess0ForScene0);    };

The custom shader is quite simple:

#ifdef GL_ESprecision mediump float;#endif// Samplersvarying vec2 vUV;uniform sampler2D textureSampler;uniform sampler2D sceneSampler0;// Parametersuniform vec2 screenSize;void main(void) {vec4 orig = texture2D(sceneSampler0, vUV);vec4 dest = texture2D(textureSampler, vUV);vec4 final = orig * 0.5 + dest * 0.5;final.a = 1.0;gl_FragColor = final;}

[lethe]

Thanks, though I had got that far (few subtle differences, but basically the same). Problem is I really need the alpha from the first scene to do the merge (Scene 1 is rendered additively, then only copied into scene 2 when above a threshold - I am in effect doing a visual intersection operation. I can think of other approaches, but this seemed to be the simplest, at least when I started!), and its not available for some reason - it appears to be fixed at 1, even though I have explicitly set it otherwise. Any ideas? Its quite hard to follow all the state changes involved by reading the engine's code!

 

Edit: Ok, it appears that calling

scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

does not in fact result in the alpha buffer being set to zero, but leaves it at one, hence my above problem. No idea why - I have traced through the engine and the call sequence looks correct. All I know is that if I set it to 0 using a shader that works, and my code does what I want it to! So, problem solved for me, but I expect this is indicative of a bug somewhere.

 

Further edit:

Bug was staring me in the face - you use the line:

this._gl.clearColor(color.r, color.g, color.b, color.a || 1.0);

in babylon.engine.js. (0.0 || 1.0)  evaluates to 1.0, whilst (1e-12 || 1.0) evaluates to 1e-12, hence I can fix my problem with

scene.clearColor = new BABYLON.Color4(0, 0, 0, 1e-12);

(1e-12 rounds down to 0 when dumped in an 8 bit uint)

This is a bug that needs fixing, but then that is easy enough - just check if color.a is a number or not, rather than relying on the weird behaviour of || !

[GameMonetize]

Will do the fix right now