Hello,
We are trying to render crips UI texts on mobile Hires devices like latest iPhones. Now we are using the engine.setHardwareScalingLevel(1 / window.devicePixelRatio); which makes UI perfect, but of course increasing (tripling) overal resolution of the game. For UI this is exactly what I want, but I want to keep UI texture (and final frame buffer) in high resolution, but rendering game scene in half of resolution to reduce performance impact of this change.Is there any way how to “grab” cameras render texture (without UI) and set something like renderScale = 0.5; to render game scene in half of canvas resolution yet still keeping UI texture in full res? To sum this up:
Canvas - native full resolution like 2556x1179 pixels
UI texture - native full resolution same as canvas, in order to have nice text rendering
Game/Scene texture - half of resolution, or third, in order to save perf
Or is there any other way to achieve nice text GUI rendering and lower resolution game rendering? Because if we do not change the hw scaling level - the texts are not very readable, as the game uses a lot of text and sometimes with a bit smaller font size.
Thanks for any advices
By default the ratio between rendering resolution and texture size is 1. But you can force it to different values with advancedTexture.renderScale. This could be useful if you want crisper texts for instance.
Thanks for the reply. I was trying this before I posted but it was not the result for mobiles I was looking for: SCALED IMAGES - Screenshots are from Iphone.
Maybe it can do what I want and I have some other option set up wrongly, but just changing renderScale is not helping.
advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", true);
advancedTexture.idealWidth = 3008;
advancedTexture.idealHeight = 1390; // If both are set, the idealWidth will be used.
I tried commenting idealWidth and idealHeight out and adding those lines. But then the game both on computer and mobile is very zoomed in.
I store my UI in .json files and load them up and parse them. They are created in Container - Rectangle in GUI editor on the resolution I set for the ideal size so everything is always perfectly position and resized in our given aspect ration we set. We want everything always be position in that ration and on the background is just solid color that is on 100% sizing.
It stopped resizing and is always in the 3008:1390 size and only crop the rest of UI out and not resize.
Aaaaah, ok, I understand your situation better now, thanks.
The thing is, both the renderScale and idealWidth/idealHeight influence on the sizing, but in different ways. Setting the renderScale multiplies the size of the GUI texture: Babylon.js/packages/dev/gui/src/2D/advancedDynamicTexture.ts at master · BabylonJS/Babylon.js (github.com), while idealWidth/idealHeight multiply the size of every element defined in pixels based on the size of the texture (which might have been multiplied by renderScale): Babylon.js/packages/dev/gui/src/2D/valueAndUnit.ts at master · BabylonJS/Babylon.js (github.com). So in this case you wouldn’t need to change the scale of the root container, because idealWidth/idealHeight already takes care of preserving the scaling. You already did something like this, correct, just changing the renderScale and setting idealWidth/idealHeight, which is the third image from your screenshots?
I wonder if we’re missing something on the texture side instead, so I’ll ping @Evgeni_Popov
@carolhmj
Yes the third image is idealWidth and idealHeight set and added renderScale
@kvasss I’m not sure what you mean by canvasSize and guiTextureSize.
I looked at the demo you linked and do you mean that cavasSize is the advancedTexture.rootContainer.scaleX ?
Anyway I tried to do something like this:
engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
...
advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI", true);
advancedTexture.renderScale = window.devicePixelRatio;
advancedTexture.rootContainer.scaleX = window.devicePixelRatio/(1/window.devicePixelRatio); //(x/(1/x) is x^2
advancedTexture.rootContainer.scaleY = window.devicePixelRatio/(1/window.devicePixelRatio); //(x/(1/x) is x^2
//advancedTexture.rootContainer.scaleX = this.advancedTexture.rootContainer.scaleY = window.devicePixelRatio;
//I commented out also this part
//advancedTexture.idealWidth = this.planningScreenAdvancedTexture.idealWidth = 3008;
//advancedTexture.idealHeight = this.planningScreenAdvancedTexture.idealHeight = 1390; // If both are set, the idealWidth will be used.
So I tried different combination of these setting and nothing is working right. Sometimes the UI is only scaled down in middle screen, but then they are too big. But on phone it mostly just results in black screen {maybe zoomed in too much not sure) even when I can see something on the pc.
So maybe if you help me with how to set canvasSize and guiTexureSize you talk about I can test it out thanks so much for trying to help.
@Evgeni_Popov
Does not the PassPostProcess work after the scene is already rendered in hi-resolution and used as input for the PPP, and only downscaled to 0.5 ration? Which means - no performance gain as it still needs to render to full-size first and only downscaled at the end? Or am I missing somethings?
I do not know the BabylonJS codebase much, but if I’m not mistaken - I need to somehow change the camera’s camera.outputRenderTarget to be smaller, let’s say by the ration 0.5 which would “force” rendering to render in lower resolution - which would ended on mobile devices in performance gains - but NOT affect UI texture which should render in 1.0 full size when used native high resolution of target device
Render game scene to render target in 0.5 ratio (saves performance)
Render UI to texture in 1.0 ratio
Combine these two to final render target texture (visible in canvas) which is in 1.0 ratio
The first camera post-process contains the target texture used to render the scene. So, if you use a ratio of 0.5 when creating this post-process, the texture will be created with half the dimensions of the canvas.
This is shown in my Spector screenshot above: the texture used to render the sphere/ground is half the size of the canvas.
I understand what you mean. It will get the game to be lower resolution with higher resolution of UI. But I think (maybe you have some information about how this works in Babylon) post process will shrink it after the process power has been used on the higher resolution so it will not upgrade FPS.
In generic concepts - Camera renders scene to buffer - render-target/color-buffer/frame-buffer - this render-target is used as “input” for Post Process effect, which reads every pixel of this framebuffer and does some magic, like converting the RGB values of every pixel to black and white. But this means, the initial render is already done in hi-res and only “rescaled” using Post Process to second render target (buffer) which is shown on screen. So technically its two-step process (depending on how many Post Processing Passes are used). Is that correct? I’m saying this because I tested this in our use-case:
When game renders using native 1:1 resolution, for example the iPhone 12 Pro its 2532x1170 (setHardwareScalingLevel(1/window.devicePixelRatio) where window.devicePixelRatio = 3 on iPhone), the performance is bad - 15FPS for sake of discussion
When game renders using setHardwareScalingLevel(1) which should be one third of resolution (if I’m not mistaken) like 844x390 and perf is 60FPS
When game renders native 1:1 resolution and your proposed post process pass used - no effect on performance - 15FPS
thanks so much for trying to help.