2a:null 2b:["$","title",null,{"children":"WebGL Path(Quadratic Bezier) | brickmaker | Observable"}] 31:Tf8a,vao = { const vao = gl.createVertexArray() gl.bindVertexArray(vao) { // connect buffers and attributes const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, shapePosBuffer); gl.vertexAttribPointer( attributeLocations.position, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.position); } { // connect buffers and attributes const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, startPosBuffer); gl.vertexAttribPointer( attributeLocations.startPos, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.startPos); gl.vertexAttribDivisor(attributeLocations.startPos, 1); } { // connect buffers and attributes const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, endPosBuffer); gl.vertexAttribPointer( attributeLocations.endPos, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.endPos); gl.vertexAttribDivisor(attributeLocations.endPos, 1); } { // connect buffers and attributes const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, prevPosBuffer); gl.vertexAttribPointer( attributeLocations.prevPos, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.prevPos); gl.vertexAttribDivisor(attributeLocations.prevPos, 1); } { // connect buffers and attributes const numComponents = 2; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, nextPosBuffer); gl.vertexAttribPointer( attributeLocations.nextPos, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.nextPos); gl.vertexAttribDivisor(attributeLocations.nextPos, 1); } { // connect buffers and attributes const numComponents = 1; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, lineWidthBuffer); gl.vertexAttribPointer( attributeLocations.lineWidth, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.lineWidth); gl.vertexAttribDivisor(attributeLocations.lineWidth, 1); } { // connect buffers and attributes const numComponents = 4; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, cpBuffer); gl.vertexAttribPointer( attributeLocations.cp, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.cp); gl.vertexAttribDivisor(attributeLocations.cp, 1); } { // connect buffers and attributes const numComponents = 1; const type = gl.FLOAT; const normalize = false; const stride = 0; const offset = 0; gl.bindBuffer(gl.ARRAY_BUFFER, typeBuffer); gl.vertexAttribPointer( attributeLocations.type, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray(attributeLocations.type); gl.vertexAttribDivisor(attributeLocations.type, 1); } { // EBO gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebo) } return vao }32:Tab3,vertexShaderSource = `#version 300 es in vec2 in_position; in vec2 in_startPos; in vec2 in_endPos; in vec2 in_prevPos; in vec2 in_nextPos; in vec4 in_cp; in float in_lineWidth; in float in_type; out vec2 v_startPos; out vec2 v_endPos; out vec2 v_startMiterVec; out vec2 v_endMiterVec; out float v_lineWidth; out vec4 v_cp; out float v_type; uniform vec2 u_resolution; mat3 getTransformMatrix(vec2 startPos, vec2 endPos, float lineWidth) { vec2 centerPos = (startPos + endPos) / 2.; vec2 delta = endPos - startPos; float len = length(delta); float phi = atan(delta.y / delta.x); mat3 scale = mat3( len, 0, 0, 0, lineWidth, 0, 0, 0, 1 ); mat3 rotate = mat3( cos(phi), sin(phi), 0, -sin(phi), cos(phi), 0, 0, 0, 1 ); mat3 translate = mat3( 1, 0, 0, 0, 1, 0, centerPos.x, centerPos.y, 1 ); return translate * rotate * scale; } vec2 getOffsetVec(vec2 pos, vec2 prev, vec2 next) { if (pos == prev || pos == next) { return vec2(0., 0.); } vec2 line1 = pos - prev; vec2 normal1 = normalize(vec2(-line1.y, line1.x)); vec2 line2 = next - pos; vec2 normal2 = normalize(vec2(-line2.y, line2.x)); vec2 normal = normalize(normal1 + normal2); vec2 vec = normal * 1. / abs(dot(normal, normal1)); return -vec; // 逆时针向外的向量 } void main() { vec2 prev = in_prevPos; vec2 next = in_endPos; if (in_type == 1.) { next = in_cp.xy; } vec2 v1 = getOffsetVec(in_startPos, prev, next) * in_lineWidth / 2.; prev = in_startPos; next = in_nextPos; if (in_type == 1.) { prev = in_cp.xy; } vec2 v2 = getOffsetVec(in_endPos, prev, next) * in_lineWidth / 2.; vec2 dir = normalize(in_endPos - in_startPos); vec2 startOffset = (v1 == vec2(0., 0.) ? -in_lineWidth / 2. : dot(v1, dir)) * dir; vec2 endOffset = (v2 == vec2(0., 0.) ? in_lineWidth / 2. : dot(v2, dir)) * dir; float width = in_lineWidth; if (in_type == 1.) { // curve, larger width // TODO: only for test width = 300.; } mat3 transformMatrix = getTransformMatrix(in_startPos + startOffset, in_endPos + endOffset, width); vec2 pos = (transformMatrix * vec3(in_position, 1.)).xy; // vec2 pos = in_position * in_lineWidth + in_startPos; // vec4 pos = u_transform * vec4(in_position, 0., 1.); // convert the position from pixels to 0.0 to 1.0 vec2 zeroToOne = pos.xy / u_resolution; // convert from 0->1 to 0->2 vec2 zeroToTwo = zeroToOne * 2.0; // convert from 0->2 to -1->+1 (clipspace) vec2 clipSpace = zeroToTwo - 1.0; gl_Position = vec4(clipSpace, 0, 1); v_startPos = in_startPos; v_endPos = in_endPos; v_startMiterVec = v1; v_endMiterVec = v2; v_lineWidth = in_lineWidth; v_cp = in_cp; v_type = in_type; } `33:T12cd,fragmentShaderSource = `#version 300 es precision highp float; in vec2 v_startPos; in vec2 v_endPos; in vec2 v_startMiterVec; in vec2 v_endMiterVec; in float v_lineWidth; in vec4 v_cp; in float v_type; out vec4 fragColor; uniform float u_lineJoin; // 0: miter; 1: bevel; 2: round; uniform float u_lineCap; // 0: none; 1: butt; 2: round; // reference paper: http://hhoppe.com/ravg.pdf // distance vector to origin(0, 0) float det(vec2 a, vec2 b) { return a.x * b.y - b.x * a.y; } vec2 get_distance_vector(vec2 b0, vec2 b1, vec2 b2) { float a = det(b0, b2), b = 2.0 * det(b1, b0), d = 2.0 * det(b2, b1); float f = b * d - a * a; vec2 d21 = b2 - b1, d10 = b1 - b0, d20 = b2 - b0; vec2 gf = 2.0 * (b * d21 + d * d10 + a * d20); gf = vec2(gf.y, -gf.x); vec2 pp = -f * gf / dot(gf, gf); vec2 d0p = b0 - pp; float ap = det(d0p, d20), bp = 2.0 * det(d10, d0p); float t = clamp((ap + bp) / (2.0 * a + b + d), 0.0, 1.0); return mix(mix(b0, b1, t), mix(b1, b2, t), t); } float distToQuadraticBezierCurve(vec2 p, vec2 b0, vec2 b1, vec2 b2) { return length(get_distance_vector(b0 - p, b1 - p, b2 - p)); } void main() { vec2 p = gl_FragCoord.xy; vec4 backgroundColor = vec4(1., 1., 1., 1.); vec4 pathColor = vec4(0., 0., 0., 0.8); vec2 startVec = normalize(v_endPos - v_startPos); vec2 endVec = -startVec; if (v_type == 1.) { startVec = normalize(v_cp.xy - v_startPos); endVec = normalize(v_cp.xy - v_endPos); } vec2 startVecNormal = vec2(-startVec.y, startVec.x); vec2 endVecNormal = vec2(-endVec.y, endVec.x); float halfWidth = v_lineWidth / 2.; if (v_type == 1.) { // 给端点halfWidth的延伸量 vec2 pa = (p - v_startPos); vec2 pb = (p - v_endPos); float distA = dot(pa, startVec); float distB = dot(pb, endVec); bool endArea = (distA < 0. && abs(dot(pa, startVecNormal)) < halfWidth && -distA < halfWidth) || (distB < 0. && abs(dot(pb, endVecNormal)) < halfWidth && -distB < halfWidth); float dist = distToQuadraticBezierCurve(p, v_startPos, v_cp.xy, v_endPos); float epsilon = fwidth(dist); if (endArea || dist < halfWidth + epsilon) { float inCurve = 1. - smoothstep(halfWidth - epsilon, halfWidth + epsilon, dist); fragColor = mix(backgroundColor, pathColor, inCurve); } else { discard; // fragColor = backgroundColor; } } // TODO: 需要重构，逻辑比较混乱 // TODO: 没考虑bezier曲线的lineCap if (v_startMiterVec == vec2(0., 0.)) { // 需要判断在线端点内还是外 bool outStartMainLine = dot((p - v_startPos), (v_endPos - v_startPos)) < 0.; if (u_lineCap == 0.) { if (outStartMainLine) { discard; } } else if (u_lineCap == 2.) { if (outStartMainLine && distance(p, v_startPos) > v_lineWidth / 2.) { discard; } } // butt的情况不用额外的操作 } if (v_endMiterVec == vec2(0., 0.)) { // 需要判断在线端点内还是外 bool outEndMainLine = dot((p - v_endPos), (v_startPos - v_endPos)) < 0.; if (u_lineCap == 0.) { if (outEndMainLine) { discard; } } else if (u_lineCap == 2.) { if (outEndMainLine && distance(p, v_endPos) > v_lineWidth / 2.) { discard; } } // butt的情况不用额外的操作 } vec2 miterNormal1 = vec2(-v_startMiterVec.y, v_startMiterVec.x); vec2 miterNormal2 = vec2(-v_endMiterVec.y, v_endMiterVec.x); // TODO: 可能不够robust bool outside = dot((p - v_startPos), miterNormal1) < 0. || dot((p - v_endPos), miterNormal2) > 0.; if (outside) { discard; } if (u_lineJoin != 0.) { // mitter: outside就可以判断 // 需要判断在线端点内还是外 bool outStartMainLine = dot((p - v_startPos), startVec) < 0.; bool outEndMainLine = dot((p - v_endPos), endVec) < 0.; if (u_lineJoin == 1.) { // round: 考虑与端点的距离即可 if (outStartMainLine && distance(p, v_startPos) > v_lineWidth / 2. || outEndMainLine && distance(p, v_endPos) > v_lineWidth / 2.) { discard; } } else if (u_lineJoin == 2.) { // bevel: 需要计算bevel处的曲线 // vec2 lineVec = normalize(v_endPos - v_startPos); // vec2 lineNormal = vec2(-lineVec.y, lineVec.x); vec2 startBevelCenter = v_startPos + abs(dot(startVecNormal, normalize(v_startMiterVec))) * v_lineWidth / 2. * normalize(v_startMiterVec); vec2 endBevelCenter = v_endPos + abs(dot(endVecNormal, normalize(v_endMiterVec))) * v_lineWidth / 2. * normalize(v_endMiterVec); if (outStartMainLine && dot((p - startBevelCenter), (v_startPos - startBevelCenter)) < 0. || outEndMainLine && dot((p - endBevelCenter), (v_endPos - endBevelCenter)) < 0.) { discard; } } } fragColor = pathColor; } `34:[] 2e:{"id":"7e044a356227b39d","slug":"webgl-lines-arc","title":"WebGL Path(Quadratic Bezier)","thumbnail":"03ce2037531c14afa69e576969ed8f291e557cdc982794f6cf9e936fff55af15","access_level":"public","create_time":"$D2021-06-07T04:00:00.648Z","update_time":"$D2021-06-11T06:36:10.368Z","view_time":null,"first_public_time":"$D2021-06-07T04:06:21.781Z","fork":{"id":"a3d4b5c477d509a6","slug":"webgl-lines-with-linecap","title":"WebGL Lines(With LineCap)","owner":{"id":"087d5aa443c1f865","login":"brickmaker","name":"brickmaker"}},"stars":1,"starred":false,"owner":{"type":"team","id":"087d5aa443c1f865","login":"brickmaker","name":"brickmaker","avatar_url":"https://avatars-next.observableusercontent.com/0ac8b7df3c9c34e950c7bebfed32d6e6fe8300fc0cdfc4b7cea154fc6a39f347","tier":"starter_2024"},"version":788,"publish_version":788,"role":null,"authored":false,"authors":[{"type":"individual","id":"88d9ad367b3c7225","login":"brickmaker","name":"brickmaker","avatar_url":"https://avatars-next.observableusercontent.com/0ac8b7df3c9c34e950c7bebfed32d6e6fe8300fc0cdfc4b7cea154fc6a39f347","tier":null}],"members":[{"type":"individual","id":"88d9ad367b3c7225","login":"brickmaker","name":"brickmaker","avatar_url":"https://avatars-next.observableusercontent.com/0ac8b7df3c9c34e950c7bebfed32d6e6fe8300fc0cdfc4b7cea154fc6a39f347","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"WebGL Path(Quadratic Bezier)","cells":[{"id":0,"value":"md`# WebGL Path(Quadratic Bezier)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"canvas = DOM.canvas(width, height);","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"{\n draw()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"LINE_CAPS = ({\n none: 0,\n butt: 1,\n round: 2,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"LINE_JOINS = ({\n miter: 0,\n round: 1,\n bevel: 2,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"PATH_TYPE = ({\n line: 0,\n quadratic: 1,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"lineJoin = LINE_JOINS.miter","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"lineCap = LINE_CAPS.round","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"function draw() {\n // clear\n gl.clearColor(1., 1., 1., 1.);\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n // use program\n gl.useProgram(program);\n\n // bind VAO\n gl.bindVertexArray(vao)\n\n {\n // connect uniforms\n gl.uniform2f(uniformLocations.resolution, width, height);\n gl.uniform1f(uniformLocations.lineJoin, lineJoin);\n gl.uniform1f(uniformLocations.lineCap, lineCap);\n }\n \n gl.enable(gl.BLEND);\n gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);\n\n \n // draw\n const offset = 0;\n const vertexCount = 6;\n const indexType = gl.UNSIGNED_SHORT;\n // const instanceCount = 2; // TODO: temp fixed value\n const instanceCount = data.startPos.length; // TODO: temp fixed value\n gl.drawElementsInstanced(gl.TRIANGLES, vertexCount, indexType, offset, instanceCount)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"shapeData = ({\n positions: [\n -0.5, -0.5,\n 0.5, -0.5,\n -0.5, 0.5,\n 0.5, 0.5\n ],\n indices: [\n 0, 1, 2,\n 1, 3, 2\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"data = ({\n // 两个是可以复用的\n startPos: [\n [200, 500],\n [200, 300],\n [600, 300],\n ],\n endPos: [\n [200, 300],\n [600, 300],\n [600, 500],\n ],\n prevPos: [\n [200, 500],\n [200, 500],\n [400, 200],\n ],\n nextPos: [\n [400, 200],\n [600, 500],\n [600, 500],\n ],\n type: [0, 1, 0],\n cp: [\n [0, 0, 0, 0],\n [400, 200, 0, 0],\n [0, 0, 0, 0],\n ],\n lineWidth: [200, 200, 200]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":394,"value":"startPosBuffer = createBuffer(gl, data.startPos.flat())","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"endPosBuffer = createBuffer(gl, data.endPos.flat())","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"prevPosBuffer = createBuffer(gl, data.prevPos.flat())","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"nextPosBuffer = createBuffer(gl, data.nextPos.flat())","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"lineWidthBuffer = createBuffer(gl, data.lineWidth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":715,"value":"typeBuffer = createBuffer(gl, data.type)","pinned":true,"hidden":false,"mode":"ojs"},{"id":718,"value":"cpBuffer = createBuffer(gl, data.cp.flat())","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"shapePosBuffer = createBuffer(gl, shapeData.positions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"ebo = createIndexBuffer(gl, shapeData.indices)","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"attributeLocations = {\n return {\n position: gl.getAttribLocation(program, \"in_position\"),\n startPos: gl.getAttribLocation(program, \"in_startPos\"),\n endPos: gl.getAttribLocation(program, \"in_endPos\"),\n prevPos: gl.getAttribLocation(program, \"in_prevPos\"),\n nextPos: gl.getAttribLocation(program, \"in_nextPos\"),\n cp: gl.getAttribLocation(program, \"in_cp\"),\n type: gl.getAttribLocation(program, \"in_type\"),\n lineWidth: gl.getAttribLocation(program, \"in_lineWidth\"),\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"uniformLocations = {\n return {\n resolution: gl.getUniformLocation(program, \"u_resolution\"),\n lineJoin: gl.getUniformLocation(program, \"u_lineJoin\"),\n lineCap: gl.getUniformLocation(program, \"u_lineCap\"),\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"program = createProgram(gl, vertexShaderSource, fragmentShaderSource)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"gl = canvas.getContext('webgl2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"height = width * 0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":436,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"function createIndexBuffer(gl, indices) {\n const buffer = gl.createBuffer()\n gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer)\n gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)\n return buffer\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"function createBuffer(gl, data) {\n const buffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);\n return buffer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"function createProgram(gl, vertShaderStr, fragShaderStr) {\n const vertShader = compileShader(gl, vertShaderStr, gl.VERTEX_SHADER)\n const fragShader = compileShader(gl, fragShaderStr, gl.FRAGMENT_SHADER)\n\n const program = gl.createProgram()\n\n gl.attachShader(program, vertShader)\n gl.attachShader(program, fragShader)\n\n gl.linkProgram(program)\n if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n throw new Error(`Could not link shaders: ${gl.getProgramInfoLog(program)}`)\n }\n\n return program\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"function compileShader(gl, shaderStr, shaderType) {\n const shader = gl.createShader(shaderType)\n gl.shaderSource(shader, shaderStr)\n gl.compileShader(shader)\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n throw new Error('Shader compile failed: ' + gl.getShaderInfoLog(shader))\n }\n\n return shader\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2f:"$2e:body"