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
- 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:
<div>
<canvas class="canvas" id="my_canvas"></canvas>
</div>
Import WebGL-Plot library using ES6 modules:
import WebGLplot, { WebglLine, ColorRGBA } from "webgl-plot";
Initialization:
const canv = document.getElementById("my_canvas");
const devicePixelRatio = window.devicePixelRatio || 1;
const numX = Math.round(canv.clientWidth * devicePixelRatio);
const color = new ColorRGBA(Math.random(), Math.random(), Math.random(), 1);
const line = new WebglLine(color, numX);
const wglp = new WebGLplot(canv);
Add the line to webgl canvas:
line.lineSpaceX(-1, 2 / numX);
wglp.addLine(line);
Configure the requestAnimationFrame call:
function newFrame() {
update();
wglp.update();
window.requestAnimationFrame(newFrame);
}
window.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.
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