Live demo 🚀

webgl-plot

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

Use cases

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

Limitations

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.

Getting started

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);

const wglp = new WebGLplot(canvas, numX);

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);

}

}

Demos

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

React Examples

For a basic React example see here:

React website is under development...

https://webgl-plot-react.vercel.app/ ⚛

JS Bundle

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.

API Documentation

See here 📑

How to use with embedded systems applications?

You can use WebUSB, Web Bluetooth, and Serial API. You can use ComPort for a basic implementation of Serial API

Build

npm i

npm run build

License

MIT