multi-line high-performance 2D plotting library using native WebGL. The advantages are:
- Simple and efficient 2D WebGL library
- Using WebGL native line drawing
- High update rate which matches the screen's refresh rate
- Works for both dynamic and static data
- Full control over the color of each line in each frame
- No dependencies
- Works on any browser/platform that supports WebGL
- Compatible with OffScreenCanvas and WebWorkers for offloading cpu time from the main thread
- Ideal for embedded systems with low resources or large datasets
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.
Static: Enables rapid pan and zoom capability for inspecting very large datasets. See the static example
cannot change the line width due to the OpenGL implementation of a line. The OpenGL specification only guarantees a minimum of a single pixel line width. There are other solutions to increase the line width however they substantially increase the size of the data vector and take a hit on the performance. Top performance (refresh rate, memory, etc) is the top priority for this library.
Create an HTML canvas with an appropriate width or height:
<div>
<canvas style="width: 100%;" id="my_canvas"></canvas>
</div>
Import WebGL-Plot library using ES6 modules:
import { WebglPlot, WebglLine, ColorRGBA } from "webgl-plot";
Prepare the canvas
const canvas = document.getElementById("my_canvas");
const devicePixelRatio = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * devicePixelRatio;
canvas.height = canvas.clientHeight * devicePixelRatio;
Initialization:
const numX = canvas.width;
const color = new ColorRGBA(Math.random(), Math.random(), Math.random(), 1);
const line = new WebglLine(color, numX);
const wglp = new WebglPlot(canvas);
Add the line to webgl canvas:
line.lineSpaceX(-1, 2 / numX);
wglp.addLine(line);
Configure the requestAnimationFrame call:
function newFrame() {
update();
wglp.update();
requestAnimationFrame(newFrame);
}
requestAnimationFrame(newFrame);
Add the update function:
function update() {
const freq = 0.001;
const amp = 0.5;
const noise = 0.1;
for (let i = 0; i < line.numPoints; i++) {
const ySin = Math.sin(Math.PI * i * freq * Math.PI * 2);
const yNoise = Math.random() - 0.5;
line.setY(i, ySin * amp + yNoise * noise);
}
}
See examples based on vanilla JS at webgl-plot-examples
See examples based on React
See SPAD Simulation which use WebGL-Plot as an oscilloscope display
For a basic React example see here:
React website is under development...
https://webgl-plot-react.vercel.app/ âš›
To use WebGL-Plot as a JS pre-bundled package first import the following in your HTML file:
<script src="https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.umd.min.js"></script>
See examples on how to use this bundle in Codepen and JSfiddle
For ES6 module and direct browser import use:
<script type="module" src="your-code.js"></script>
and in your-code.js:
import {
WebglPlot,
WebglLine,
ColorRGBA,
} from "https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.esm.min.js";
Thanks to TimDaub for testing the ES6 module.
Notice that this method is only recommended for test and small codes.
Skypack is the new exciting CDN for ESM Javascript. See the example below on how to use it: JSfiddle
Line generation and Frame rate
ESM, off-screen, UMD
See here 📑
You can use WebUSB, Web Bluetooth, and Serial API. You can use ComPort for a basic implementation of Serial API
npm i
npm run build
MIT