Flickering (and wrong) images when zooming in about pix-plot

[pleonard212]

This took a while to figure out! @duhaime discovered it was due to a difference in how NVIDIA and AMD GPUs treat casting between integers and floats. I'll let Doug close this with the particular commit to the experimental branch that fixes it...

[duhaime]

I'll close this for now, but please feel free to reopen if you see strange behavior in the future @sonovice

[duhaime]

Hmm, that's really curious. This branch is definitely experimental but I haven't seen this behavior yet.

Is there any chance the output atlas files were somehow fed into the input script? One way to test if that's the case is to see if any of the images in output/thumbs/128px looks like a montage of images. (I've done that accidentally in the past by passing a wonky glob to the input script).

I can't see how the level of detail mechanism could create that kind of montage effect--it just fetches images from the output/thumbs/128px directory, adds them to a canvas texture, and then updates the attribute buffers for the appropriate images.

@sonovice if you have a second, can I ask your operating system and version? Any information you can send on your graphics card would be helpful too...

[duhaime]

@sonovice sorry I should have asked--could you also send your specific browser versions as well if you have a moment?

[sonovice]

I rebuild the entire data (over 47k images) to make sure I made no mistake and went over all files in the 128px folder but nothing suspicious came up. Having one eye on the HTTP requests in the browsers while moving around shows also nothing weird.

Here are some specs of my system:

OS: Windows 10 Pro Version 1803 (Build 17134.648)
Gfx: NVIDIA GeForce GTX 1080 (8 GB), latest drivers

Chromium: v72.0.3626.96
Firefox: v66.0.3
Microsoft Edge: v17.17134

Here's a quick screencast so you get a better picture of the issues: https://youtu.be/Z79qfBUZMys

And just in case I messed up my data, I uploaded everything here: http://www.web226.s186.goserver.host/t-sne/

EDIT:
I also just noticed that the original resolution files are never used in my browsers.

[sonovice]

Just tried another computer: Things work as expected except Firefox only shows black rectangles instead of the 32px thumbnails but switches to 128px correctly. Oh and Chrome crashes constantly if I move around too much.

So I guess it has something to do with my gfx card. Not sure how (if at all) to solve that or even start debugging.

[tokee]

@sonovice Interesting enough, your sample page http://www.web226.s186.goserver.host/t-sne/ works fine on my system (Ubunty + Firefox), but when I try to render some of my own images with the latest experimental checkout, I get the black rectangles for the 32px thumbnails and non-flickering 128px versions upon zoom. Did you change anything since you uploaded the demo page?

[thomasegense]

demo url: http://www.web226.s186.goserver.host/t-sne/
does not work on my firefox, it freezes at 66% with this error on the console:

XML Parsing Error: syntax error
Location: http://www.web226.s186.goserver.host/t-sne/output/centroids.json
Line Number 1, Column 1: centroids.json:1:1
TypeError: this.template is null[Learn More] tsne.js:1663:5
init http://www.web226.s186.goserver.host/t-sne/assets/js/tsne.js:1663
self-hosted:975
onreadystatechange http://www.web226.s186.goserver.host/t-sne/assets/js/tsne.js:1736

It works on both Chrome and Chromium. (Ubunutu)

[tokee]

Update: Uploading to an external server made my experiment work fine and reloading the version served from my workstation's local webserver also made it work. Now it displays fine everywhere, even when I reload. Maybe it's a timing issue?

[duhaime]

If you're using the SimpleHTTPServer (or http.server in Python 3) it could be a "server"-side caching issue. Try changing the port on which you're running to see if that's the case:

python -m http.server 7043 # python 3
python -m SimpleHTTPServer 7043 # python 2

Just change the integer value as a sanity check if you see strange behavior, especially if rebuilding the data...

[duhaime]

@sonovice I'm going to close this issue and create a new one on the FireFox problem, which I can replicate on Windows here. I think solving that will resolve this. If you see other strange behavior please feel free to open a new issue!

[pleonard212]

I've noticed a bit of flickering/texture mis-mapping too; I think it might be dependent on the video card's RAM in addition to the browser. Will try to do some testing to come up with some data...

[duhaime]

That'd be awesome if we could identify a dataset and device + browser that create this problem. There's definitely a flickering problem when images "z-fight" -- two images at the same position will fight for control of the z plane which causes flickering. Jittering the images out a bit is meant to help that.

If you can find a dataset that causes this please let me know! I'll reopen this in the interim...

[pleonard212]

Here is an instance that triggers some flickering (Chrome, Win10, NVIDIA P4000):

http://pixplot.yale.edu/v2/lund/

[duhaime]

The essential detail here was that NVIDIA and AMD evidently handle negative integer typecasting differently (at least in the context of fragment shaders). The change that fixes this behavior is 5dbcc5b#diff-cdb833fcf0651bc90856afe53cba4c30R153

[tfriedel]

I also experience this flickering. This is with a dataset of 17.000 images and a custom model trained on plant diseases.
My environment:
nvidia rtx 2070, windows 11. chrome and edge browser.
It looks like there's two images on top of each other ("z-fight"). However if I then use the lasso tool, there's only one image in this position.

Demo