Inspector without overlay resize the canvas

Bugs
1

I have a simple html page, with just a < canvas> in the < body>. No other HTML code.
My < canvas> and my < body> are 100% Width and Height.

But when I use debugLayer, it redimposes the canvas.

I have to use the overlay: true option to make it work properly. But when I look on the PG, I do not get this problem, I guess the PG has more than just a HTML page like I did.

That’s what I have in picture witout overlay (At the bottom of the image the canvas is no longer full page.)

capure1
capure1.jpg1920×946 583 KB

with overlay

capture2
capture2.jpg1918×952 704 KB

I do not reproduce it on the Playground, but I did nothing extraordinary on my html page. (a cube and the debuglayer in a simple html page)

Here is the code I wrote :

 < body style="width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;">
	< canvas id="canvas" style="width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;"></canvas>			
	< script>
	var canvas = document.getElementById("canvas");
	
	var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
	engine.enableOfflineSupport = false;
		
	window.addEventListener("resize", () => {
		engine.resize();
	});
	
	var scene = new BABYLON.Scene(engine, {useGeometryIdsMap: true, useClonedMeshhMap: true, useMaterialMeshMap: true});	
	scene.shadowsEnabled = true;
	scene.autoClear = true;	
	//scene.hoverCursor = "";		
	scene.ambientColor = new BABYLON.Color3(0.33, 0.33, 0.33);
	scene.clearColor = new BABYLON.Color3(0.85, 0.85, 0.85);
	
	var hemisphericLight = new BABYLON.HemisphericLight("hemisphericLight", new BABYLON.Vector3(0, 1, 0), scene);
	hemisphericLight.intensity = 1.0;
	
	var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
	camera.attachControl(canvas, true);
		
	scene.cameraToUseForPointers = camera;
	camera.applyGravity = false;
	camera.ellipsoid = null;
	camera.keysUp.push(90); // Z
	camera.keysLeft.push(81); // Q
	camera.keysDown.push(83); // S
	camera.keysRight.push(68); // D
	camera.minZ = 0;
	camera.maxZ = 6000;
	camera.speed = 0.5;
	scene.activeCamera = camera;
	
	var mesh = BABYLON.Mesh.CreateBox(name, 1.0, scene, false);
	var material = new BABYLON.StandardMaterial("StandardMaterial", scene);
	material.diffuseColor = new BABYLON.Color4(0, 1, 0, 1);
	mesh.material = material;
	
	engine.runRenderLoop(() => {				
		scene.render();			
	});
	
	scene.debugLayer.show();	
	</script>
2

Hi D72, good to see you again.

I noticed that the canvas height ATTRIBUTE (not CSS style height)… changes from 960px+… to around 660px… after the debug layer show. (Seen via Firefox document Inspector in f12 dev tools).

Although there still may be problems in the non-playground debug layer, YOUR issue can be “worked-around” like this:

scene.onAfterRenderObservable.add(function(){
	canvas.setAttribute("height", "1000px");
});

I added it AFTER the debug-show, but it probably doesn’t matter. That worked for me, and it might help us find the issue/bug.

Update: If I add height=225 to the canvas element (an attribute… so not inside the STYLE quotes)… that also works (for me, at my screen resolution). Strange. d72test01.zip (1.4 KB)

3

Hi Wingnut,

I come every day to follow Babylon, but I do not post much more lately.

So that the problem does not appear, I use:

scene.debugLayer.show({handleResize: true, overlay: true});

But if I use this:

scene.debugLayer.show();

The problem appears. But I see that in the Playground, this problem does not appear in this way.

I feel that the inspector is sizing according to the elements it contains on the right without using the option overlay: true

1 Like
4

In fact, I understood why. It is necessary that :

html, body {
        width: 100%;
        height: 100%;
}

If I do

   body {
            width: 100%;
            height: 100%;
    }

I have the error. I must also put it for the tag < html> and the error disappears.

Problem solved. Careless mistake.

1 Like
5

No worries! Thanks for sharing your finding (and welcome back! long time no see :))

1 Like
6

Indeed. I come regularly anyway. I will never let go of Babylon who is “généalissime”.

1 Like