SVG becomes blurry ONLY when it is too close to camera

Hello,
I tried to use ECharts charts in Three.js with CSS3DSprite, but the pie chart becomes blurry once it’s too close to the PerspectiveCamera. ECharts charts use svg rendering method, and what’s weird in my case is that there exists a “threshold distance” between the pie chart and the camera, and pie charts become blurry abruptly after a certain point, not gradually. The screen record also shows the behavior. Could anyone suggest some potential fixes for this issue?

Source code: three.js/css3d_sandbox.html at 3922c1d5ad4618229f7c8868334a0d9fc93fb49f · xiaoxiaobt/three.js · GitHub
Demo: https://taige.wang/three.js/examples/css3d_sandbox

Interesting. I can reproduce the issue in Chrome. However, I can’t find an explanation for this behavior.

I cant replicate on Chrome Version 105.0.5195.102, weird.
I do however see some warnings related to eCharts which may be relevant?


Weird, only happens to me if i rotate the camera :open_mouth:

I tried to construct an example with minimum efforts so maybe that’s why, but this warning does not show up in one of the react website I’m working on, and the behavior is the same.

Yes, that only happens after dragging the interface (zooming in/out only does not trigger this issue, but it is rare to not drag the interface and move around in most of the use cases)

I’ve also found a weird behavior (which may not be that relevant), when using CSS clip-path with div, it rasterizes immediately in CSS3DRenderer, but if you render it normally on html it works fine. Here is another demo (I really should learn how to use Codepen/jsfiddle soon, at this point please bear with me :sweat_smile:)

Demo: https://taige.wang/three.js/examples/css3d_sandbox_clip_path.html
Source: three.js/css3d_sandbox_clip_path.html at d807da7cbd1da45c90fbe09713117a343326ea7f · xiaoxiaobt/three.js · GitHub

I hope this helps

It looks like there is a similar issue here: CSS objects get pixelated when using CSS3DRenderer with PerspectiveCamera · Issue #17641 · mrdoob/three.js · GitHub

One solution was to scale up you chart pre-rasterization to compensate for the zoom-in. Still trying to figure out what is causing the pixelation. The element is clearly an SVG with a simple matrix transform applied. I see no reason for the pixelation, so weird.