Multi-passes rendering

[BlackMojito]

I am sorry for opening a new topic for this. But I am really confused how we can do what like the screenshot below illustrates. Basically I need to render the scene (or different RenderGroup or using a two camera approach + layerMasks) twice and then render a fullscreen quad for a post process which then composite the two textures...

I searched everywhere and still cannot find proper way for it...

[NasimiAsl]

try render target.

wait for sample...

 

[NasimiAsl]

http://www.babylonjs-playground.com/#1JUXK5#31

all you need hide your mesh from scene 2

and manage it when you rendertarget before render

http://www.babylonjs-playground.com/#1JUXK5#32

[BlackMojito]

27 minutes ago, NasimiAsl said:

http://www.babylonjs-playground.com/#1JUXK5#31

all you need hide your mesh from scene 2

and manage it when you rendertarget before render

http://www.babylonjs-playground.com/#1JUXK5#32

So Basically I need to create one RenderTarget for rendering my overlay and then send it to my post process pipeline? For my main scene I use the default render target right? 

[NasimiAsl]

you need one render target for your new scene your main scene  in default scene

[BlackMojito]

2 hours ago, NasimiAsl said:

you need one render target for your new scene your main scene  in default scene

OK. So basically they are still in the same "Scene". Hum...it seems that we cannot have multiple "Scenes"? Like scene1.render() then scene2.render() then scene3.render() etc. 

Like this every scene can have its own stuff and we can control if we need to clear the depth stencil buffer etc. And also I can render all of them into textures and then write a post processing pipeline which blend them in some fancy ways.

 

I am still not sure if I can do this in Babylon? It seems that I can only have one "active" scene and I need to play with the render targets and mesh visibilities to achieve that?

[GameMonetize]

Hello! There is no limitation to the number of active scenes

In your runRenderLoop function, you can decide to do whatever you want (like rendering multiple scenes):

engine.runRenderLoop(function() {
scene1.render();
scene2.render();
});

Just make sure that scene2.autoClear = false

[Dad72]

2 minutes ago, Deltakosh said:

Just make sure that scene2.autoClear = false

Just for understand why autoClear must be false? otherwise what problem do we encounter? I ask the question just to sleep less idiot tonight 

[GameMonetize]

No worry there is no stupid question

If autoClear is set to true then the scene2 will begin by clearing the framebuffer and thus the scene1 rendering will be wipe out

[BlackMojito]

9 hours ago, Deltakosh said:

Hello! There is no limitation to the number of active scenes

In your runRenderLoop function, you can decide to do whatever you want (like rendering multiple scenes):

engine.runRenderLoop(function() {
scene1.render();
scene2.render();
});

Just make sure that scene2.autoClear = false

Hi Deltakosh,

Great thanks for your answer. BTW, how can I do

engine.runRenderLoop(function() {
    scene1.render();
    scene2.render();

    //Post Process using the above two rendered targets
});

 

[BlackMojito]

My current idea is to create an composite scene (without any mesh) with an PostProcessPipeline attaching to its camera. It is always rendered in the last order.

But I need to retrieve the default render target of scene1 and scene2 (and maybe scene3 etc.) so that I can post process them in the PPPipeline of the composite scene. Does any one have know how I can do that? I think that this way, I have a maximum control on my whole rendering pipeline. 

Waiting for your answer, I will take a look at how the post processing pipeline is implemented in Babylon though...

Thanks a lot in advance, guys.

[BlackMojito]

10 hours ago, Dad72 said:

Just for understand why autoClear must be false? otherwise what problem do we encounter? I ask the question just to sleep less idiot tonight 

Lol! Trop de trucs magiques dans BABYLON . I am discovering many many things everyday and like you, if I don't get answer, I sleep an idiot...

[BlackMojito]

1 hour ago, BlackMojito said:

My current idea is to create an composite scene (without any mesh) with an PostProcessPipeline attaching to its camera. It is always rendered in the last order.

But I need to retrieve the default render target of scene1 and scene2 (and maybe scene3 etc.) so that I can post process them in the PPPipeline of the composite scene. Does any one have know how I can do that? I think that this way, I have a maximum control on my whole rendering pipeline. 

Waiting for your answer, I will take a look at how the post processing pipeline is implemented in Babylon though...

Thanks a lot in advance, guys.

I have now successfully rendered my two scenes in the right order. But I have troubles in getting the color buffers of the scenes.

[BlackMojito]

For better illustrating my purpose, I attached a image. Just want to know what the best way is to do so.

My current idea is:

1. Create a PostProcessPipeline with only a PassPostProcess so that I render my scene to a texture

2. Create my main PostProcessPipeline attached to my Overlay Scene. 

3. Connect the output of 1 to 2.

4. Connect MainScene's Depth Buffer and Normal Buffer to 2.

 

However I am not sure if the step 3 is feasible or not. The output of a PostProcess is an InternalTexture. I don't know how I can pass it to my main PostProcessPipeline though? 

 

