Blurry Text on CSS3D

Questions
, ,
1

How do I make this text less blurry? This blur occurs on Chrome and Firefox, and I was wondering if there was a way to reduce it.

image
image1549×862 59.4 KB

I currently change the size of the css3d objects by 0.1, so then they fit in my scene better
css3dObject.scale.set(-0.1, 0.1, 0.1);

2

That’s a CSS problem (browser bug maybe). Essentially the text get blurry in certain situations when using transform: scale, and that’s what css3dObject.scale.set is using under the hood, you can try one of the solutions in this SO, also check if you have the same problem with other browsers.

3

browsers do that for performance reasons but it has gotten considerably worse. :confused:

1 Like
4

I was able to fix the problem by increasing the font size of my object by a scale of ten, and then reducing the scale by 0. Thank you for the help though!

1 Like
5

I find out that best solution for all workers is to use full width of window for text element and after this scale element down to size which you want. It working for me in safari also in chrome and it’s not blury on any stage.

I find right scale for full hd resolution and after this I just recomputing it.

     this.css3d = new CSS3DObject(element.cloneNode(true) as HTMLElement);

     const screenWidth = window.innerWidth;
     const scale = 0.00155 * (1920 / screenWidth);
     this.css3d.scale.set(scale, scale, scale);

     //styles for css
     width: "100vw",
     height: `${computeHeight}px`, //dont use aspect ratio, it's buggy on safari, compute height base on width or use fix height

You can use this scale for css transfrom scale and it should work.