scattergl triggers WebGL errors when using arrays of symbol, color, or size

[brian428]

I'm experimenting with the Plotly.js scattergl chart, and seem to be running into issues when trying to use arrays of symbols, colors, and sizes to allow per-point styling.

Take a look at this fiddle.

When using only a single symbol, size or color, the chart renders fine. But if you comment out the single size and color (lines 48-49), and comment in the use of arrays of values, WebGL dies and the following is shown in the console:

GL_INVALID_OPERATION : glGenSyncTokenCHROMIUM: fence sync must be flushed before generating sync token

[.CommandBufferContext]GL ERROR :GL_OUT_OF_MEMORY : BackFramebuffer::Destroy: <- error from previous GL command

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost

The same thing happens in Firefox as well.

Does scattergl not allow for arrays of values for symbol, style and color? Is there some other way of setting styles on each point that I'm not aware of?

[etpinard]

Hmm. Strange. I was able it to work in https://jsfiddle.net/chs83a7t/2/

Could you update your fiddle to a case that actually outputs the errors you mentioned above?

Thank you very much.

[brian428]

Updated test.

So it looks like it may be machine-specific in some way. I tried it on my desktop machine and it worked, but from my laptop it fails. I honestly don't know enough about WebGL to know why it would work on one machine and fail on another.

Your original fiddle works on both the desktop and the laptop. The problem only seems to manifest once the number of points goes up and arrays of values are used for symbol/style/color instead of single values. Obviously the desktop has a much more powerful GPU than the laptop, but it seems like drawing a graph like this wouldn't kill the GPU. But it sure seems like there is something very different going on under the hood when arrays of values are used instead of single values.

For reference, here's a screenshot of what I'm seeing:

If you can think of anything, or need any more info, just let me know. Thanks.

[brian428]

Also, in case it helps, here is the Chrome GPU log showing the problems.
gpu.zip

[brian428]

I did notice the GPU driver is quite old. This is a corporate-managed machine so I'm not sure if I'll be able to update it myself, but I may also give that a shot.

[etpinard]

I honestly don't know enough about WebGL to know why it would work on one machine and fail on another.

Our WebGL trace types do use some cutting edge specs. This is not really surprising. Thank you very much for this report.

[brian428]

OK, I'll update once I'm (hopefully) able to try it using more current GPU drivers.

[brian428]

Just to follow up here, I was able to install the latest Nvidia drivers, but the WebGL error still appears when using arrays of per-point values for color, symbol or size. Unfortunately, this is a showstopper for me, since I obviously can't move forward with using Plotly.js as a replacement for Highcharts to due this problem.

I'm not sure what else I can try to do here, but if you can think of any information I can offer please let me know.

In case it helps, I'll attach a new Chrome GPU log.
gpu-new.zip

[brian428]

Also, perhaps I should ask: if you need to be able to specify things like color, size and symbol for each point, is there some other way to do this that I'm not aware of? I'm still not entirely clear on why using a single color/size/symbol for all of the points works fine, but using arrays for these causes things to blow up.

[etpinard]

if you need to be able to specify things like color, size and symbol for each point, is there some other way to do this that I'm not aware of?

You could use multiple traces, but that will lead to a significant slow down. I wouldn't recommend it.

I'm still not entirely clear on why using a single color/size/symbol for all of the points works fine, but using arrays for these causes things to blow up.

It should work. This is definitely a bug on our part. Unfortunately, it is machine/browser dependent and won't be an easy fix.

[brian428]

Just thought I would add that part of the issue might be tied to memory use. Here are two screenshots of the Chrome task manager. The first one is my scattergl test without per-point values for color/size/symbol, and the second is when specifying per-point arrays for color/size/symbol. As you can see, memory use really explodes in the second case.

[etpinard]

cc @dfcreative

[dy]

That is the issue of gl-scatter2d-fancy, actually. We can reproduce it in this example by changing POINT_COUNT to 1e5.

That happens because plotly sees array of colors for markers and switches renderer from gl-scatter2d, which is performant one, to gl-scatter2d-fancy, which can style individual markers better.

Fancy scatter creates additional colorBuffer, storing values per marker vertex. Each value takes additional 32bits per item, or 1Gb+ of graphic card memory for 1e5 points.

As a possible solution would be using compressed textures for colors, instead of buffer. Or trying to filter repeating colors. Or just reconsider the need in that many colors.

Also consider FloatArrays length limit, which varies, but <= 2³², or practically < 1e8.

Though it will not remove performance lags of plotly, even comparing with gl-scatter2d standalone.

[brian428]

To be clear, I don't need different colors for every single point. But I do need the ability to change the colors, sizes, and/or shapes for subsets of points (e.g. to mark/highlight points, etc.). This seems like a pretty basic requirement to me. Unless there's some way I'm not aware of to do this, arrays of colors/sizes/shapes is the only possible option, correct?