One more question is that by adding a PostProcessPipeline to my Main Scene, I will lose depth buffer when I render my Overlay Scene. In the case of pure Overlay Scene it might be OK though...

The ideal way would be directly render the color buffer into a texture so that I can decide whether the depth buffer should be kept or not when I render the next scene...

[GameMonetize]

To achieve this goal you will have to rely on RenderTargetTextures and use this textures on a scene to apply the effect you want

Like here:

https://github.com/BabylonJS/Website/blob/master/Demos/PPBloom/postprocessBloom.js#L48

[BlackMojito]

1 hour ago, Deltakosh said:

To achieve this goal you will have to rely on RenderTargetTextures and use this textures on a scene to apply the effect you want

Like here:

https://github.com/BabylonJS/Website/blob/master/Demos/PPBloom/postprocessBloom.js#L48

Is there any difference between this sample and a normal PostProcessPipeline? By doing manually like in the sample? I can control if I want to keep the depth buffer of not?

[BlackMojito]

6 hours ago, Deltakosh said:

To achieve this goal you will have to rely on RenderTargetTextures and use this textures on a scene to apply the effect you want

Like here:

https://github.com/BabylonJS/Website/blob/master/Demos/PPBloom/postprocessBloom.js#L48

OK. On more question, let's say we have

PostProcess A attached to Camera A

PostProcess B attached to Camera B

Can the output of A be one of the texture sampler of B, knowing that they are attached to different cameras?

 

Thanks

[BlackMojito]

And I still lose Depth buffer when I render the second scene if I have any PostProcess for the first scene. I tried to set autoClear = false to my PostProcess objects and Scene2. It is really weird...

[GameMonetize]

sure no problem: https://github.com/BabylonJS/Website/blob/master/Demos/PPBloom/postprocessBloom.js#L58

 

[BlackMojito]

6 hours ago, Deltakosh said:

sure no problem: https://github.com/BabylonJS/Website/blob/master/Demos/PPBloom/postprocessBloom.js#L58

 

Hi Deltakosh, I tried that. But when the underlying postProcess0 is attached to a different camera/scene than the postProcess4, it does not work correctly. The InternalTexture of postProcess0 seems to be cleared.

[BlackMojito]

On 12/5/2017 at 7:10 PM, NasimiAsl said:

http://www.babylonjs-playground.com/#1JUXK5#31

all you need hide your mesh from scene 2

and manage it when you rendertarget before render

http://www.babylonjs-playground.com/#1JUXK5#32

It seems that the CustomRenderTargets of a Scene are rendered before the "default" frame buffer. How can I solve the depth problem then? 

I saw the in the source code there is an option called generateDepthBuffer for RenderTargetTexture. How can use it?

https://github.com/BabylonJS/Babylon.js/blob/3d8773a306937c5af2f683e51eb1ee217ea00bf0/src/Materials/Textures/babylon.renderTargetTexture.ts#L163

Thanks

[NasimiAsl]

you need 3 rendertarget 

1 for depth

2 for normal

3 for new scene layer

let me  make a sample for you ... 

[NasimiAsl]

samples : 

1. make scene http://www.babylonjs-playground.com/#1JUXK5#34

2. make depth material http://www.babylonjs-playground.com/#1JUXK5#35

3. make nrm map : http://www.babylonjs-playground.com/#1JUXK5#36

* nrm have negative side so use nrm*05 + 0.5 to keep all normal data

4. make  main materials  (my personal mats) http://www.babylonjs-playground.com/#1JUXK5#37

5. make render target and postprocess and get back normal vector http://www.babylonjs-playground.com/#1JUXK5#38

6. attach all normal,depth,overlay ,and main color in postprocess http://www.babylonjs-playground.com/#1JUXK5#40

7 calculate and make your effect  http://www.babylonjs-playground.com/#1JUXK5#41

@BlackMojito

http://www.babylonjs-playground.com/#1JUXK5#43

[BlackMojito]

15 hours ago, NasimiAsl said:

you need 3 rendertarget 

1 for depth

2 for normal

3 for new scene layer

let me  make a sample for you ... 

Hi NasimiAsl,

I had done exactly as what you put in the sample code. But if the ""new scene" is not a true overlay but need to compare with the depth buffer written by the main scene, how can I do it? 

I have taken a look into the source code of Scene.ts and it seems that the render targets are rendered before the main frame buffer. That's say we need to compare their depth buffers manually? 

 

So as with your sample, I need to render my "new scene" twice (once for color buffer and once for depth buffer). And then in the final merge shader I compare the depth buffer of my main scene and the depth buffer of my "new scene"? 

Thanks

[NasimiAsl]

i try that kind of sample before and cant find good optimizing when i have 2 scene

so i use a new render target and collect all overlay scene in that and manage that with hide and show

but if you wanna get new scene you most read texture from your new canvas(for your new scene) and send that for your postprocess