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.