gl-vis/regl-line2d

:part_alternation_mark: Draw 2d polyline with regl

gl-vis

A modular visualization system for JavaScript.

regl-line2d's Issues

Fill

Enhance reverse detection on viewport

For now reverse direction is detected well on full screen, but not when viewport is set.

Mobile miter artifact

Something special with adjacent miters happen.
We probably want to disable miters for obtuse angles.

Related to #12

closePath option

Dash mode

Distance-based dash is more svg-ish but prone to errors on big data, position-based dash is round error proof, but bad on scale.

We can switch that mode by the calculated distance.

Although it seems that we cannot track scale-independent distance.

Remove miter overflow artifacts

Should be enough to take prev/next coord normals as a second cutoffs

Draw multiple lines with single draw call

Is it planned to allow drawing multiple poly-lines with a single draw call? i.e. GL_LINES

Max length of adjacent segment

Should not cover miter limit

Losing texture

Too big/small line distances may loose dash texture:

Possibly gl_FragCoord approach for texture forming is more promising.

Smooth spline segment

For implementing smooth spline segments it is possible to use https://github.com/stbaer/smooth-path and just map input vertices, as a simple workaround
plotly/plotly.js#3229

Please don't use Array().fill !!

... or make sure it is transpiled.

See:

https://github.com/dfcreative/regl-line2d/blob/master/index.js#L563

and possibly elsewhere.

---

Non-ES5 statements like this one makes our (very) old image test server crash.

Join type 'rect' missing ab colors

When drawing lines with simple shader by using join type rect it's rendering with single color:

{
    color:['red', 'yellow'],
    join:'rect',
    positions: [-0,0,20,10],
    thickness: 10,
    dash: [15, 5]
}

Adding aColor, bColor to the rect-vert.glsl will produce correct shading

attribute vec4 aColor, bColor;
...
fragColor = (lineStart * aColor + lineEnd * bColor) / 255.;

also changing regl attributes to

 aColor: {
    buffer: regl.prop('colorBuffer'),
    stride: 4,
    offset: 0,
    divisor: 1
},
bColor: {
    buffer: regl.prop('colorBuffer'),
    stride: 4,
    offset: 4,
    divisor: 1
}

Thank you.

Broken color transition

Now sharp-angle connections render color transition with noticable shift. We have to correct that by miter limit or so.

Destructuring assignment in regl-line2d breaks usage in IE11

I am a user of plotly.js (version 1.37.1) which depends on regl-line2d (version ^3.0.9). The destructuring assignment used in file index.js in regl-line2d is not compatibly with any version of Internet Explorer (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment ) and therefore breaks my app. I get an error script 1010 expected identifier.

NaNs round join case

{
    type: 'round',
    positions: [1, -2, 2, -2, 3, NaN, 4, 2, 5, 2],
    width: 20,
    color: 'red'
}

Does not render stuff, unlike rect

Fix demo link

https://gl-vis.github.io/regl-line2d/

Typographic line thickness correction at joins

https://www.artlebedev.ru/kovodstvo/business-lynch/2017/12/31/

Round miters

Modified frag shader presumably tests if fragment is within miter radius, if it exceeds 0 bevel miter limit.

`.draw()` doesn't skip over ids with undefined options

@dy

let regl = require('regl')({extensions: 'angle_instanced_arrays'})
let line2d = require('./')(regl)

line2d.update([
  { thickness: 4, points: [0,0, 1,1, 1,0], close: true, color: 'red' },
  undefined,
  { thickness: 4, points: [0,1, 1,1, 0,0], close: true, color: 'blue' }
])
line2d.draw(0)
line2d.draw(2)

only draws the red triangle.

---

Example in plotly.js https://codepen.io/etpinard/pen/bKQjMe

Viewport cutoffs

Mobile version seems to render the same cutoff issue.

• line end is skewed
• line width consistency is probably wrong (check pixelScale)
• antialiasing is wrong (as if twice less, check pixelRatio)
• cutoff is wrong (is it bound to viewport?)
• skewed joins on shifted viewport - no idea what's the reason

