Repository files navigation

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 (FPS)
• Works for both dynamic and static data
• supports both thin (native) and thick lines
• Full control over the color of each line in each frame
• No dependencies
• Works on any browsers/platforms thatsupports WebGL
• Compatible withOffScreenCanvas andWebWorkers 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 thestatic example

However notice that due to computation of the line data points, the performance of the thick lines is nearly6 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 thebenchmark section.

The 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 towebgl2. The current version will remain as no maintenance is needed since it is based on pure javascript. See an examplehere.

Seepyglplot for the python equivalent of this library. However, please notice the python version is at its early stages.

npm install webgl-plot

<div><canvasstyle="width: 100%;"id="my_canvas"></canvas></div>

import{WebglPlot,WebglLine,ColorRGBA}from"webgl-plot";

constcanvas=document.getElementById("my_canvas");constdevicePixelRatio=window.devicePixelRatio||1;canvas.width=canvas.clientWidth*devicePixelRatio;canvas.height=canvas.clientHeight*devicePixelRatio;

Note: The canvas width and height must be set in order to be able to draw on the canvas.

constnumX=canvas.width;constcolor=newColorRGBA(Math.random(),Math.random(),Math.random(),1);constline=newWebglLine(color,numX);constwglp=newWebglPlot(canvas);

Automatically arrange X values between [-1,1]:

line.arrangeX();

Add the line to the webgl canvas:

wglp.addLine(line);

functionnewFrame(){update();wglp.update();requestAnimationFrame(newFrame);}requestAnimationFrame(newFrame);

functionupdate(){constfreq=0.001;constamp=0.5;constnoise=0.1;for(leti=0;i<line.numPoints;i++){constySin=Math.sin(Math.PI*i*freq*Math.PI*2);constyNoise=Math.random()-0.5;line.setY(i,ySin*amp+yNoise*noise);}}

Don't forget to update the canvas withwglp.update() each time you want to redraw the changes that you have made to the line objects.

See examples based on vanilla JS atwebgl-plot-examples

See examples based onReact

SeeSPAD 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:

<scriptsrc="https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.umd.min.js"></script>

See examples on how to use this bundle inCodepen andJSfiddle

For ES6 module and direct browser import use:

<scripttype="module"src="your-code.js"></script>

and in your-code.js:

import{WebglPlot,WebglLine,ColorRGBA}from"<http source>";

You can use web-based bundlers such asesm.sh,unpkng,JSdeliver ,andjspm to import the library to get the appropriatehttp source. See an example here:JSfiddle

Thanks toTimDaub for testing the ES6 module.

Native Line andThick Line.

SeeBenchmark for more detailed analysis.

ESM,off-screen,UMD

Seehere 📑

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

npm inpm run build

MIT