Blurry Edges with BJS but not in Blender

Questions
1

Hi folks,
so I created a landscape scene within Blender, imported it into the babylonjs sandbox, set up lighting and added effects like glow/bloom. I was able to create the desired scene look, but all the edges are very “blurry”. Any recommendations? They arent that blurry in blender… any thoughts?
Blender:
blender
BabylonJs:
bjs

Thanks again for your help!

2

I would do a test without the effects. Seems like glow might be implemented as a sort of blur.

3

Doesn’t change a lot and I need those effects to create the look I want…

4

Can you share your scene on the Playground? Or a reduced version of it?

5

I mean, the same “blurry” edges/artefacts appear in bjs-playgrounds like the following lego pirate playground (https://playground.babylonjs.com/#TWQZAU#3):
On Desktop:

image
image889×741 401 KB

On mobile even worse rendering and blurry edges:

IMG_2220
IMG_2220750×1334 49.8 KB

6

Oh, the texture resolution is an aspect here. The lego scene skybox texture is just 512x512, so you will get sharper results with a higher resolution image (here’s an example with a 2k Lego Fun | Babylon.js Playground (babylonjs.com)). Maybe your Blender config is exporting the skybox texture with insufficient resolution.

1 Like
7

Babylon by default renders at css size to not blow up perf on low end device.

You can either turn on adpatTo PixelRatio when creating an engine or manually set your dpi: scene.getEngine().setHardwareScalingLevel(0.5);

2 Likes
8

That’s it! As my mobile device has a retina display the engine only renders in half resolution. But by setting the dpi or using the window.devicePixelRatio I am able to increase the render quality/rescale the canvas to the correct screen resolution!

Thanks to all of you :slight_smile:

2 Likes