Stencil buffer cutoff?

Now cutoffs use fragment shader strategy, which overcalculates them, esp. for sharp angles or small scales. Engaging stencil buffer would allow to avoid conditions in fragment shader, in theory.

Split sharp angles

For now there are artifacts on too sharp edges where line width gets thinner:

We could render that as overlapping separate render passes, since difference between no-miter strategy is insignificant.
Also that potentially creates (sometimes) off-miter artifacts.

SVG-compatible miterLimit

Would be more useful to have miterLimit as a ratio to thickness according to the formula from https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit

Line overlap

Get a better test for depth/stencil buffer

Weird artifact on some hardwares

See https://codepen.io/anon/pen/yZpXZE?editors=1010 which results in something like

(noticed that weird final red line segment) on some (macOS?) hardware.

See plotly/plotly.js#3522 for more details.

1.0 TODO

• precision property
• duplicated point case
• demo with randomized line
• calibrated dash pattern
• optimize shader code
• readme and stuff

Rect line mode

Just as classical gl-line2d - it is faster than miter line

Array for join widths

To adjust join widths by user

Feature-complete release

• Round miters mode with proper normals, antialiasing #5
• Avoid miterJoin crease for thick lines #15
• Close path mode #11
• Distance dash pattern mode #13
• Rectangular mode with detection #4
• Demo with updated settings panel
• Cap mode

Colorscale

Probably with the API
color: colorscale, where colorscale is any from https://github.com/bpostlethwaite/colormap

Batch rendering

We have to be able to render multiple lines with different colors. There is no such problem for scatter plot, since we can define marker/color/border per-point.

• we do not really need to support color transitions between points: first it is broken #8, second they break API design of corresponding colors to multiple lines.
• should we accept array as options [{a}, {b}, {c}] or array as property {x: [a, b, c], y: [a, b, c], z: shared}? We never used array as options before and that is not a pattern [yet], also it does not allow for shared properties or we have to detect them manually.

Unfortunately due to uncertain regl/webgl issue regl-project/regl#432 we can't use offset with instanced draw, hence we have to pick scatter strategy: tracking elements/textures and rendering subset of them.

UPD: Turns out offset/elements in instanced draw affects uninstanced part, which gets repeated, not the instances, ie. line segment lineEnd and lineTop in our case. Therefore we have to rebind attributes or at least their offsets for every polyline instance. And seems that is is not difficult: we can set offset a function. Yay!

Multiple line update/draw improvement

See gl-vis/regl-scatter2d#7

Precision

Gaps are ignored when in-between flat segments

Consider

let regl = require('regl')({extensions: 'angle_instanced_arrays'})
let line2d = require('./')(regl)

const arr1 = [0, 1, 1, NaN, 2, 1, 3, 2]
const arr2 = [0, 3, 1, NaN, 2, 3, 3, 3]

const rng = [-1, -1, 4, 4]
const vp = [80, 80, 556, 350]

line2d.render({ thickness: 4, points: arr1, color: 'red', viewport: vp, range: rng, join: 'rect', overlay: true })
line2d.render({ thickness: 4, points: arr2, color: 'blue', viewport: vp, range: rng, join: 'rect', overlay: true })

which results in

where the gap in the blue trace at the 2nd (x,y) position is missing.

---

plotly.js example in -> plotly/plotly.js#3551

Non-interlacing alpha

An observation by @monfera.

The SVG behaviour is preserving alpha on overlapping segments

Rectangular only round join shader

• faster than miter shader
• enabled hi-precision
• no miter clipping artifacts on viewport #23
• looks good for any colorscales:
  (compare beginning with end)
• easier API: no join, no cap, no overlay
• people usually always opt for round miters as they are nice and natural.

Q: Are there cases when we may want no-overlap joined miter or bevel miter?

A: sharp edges, like

Also that is a pattern, to have 3 types of miters.

1px gl line mode

For really simple and fast shaders we skip complex lines.