{"id":13687163,"url":"https://github.com/rreusser/regl-gpu-lines","last_synced_at":"2025-04-09T09:09:00.105Z","repository":{"id":44331783,"uuid":"417320824","full_name":"rreusser/regl-gpu-lines","owner":"rreusser","description":"Pure GPU, instanced, screen-projected lines for regl","archived":false,"fork":false,"pushed_at":"2023-06-08T16:22:44.000Z","size":2016,"stargazers_count":181,"open_issues_count":5,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-02T07:08:16.379Z","etag":null,"topics":["gpu","lines","regl","shaders","webgl"],"latest_commit_sha":null,"homepage":"https://rreusser.github.io/regl-gpu-lines/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rreusser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-15T00:23:33.000Z","updated_at":"2025-02-17T18:49:04.000Z","dependencies_parsed_at":"2024-10-20T08:00:19.951Z","dependency_job_id":"fb0d5a78-e040-4db4-9cad-30f7edc4c094","html_url":"https://github.com/rreusser/regl-gpu-lines","commit_stats":{"total_commits":263,"total_committers":4,"mean_commits":65.75,"dds":"0.43726235741444863","last_synced_commit":"58ad1dc42376c530d7a7a24ec0d45958f8b0c1e6"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rreusser%2Fregl-gpu-lines","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rreusser%2Fregl-gpu-lines/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rreusser%2Fregl-gpu-lines/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rreusser%2Fregl-gpu-lines/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rreusser","download_url":"https://codeload.github.com/rreusser/regl-gpu-lines/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248008630,"owners_count":21032556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gpu","lines","regl","shaders","webgl"],"created_at":"2024-08-02T15:00:49.780Z","updated_at":"2025-04-09T09:09:00.085Z","avatar_url":"https://github.com/rreusser.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/debug.png\" alt=\"Lines with round joins and caps\" width=\"600\"\u003e\n\u003c/p\u003e\n\n# regl-gpu-lines\n\n\u003e Pure GPU, instanced, screen-projected lines for [regl](https://github.com/regl-project/regl)\n\n[API documentation \u0026rarr;](./docs/API.md)\n\n[Live example \u0026rarr;](https://rreusser.github.io/regl-gpu-lines/docs/debug.html)\n\n[All examples \u0026rarr;](#examples)\n\nThis module implements a very general command for drawing lines using the [regl](https://github.com/regl-project/regl) WebGL library.\n\nArchitecturally this module has two goals:\n- **Data may live on the GPU.**\n- **Minimize unnecessary constraints.**\n\nTo accomplish this, it implements a simple pragma-based interface for specifying how your attributes connect to line properties and to varyings.\n\nFeatures:\n\n- Configure your own attributes, varyings, uniforms, and shaders\n- Compute position and line width in the vertex shader\n- GPU computation of round joins, bevels, and miters (with miter limit), and square and rounded end caps.\n- Optional end cap insertion, using `position.w == 0.0` or alternatively `position.x` NaN to signal a line break (see: [docs/multiple.html](https://rreusser.github.io/regl-gpu-lines/docs/multiple.html)) \n- Regl-compatible attribute specification with strides and offsets\n- Forward additional regl configuration to the draw command\n- Seamlessly permits substitution of Vertex Array Objects (VAOs)\n- 13.4 KB minified, 5.3 KB gzipped. No dependencies (although it is expected to be used together with regl, which requirement I'd like to [consider removing](https://github.com/rreusser/regl-gpu-lines/issues/7))\n\nLimitations:\n\n- `ANGLE_instanced_arrays` extension is required (which ought to be [universally supported](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#understand_extension_availability))\n- Width is best varied slowly as line joins to not take into account varying width\n- Automatic end cap insertion wastes vertices when the cap resolution exceeds the join resolution\n- Line dashes are not built-in, but you can easily build them yourself\n\n## Install\n\nThe `dist/` directory contains UMD bundles, or you may use from a CDN, e.g. [https://unpkg.com/regl-gpu-lines@latest](https://unpkg.com/regl-gpu-lines@latest). Both expose the module as `reglLines`.\n\nOtherwise install from npm:\n\n```bash\nnpm install regl-gpu-lines\n```\n\n## API\n\nSee [API documentation](./docs/API.md).\n\n## Examples\n\n- [Basic example](https://rreusser.github.io/regl-gpu-lines/docs/basic.html): A minimal example. Just a line.\n- [Variable width](https://rreusser.github.io/regl-gpu-lines/docs/variable-width.html): A basic line with variable width and color\n- [Multiple lines](https://rreusser.github.io/regl-gpu-lines/docs/multiple.html): Use position NaN to break up lines into multiple segments\n- [Depth](https://rreusser.github.io/regl-gpu-lines/docs/depth.html): Layer lines using the z-coordinate\n- [Closed loop](https://rreusser.github.io/regl-gpu-lines/docs/closed-loop.html): Create a closed loop by omitting end caps and repeating the first three vertices at the end.\n- [Line border](https://rreusser.github.io/regl-gpu-lines/docs/border.html): Use `lineCoord` to draw a SDF line border\n- [Interleaved attributes](https://rreusser.github.io/regl-gpu-lines/docs/strided.html): Instead of a [regl buffer](https://github.com/regl-project/regl/blob/master/API.md#buffers), you can pass a [regl-style attribute description](https://github.com/regl-project/regl/blob/master/API.md#attributes) with `buffer`, `stride`, `offset`, and `divisor` properties in order to used interleaved, packed attribute data.\n- [Torus knot](https://rreusser.github.io/regl-gpu-lines/docs/knot.html): A [torus knot](https://en.wikipedia.org/wiki/Torus_knot) with layering which can be difficult to draw with SVG.\n- [Batched rendering](https://rreusser.github.io/regl-gpu-lines/docs/batching.html): Illustrates how to take advantage of `reorder: true` to reduce shader program changes from, in this example, thirty to four.\n- [Post-projection](https://rreusser.github.io/regl-gpu-lines/docs/postproject.html): Illustrates post-project to draw lines projected onto a plane from some other angle.\n- [Vertex Array Object (VAO)](https://rreusser.github.io/regl-gpu-lines/docs/vao.html): Illustrates seamless swapping of VAO for vertex and endpoint attributes.\n- [Fake instancing](https://rreusser.github.io/regl-gpu-lines/docs/instanced.html): Sort of allows you to mimic instanced rendering on top of instanced rendering, albeit with some duplication of data.\n- [Debug page](https://rreusser.github.io/regl-gpu-lines/docs/debug-view.html): Shows how to use `instanceID` and `triStripCoord` varyings to draw a wireframe\n- [Full debug view](https://rreusser.github.io/regl-gpu-lines/docs/debug.html): A page for exploring all the bells and whistles\n- [GPGPU Strange Attractors](https://observablehq.com/d/ab6cd8bb0137889c): Feed a GPU particle simulation from texture data directly into line rendering\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://observablehq.com/d/ab6cd8bb0137889c\"\u003e\u003cimg src=\"./docs/lorenz.gif\" alt=\"GPGPU Lorenz Attractor\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA minimal example looks like the following, where a `vec2` attribute `xy` is connected to line position via a GLSL `#pragma`.\n\n```js\nconst drawLines = reglLines(regl, {\n  vert: `\n    precision highp float;\n\n    #pragma lines: attribute vec2 xy;\n    #pragma lines: position = getPosition(xy);\n    vec4 getPosition(vec2 xy) { return vec4(xy, 0, 1); }\n\n    #pragma lines: width = getWidth();\n    uniform float width;\n    float getWidth() { return width; }`,\n  frag: `\n    precision lowp float;\n    void main () {\n      gl_FragColor = vec4(1);\n    }`,\n  uniforms: {\n    width: (ctx, props) =\u003e props.customWidth * ctx.pixelRatio\n  }\n});\n\nconst xy = [[-1, 1], [-0.5, -1], [0, 1], [0.5, -1], [1, 1]];\nconst lineData = {\n  customWidth: 20,\n  join: 'round',\n  cap: 'round',\n  vertexCount: xy.length,\n  vertexAttributes: {\n    xy: regl.buffer(xy)\n  },\n  endpointCount: 2,\n  endpointAttributes: {\n    xy: regl.buffer([xy.slice(0, 3), xy.slice(-3).reverse()])\n  }\n};\n\ndrawLines(lineData);\n```\n\n## Development\n\n### Examples\n\nServe example pages—e.g. the example in `examples/closed-loop.js`—with\n\n```bash\nnpm start closed-loop\n```\n\n### Tests\n\nRun live-reloading render tests with\n\n```bash\nnpm run serve-render-tests\n```\n\nExecuting the render tests from the CLI requires the [headless-gl](https://www.npmjs.com/package/gl) module. You may use [nodemon](https://www.npmjs.com/package/nodemon) to live-run the render tests when the code is changed.\n\n```bash\nnpm install -g nodemon\nnodemon test/render.js\n```\n\nFilter tests with\n\n```bash\nFILTER=miter/basic nodemon test/render.js\n```\n\nand update expectation images with\n\n```bash\nUPDATE=1 FILTER=miter/basic node test/render.js\n```\n\nYou may view the tests, run against the latest version from unpkg.com, at https://rreusser.github.io/regl-gpu-lines/docs/tests.html\n\n## See also\n\n- [regl-line2d](https://github.com/gl-vis/regl-line2d): The line rendering library used by Plotly.js. If you want production quality lines, you should go here.\n- [regl-line](https://www.npmjs.com/package/regl-line): A regl function to draw flat 2D and 3D lines.\n- [regl-insta-lines](https://github.com/deluksic/regl-insta-lines): A very clear and well-written module. Very close to what I was searching for. My main desire was to defer more of the configuration to runtime and to avoid overlap in the miters.\n- [screen-projected-lines](https://github.com/substack/screen-projected-lines): An excellent, concise module for screen-projected lines. Without joins or caps, such lines are much simpler.\n- [Drawing Lines is Hard](https://mattdesl.svbtle.com/drawing-lines-is-hard): [Matt DesLaurier](https://twitter.com/mattdesl)'s classic post on the topic of drawing lines.\n- [Instanced Line Rendering Part I](https://wwwtyro.net/2019/11/18/instanced-lines.html): [Rye Terrell](https://wwwtyro.net/) first blog post on the topic.\n- [Instanced Line Rendering Part II: Alpha blending](https://wwwtyro.net/2021/10/01/instanced-lines-part-2.html): [Rye Terrell](https://wwwtyro.net/)'s blog post which inspired me to pare the draw calls down to two and publish this module.\n\n## License\n\n\u0026copy; 2021 Ricky Reusser. MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frreusser%2Fregl-gpu-lines","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frreusser%2Fregl-gpu-lines","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frreusser%2Fregl-gpu-lines/lists"}