Slowly showing new frame

Questions
1

Hi, I think this is one of the weirdest questions I ever asked here but let’s see where it leads!

First let me explain: In our viewer as you can see in this example, in the viewer ou Naker we progressively raise the hardware scaling level when the camera stops moving. That way we have a very clean rendering and we do not need too much performance. But we still have to render several frames from 1 to 0.5 hardware scaling level so that this is not too steep.

We just found an even better way to do that, the idea is to calculate only one frame with 0.5 hardware scaling level and progressively putting it in front of the previous one playing with their opacity for instance.
We could do that using two canvas but that will not be effective to build twice the scene.

So my question is: Do you know how we could slowly update the frame with BabylonJS ?

I tried to go through the Engine and Scene API Documentation to see if some Methods or Properties sounded like something which will do that but no clue so far. :sweat_smile:

2

You would need to render your scene at hsl = 1 in a texture, then render at 0.5 in a texture and use a custom shader to mix both in a post process.

But this might cost more than rendering the intermediate frames :slight_smile:

3

Thanks for the tip @sebavan, I am not an expert in shader unfortunately. Do you have an example of one doing omething similar?

I also had an idea where I would use an image in front of the canvas. I could update the source of the img HTML element by doing a screensot of the scene. But then I will need the render the scene at hsl 0.5 without updating it in the canvas.

4

Is there any other way or idea to manage that in the canvas without using a shader ?

5

Maybe something like this relying only on Render Targets ?

https://playground.babylonjs.com/#82ZA1H

Else for canvas it is easy, make 2 canvases on top of each other and play with their opacity.

2 Likes
6

Perfect, I will try both! Thanks a lot @sebavan

7

Hello,

Playing with the layer class as you suggested @sebavan, I managed to find exactly what I needed:
https://www.babylonjs-playground.com/#08A2BS#22

Implementing it in our viewer right now to see the result! :wink:

8

Hi again,

I went further and realized I had to use another scene in order to render at a bigger scale without rendering the real scene (I don’t want to render the real scene for performance reason)
So now I am using UtilityLayerRenderer class in order to make this transition. I have one working playground here: https://www.babylonjs-playground.com/#DEYAQ5#87

But for some reason, I can’t manage to make it work in my project. I just have a blank canvas when rendering UtilityLayerRenderer Scene. I have spent a lot of time trying to figure out the issue but no clue so far.

Can you lead me to a solution? I am currently on version 4.1.0-beta.1

Thanks all and have a great day!! :wink:

9

Awesome NewBalance demo by the way! Very neat.

1 Like
10

Sometimes when something works in the PG and not in a separate program, it’s because the engine is not setup in the same way: in the PG, the stencil buffer is enabled.

I don’t know if the utility layer uses the stencil buffer, but you can try to enable it and see for yourself.

The engine is created this way in the PG:

new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }
1 Like
11

Thanks, @Evgeni_Popov for the piece of advice. Unfortunately, I start my engine with the same options.

I have also updated my packages to use last version 4.1.0 of BabylonJS but it has changed nothing.