Fire, Water & PostProcess issues...

[meteoritool]

Hi everyone,

I've had issues with some things that I'd like you to review maybe.

Here is a simple PG scene, combining two excellent demos : water and fire materials. A candle is over a calm beach, 
http://www.babylonjs-playground.com/#1SLLOJ#224
#Question 1 : if you move the camera just to look up, right from starting position, you'll notice the reflective texture on water becomes glitchy at the bottom of the canvas. How to avoid that ?

Next, I'd like to apply blur post-process, but only on the flame.
#Question 2 : Is there a simple way to add/remove mesh from being rendered by the rendering pipeline ? Something like BABYLON.StandardRenderingPipeline.excludedMeshes[ ] ?

Here is the result when applying the pipeline :
http://www.babylonjs-playground.com/#1SLLOJ#225
#Question 3 : In this example the fireMaterial has trouble rendering its opacityTexture through the StandardRenderingPipeline. Is it a bug ? How to avoid that kind of glitch ?

So from my researches, in order to exclude certain elements from being rendered by the pipeline, I have to create multiple cameras with different layerMasks. So only the flame is rendered in the secondCamera :
http://www.babylonjs-playground.com/#1SLLOJ#226
#Question 4 : In this example, the waterMaterial becomes invisible, after adding another camera. Also, there seems to be a 'delay' when looking around, between layerMasks, the flame is no more 'attached' to the candle...

Anyway let's continue, then adding again the rendering pipeline, but only to the secondCamera :
http://www.babylonjs-playground.com/#1SLLOJ#227
#Question 5 : The scene refuses to render if only one camera is applied on the StandardRenderingPipeline.cameras, is it a bug ? Or is it impossible ?

Thx for looking into that if you have time 

 

[max123]

a candle over a calm beach would make my wife very happy...

[GameMonetize]

1. This is unfortunate but cannot avoid it as the reflection done by the watermaterial does not use a cubetexture but a simple texture2d (and in this case the lookup tries to get data out of the texture)

2, 3, 4, 5. ping @Luaacro

 

 

[Nabroski]

@meteoritool
1.)
for me it is a very natural effect
https://fr.wikipedia.org/wiki/Saint-Georges-Majeur_au_crépuscule

with you candle example it looks strange yes, but with a moon, ...i can image its cool that nature works that way.
here it gets a bit better, becourse i change get y reflection direction of the wave.

http://www.babylonjs-playground.com/#1SLLOJ#228
 

[meteoritool]

@Nabroski

I was talking about this ;-)

[Nabroski]

Funny. But yeah also sad.

I recommend over a long distance to learn how to use shaders and a bit of webgl background. I also had a slow start, but now, i already read advanced papers on some techniques. 
http://www.babylonjs-playground.com/#1YHPOU#5


Lets image you just have to change a little number here
https://www.eternalcoding.com/?p=263

[julien-moreau]

Hi @meteoritool !

Here are my answers (not in the order) :

1. Deltakosh replied

3. Yes, the layer masks are a solution. In fact, the standard rendering pipeline is only a set of chained shaders which are post-processes applied on the final render of the cameras attached to. You have to manually exclude and include them from the cameras

2. This is a normal effect if we consider the existing depth renderer system. In fact, the depth renderer (which renders the depth in a texture) only works on opaque meshes and alpha test meshes (not meshes with opacity). Unfortunately, the only solution I see here is to update the depth renderer to be able to compute custom depth functions, and in this example the custom depth function the fire material should define because flames are animated using the pixel shader. This can be a possible evolution to get your set of effects working well

4. I see the delay you're talking about and I don't know why it is happening. @Deltakosh, any idea ? For the water which becomes invisible, it is a known possible bug. In fact, the water material uses the "scene.activeCamera" camera to compute the mirrored camera position (reflection) and set the clip plane. I add this to my todo list and will come back with a possible fix

5. Absolutely not a wanted behavior lol. When I deactivate the depth of field, I get it working well. I have to dig if it comes from post-processes pipelines, cameras, the pipeline itselft or the depth renderer (which is used to compute the depth of field)

I come back with more answers soon !

[Nabroski]

this is kind of pre alpha version, i never will finish it, but you!  - you have to tweak the values a bit, then i will work, like Monet have painted it. very cheap, works everywhere
http://www.babylonjs-playground.com/#1SLLOJ#230