Low resolution render issue

Questions
1

Hello,
I’m using the npm version of Babylon 5, and locally everything is in low resolution.
This is a simple image that show what I see with my local webserver (the render is in low res)

Cattura
Cattura512×640 5.04 KB

But when I deploy the files to the web, the box look in normal resolution…

Cattura01
Cattura01410×608 4.85 KB

Here’s a maybe more evident comparison, with particles
local:

Cattura02
Cattura02929×834 55.6 KB

deployed:
Cattura03
Cattura03888×838 69.4 KB

I think I didn’t experienced such a problem with 4.2 version,
Is there a reason for that?
Many thanks!

this is my code

import { Engine } from "@babylonjs/core/Engines/engine";
import { Scene } from "@babylonjs/core/scene";
import { SpotLight } from "@babylonjs/core/Lights/spotLight";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { Color3 } from "@babylonjs/core/Maths/math.color";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { Tools } from "@babylonjs/core/Misc/tools"

function createScene() {
    var scene = new Scene(engine);
    var camera = new ArcRotateCamera("Camera", 0.0, 1.3, 10, new Vector3(0, 0, 0), scene);
    camera.attachControl(canvas, false);
    const box = MeshBuilder.CreateBox("box", { width: 1, depth: 1, height: 4 }, scene);
    const light = new SpotLight("SpotLight", new Vector3(-5, 5.16, -5.1), new Vector3(1, -1, 1), 1.2, 24, scene);
    return scene;
}

var canvas = document.getElementById("renderCanvas");
var engine = new Engine(canvas);
var scene = createScene();

engine.runRenderLoop(() => {
    scene.render();
});
2

The most common issue is your CSS not setting the right width height on your canvas.

Or after the engine is created so you need to call engine.resize()

If you are using a high dpi screen babylon renders by default at css resolution so you might need to use setHardwareScalingLevel on engine to scale back to the intended res.

2 Likes