Any way to resize the multiple canvases with avoiding blur issue

Questions
1

Hi, We are creating a preview of a camera in a separate canvas. Our requirement is to show small preview. But doing this main view gets blurred, and its also mentioned in the documents “multiple canvases on the same page should have the same size”

Screenshot from 2022-10-31 13-46-20
Screenshot from 2022-10-31 13-46-20947×575 14.3 KB

Is there any way to achieve similar functionality using BJS with avoiding blur issues, Please note that as we need to show it in a separate canvas we can’t use multiple viewports in a single canvas.

2

Does blur disappear if you resize this canvas container element?

3

No, Actually it won’t allow resizing the canvas directly, doing that automatically scales another canvas.
So, We are trying to scale the container in the following way. And above image is the result of it.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Multi Canvas Camera Demo</title>

		<style>
			html,
			canvas {
				width: 100%;
				height: 100%;
			}

			.mainContainer {
				width: 50%;
				height: 50%;
			}
			.previewContainer {
				width: 10%;
				height: 10%;
			}
		</style>
	</head>

	<body>
		<div id="root">
			<div class="mainContainer" id="mainContainer" touch-action="none"></div>
			<div class="previewContainer" id="previewContainer" touch-action="none"></div>
		</div>
		<script src="multi_canvas_camera_demo.js"></script>
	</body>
</html>
4

Hey,
It looks like the rendering is going on for the resolution of the “preview” component (smaller one). Can you try to switch them around? I guess if you could have higher resolution for bigger container and for the smaller one it wouldn’t be the issue?

4 Likes
5

In the doc, it is said multiple canvas should have the same size (as much as possible) for performance reasons. But it is possible to have multiple different sizes if you are willing to pay for some decreased performances => the blurring does not come from that.

Maybe your canvas.width / canvas.height dimensions are not the right one?

3 Likes
6

@neu5 Yes, I tried to switch it by creating engine with a smaller canvas

var engine = new BABYLON.Engine(previewCanvas, true);

Now it’s working fine, I wonder why its taking a smaller canvas as an input. @Evgeni_Popov yes I agree with you about documentation.

2 Likes