Difference in shader quality in three js and babylon js

I am trying render MSDF text, but I saw small issue regarding quality of text where I get some rough white lines around text sort of like aliasing effect but when I use same shader with same uniforms it gives me much better results.

this is from three js

this is from babylon js


what could be issue?

cc @Evgeni_Popov

both are using WebGL under the hood so there shouldn’t be a difference in shaders. Maybe you have some kind of antialiasing turned on the three scene?

that was my initial thought too, but I tried turning anti-aliasing on and off in three js and even without antialiasing I get same quality in three js.

It almost looks like the BJS text is being upscaled. What are your engine rendering settings? BJS tends to default towards compatibility and performance

Both three js and babylon text are of same size and I am not scaling it any example. Though I created sandbox for issue here is link quirky-bose-h7qnq7 - CodeSandbox

I am using default engine settings

You should add needAlphaBlending: true to your shader material:

2 Likes

ohhhhh!!! Thank you. I thought it was some issue with texture mag and min filters. and was also looking around that too.