CSS objects get pixelated when using CSS3DRenderer with PerspectiveCamera

Description of the problem

I’ve made a demo to demonstrate the problem, I tried to remove all the code that’s unnecessary.

Use your mouse wheel to zoom in / out. You can probably see, that on the right, the SVG becomes pixelated, as if it was a low-resolution jpeg, or something. Given the fact that SVG uses vector graphics, it should remain crystal clear and razor sharp, no matter how far I zoom in (like it does with OrthographicCamera - on the left).

What I’ve tried:

• Different browsers. All the major browsers seem to be affected, some of them are worse than others. Chrome seems to be the best, but it’s still very far from perfect:
• Dolly instead of changing the camera’s zoom property. Well, it doesn’t really matter if I change the perspective camera’s position, or its zoom property, the effect seems to be the same.

What I can think of…:

• Maybe the browsers can’t handle some specific transform attributes well, but they can handle others very well…? I’ve noticed that the camera’s div (generated by the CSS3DRenderer) has translateZ when I use PerspectiveCamera, but it has scale when I use OrthographicCamera. Although I’ve tried manually changing it and it didn’t improve anything, so I’m not sure…

Any ideas, anyone?

https://jsfiddle.net/soadzoor/jkn2eugs/6/

UPDATE: After some digging, I’ve figured out that if I remove the perspective: XXXpx; attribute, then it becomes sharp, and also: if I add the perspective: XXXpx; attribute to the one with the orthographic camera, it becomes blurry. So the question: can we replace this attribute to something else (like a transform matrix), to get the same perspective effect minus the blurriness?

UPDATE2: I’ve tried replacing perspective with transform: perspective (the former needs to be added to the parent, the latter needs to be added to the child), and also recreated the effect with matrix3d, based on this: https://stackoverflow.com/questions/8029605/what-is-the-math-behind-webkit-perspective/8029819#8029819 All of these approaches get me to the same blurry image… I’m starting to give up on this, it’s probably a browser limitation that can’t be solved as of now…

Three.js version

• Dev
• r109
• < r109

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

[yomotsu]

FYI: Once you apply CSS-Transform3D, the element will be rasterized at the initial size, and not a vector image anymore, because of GPU-acceleration. prepare a bigger element, then apply 3D, and then scale it down.

[soadzoor]

On macOS Chrome, this improves the quality a lot:

 const svgSize = {
    x: 16,
    y: 16
  };

Wow, I’ve just tried it, and it does make a significant difference on windows-chrome, too! I’m wondering why…? It doesn’t really make any sense, does it…? Smaller size should give us an even blurrier result…?