On load camera is skewed, resizing canvas fixes it

Bugs
1

Hey any help would be greatly appreciated! Having alot of trouble isolating the issue. Will attempt a PG but was hoping from looking at the gif someone would know what the problem is off the top of their head.

  • Presents on Chrome, not reproducible on Firefox, both latest.
  • Babylonjs 4.1.2 and 5.8.1
  • On load the camera is askew, changing the canvas dimensions fixes it.
  • Appears inconsistently.
  • Might be a red herring, but when I cut out the asset loader it fixes it.
  • Tried simplifying the scene down and couldn’t isolate the issue.

Jun-01-2022 14-08-34

The order things are executed

  1. Engine setup
  2. Setup lights
  3. Camera setup
  4. Load assets
  5. Instantiate models for the scene
  6. engine.runRenderLoop

Various code snippets:

    const canvas = document.querySelector('canvas');
    this.engine = new Engine(canvas, true);
    this.engine.inputElement = canvas;
    this.scene = new Scene(this.engine);

    const camera = new ArcRotateCamera("Camera", 0,0,0, new Vector3(0,0,0), scene);
    camera.setPosition(new Vector3(0, startRadius * Math.sqrt(3)/2*.75, -startRadius / 2));
2

Try using a Resize Listener

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

And also try removing this line:

this.engine.inputElement = canvas;

Here is an initializer that i usuarlly use:

document.addEventListener(“DOMContentLoaded”, startGame);
var canvas, engine, scene;

function startGame() {
// Set Canvas & Engine //
canvas = document.getElementById(“renderCanvas”);
engine = new BABYLON.Engine(canvas, false);
scene = createScene();
}

var createScene = function () {

// Scene //
scene = new BABYLON.Scene(engine);
// Directional Light //
var dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-2, -2, -1), scene);
dirLight.intensity = 4.0;
dirLight.position = new BABYLON.Vector3(20, 40, 20);

scene.clearColor = new BABYLON.Color3(0,0,0);
scene.ambientColor = new BABYLON.Color3(0,0,0);
scene.autoClear = false; // Color buffer
scene.autoClearDepthAndStencil = false; // Depth and stencil, obviously

return scene;

}

3

Hey thanks but unfortunately the engine is already resizing based on the resize event, which is how the canvas element’s width is being changed in the gif.

1 Like
4

Is it an different event that should be observed on Chrome? ping @sebavan

5

nope resize only, hard to tell here without a repro ?

6

Alright thanks guys for looking into this but I think it’s a system specific issue and I can’t expect you guys to spend time resolving it for my niche case (I’m on OSX 10.13 5 years old no longer supported).

  • I managed to boil it down to a very simple and relatively reproducible example
  • Occurs rarely without asset loading
  • Occurs frequently when loading an asset
  • Can’t reproduce in latest Chrome on Windows
  • Can’t reproduce in latest Chrome on OSX 13.14

Maybe there’s some graphics api fallback that chrome is using for my version of OSX that they aren’t testing much. Guess I’ll update my OSX – been avoiding it trying to keep my dev environment consistent (nothing like dealing with new problems when upgrading to the next version of X).

For the curious:

const canvas = document.querySelector('canvas');
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
const scene = new BABYLON.Scene(engine);

window.addEventListener("resize", () => engine.resize());

scene.ambientColor = new BABYLON.Color3(1, 0, 1);
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
camera.setPosition(new BABYLON.Vector3(0, 800 * Math.sqrt(3) / 2 * .75, -800 / 2));

loadAssets().then(() => {
  var boardMat = new BABYLON.StandardMaterial("board_mat", scene);
  boardMat.diffuseTexture = new BABYLON.Texture("img/board.jpg", scene);
  const board = BABYLON.MeshBuilder.CreateBox("board", { width: 1200, height: 25, depth: 1200 }, scene);
  board.position.y = -12.5;
  board.material = boardMat;
  board.isPickable = false;

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

async function loadAssets() {
  const assetsManager = new BABYLON.AssetsManager(scene);
  assetsManager.useDefaultLoadingScreen = false;
  assetsManager.addTextureTask('whatever', 'whatever');

  return new Promise((resolve, reject) => {
    assetsManager.onFinish = resolve;
    assetsManager.onTaskError = () => console.log('error loading');
    assetsManager.load();
  });
}
1 Like