SDF strategy

[dy]

SDF method to render fancy scatter. I reached 3e6 custom points.

Changelog

• Visible range of points is filtered with snap-points-2d and binary-search-bounds, which solves webgl memory overflow issue, see Introduce snap-points strategy #4
• Characters are rendered with SDF method via font-atlas-sdf, that extends data limits (up to 2e6) and removes heavy vectorization modules text-cache and vectorize-text
• Fixed bug of inverted text direction
• Position and other buffers squashed for optimized loading

Limitations

• Big number of big-sized points is now somewhat slower to render, hopefully it is rare case.
• Number of available colors is limited to 256
• Number of available characters is also limited, depending on point size

TODO

• Render borders
• Filter out rendering interval by boundaries
• Make adjustable character texture size
• Make antialias step absolute
• Test font atlas character wrapping
• Test various viewboxes
• FIXMEs in code
• Make sure no regression introduced, in particular hi-precision points, cross-browser stability, plotly.js tests
• Add demo, elaborate readme

Some observations

• scattergl still renders up to 1e8 points, whereas this patch is only 1e6 points. That is due to size/borderWidth/char/color buffers, it is impossible to get rid of them. We can try to patch gl-scatter2d to take color variations though. Or we can think of an alternate scatter plot with multiple render passes for different data groups. Although for big data we need special data structures, like wavelets, see ref.
• Interactions are slower than scattergl with 1e6 points due to heavier rendering. We can try to render texture with data and re-render on update only, not during the pick.
• Point size is off a bit (pixelRatio was the reason)
• Colors blending is different (turned out we need special blending function)
• Texture error
• No point weight (need we?)

Possible optimizations

• Cache rendered font, grouped colors etc to reduce update calculations
• Re-render data only in update into texture, draw rendered texture in idle/pick mode

[dy]

@etpinard thanks for the feedback, fixed everything except for marker displacement.
Turned out that marker is aligned a bit off inside of font itself:

Old gl-scatter2d-fancy aligned the point vertically regardless of font baseline etc, based on glyph shape. Here we have a hard time doing that.

One way I see is replacing marker in gl_markers from ● to • (← see how bolder bulled is lower) and adjusting bullet size.
The other way is trying to find a font with better vertical alignment for bullet.
Also I can manually adjust offset inside of the font (ad-hoc).

[dy]

@etpinard fixed everything. Turned out all marker glyphs used in plotly are shifted downwards within font, so we can safely use char offset.

The mentioned tests work alright except for point arrangement. How much is it of importance?

[etpinard]

Thanks @dfcreative ! I'll give this PR another look at some point today 🎉

[etpinard]

@dfcreative fantastic. I confirm that the hover picking issue of #5 (comment) is fixed ✅

In addition, the new marker offset still generate a diff in the image test, but nothing to worry about at first glance 🎉

Unfortunately, the marker.line.width computations are still off. See new diff here

Moreover, when generating the new baseline one after the other, it some case the axes failed to be drawn e.g. for the gl2d_10:

reminiscing of https://github.com/plotly/streambed/issues/6307

[dy]

@etpinard yes, sorry about colors, I've merged your PR to color-id without revision - turned out we can not check like that here.
As for missing axes - could you help me reproduce that? I am facing troubles getting it, I run

const Plotly = require('plotly.js');

let list = [
	require('plotly.js/test/image/mocks/gl2d_12.json'),
	require('plotly.js/test/image/mocks/gl2d_14.json'),
	require('plotly.js/test/image/mocks/gl2d_17.json'),
	require('plotly.js/test/image/mocks/gl2d_10.json')
]

list.forEach(mock => {
	let div = document.body.appendChild(document.createElement('div'))
	Plotly.plot(div, mock.data, mock.layout).then((div) => {
		return Plotly.toImage(div).then(dataUrl => {
			let img = document.body.appendChild(document.createElement('img'))
			img.src = dataUrl
		})
	})
	.then(() => {
		Plotly.purge(div)
	})
})

and it's fine

