Canvas resizing leads to render problems in WebGPU

Bugs
,
1

Hi :slight_smile:
When creating a scene, like in the code snippet below, where the canvas is resized when the window/tab of the browser is resized, the WebGPU engine fails to produce a rendered image of the scene.

The following messeges were logged into the console:

image
image2382×341 36.7 KB

The same code is working perfectly with WebGL engine.

const canvas: HTMLCanvasElement = document.createElement('canvas');
document.body.appendChild(canvas);

const engine = new BABYLON.WebGPUEngine(canvas, { antialias: true });
await engine.initAsync();
// const engine = new BABYLON.Engine(canvas, true);

const scene = new BABYLON.Scene(engine);

// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;

// Our built-in 'sphere' shape.
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

// Move the sphere upward 1/2 its height
sphere.position.y = 1;

// Our built-in 'ground' shape.
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

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

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
                    
    engine.resize();
}

window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();

Thank you for investigation & kind regards :slight_smile:

2

You should pass true to the resize call because WebGPU needs some additional processing when resizing the canvas (and passing true will also work in WebGL).

3

Nice :slight_smile: That worked. Was not aware of that parameter. Thank you.

4

In this case, can you override it in webgpu to force true @Evgeni_Popov ? this would prevent questions I guess ?

1 Like
5

In fact, we don’t have to pass true in the Playground case when you resize the rendering window, so it’s specific to this case. I think it’s because the canvas width/height are explicitely set by code before calling setSize, whereas it is a CSS rule which is updating the dimensions in the Playground case.

1 Like