{"id":13996013,"url":"https://github.com/danchitnis/webgl-plot","last_synced_at":"2025-05-14T15:10:58.997Z","repository":{"id":43661443,"uuid":"205590760","full_name":"danchitnis/webgl-plot","owner":"danchitnis","description":"A high-Performance real-time 2D plotting library based on native WebGL","archived":false,"fork":false,"pushed_at":"2025-03-28T17:36:35.000Z","size":3668,"stargazers_count":607,"open_issues_count":5,"forks_count":36,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-12T20:43:51.554Z","etag":null,"topics":["2d","embedded","high-performance","opengl","plotting","realtime","waveform","webgl","webgl-plot"],"latest_commit_sha":null,"homepage":"https://danchitnis.github.io/webgl-plot-examples/vanilla/","language":"TypeScript","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/danchitnis.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null}},"created_at":"2019-08-31T20:01:44.000Z","updated_at":"2025-04-03T21:50:32.000Z","dependencies_parsed_at":"2024-11-08T03:37:14.963Z","dependency_job_id":"16d9f71c-0785-43d9-a333-fb79d75d23ce","html_url":"https://github.com/danchitnis/webgl-plot","commit_stats":{"total_commits":174,"total_committers":9,"mean_commits":"19.333333333333332","dds":0.04597701149425293,"last_synced_commit":"156097d0befdb68eef10eaf60d0077f0c4d26103"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danchitnis%2Fwebgl-plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danchitnis%2Fwebgl-plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danchitnis%2Fwebgl-plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danchitnis%2Fwebgl-plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danchitnis","download_url":"https://codeload.github.com/danchitnis/webgl-plot/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170056,"owners_count":22026219,"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":["2d","embedded","high-performance","opengl","plotting","realtime","waveform","webgl","webgl-plot"],"created_at":"2024-08-09T14:03:43.881Z","updated_at":"2025-05-14T15:10:58.978Z","avatar_url":"https://github.com/danchitnis.png","language":"TypeScript","readme":"![Npm Build](https://github.com/danchitnis/webgl-plot/workflows/Npm%20Build/badge.svg) ![Yarn Build](https://github.com/danchitnis/webgl-plot/workflows/Yarn%20Build/badge.svg) ![Code scanning](https://github.com/danchitnis/webgl-plot/workflows/Code%20scanning/badge.svg) [![DOI](https://zenodo.org/badge/205590760.svg)](https://zenodo.org/badge/latestdoi/205590760)\n\n## [Live demo 🚀](https://danchitnis.github.io/webgl-plot-examples/vanilla/)\n\n# webgl-plot\n\nmulti-line high-performance 2D plotting library using native WebGL. The advantages are:\n\n- Simple and efficient 2D WebGL library\n- Using WebGL native line drawing\n- High update rate which matches the screen's refresh rate (FPS)\n- Works for both dynamic and static data\n- supports both thin (native) and thick lines\n- Full control over the color of each line in each frame\n- No dependencies\n- Works on any browsers/platforms that [supports WebGL](https://caniuse.com/#feat=webgl)\n- Compatible with [OffScreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) and [WebWorkers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) for offloading cpu time from the main thread\n- Ideal for embedded systems with low resources or large datasets\n\n## Use cases\n\n**Dynamic**: When plotting real-time multiple waveforms are required. For example, software-based oscilloscopes, Arduino, microcontrollers, FPGA user interfaces. This framework also can be used in combination with ElectronJS.\n\n**Static**: Enables rapid pan and zoom capability for inspecting very large datasets. See the [static example](https://danchitnis.github.io/webgl-plot-examples/vanilla/static.html)\n\n## Thick Lines\n\nHowever notice that due to computation of the line data points, the performance of the thick lines is nearly _6 times slower_ than the normal lines. Only use thick lines when you need to see the lines clearly for example when highlighting a specific line. Further information can be found below. For benchmarking, see the [benchmark](https://github.com/danchitnis/webgl-plot#benchmark) section.\n\n## Version `next` coming soon 🎉\n\nThe next version is currently under development. More computation is moved to the GPU, significantly improving performance. These improvements specifically benefit the rolling plot and the scatter plot. However, these changes require a rewrite of the main library and migration to `webgl2`. The current version will remain as no maintenance is needed since it is based on pure javascript. See an example [here](https://codesandbox.io/s/wbglscatteracc-krsvmy).\n\n## Python version now released!! 🥳\n\nSee [pyglplot](https://github.com/danchitnis/pyglplot) for the python equivalent of this library. However, please notice the python version is at its early stages.\n\n## Getting started\n\n### Install the library using npm:\n\n```bash\nnpm install webgl-plot\n```\n\n### Create an HTML canvas with an appropriate width or height:\n\n```html\n\u003cdiv\u003e\n  \u003ccanvas style=\"width: 100%;\" id=\"my_canvas\"\u003e\u003c/canvas\u003e\n\u003c/div\u003e\n```\n\n### Import the `webgl-plot` library using ES6 modules:\n\n```javascript\nimport { WebglPlot, WebglLine, ColorRGBA } from \"webgl-plot\";\n```\n\n### Prepare the canvas:\n\n```javascript\nconst canvas = document.getElementById(\"my_canvas\");\nconst devicePixelRatio = window.devicePixelRatio || 1;\ncanvas.width = canvas.clientWidth * devicePixelRatio;\ncanvas.height = canvas.clientHeight * devicePixelRatio;\n```\n\nNote: The canvas width and height must be set in order to be able to draw on the canvas.\n\n### Initialization:\n\n```javascript\nconst numX = canvas.width;\nconst color = new ColorRGBA(Math.random(), Math.random(), Math.random(), 1);\nconst line = new WebglLine(color, numX);\nconst wglp = new WebglPlot(canvas);\n```\n\nAutomatically arrange X values between [-1,1]:\n\n```javascript\nline.arrangeX();\n```\n\nAdd the line to the webgl canvas:\n\n```javascript\nwglp.addLine(line);\n```\n\n### Configure the requestAnimationFrame call:\n\n```javascript\nfunction newFrame() {\n  update();\n  wglp.update();\n  requestAnimationFrame(newFrame);\n}\nrequestAnimationFrame(newFrame);\n```\n\n### Add the `update` function:\n\n```javascript\nfunction update() {\n  const freq = 0.001;\n  const amp = 0.5;\n  const noise = 0.1;\n\n  for (let i = 0; i \u003c line.numPoints; i++) {\n    const ySin = Math.sin(Math.PI * i * freq * Math.PI * 2);\n    const yNoise = Math.random() - 0.5;\n    line.setY(i, ySin * amp + yNoise * noise);\n  }\n}\n```\n\nDon't forget to update the canvas with `wglp.update()` each time you want to redraw the changes that you have made to the line objects.\n\n[![Edit WebGLplot](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/webglplot-m40u4?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Demos\n\nSee examples based on vanilla JS at [webgl-plot-examples](https://github.com/danchitnis/webgl-plot-examples)\n\nSee examples based on [React](https://webgl-plot-react.vercel.app/)\n\nSee [SPAD Simulation](https://danchitnis.github.io/SPADsim/) which use WebGL-Plot as an oscilloscope display\n\n## React Examples\n\nFor a basic React example see here:\n\n[![Edit WebGL-Plot React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/webgl-plot-react-8y1qj?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\nReact website is under development...\n\n[https://webgl-plot-react.vercel.app/](https://webgl-plot-react.vercel.app/) ⚛\n\n## JS Bundles\n\nTo use WebGL-Plot as a JS pre-bundled package first import the following in your HTML file:\n\n```HTML\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.umd.min.js\"\u003e\u003c/script\u003e\n```\n\nSee examples on how to use this bundle in [Codepen](https://codepen.io/danchitnis/pen/mdJVEYY) and [JSfiddle](https://jsfiddle.net/danchitnis/mfcw73z2/)\n\nFor ES6 module and direct browser import use:\n\n```HTML\n\u003cscript type=\"module\" src=\"your-code.js\"\u003e\u003c/script\u003e\n```\n\nand in your-code.js:\n\n```javascript\nimport { WebglPlot, WebglLine, ColorRGBA } from \"\u003chttp source\u003e\";\n```\n\nYou can use web-based bundlers such as [esm.sh](https://esm.sh/), [unpkng](https://unpkg.com/), [JSdeliver](https://www.jsdelivr.com/?docs=esm) ,and [jspm](https://jspm.org/) to import the library to get the appropriate `http source`. See an example here:\n[JSfiddle](https://jsfiddle.net/danchitnis/tu1svwbp/)\n\nThanks to [TimDaub](https://github.com/TimDaub) for testing the ES6 module.\n\n## Benchmark\n\n[Native Line](https://danchitnis.github.io/webgl-plot/benchmark/bench1.html) and\n[Thick Line](https://danchitnis.github.io/webgl-plot/benchmark/bench-thick.html).\n\nSee [Benchmark](https://github.com/danchitnis/webgl-plot/blob/webglplot-v2/benchmark/README.md) for more detailed analysis.\n\n## Internal test\n\n[ESM](https://danchitnis.github.io/webgl-plot/test/index-esm.html), [off-screen](https://danchitnis.github.io/webgl-plot/test/index-esm-off.html), [UMD](https://danchitnis.github.io/webgl-plot/test/index-umd.html)\n\n## API Documentation\n\nSee [here 📑](https://webgl-plot.now.sh/)\n\n## How to use with embedded systems applications?\n\nYou can use WebUSB, Web Bluetooth, and Serial API. You can use [ComPort](https://github.com/danchitnis/ComPort) for a basic implementation of Serial API\n\n## Build\n\n```bash\nnpm i\nnpm run build\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanchitnis%2Fwebgl-plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanchitnis%2Fwebgl-plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanchitnis%2Fwebgl-plot/lists"}