Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

webgl dashed lines don't display correctly #2946

Closed
dsmmcken opened this issue Aug 27, 2018 · 7 comments · May be fixed by gl-vis/regl-line2d#38
Closed

webgl dashed lines don't display correctly #2946

dsmmcken opened this issue Aug 27, 2018 · 7 comments · May be fixed by gl-vis/regl-line2d#38
Labels
bug something broken

Comments

@dsmmcken
Copy link

screen shot 2018-08-27 at 2 49 39 pm

The blue scattergl dashed line spacing is broken. The dashes are inconsistently spaced.
Orange is the same data as svg for comparison (expected result).

Sample: https://codepen.io/anon/pen/oPxOgJ

Checked in firefox and chrome on mac with similar results.
@etpinard etpinard added the bug something broken label Aug 27, 2018
@etpinard
Copy link
Contributor

cc @dy

@dy dy self-assigned this Sep 24, 2018
@dy
Copy link
Contributor

dy commented Sep 25, 2018

Oh! That is an issue of the old gl-line2d too:
image

@dy
Copy link
Contributor

dy commented Sep 26, 2018 •
edited
Loading

That seems to be non-trivial to implement O(c) version of it.

A segment pattern offset depends on previous segment's length, which depends on previous segment length etc, ie. patterns are linked. When it comes to rescaling - every dataRange change we have to recalculate all segments lengths. That is ok for short lines, but heavy for thousands of points, ie. that makes updating complexity O(n).

This was referenced Oct 1, 2018
Open
Open
@etpinard etpinard unassigned dy Oct 25, 2018
@archmoj archmoj self-assigned this Oct 30, 2018
@archmoj
Copy link
Contributor

archmoj commented Oct 31, 2018

The image below & this demo could be used to illustrate the differences between dash lines in scatter & scattergl.
Also to mention when using various line width parameters it affects scattergl dashes.
newplot 52

@alexcjohnson
Copy link
Collaborator

Since you mentioned line width, if we're truly going for parity check out the logic used in SVG-land, in Drawing.dashLine: the length scale of the built-in dash patterns 'dot', 'dash', 'longdash', 'dashdot', 'longdashdot' is based on max(lineWidth, 3)

plotly.js/src/components/drawing/index.js

Lines 168 to 185 in f0f9a86

drawing.dashStyle = function(dash, lineWidth) {
lineWidth = +lineWidth || 1;
var dlw = Math.max(lineWidth, 3);
if(dash === 'solid') dash = '';
else if(dash === 'dot') dash = dlw + 'px,' + dlw + 'px';
else if(dash === 'dash') dash = (3 * dlw) + 'px,' + (3 * dlw) + 'px';
else if(dash === 'longdash') dash = (5 * dlw) + 'px,' + (5 * dlw) + 'px';
else if(dash === 'dashdot') {
dash = (3 * dlw) + 'px,' + dlw + 'px,' + dlw + 'px,' + dlw + 'px';
}
else if(dash === 'longdashdot') {
dash = (5 * dlw) + 'px,' + (2 * dlw) + 'px,' + dlw + 'px,' + (2 * dlw) + 'px';
}
// otherwise user wrote the dasharray themselves - leave it be
return dash;
};

@mitja-p
Copy link

mitja-p commented Jan 2, 2020

Is there any progress on this bug? Currently using anything except solid line is pretty unusable in webgl.

@archmoj archmoj removed their assignment Mar 3, 2020
@gvwilson
Copy link
Contributor

Hi - this issue has been sitting for a while, so as part of our effort to tidy up our public repositories I'm going to close it. If it's still a concern, we'd be grateful if you could open a new issue (with a short reproducible example if appropriate) so that we can add it to our stack. Cheers - @gvwilson

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug something broken
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Dash section gl-vis/regl-line2d
7 participants
@dy @gvwilson @dsmmcken @alexcjohnson @etpinard @mitja-p @archmoj