Ngl: Browser-specific bugs with labels

[sbliven]

We've noticed some browser-specific bugs while experimenting with SphereBuffer and LabelBuffers. A self-contained test script is here: https://gist.github.com/sbliven/c406d8fad3b800997e09aaf13f104ba1

This script should produce two spheres labelled 'A' and 'B' connected by a cylinder:

Testing on various platforms produced the following results

Mac/Chrome Works as expected
Mac/Safari Works as expected
Mac/Firefox Works as expected

All the above platforms give a minor warning on the console:

ngl.embedded.min.js:667 THREE.WebGLRenderer 76
ngl.embedded.min.js:716 THREE.WebGLRenderer: WEBGL_color_buffer_float extension not supported.

Windows/Firefox Works as expected, but gives slightly different warnings:

THREE.WebGLRenderer 76 ngl.embedded.min.js:667:248
NGL.CifParser._parse 3pqr.cif: timer started

Windows/chrome Doesn’t show spheres or labels, and also has a black background. Errors:

THREE.WebGLRenderer 76
THREE.WebGLRenderer: ANGLE_instanced_arrays extension not supported.
THREE.WebGLRenderer: EXT_frag_depth extension not supported.
THREE.WebGLRenderer: WEBGL_color_buffer_float extension not supported.
Uncaught (in promise) TypeError: Cannot read property 'sphereDetail' of undefined(…)

Windows/IE Doesn’t show spheres or labels, but does show the white background. Errors:

HTML1300: Navigation occurred.
File: ngltest.html
THREE.WebGLRenderer 76
WEBGL11258: Temporarily switching to software rendering to display WebGL content.
THREE.WebGLRenderer: OES_texture_half_float extension not supported.
THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.
THREE.WebGLRenderer: EXT_frag_depth extension not supported.
THREE.WebGLRenderer: WEBGL_color_buffer_float extension not supported.
Timer "NGL.CifParser._parse 3pqr.cif" already exists.

Linux/Chromium Works as expected.

Linux/Firefox Has a major rendering problem with labels. At most zooms they are invisible, but at just the right angle some edge effects are visible indicating that the labels are being included.

[arose]

Thanks for testing this!

Linux/Firefox Has a major rendering problem with labels. At most zooms they are invisible, but at just the right angle some edge effects are visible indicating that the labels are being included.

I know this one, the SDF font does not work on Firefox so I switched it of based on window.navigator.userAgent. Seems that I need better feature detection. What does window.navigator.userAgent say for you?

[arose]

I changed the behavior so that SDF fonts are by default only used on Chrome (8aed8c1d6545d2cbb68f699cdcbf7f2aa61e8ad0)

[harryjubb]

@arose I've found Bowser helpful for making browser checking easier, if that's at all useful. Modernizr being another option, though my checks have been broader (e.g. no <= IE9) than it caters for. Just looked at your commit, I can see that's already taken care of!

@sbliven Do you have a specific testing strategy for multiple browsers/OSes, or are you testing by hand? Just out of interest :)

[arose]

@arose I've found Bowser helpful for making browser checking easier, if that's at all useful. Modernizr being another option, though my checks have been broader (e.g. no <= IE9) than it caters for.

Thx, these are nice, though too much here.

[arose]

Windows/IE Doesn’t show spheres or labels, but does show the white background. Errors:

I see this with IE11 on Win7 in VirtualBox. Very strange, there are no errors only the warnings/infos you see, too. Oddly the cartoon and unitcell representations show up. The TextBuffer (with sdf: false) shows also up when commenting the SphereBufer and CylinderBuffer out.

With Edge on Win10 in VirtualBox everything works.

[arose]

Windows/chrome Doesn’t show spheres or labels, and also has a black background. Errors:

Win7/VirtualBox: no WebGL support
Win10/VirtualBox: works fine

Uncaught (in promise) TypeError: Cannot read property 'sphereDetail' of undefined(…)

haven't seen this, do you have the full error stacktrace?

[sbliven]

@arose Thanks for the fixes. Windows/Chrome and Windows/Firefox are both working as expected now. IE11 doesn't show any of the buffer representations. Interestingly, creating the SphereBuffer (but not adding it to the stage) is enough to prevent the labels from showing. Linux/Firefox still has the ghostly outlines of labels. Adding 'sdf:false' to the text buffer fixes this, so I think your browser detection still isn't working for me.

What does window.navigator.userAgent say for you?

On Linux/Firefox (specifically Xubuntu 14.04.4 and Firefox 46.0.1), this is my userAgent:

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0

Do you have a specific testing strategy for multiple browsers/OSes, or are you testing by hand? Just out of interest :)

Hand testing on various machines in our room

do you have the full error stacktrace?

I can't reproduce this anymore, even using the 477aa76 commit. Maybe I had some caching problems or something. The black background could be consistent with using a cached version prior to dd50890.

[arose]

Adding 'sdf:false' to the text buffer fixes this, so I think your browser detection still isn't working for me.

I haven't updated the builds yet, so you would need to use your own file instead of getting it from rawgit.

[harryjubb]

@sbliven @arose Or, presumably, running build/make.sh?