[etpinard]

yes, sorry about colors, I've merged your PR to color-id without revision - turned out we can not check like that here.

No worries! I pulled down the color-id latest changes and the marker.line.width are back to form! That is, at least in the browser, something is off in our image-test container though:

looks like the point ordering is off. But all is good in my browser window. Strange.

---

could you help me reproduce that? I am facing troubles getting it, I run

Try:

let list = [
	require('plotly.js/test/image/mocks/gl2d_10.json'),
	require('plotly.js/test/image/mocks/gl2d_12.json')
]

In the test dashboard, I get:

[etpinard]

@dfcreative before I forgot, can you check that @monfera 's http://codepen.io/monfera/full/VmYeQb/ still works off this branch. I think that gl2d_date_axes does a good job checking for high-precision behavior, but you can't never be too sure 😄

[etpinard]

... and for more info on our high-precision specs, see plotly/plotly.js#1114

[dy]

@etpinard ok, fixed sorting order for small point sets and optimized @monfera's gl2d_date_axes case.
As for wrong scale of sequence of mocks — I am facing the same issue with old gl-scatter2d-fancy now, it seems to be an old symptom of some gl-plot2d problem. Trying to debug, but seems that is irrelevant to this PR.

UPD. increasing the delay here up to 3000 fixes the issue. That is the only way to get around I see for now...

[dy]

@etpinard so after intense debugging I came up with this PR. It fixes the problem of wrong axes in images.

[dy]

Actually mb it is better to create a separate repo, like gl-scatter2d-sdf? Changes are pretty significant, also loosing vectorizing logic completely is not too good. @etpinard

[etpinard]

Actually mb it is better to create a separate repo, like gl-scatter2d-sdf?

I like this idea a lot. This will make comparing the two algorithms easier for future iterations.

loosing vectorizing logic completely is not too good

For reference, could you elaborate a little more on the drawbacks of SDF? Is there anything else worth mentioning besides what's in limitations section above?

• Big number of big-sized points is now somewhat slower to render, hopefully it is rare case.
• Number of available colors is limited to 256
• Number of available characters is also limited, depending on point size

[dy]

@etpinard done.
Actually I could refactor API to overcome 1e6 limitation in future and speed up updating significantly. For now we require huge arrays of repeated data, but we could group it.
Two main drawbacks I see are

• it pre-renders canvas with font atlas, which is expected to be one-timer but potentially heavy operation (up to 100ms for some bad cases like 100+ different characters). That is avoidable by caching it.
• it might be somewhat longer to render for cases of multiple overlapping big-sized points.

[etpinard]

@dfcreative Amazing job. Here's how the baselines look like with your latest commits here and of plotly/plotly.js#1388:

https://github.com/plotly/plotly.js/compare/scattergl-sdf

Everything looks in place to me. But I wouldn't mind having someone else look at the new baselines to double check 👓

[etpinard]

On second glance, looks like the bubbles in the gl2d_12 are sized slightly differently:

[dy]

@etpinard yes, that is due to adjusted rendering, it looks better for the symbols.

vs

How much is that critical?

[etpinard]

@dfcreative I agree, the new rendering does look better for symbols 👍

But for bubbles charts, the size of each circle has an important meaning, so the new rendering in its current form could be considered a breaking change by some.

Would it be possible to some logic for symbol: 'circle' to make them look the way they do on master?

[dy]

@etpinard with gl-vis/gl-scatter2d-sdf@707658c I moved as close as I could to the initial fancy-scatter in size/border, but there are still tiny differences (1px-wise) due to method artefacts, it will be extremely difficult to remove them.

[etpinard]

@dfcreative

#5 (comment)

off https://github.com/plotly/plotly.js/compare/gl-scatter2d-sdf

is looking good 🎉

---

Can you publish the latest changes to gl-scatter2d-sdf?

I'll take care of getting this in plotly.js master. Awesome work!

[dy]

Done https://www.npmjs.com/package/gl-scatter2d-sdf. Thank you!