Change ratio before render

[Nico]

Hi guys,

I need some help (once again ), I would like to know if it is possible to change the ratio just before making a render ? I would like to use this with a renderTargetTexture, I can easily save previous values, stopRenderLoop, make my render on my texture, restore previous values, and runRenderLoop again.

 

Thanks for reading and helping !

Nico.

[Nico]

I've found something, but it's more a hack than a solution :

canvas.style.width = "auto";canvas.style.height = "auto";canvas.width = newWidthValue;canvas.height = newHeightValue;scene.render(); //To get immediately the right ratio and display//Do what I want to do//Restore previous valuescanvas.style.width = previousSavedWidth;canvas.style.height = previousSavedHeight;engine.resize();

If someone have a better way to do that, please share

 

Edit:

Assuming there is no inline styling on renderingCanvas on width and height, an easier way could be :

canvas.style.width = "auto";canvas.style.height = "auto";canvas.width = newWidthValue;canvas.height = newHeightValue;scene.render(); //To get immediately the right ratio and display//Do what I want to do//Restore previous valuescanvas.style.width = "";canvas.style.height = "";engine.resize();

[Artem]

I just leave engine.resize() in the end of the engine.runRenderLoop function, but before the scene.render(), of course (maybe it's a bad way, though).

[Nico]

Thanks for answering !

With that it will be working, but not for my (special) case, because I call the render method from my renderTargetTexture manually (outside the renderLoop), so if I change the canvas size, call engine.resize(), and render my texture, sometime the renderLoop haven't yet call the scene.render(). 

And I'm not sure, but I think that is not very good to call engine.resize() inside the renderLoop since it will be called a lot, and in most case, it just do the same calculation with the same result for each frame.

[GameMonetize]

I'm not sure to understand: if you render to a texture the canvas is not used at all and the viewport should be set to the texture ratio

[Nico]

It will be easier to understand with some screenshots :

What I get inside the rendering canvas

 

And here is what I get with a render target texture (size = 1024) :

 

If I execute the code I have posted before, I get this :

 

I don't know if there is a bug, or if I did something wrong.

[GameMonetize]

Could be a bug

could you share your code to that I can try to find the bug?

[Nico]

Yep, you can find my code in my babylonJS fork at the bottom of the file, I have created a function called "createScreenshot" my code using renderTargetTexture is inside.

[GameMonetize]

Ok bug found!

 

I'll fix it for next version

[Nico]

Thanks for the bug fix !

I have just remembered one thing, for my createScreenshot method, I have to flip my picture on Y axis to get the right picture, is it normal ? (Because of WebGL ?)

[GameMonetize]

Yes it is

[GameMonetize]

The fix is already on the github but you have to build the minified version to test it

[Nico]

I have build the latest version available on GitHub, but I have the same result as before, I can't find where is your fix, I assumed it was in this commit : 05358eeb but there to much additions/deletions to locate the fix

[GameMonetize]

The mian change is in renderTarettexture.js:

 if (!this._doNotChangeAspectratio) {                scene.updateTransformMatrix(true);            }            if (this.onBeforeRender) {                this.onBeforeRender();            }            // Render            this._renderingManager.render(this.customRenderFunction, this.renderList, this.renderParticles, this.renderSprites);            if (this.onAfterRender) {                this.onAfterRender();            }            // Unbind            engine.unBindFramebuffer(this._texture);            if (!this._doNotChangeAspectratio) {                scene.updateTransformMatrix(true);            }

Then also into engine.js:

 public getAspectRatio(camera: Camera): number {     var viewport = camera.viewport;     return (this.getRenderWidth() * viewport.width) / (this.getRenderHeight() * viewport.height); } public getRenderWidth(): number {     if (this._currentRenderTarget) {         return this._currentRenderTarget._width;     }     return this._renderingCanvas.width; } public getRenderHeight(): number {     if (this._currentRenderTarget) {         return this._currentRenderTarget._height;     }     return this._renderingCanvas.height; }

[Nico]

I have just fetched the latest changes with the code you posted here, and it now works perfectly ! Thanks a lot