class Polylines { static makePositions(joinRes) { const pad = joinRes * 2 + 1; const positions = [[0,0], [0,.5], [0,-.5], [1,.5], [1,-.5], [1,0]]; const res = new Float32Array((pad * 2 + 6) * 2); for (let i = 0, l = positions.length; i < l; i++) { res[(pad + i) * 2 + 0] = positions[i][0]; res[(pad + i) * 2 + 1] = positions[i][1]; } for (let i = 0; i < pad; i++) res[(pad + 6 + i) * 2] = 1; return res; } static makePointsData(segs, out = null) { const nPoints = d3.sum(segs, x => x.length) + 2; out = out || new Float32Array(nPoints * 3); v.setS3(out, segs[0][0]); let o = 3; for(let i = 0, m = segs.length; i < m; i++) { for(let j = 0, n = segs[i].length; j < n; j++, o += 3) { v.setS3(out, segs[i][j], o); } } const last = segs[segs.length - 1]; v.setS3(out, last[last.length - 1], o); return out; } static makeTypesData(segs) { const lengths = segs.map(x => x.length); const types = new Float32Array(d3.sum(lengths) - 1); for (let i = 0, c = 0, l = lengths.length; i < l; c += lengths[i], i++) { types[c] = 1; types[c + lengths[i] - 2] = 2; types[c + lengths[i] - 1] = -1; } return types; } constructor(gl, joinRes = 16) { const stride = Float32Array.BYTES_PER_ELEMENT * 3; this.gl = gl; this.data = {}; this.buffers = { points: webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW), types: webgl.defBuffer(gl, null, gl.ARRAY_BUFFER, gl.DYNAMIC_DRAW), }; const positions = Polylines.makePositions(joinRes); this.model = webgl.compileModel(gl, { attribs: { position: { data: positions, size: 2 }, index: { data: new Float32Array(d3.range(positions.length / 2)), size: 1 } }, instances: { attribs: { pA: { buffer: this.buffers.points, offset: stride * 0 }, pB: { buffer: this.buffers.points, offset: stride * 1 }, pC: { buffer: this.buffers.points, offset: stride * 2 }, pD: { buffer: this.buffers.points, offset: stride * 3 }, type: { buffer: this.buffers.types, size: 1 }, }, }, num: positions.length / 2, mode: gl.TRIANGLE_STRIP, uniforms: {}, shader: webgl.defShader(gl, { vs: ` vec2 perp(vec2 v) { return vec2(-v.y, v.x); } vec2 project(vec4 p) { return p.xy / max(p.w,1e-6) * vec2(aspect, 1.0); } vec4 toClip(vec3 p) { return proj * view * model * vec4(p, 1.0); } vec4 addP(vec4 p, vec2 dir) { dir *= max(p.w, 1e-6) / vec2(aspect, 1.0); return p + vec4(dir, 0., 0.); } vec2 rotate(vec2 v, float a) { float s = sin(a), c = cos(a); mat2 m = mat2(c, -s, s, c); return m * v; } void main(){ if (type == -1.0) return; float joinPad = joinRes * 2.; float nPoints = 6. + (joinPad + 1.) * 2.; bool isSegs = joinPad < index && index < nPoints - joinPad - 1.; vec3 pa = pA, pb = pB, pc = pC; float y = position.y; if (position.x == 1.0) { pa = pD, pb = pC, pc = pB; y *= -1.; } vec4 p0c = toClip(pa), p1c = toClip(pb), p2c = toClip(pc); vec2 p0 = project(p0c), p1 = project(p1c), p2 = project(p2c); v_width = clamp(width / max(p1c.z, 1e-6), .01, .8); v_width *= length(pb); v_p1 = p1, v_p2 = p2; vec2 tangent = normalize(normalize(p2 - p1) + normalize(p1 - p0)); vec2 normal = perp(tangent); vec2 p01 = p1 - p0, p21 = p1 - p2; vec2 xBasis = -p21, yBasis = normalize(perp(xBasis)); float w = v_width * 0.5; float outer = w / dot(normal, normalize(perp(p01))); float sigma = -sign(dot(p01 + p21, normal)); v_isJoint = 0.0; v_isCap = 0.0; vec2 dir = vec2(0.0); bool inner = type == 0.0 || (type == 1.0 && position.x == 1.0) || (type == 2.0 && position.x == 0.0); bool isCap = (type == 1.0 && position.x == 0.0) || (type == 2.0 && position.x == 1.0); if (inner && isSegs && sign(y) == sigma) { float md = min(dot(p01, p01), dot(p21, p21)) + w * w; if (outer * outer <= md) dir = normal * sigma * outer; else dir = yBasis * y * v_width; } else if (inner && !isSegs) { v_isJoint = 1.0; float deg = acos(dot(normalize(p01),normalize(p21))); deg = -(PI - deg) / 2. / joinRes; if (index < joinRes * 2. + 1. && mod(index, 2.) == 0.) { float i = joinRes - floor(index / 2.); if (sigma == -1.0) dir = yBasis * w; else dir = -normal * w; dir = rotate(dir, i * deg); } else if (index >= joinRes * 2. + 1. + 6. && mod(index, 2.) == 1.) { float i = joinRes - floor((nPoints - index) / 2.); if (sigma == -1.0) dir = yBasis * w; else dir = -normal * w; dir = rotate(dir, i * deg); } } else if (isCap) { dir = yBasis * y * v_width; float pad = joinRes * 2. + 1.; if (index < pad + 1. || index >= pad + 6.) v_isCap = 1.0; float deg = PI / (joinRes + 1.); if (index < joinRes * 2. + 1. && mod(index, 2.) == 0.) { float i = floor(index / 2.); dir = rotate(-yBasis * w, i * deg); } else if (index >= joinRes * 2. + 1. + 6. && mod(index, 2.) == 1.) { float i = floor((index - 6. - (joinRes - 1.) * 2.) / 2.); dir = rotate(yBasis * w, i * -deg); } } else { dir = yBasis * y * v_width; } gl_Position = addP(p1c, dir); }`, fs: ` vec2 perp(vec2 v) { return vec2(-v.y, v.x); } float aastep(float threshold, float value) { float afwidth = length(vec2(dFdx(value), dFdy(value))) * 0.70710678118654757; return smoothstep(threshold-afwidth, threshold+afwidth, value); } float circle(vec2 p, float radius) { return aastep(radius, length(p)); } float sideOf(vec2 p, vec2 line) { return aastep(1e-6, sign(dot(p, perp(line)))); } float distToLine(vec2 p1, vec2 p2, vec2 p) { return abs(dot(normalize(perp(p2 - p1)), p1 - p)); } vec2 ndcCoord() { vec2 p = gl_FragCoord.xy / viewport * 2.0 - 1.0; return p * vec2(aspect, 1.0); } void main() { float t = 0.0; if (border > 0.0) { vec2 p = ndcCoord(); float w = v_width * .5, b = 1. - border; float t1 = aastep(b, distToLine(v_p1, v_p2, p) / w); float t2 = circle(p - v_p1, w * b); t = mix(t1, t2, min(1.0, v_isCap + v_isJoint)); } gl_FragColor = vec4(mix(color, borderColor, t), 1.); }`, declPrefixes: { v: "v_" }, attribs: { position: "vec2", index: "float", pA: "vec3", pB: "vec3", pC: "vec3", pD: "vec3", type: "float" }, varying: { p1: "vec2", p2: "vec2", isJoint: "float", isCap: "float", width: "float" }, state: { depth: true, cull: true, blend: false, blendFn: webgl.BLEND_NORMAL }, uniforms: { model: ["mat4", m.identity44([])], view: "mat4", proj: "mat4", joinRes: ["float", joinRes], viewport: ["vec2", [gl.drawingBufferWidth, gl.drawingBufferHeight]], aspect: ["float", gl.drawingBufferWidth / gl.drawingBufferHeight], width: ["float", .1], border: ["float", .2], color: "vec3", borderColor: "vec3" }, ext: { OES_standard_derivatives: true } }), }); } update(segs) { const n = (d3.sum(segs, x => x.length) + 2) * 3; if (!this.data.points || this.data.points.length != n) { this.data.points = Polylines.makePointsData(segs); this.data.types = Polylines.makeTypesData(segs); this.buffers.types.set(this.data.types); } else { this.data.points = Polylines.makePointsData(segs, this.data.points); } this.buffers.points.set(this.data.points); return this; } draw(camera, { width = 10, color = [.8,.8,.2], border = 0.1, borderColor = [.5,.5,.5] }) { this.model.uniforms.view = camera.view; this.model.uniforms.proj = camera.proj; this.model.uniforms.color = color; this.model.uniforms.width = width * 2 / this.gl.drawingBufferHeight this.model.uniforms.border = border; this.model.uniforms.borderColor = borderColor; this.model.instances.num = this.data.types.length; webgl.draw(this.model); } }