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

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?

[brian428]

Just curious if there was any ETA on when this might be addressed (or if it’s probably not coming any time soon)? It seems like allowing a hook for a render function might be a decent short-term option? Basically, it would leave it up to the developer to determine how to create the formatting configuration for each point (and how to optimize that decision process).

I’m not sure how the WebGL piece of Plotly.js is currently implemented, but I noticed that Three.js seems to handle this sort of thing pretty well. They have a “particle” demo that shows a lot of “points” of varying sizes and colors (https://threejs.org/examples/#webgl_points_random). And seems to keep memory use quite low:

The downside is that Three.js seems to be a very low-level option, so I imagine that trying to wrap it within Plotly.js wouldn’t be a simple task. No idea if that’s worth exploring, but just thought I’d mention it.

[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.