Render a smaller canvas upscaled

[al404]

Is it possible to render a smaller canvas and upscale it to real browser viewport?

I guess that could help with complex scenes. 

[Nabroski]

I think this already happening
uncomment your css renderCanvas: 100%, to see the actual size of the engine

https://doc.babylonjs.com/tutorials/Optimizing_your_scene

[al404]

No, i don't think that works like that, i use a software that compiles .less files and applies changes to the browser without reloading

if a comment the renderCanvas size i see a really tiny window, after adding 100% and recompiling it gets full browser windows size and is all blurry 

also i notices that the project i'm working on it gets slow on my mac when i keep the browser window at a large size if i scale to a smaller size it gets a good speed

so performance is influenced by viewport size

[Nabroski]

Hello

7 hours ago, al404 said:

so performance is influenced by viewport size

You are not the first one, who came up with this idea, small image less computer power, big image more computer power.
 

7 hours ago, al404 said:

also i notices that the project i'm working on it gets slow on my mac when i keep the browser window at a large size if i scale to a smaller size it gets a good speed

You have to do your performance tests, to get an optimized performance result (small image) without losses to the quality. so your costumers have a thoughtless time while consuming your product and paying money. 
 

7 hours ago, al404 said:

if a comment the renderCanvas size i see a really tiny window, after adding 100% and recompiling it gets full browser windows size and is all blurry 

Yes, caching the result distort every scientific research. Press Ctrl+F5 (will un-blurry everything)
Make also sure babylonjs generate minimaps for you so you have a nice time while developing. And also your texture base size is fits for your needs.

Imagine the last game you were playing (in the last 30years), was a tiny little window, before your screen size was recomputed, isn't that fascinating ?
So many things to ask, this world is a beautiful place.

Keep on exploring

@Deltakosh maybe i'm also totally wrong

 

[GameMonetize]

To give more precision

Canvas size sets by CSS is the DOM element size.

canvas.width and canvas.height define the internal buffer size. This is used by webGL.

By default babylon.js sets canvas.width = canvas.style.width and canvas.height =canvas.style.height. Which means: 1 pixel for 1 pixel.

 

You can change this ratio with engine.setHardwareScalingLevel(2) (ie. the internal buffer will be twice smaller than the DOM element)

[al404]

Thanks, thats is clear

[Nabroski]

Hello 
Just a note: i think its a trail an error to find the balance between performance and quality.

if you do real time competition on any file, particular images make also sure that your render loop of babylonjs has callback to rescale , you can search here in the forum, how to dynamically re scale canvas and engine.   

[al404]

@Nabroski not sure i correctly understood what you said, my project load assets for skybox, ground and mesh on first load i add some images as texture on the go ma are really small

do you mean that ground and sky should be rescaled based on browser size?

[Nabroski]

You said your images are blurry, and i told you to Press Ctrl+F5

make also sure your render canvas has a rescale callback! 

if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
          canvas.style.width = "800px";
        canvas.style.height =   "600px"; 

//....

  window.addEventListener("resize", function () {
    engine.resize();
  });