CSS objects get pixelated when using CSS3DRenderer with PerspectiveCamera

[soadzoor]

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

[WestLangley]

On macOS Chrome, this improves the quality a lot:

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

However, on macOS Safari, both renderings are blurry.

It would be nice to know if this issue is svg-specific.

@mrdoob Was CSS3DRenderer even written with SVG elements in mind?

[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.

[mrdoob]

What @yomotsu said. I don't think there is much we can do here.

[soadzoor]

Except this is not true, at least not for every CSS-Transform3D: "Once you apply CSS-Transform3D, the element will be rasterized at the initial size"

In fact it seems that it will be rasterized only because of the perspective component. I can scale, translate and rotate it, and it stays razor sharp (see the orthogonal version).

Anyway, I also think there's not much we can do here.

I'm also aware of this workaround: "prepare a bigger element, then apply 3D, and then scale it down.", but if I use a too big initial scale, safari on ios devices crashes. I'll have to find the balance and make compromises, it seems.

[Mugen87]

I don't think there is much we can do here.

Closing then. After all there is a workaround to mitigate this issue 👍

[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..?