How do D3FC's webgl shaders draw overlapping data?

[johncardiologs]

I'm making a scatterplot using WebGL. The chart uses chartCartesian and webglPlotArea. My use case is roughly similar to @ColinEberhardt 's hathi-explorer.

Say I have two collection of data points that I want to draw on my plot. Some datapoints are in both collections, however I want each collection (series) to be colored (decorated) differently.

My question is this: will the WebGL shaders realize that points in the first collection which overlap with points in the second collection are not to be drawn twice? Or will 'backgrounded' and foregrounded points both be in the webgl context (more data for the GPU to handle = slower performance)?

I am working with over a million points and am trying to figure out whether having duplicates in either collection is a performance issue, or whether WebGl will optimize and avoid redrawing points that have already been drawn.

This article may be relevant: https://webglfundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html

[chrisprice]

As a general rule, if you can preprocess the data to reduce the amount of data that needs to be rendered and still produce the same visual result, you should do that. All data supplied to the webgl series, shaped by the value accessors, ends up being passed down to the GPU. There is no de-duplication on the JavaScript side. I can't remember off the top of my head if we're making any use of the depth buffer. That could possibly be used to eliminate fragment shader executions but wouldn't help with vertex shader executions. I'd only expect marginal gains from this unless there's was extreme duplication. It's also worth mentioning in the context of performance, that enabling alpha blending is known to reduce performance (as in https://github.com/d3fc/d3fc/blob/master/examples/diamonds/index.js).

…

On Wed, 6 Jul 2022, 20:57 John Cambefort, ***@***.***> wrote: I'm making a scatterplot using WebGL. The chart uses chartCartesian <https://github.com/d3fc/d3fc/tree/master/packages/d3fc-chart#chartCartesian> and webglPlotArea <https://github.com/d3fc/d3fc/tree/master/packages/d3fc-chart#cartesian_webglPlotArea>. My use case is roughly similar to @ColinEberhardt <https://github.com/ColinEberhardt> 's hathi-explorer <https://github.com/ColinEberhardt/d3fc-webgl-hathi-explorer/blob/master/index.js> . Say I have two collection of data points that I want to draw on my plot. Some datapoints are in both collections, however I want each collection (series) to be colored (decorated) differently. My question is this: will the WebGL shaders realize that points in the first collection which overlap with points in the second collection are not to be drawn twice? Or will 'backgrounded' and foregrounded points both be in the webgl context (more data for the GPU to handle = slower performance)? I am working with over a million points and am trying to figure out whether having duplicates in either collection is a performance issue, or whether WebGl will optimize and avoid redrawing points that have already been drawn. This article may be relevant: https://webglfundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html — Reply to this email directly, view it on GitHub <#1756>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADJ2MJYBF6Z5N7AU7FS2PDVSXQL7ANCNFSM5225NZFQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[johncardiologs]

I see -- just to confirm, the code that enables alpha blending in your example is the following, right?

gl.blendFuncSeparate(
    gl.DST_COLOR,
    gl.ZERO,
    gl.CONSTANT_ALPHA,
    gl.ZERO
);

In my code, I use the following to decorate my data:

series.decorate((program: Function, data: DataPoint[]) => {
  webglFillColor(color)(program);
});

where color is for instance (1, 0, 0, 0.5). Is this alpha blending? How can I turn alpha blending off otherwise?