[BUG] Antialiasing seems broken on linux

[Luthaf]

Describe the bug

The same code creates the following images, respectively on macOS (top) and linux (botom)

While the antialiasing is good on macOS, it does not seems to work on the linux machine. This issue is particularly visible for small canvas.

I've tried this on both Firefox and Chrome on both OS, and they all use the same hardware (native macOS, VM for linux).

One possible difference is that the linux VM is using WebGL 1 rendering, while the macOS version uses WebGL 2. Another possibility is that both OS are rendering a high-DPI/retina screen, but only macOS knows about it. I'm doubting that these are the core issues since @ceriottm is also seeing the same bad antialiasing running ubuntu natively, with WebGL2 enabled.

Finally saving the content of the canvas to a png, it looks like 3Dmol itself is producing the exact same image, and most of the difference comes from how the browser then downsample and render this image.

To Reproduce

Load the HTML below

```

```

Expected behavior

Both OS should have the same anti-aliasing behavior. I'm not sure how much control we have on this though =|. I would appreciate any pointer/idea you have to improve the final rendering!

Desktop (please complete the following information):

• macOS 10.14.6, Firefox 87 & Chrome 92
• Ubuntu 18.04, Firefox 87 & Chrome 89

[dkoes]

I'm always running linux and I don't see this. If you go to https://webglreport.com/ does anything suspicious pop up (e.g. software rendering or lack of antialiasing support)? Here's my output:

Platform:   Linux x86_64
Browser User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36
Context Name:   webgl2
GL Version: WebGL 2.0 (OpenGL ES 3.0 Chromium)
Shading Language Version:   WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)
Vendor: WebKit
Renderer:   WebKit WebGL
Unmasked Vendor:    Google Inc. (NVIDIA Corporation)
Unmasked Renderer:  ANGLE (NVIDIA Corporation, GeForce GTX 750 Ti/PCIe/SSE2, OpenGL 4.5.0 NVIDIA 460.32.03)
Antialiasing:   Available
ANGLE:  No
Major Performance Caveat:   No

[Luthaf]

Looks like I have Antialiasing disabled =/ I'll check how I can workaround this.

Platform:   Linux x86_64
Browser User Agent:     Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Context Name:   webgl
GL Version:     WebGL 1.0
Shading Language Version:   WebGL GLSL ES 1.0
Vendor:     Mozilla
Renderer:   Mozilla
Unmasked Vendor:    VMware, Inc.
Unmasked Renderer:  SVGA3D; build: RELEASE; LLVM;
Antialiasing:   Not available
ANGLE:  No
Major Performance Caveat:   No

[Luthaf]

But on @ceriottm machine antialising is enabled ... This is really strange!

Platform:   Linux x86_64
Browser User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.72 Safari/537.36
Context Name:   webgl2
GL Version: WebGL 2.0 (OpenGL ES 3.0 Chromium)
Shading Language Version:   WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium)
Vendor: WebKit
Renderer:   WebKit WebGL
Unmasked Vendor:    Google Inc. (Intel)
Unmasked Renderer:  ANGLE (Intel, Mesa Intel(R) UHD Graphics 620 (KBL GT2), OpenGL 4.6 (Core Profile) Mesa 20.2.6)
Antialiasing:   Available
ANGLE:  No
Major Performance Caveat:   No

[ceriottm]

I suspect the issue here might be that antialiasing is enabled but "weak" so the structure looks "jagged" as if antialiasing were off

[dkoes]

Is this only on high def resolution monitors? Do you see the same problems on 3dmol.org (i.e., is this unique to your setup)?

[ceriottm]

I think you may be honing in on the problem. It is definitely more evident on a retina display. This is from a hi-def display

[ceriottm]

and this a normal monitor

[dkoes]

This is most likely my fault, based on this comment (that I wrote) in renderer.js:

        //with antialiasing on (which doesn't seem to do much), render at double rsolution to eliminate jaggies
    //my iphone crashes if we do though, so as a hacky workaround, don't do it with retina displays
        if(_antialias && this.devicePixelRatio < 2.0) this.devicePixelRatio *= 2.0;

I'm guessing your window.devicePixelRatio is >= 2.0.

[ceriottm]

So, indeed window.devicePixelRatio is 2.0, and if I reduce it to 1.0 (and get blind in the process of writing this comment), situation gets way better!

[Luthaf]

my iphone crashes if we do though, so as a hacky workaround, don't do it with retina displays

I guess this crash comes from requiring too much processing power? Is this still the case nowadays? I have an old-ish iphone (5s from 2013) on which I can run some tests if that helps.

Alternatively, we could change the test to check for phones with high-DPI screens directly (using something like the screen size or user agent to know if the browser is running in a phone). If you have a preferred resolution, I can send a PR!

[ceriottm]

Alternatively, we could change the test to check for phones with high-DPI screens directly (using something like the screen size or user agent to know if the browser is running in a phone). If you have a preferred resolution, I can send a PR!

Checking whether this is being used on a mobile device seems the most sensible heuristics to me. A modern desktop can handle the oversampling.

[dkoes]

It may not even be an issue anymore. I'm preoccupied with putting together a lecture on 3D Steerable CNNs right now, but will look at this in depth in a couple days.

[ceriottm]

Thanks. Just want to say that getting this level of responsiveness from the maintainer of a scientific package is amazing. Really makes one want to contribute and help out - so if there's any way we can give back just let me know. Also going forward, given we are from a more materials science community, I believe we could contribute quite a bit in terms of features for periodic systems, so let us know if you are interested.

On Tue, 20 Apr 2021 at 15:12, David Koes @.***> wrote:

It may not even be an issue anymore. I'm preoccupied with putting together a lecture on 3D Steerable CNNs right now, but will look at this in depth in a couple days.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/3dmol/3Dmol.js/issues/512#issuecomment-823262464, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAIREZ5YBSPC36GC223Q7ALTJV4TVANCNFSM43F5M3SA .

[dkoes]

FYI, I have confirmed this is still a problem on iOS with Safari (webpage crashes). Interestingly, Chrome on iOS works fine. It looks like if I set the antialias property of the GL context to false, the problem goes away and I don't see a visual difference. I need to rustle up a few more different machines/browsers/display types and test this before committing though (specifically my macbook needs to get back from repair and there's a hidef screen at work I want to test on).

[dkoes]

Fix: 788bc6 Please verify this works. (3dmol.org should have the fix).

[ceriottm]

I confirm 3dmol.js now antialiases properly also on a HiRes display. This is now almost identical to the rendering on a normal pixel density display. Thanks a lot!