Capture Set Size RTT that does not distort from scene ratio

Questions
1

I am just trying to get this RTT which is capturing at 256 by 256 to actually capture a square representation of the scene.

https://playground.babylonjs.com/#XYAU7K

I’m not sure what else I would need to change to for this to save the RTT at 256 by 256 but also have it be a square ratio as the end result. If you look at the inspector at the texture tab you will see what I mean. How the sphere is a oval now instead of a circle.

image
image871×938 33.4 KB

2

Hi @Pryme8 ! Let see if @Evgeni_Popov has an idea about this

3

The problem is a side effect of the inspector being opened when you start your PG: don’t open the inspector, start the PG, open the inspector and inspect the texture, it is ok:
image
Why that is so, I don’t know however…

4

I think it’s still doing it, it’s just closer to a square ratio. It does the same thing if the console is open and my mind is boggled as to why.

If you look close you will see that’s still not a circle.

5

You’re right, there’s still a distorsion.

That’s a side-effect of the Playground environment. In the runRenderLoop method setup by the Playground there is this code:

if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    this._engine.resize();
}

Your code is setting the canvas to 256x256 but before pass.getEffect().executeWhenCompiled executes its callback there is at least one frame where the runRenderLoop method can run and so will reset the canvas dimensions because of the code above (clientWidth/clientHeight are not updated when we change width/height and those properties are read only).

The easiest way I found to fix the problem is to replace the engine.resize method by a void method until the screenshot is taken: not very nice but it works :slight_smile:

https://playground.babylonjs.com/#XYAU7K#8

Note that setting the canvas dimensions should be done with engine.setSize: setting the canvas width/height to 256/256 and calling engine.resize() does not work, as this call is using the canvas.clientWidth/canvas.clientHeight to set the canvas.width/canvas.height dimensions.

2 Likes
6

Funny you should say that, I was just coming to that conclusion about the runRenderLoop and was going to post it came back here to say something and you beat me to it. Thank you for your time and effort!

Actually after looking at your way that’s much cleaner. Appreciate buddy!