Hi there.
We’re building a setup on a fair to present our Babylon environment on a 4K monitor.
The site is driven by a broadsign media player,
As you can see, it’s only the 3D canvas from babylon which is pixelated.
While the html content is displayed correctly.
Is there anything we can do here to improve the quality?
This is what it should look like:
Thanks in advance for a quick response 
Pieter
Hi, we don’t have a lot of info here. Can only guess. Starting with a question: Are these bikes and objects actually planes or sprites with a png or are these 3d objects? I’m asking because I’ve never seen such level of pixelisation before. What’s this media player, possible to have a look at it? I cannot preview it without asking for a free test. Would you have a link to your project to share with us?
Indeed, you’re right!
Here is a link to the online platform: Epsilon Cities
So the babylon is embedded in a vue/vite setup.
But on desktop and mobile the objects show sharp.
All objects are 3D, some with a texture, but cannot reproduce the pixelation issue here on my system.
I’m waiting on the specs for the device from my client, will let you as soon as I get the details.
Thanks!
Pieter
OK, thanks. I have no experience with this so I will let someone else answer. For easing however (because I tested it on non-4K and it looks perfect), can you confirm the issue happens only with a 4K Monitor? Thx, will call in some people for you on this @RaananW May be you could kindly have a look at this?
Hi!
What’s the size of your canvas? It feels like you set it to a low resolution or that the hardware scaling factor should be tweaked. Any chance of seeing it live to check?
It is live with the link above Only thing I do not have a 4K monitor (and then no knowledge of vue and broadsign media player.
Oh, sorry, just saw this link! I’ll check it on different screens soon
Thanks to the both of you.
I also work on multiple non-4K monitors, which don’t have any issue.
Testing this in the dev tools from chrome emulated with 4K also displays correctly.
It’s especially strange that the content in html which is in front of the 3D canvas renders sharp, only the canvas itself comes out pixelated.
Looks like it’s forced into a lower resolution, while the rest stays the same.
Thanks for the input, if I have more info I’ll share it here.
Pieter
can you check what the hardwareScalingRate of the scene on this screen?
scene.getEngine().getHardwareScalingLevel()
is it different than the ones on screens that display it correctly?
No answer from @Pieter_van_Stee so far but I believe you pointed the right thing. In fact, I’m about 90something percent sure it must be that. Admitting we would set this value to 4 (like a random stupid media player could do we would pretty much get this result, right?
Edit: Do you think their would be a way to avoid or prevent this. Since there are more and more of these fancy mediaplayers florishing around the globe now and claiming to master 4K and all media?
Hi and thanks for this debug information to the build, however the client had to present with the babylon scene. In the mean time it’s been very busy and I haven’t been able to talk to him about this.
Next week we have a meeting to go over the project.
I’ll make sure to ask if he has had the option to see what the scaling level was, and post it here.
I’ll get back to you about this.
Thanks for following up!
Pieter
