webgl-plot - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

dist/WbglPolar.js

@@ -11,3 +11,2 @@ import { WebglBaseLine } from "./WebglBaseLine";
         this._vbuffer = 0;
-        this._prog = 0;
         this._coord = 0;
@@ -14,0 +13,0 @@ this.visible = true;

dist/WebglBaseLine.d.ts

@@ -6,5 +6,2 @@ import { ColorRGBA } from "./ColorRGBA";
 export declare class WebglBaseLine {
-    private static readonly vertCode;
-    private static readonly fragCode;
-    private static program;
     intensity: number;
@@ -64,3 +61,2 @@ visible: boolean;
      */
-    _prog: WebGLProgram;
     /**
@@ -71,4 +67,2 @@ * @private
     _coord: number;
-    initProgram(webgl: WebGLRenderingContext): void;
-    private createProgram;
     /**
@@ -75,0 +69,0 @@ * @internal

dist/WebglBaseLine.js

@@ -15,3 +15,2 @@ /**
         this._vbuffer = 0;
-        this._prog = 0;
         this._coord = 0;
@@ -21,36 +20,3 @@ this.visible = true;
     }
-    initProgram(webgl) {
-        if (!WebglBaseLine.program) {
-            this.createProgram(webgl);
-        }
-        this._prog = WebglBaseLine.program;
-    }
-    createProgram(webgl) {
-        const vertShader = webgl.createShader(webgl.VERTEX_SHADER);
-        webgl.shaderSource(vertShader, WebglBaseLine.vertCode);
-        webgl.compileShader(vertShader);
-        const fragShader = webgl.createShader(webgl.FRAGMENT_SHADER);
-        webgl.shaderSource(fragShader, WebglBaseLine.fragCode);
-        webgl.compileShader(fragShader);
-        WebglBaseLine.program = webgl.createProgram();
-        webgl.attachShader(WebglBaseLine.program, vertShader);
-        webgl.attachShader(WebglBaseLine.program, fragShader);
-        webgl.linkProgram(WebglBaseLine.program);
-    }
 }
-WebglBaseLine.vertCode = `
-      attribute vec2 coordinates;
-      uniform mat2 uscale;
-      uniform vec2 uoffset;
-
-      void main(void) {
-          gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
-      }`;
-WebglBaseLine.fragCode = `
-      precision mediump float;
-      uniform highp vec4 uColor;
-
-      void main(void) {
-         gl_FragColor =  uColor;
-      }`;
 //# sourceMappingURL=WebglBaseLine.js.map

dist/webglplot.d.ts

 /**
- * Author Danial Chitnis 2019
+ * Author Danial Chitnis 2019-20
  *
@@ -14,2 +14,10 @@ * inspired by:
 export { WebglLine, ColorRGBA, WebglStep, WebglPolar };
+declare type WebGLPlotConfig = {
+    antialias?: boolean;
+    transparent?: boolean;
+    powerPerformance?: "default" | "high-performance" | "low-power";
+    deSync?: boolean;
+    preserveDrawing?: boolean;
+    debug?: boolean;
+};
 /**
@@ -22,3 +30,3 @@ * The main class for the webgl-plot library
      */
-    private webgl;
+    private readonly webgl;
     /**
@@ -52,3 +60,4 @@ * Global horizontal scale factor
      */
-    lines: WebglBaseLine[];
+    private _lines;
+    private progThinLine;
     /**
@@ -96,3 +105,4 @@ * log debug output
      */
-    constructor(canvas: HTMLCanvasElement | OffscreenCanvas, debug?: boolean);
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas, options?: WebGLPlotConfig);
+    get lines(): WebglBaseLine[];
     /**
@@ -113,3 +123,4 @@ * updates and redraws the content of the plot
      */
-    addLine(line: WebglBaseLine): void;
+    addLine(line: WebglLine | WebglStep | WebglPolar): void;
+    private initThinLineProgram;
     /**
@@ -120,2 +131,6 @@ * remove the last line
     /**
+     * remove all the lines
+     */
+    removeAllLines(): void;
+    /**
      * Change the WbGL viewport
@@ -122,0 +137,0 @@ * @param a

dist/webglplot.esm.js

@@ -24,3 +24,2 @@ class ColorRGBA {
         this._vbuffer = 0;
-        this._prog = 0;
         this._coord = 0;
@@ -30,37 +29,4 @@ this.visible = true;
     }
-    initProgram(webgl) {
-        if (!WebglBaseLine.program) {
-            this.createProgram(webgl);
-        }
-        this._prog = WebglBaseLine.program;
-    }
-    createProgram(webgl) {
-        const vertShader = webgl.createShader(webgl.VERTEX_SHADER);
-        webgl.shaderSource(vertShader, WebglBaseLine.vertCode);
-        webgl.compileShader(vertShader);
-        const fragShader = webgl.createShader(webgl.FRAGMENT_SHADER);
-        webgl.shaderSource(fragShader, WebglBaseLine.fragCode);
-        webgl.compileShader(fragShader);
-        WebglBaseLine.program = webgl.createProgram();
-        webgl.attachShader(WebglBaseLine.program, vertShader);
-        webgl.attachShader(WebglBaseLine.program, fragShader);
-        webgl.linkProgram(WebglBaseLine.program);
-    }
 }
-WebglBaseLine.vertCode = `
-      attribute vec2 coordinates;
-      uniform mat2 uscale;
-      uniform vec2 uoffset;
 
-      void main(void) {
-          gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
-      }`;
-WebglBaseLine.fragCode = `
-      precision mediump float;
-      uniform highp vec4 uColor;
-
-      void main(void) {
-         gl_FragColor =  uColor;
-      }`;
-
 /**
@@ -267,3 +233,2 @@ * The standard Line class
         this._vbuffer = 0;
-        this._prog = 0;
         this._coord = 0;
@@ -310,3 +275,3 @@ this.visible = true;
 /**
- * Author Danial Chitnis 2019
+ * Author Danial Chitnis 2019-20
  *
@@ -359,3 +324,3 @@ * inspired by:
      */
-    constructor(canvas, debug) {
+    constructor(canvas, options) {
         /**
@@ -365,11 +330,22 @@ * log debug output
         this.debug = false;
-        this.debug = debug == undefined ? false : debug;
+        if (options == undefined) {
+            this.webgl = canvas.getContext("webgl", {
+                antialias: true,
+                transparent: false,
+            });
+        }
+        else {
+            this.webgl = canvas.getContext("webgl", {
+                antialias: options.antialias,
+                transparent: options.transparent,
+                desynchronized: options.deSync,
+                powerPerformance: options.powerPerformance,
+                preserveDrawing: options.preserveDrawing,
+            });
+            this.debug = options.debug == undefined ? false : options.debug;
+        }
         this.log("canvas type is: " + canvas.constructor.name);
         this.log(`[webgl-plot]:width=${canvas.width}, height=${canvas.height}`);
-        const webgl = canvas.getContext("webgl", {
-            antialias: true,
-            transparent: false,
-        });
-        this.lines = [];
-        this.webgl = webgl;
+        this._lines = [];
+        //this.webgl = webgl;
         this.gScaleX = 1;
@@ -381,8 +357,13 @@ this.gScaleY = 1;
         // Enable the depth test
-        webgl.enable(webgl.DEPTH_TEST);
+        this.webgl.enable(this.webgl.DEPTH_TEST);
         // Clear the color and depth buffer
-        webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
+        this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
         // Set the view port
-        webgl.viewport(0, 0, canvas.width, canvas.height);
+        this.webgl.viewport(0, 0, canvas.width, canvas.height);
+        this.progThinLine = this.webgl.createProgram();
+        this.initThinLineProgram();
     }
+    get lines() {
+        return this._lines;
+    }
     /**
@@ -395,4 +376,4 @@ * updates and redraws the content of the plot
             if (line.visible) {
-                webgl.useProgram(line._prog);
-                const uscale = webgl.getUniformLocation(line._prog, "uscale");
+                webgl.useProgram(this.progThinLine);
+                const uscale = webgl.getUniformLocation(this.progThinLine, "uscale");
                 webgl.uniformMatrix2fv(uscale, false, new Float32Array([
@@ -404,5 +385,5 @@ line.scaleX * this.gScaleX,
                 ]));
-                const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
+                const uoffset = webgl.getUniformLocation(this.progThinLine, "uoffset");
                 webgl.uniform2fv(uoffset, new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY]));
-                const uColor = webgl.getUniformLocation(line._prog, "uColor");
+                const uColor = webgl.getUniformLocation(this.progThinLine, "uColor");
                 webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
@@ -430,3 +411,3 @@ webgl.bufferData(webgl.ARRAY_BUFFER, line.xy, webgl.STREAM_DRAW);
     addLine(line) {
-        line.initProgram(this.webgl);
+        //line.initProgram(this.webgl);
         line._vbuffer = this.webgl.createBuffer();
@@ -436,3 +417,3 @@ this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
         this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
-        line._coord = this.webgl.getAttribLocation(line._prog, "coordinates");
+        line._coord = this.webgl.getAttribLocation(this.progThinLine, "coordinates");
         this.webgl.vertexAttribPointer(line._coord, 2, this.webgl.FLOAT, false, 0, 0);
@@ -442,2 +423,31 @@ this.webgl.enableVertexAttribArray(line._coord);
     }
+    initThinLineProgram() {
+        const vertCode = `
+      attribute vec2 coordinates;
+      uniform mat2 uscale;
+      uniform vec2 uoffset;
+      void main(void) {
+         gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
+      }`;
+        // Create a vertex shader object
+        const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
+        // Attach vertex shader source code
+        this.webgl.shaderSource(vertShader, vertCode);
+        // Compile the vertex shader
+        this.webgl.compileShader(vertShader);
+        // Fragment shader source code
+        const fragCode = `
+         precision mediump float;
+         uniform highp vec4 uColor;
+         void main(void) {
+            gl_FragColor =  uColor;
+         }`;
+        const fragShader = this.webgl.createShader(this.webgl.FRAGMENT_SHADER);
+        this.webgl.shaderSource(fragShader, fragCode);
+        this.webgl.compileShader(fragShader);
+        this.progThinLine = this.webgl.createProgram();
+        this.webgl.attachShader(this.progThinLine, vertShader);
+        this.webgl.attachShader(this.progThinLine, fragShader);
+        this.webgl.linkProgram(this.progThinLine);
+    }
     /**
@@ -450,2 +460,8 @@ * remove the last line
     /**
+     * remove all the lines
+     */
+    removeAllLines() {
+        this._lines = [];
+    }
+    /**
      * Change the WbGL viewport
@@ -452,0 +468,0 @@ * @param a

dist/webglplot.js

 /**
- * Author Danial Chitnis 2019
+ * Author Danial Chitnis 2019-20
  *
@@ -55,3 +55,3 @@ * inspired by:
      */
-    constructor(canvas, debug) {
+    constructor(canvas, options) {
         /**
@@ -61,11 +61,22 @@ * log debug output
         this.debug = false;
-        this.debug = debug == undefined ? false : debug;
+        if (options == undefined) {
+            this.webgl = canvas.getContext("webgl", {
+                antialias: true,
+                transparent: false,
+            });
+        }
+        else {
+            this.webgl = canvas.getContext("webgl", {
+                antialias: options.antialias,
+                transparent: options.transparent,
+                desynchronized: options.deSync,
+                powerPerformance: options.powerPerformance,
+                preserveDrawing: options.preserveDrawing,
+            });
+            this.debug = options.debug == undefined ? false : options.debug;
+        }
         this.log("canvas type is: " + canvas.constructor.name);
         this.log(`[webgl-plot]:width=${canvas.width}, height=${canvas.height}`);
-        const webgl = canvas.getContext("webgl", {
-            antialias: true,
-            transparent: false,
-        });
-        this.lines = [];
-        this.webgl = webgl;
+        this._lines = [];
+        //this.webgl = webgl;
         this.gScaleX = 1;
@@ -77,8 +88,13 @@ this.gScaleY = 1;
         // Enable the depth test
-        webgl.enable(webgl.DEPTH_TEST);
+        this.webgl.enable(this.webgl.DEPTH_TEST);
         // Clear the color and depth buffer
-        webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
+        this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
         // Set the view port
-        webgl.viewport(0, 0, canvas.width, canvas.height);
+        this.webgl.viewport(0, 0, canvas.width, canvas.height);
+        this.progThinLine = this.webgl.createProgram();
+        this.initThinLineProgram();
     }
+    get lines() {
+        return this._lines;
+    }
     /**
@@ -91,4 +107,4 @@ * updates and redraws the content of the plot
             if (line.visible) {
-                webgl.useProgram(line._prog);
-                const uscale = webgl.getUniformLocation(line._prog, "uscale");
+                webgl.useProgram(this.progThinLine);
+                const uscale = webgl.getUniformLocation(this.progThinLine, "uscale");
                 webgl.uniformMatrix2fv(uscale, false, new Float32Array([
@@ -100,5 +116,5 @@ line.scaleX * this.gScaleX,
                 ]));
-                const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
+                const uoffset = webgl.getUniformLocation(this.progThinLine, "uoffset");
                 webgl.uniform2fv(uoffset, new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY]));
-                const uColor = webgl.getUniformLocation(line._prog, "uColor");
+                const uColor = webgl.getUniformLocation(this.progThinLine, "uColor");
                 webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
@@ -126,3 +142,3 @@ webgl.bufferData(webgl.ARRAY_BUFFER, line.xy, webgl.STREAM_DRAW);
     addLine(line) {
-        line.initProgram(this.webgl);
+        //line.initProgram(this.webgl);
         line._vbuffer = this.webgl.createBuffer();
@@ -132,3 +148,3 @@ this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
         this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
-        line._coord = this.webgl.getAttribLocation(line._prog, "coordinates");
+        line._coord = this.webgl.getAttribLocation(this.progThinLine, "coordinates");
         this.webgl.vertexAttribPointer(line._coord, 2, this.webgl.FLOAT, false, 0, 0);
@@ -138,2 +154,31 @@ this.webgl.enableVertexAttribArray(line._coord);
     }
+    initThinLineProgram() {
+        const vertCode = `
+      attribute vec2 coordinates;
+      uniform mat2 uscale;
+      uniform vec2 uoffset;
+      void main(void) {
+         gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
+      }`;
+        // Create a vertex shader object
+        const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
+        // Attach vertex shader source code
+        this.webgl.shaderSource(vertShader, vertCode);
+        // Compile the vertex shader
+        this.webgl.compileShader(vertShader);
+        // Fragment shader source code
+        const fragCode = `
+         precision mediump float;
+         uniform highp vec4 uColor;
+         void main(void) {
+            gl_FragColor =  uColor;
+         }`;
+        const fragShader = this.webgl.createShader(this.webgl.FRAGMENT_SHADER);
+        this.webgl.shaderSource(fragShader, fragCode);
+        this.webgl.compileShader(fragShader);
+        this.progThinLine = this.webgl.createProgram();
+        this.webgl.attachShader(this.progThinLine, vertShader);
+        this.webgl.attachShader(this.progThinLine, fragShader);
+        this.webgl.linkProgram(this.progThinLine);
+    }
     /**
@@ -146,2 +191,8 @@ * remove the last line
     /**
+     * remove all the lines
+     */
+    removeAllLines() {
+        this._lines = [];
+    }
+    /**
      * Change the WbGL viewport
@@ -148,0 +199,0 @@ * @param a

dist/webglplot.umd.js

@@ -30,3 +30,2 @@ (function (global, factory) {
             this._vbuffer = 0;
-            this._prog = 0;
             this._coord = 0;
@@ -36,37 +35,4 @@ this.visible = true;
         }
-        initProgram(webgl) {
-            if (!WebglBaseLine.program) {
-                this.createProgram(webgl);
-            }
-            this._prog = WebglBaseLine.program;
-        }
-        createProgram(webgl) {
-            const vertShader = webgl.createShader(webgl.VERTEX_SHADER);
-            webgl.shaderSource(vertShader, WebglBaseLine.vertCode);
-            webgl.compileShader(vertShader);
-            const fragShader = webgl.createShader(webgl.FRAGMENT_SHADER);
-            webgl.shaderSource(fragShader, WebglBaseLine.fragCode);
-            webgl.compileShader(fragShader);
-            WebglBaseLine.program = webgl.createProgram();
-            webgl.attachShader(WebglBaseLine.program, vertShader);
-            webgl.attachShader(WebglBaseLine.program, fragShader);
-            webgl.linkProgram(WebglBaseLine.program);
-        }
     }
-    WebglBaseLine.vertCode = `
-      attribute vec2 coordinates;
-      uniform mat2 uscale;
-      uniform vec2 uoffset;
 
-      void main(void) {
-          gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
-      }`;
-    WebglBaseLine.fragCode = `
-      precision mediump float;
-      uniform highp vec4 uColor;
-
-      void main(void) {
-         gl_FragColor =  uColor;
-      }`;
-
     /**
@@ -273,3 +239,2 @@ * The standard Line class
             this._vbuffer = 0;
-            this._prog = 0;
             this._coord = 0;
@@ -316,3 +281,3 @@ this.visible = true;
     /**
-     * Author Danial Chitnis 2019
+     * Author Danial Chitnis 2019-20
      *
@@ -365,3 +330,3 @@ * inspired by:
          */
-        constructor(canvas, debug) {
+        constructor(canvas, options) {
             /**
@@ -371,11 +336,22 @@ * log debug output
             this.debug = false;
-            this.debug = debug == undefined ? false : debug;
+            if (options == undefined) {
+                this.webgl = canvas.getContext("webgl", {
+                    antialias: true,
+                    transparent: false,
+                });
+            }
+            else {
+                this.webgl = canvas.getContext("webgl", {
+                    antialias: options.antialias,
+                    transparent: options.transparent,
+                    desynchronized: options.deSync,
+                    powerPerformance: options.powerPerformance,
+                    preserveDrawing: options.preserveDrawing,
+                });
+                this.debug = options.debug == undefined ? false : options.debug;
+            }
             this.log("canvas type is: " + canvas.constructor.name);
             this.log(`[webgl-plot]:width=${canvas.width}, height=${canvas.height}`);
-            const webgl = canvas.getContext("webgl", {
-                antialias: true,
-                transparent: false,
-            });
-            this.lines = [];
-            this.webgl = webgl;
+            this._lines = [];
+            //this.webgl = webgl;
             this.gScaleX = 1;
@@ -387,8 +363,13 @@ this.gScaleY = 1;
             // Enable the depth test
-            webgl.enable(webgl.DEPTH_TEST);
+            this.webgl.enable(this.webgl.DEPTH_TEST);
             // Clear the color and depth buffer
-            webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
+            this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
             // Set the view port
-            webgl.viewport(0, 0, canvas.width, canvas.height);
+            this.webgl.viewport(0, 0, canvas.width, canvas.height);
+            this.progThinLine = this.webgl.createProgram();
+            this.initThinLineProgram();
         }
+        get lines() {
+            return this._lines;
+        }
         /**
@@ -401,4 +382,4 @@ * updates and redraws the content of the plot
                 if (line.visible) {
-                    webgl.useProgram(line._prog);
-                    const uscale = webgl.getUniformLocation(line._prog, "uscale");
+                    webgl.useProgram(this.progThinLine);
+                    const uscale = webgl.getUniformLocation(this.progThinLine, "uscale");
                     webgl.uniformMatrix2fv(uscale, false, new Float32Array([
@@ -410,5 +391,5 @@ line.scaleX * this.gScaleX,
                     ]));
-                    const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
+                    const uoffset = webgl.getUniformLocation(this.progThinLine, "uoffset");
                     webgl.uniform2fv(uoffset, new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY]));
-                    const uColor = webgl.getUniformLocation(line._prog, "uColor");
+                    const uColor = webgl.getUniformLocation(this.progThinLine, "uColor");
                     webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
@@ -436,3 +417,3 @@ webgl.bufferData(webgl.ARRAY_BUFFER, line.xy, webgl.STREAM_DRAW);
         addLine(line) {
-            line.initProgram(this.webgl);
+            //line.initProgram(this.webgl);
             line._vbuffer = this.webgl.createBuffer();
@@ -442,3 +423,3 @@ this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
             this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
-            line._coord = this.webgl.getAttribLocation(line._prog, "coordinates");
+            line._coord = this.webgl.getAttribLocation(this.progThinLine, "coordinates");
             this.webgl.vertexAttribPointer(line._coord, 2, this.webgl.FLOAT, false, 0, 0);
@@ -448,2 +429,31 @@ this.webgl.enableVertexAttribArray(line._coord);
         }
+        initThinLineProgram() {
+            const vertCode = `
+      attribute vec2 coordinates;
+      uniform mat2 uscale;
+      uniform vec2 uoffset;
+      void main(void) {
+         gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
+      }`;
+            // Create a vertex shader object
+            const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
+            // Attach vertex shader source code
+            this.webgl.shaderSource(vertShader, vertCode);
+            // Compile the vertex shader
+            this.webgl.compileShader(vertShader);
+            // Fragment shader source code
+            const fragCode = `
+         precision mediump float;
+         uniform highp vec4 uColor;
+         void main(void) {
+            gl_FragColor =  uColor;
+         }`;
+            const fragShader = this.webgl.createShader(this.webgl.FRAGMENT_SHADER);
+            this.webgl.shaderSource(fragShader, fragCode);
+            this.webgl.compileShader(fragShader);
+            this.progThinLine = this.webgl.createProgram();
+            this.webgl.attachShader(this.progThinLine, vertShader);
+            this.webgl.attachShader(this.progThinLine, fragShader);
+            this.webgl.linkProgram(this.progThinLine);
+        }
         /**
@@ -456,2 +466,8 @@ * remove the last line
         /**
+         * remove all the lines
+         */
+        removeAllLines() {
+            this._lines = [];
+        }
+        /**
          * Change the WbGL viewport
@@ -458,0 +474,0 @@ * @param a

package.json

 {
   "name": "webgl-plot",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "High-performance 2D plotting library based on native WebGL",
@@ -10,7 +10,7 @@ "main": "./dist/webglplot.umd.js",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
-    "eslint": "^7.7.0",
-    "rollup": "^2.26.8",
-    "typedoc": "^0.19.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.1",
+    "eslint": "^7.8.1",
+    "rollup": "^2.26.10",
+    "typedoc": "^0.19.1",
     "typedoc-plugin-markdown": "^2.4.2",
@@ -17,0 +17,0 @@ "typescript": "^4.0.2"

src/WbglPolar.ts

@@ -21,3 +21,2 @@ import { ColorRGBA } from "./ColorRGBA";
     this._vbuffer = 0;
-    this._prog = 0;
     this._coord = 0;
@@ -24,0 +23,0 @@ this.visible = true;

src/WebglBaseLine.ts

@@ -7,21 +7,4 @@ import { ColorRGBA } from "./ColorRGBA";
 export class WebglBaseLine {
-  private static readonly vertCode = `
-      attribute vec2 coordinates;
-      uniform mat2 uscale;
-      uniform vec2 uoffset;
+  //private static program: WebGLProgram;
 
-      void main(void) {
-          gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
-      }`;
-
-  private static readonly fragCode = `
-      precision mediump float;
-      uniform highp vec4 uColor;
-
-      void main(void) {
-         gl_FragColor =  uColor;
-      }`;
-
-  private static program: WebGLProgram;
-
   public intensity: number;
@@ -92,3 +75,3 @@ public visible: boolean;
    */
-  public _prog: WebGLProgram;
+  //public _prog: WebGLProgram;
 
@@ -101,24 +84,2 @@ /**
 
-  public initProgram(webgl: WebGLRenderingContext) {
-    if(!WebglBaseLine.program) {
-      this.createProgram(webgl);
-    }
-    this._prog = WebglBaseLine.program;
-  }
-
-  private createProgram(webgl: WebGLRenderingContext) {
-    const vertShader = webgl.createShader(webgl.VERTEX_SHADER);
-    webgl.shaderSource(vertShader as WebGLShader, WebglBaseLine.vertCode);
-    webgl.compileShader(vertShader as WebGLShader);
-
-    const fragShader = webgl.createShader(webgl.FRAGMENT_SHADER);
-    webgl.shaderSource(fragShader as WebGLShader, WebglBaseLine.fragCode);
-    webgl.compileShader(fragShader as WebGLShader);
-
-    WebglBaseLine.program = webgl.createProgram() as WebGLProgram;
-    webgl.attachShader(WebglBaseLine.program, vertShader as WebGLShader);
-    webgl.attachShader(WebglBaseLine.program, fragShader as WebGLShader);
-    webgl.linkProgram(WebglBaseLine.program);
-  }
-
   /**
@@ -136,3 +97,2 @@ * @internal
     this._vbuffer = 0;
-    this._prog = 0;
     this._coord = 0;
@@ -139,0 +99,0 @@ this.visible = true;

src/webglplot.ts

 /**
- * Author Danial Chitnis 2019
+ * Author Danial Chitnis 2019-20
  *
@@ -17,2 +17,11 @@ * inspired by:
 
+type WebGLPlotConfig = {
+  antialias?: boolean;
+  transparent?: boolean;
+  powerPerformance?: "default" | "high-performance" | "low-power";
+  deSync?: boolean;
+  preserveDrawing?: boolean;
+  debug?: boolean;
+};
+
 /**
@@ -25,3 +34,3 @@ * The main class for the webgl-plot library
    */
-  private webgl: WebGLRenderingContext;
+  private readonly webgl: WebGLRenderingContext;
 
@@ -61,4 +70,6 @@ /**
    */
-  public lines: WebglBaseLine[];
+  private _lines: WebglBaseLine[];
 
+  private progThinLine: WebGLProgram;
+
   /**
@@ -107,4 +118,18 @@ * log debug output
    */
-  constructor(canvas: HTMLCanvasElement | OffscreenCanvas, debug?: boolean) {
-    this.debug = debug == undefined ? false : debug;
+  constructor(canvas: HTMLCanvasElement | OffscreenCanvas, options?: WebGLPlotConfig) {
+    if (options == undefined) {
+      this.webgl = canvas.getContext("webgl", {
+        antialias: true,
+        transparent: false,
+      }) as WebGLRenderingContext;
+    } else {
+      this.webgl = canvas.getContext("webgl", {
+        antialias: options.antialias,
+        transparent: options.transparent,
+        desynchronized: options.deSync,
+        powerPerformance: options.powerPerformance,
+        preserveDrawing: options.preserveDrawing,
+      }) as WebGLRenderingContext;
+      this.debug = options.debug == undefined ? false : options.debug;
+    }
 
@@ -114,11 +139,6 @@ this.log("canvas type is: " + canvas.constructor.name);
 
-    const webgl = canvas.getContext("webgl", {
-      antialias: true,
-      transparent: false,
-    }) as WebGLRenderingContext;
+    this._lines = [];
 
-    this.lines = [];
+    //this.webgl = webgl;
 
-    this.webgl = webgl;
-
     this.gScaleX = 1;
@@ -131,11 +151,19 @@ this.gScaleY = 1;
     // Enable the depth test
-    webgl.enable(webgl.DEPTH_TEST);
+    this.webgl.enable(this.webgl.DEPTH_TEST);
 
     // Clear the color and depth buffer
-    webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
+    this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
 
     // Set the view port
-    webgl.viewport(0, 0, canvas.width, canvas.height);
+    this.webgl.viewport(0, 0, canvas.width, canvas.height);
+
+    this.progThinLine = this.webgl.createProgram() as WebGLProgram;
+
+    this.initThinLineProgram();
   }
 
+  get lines(): WebglBaseLine[] {
+    return this._lines;
+  }
+
   /**
@@ -149,5 +177,5 @@ * updates and redraws the content of the plot
       if (line.visible) {
-        webgl.useProgram(line._prog);
+        webgl.useProgram(this.progThinLine);
 
-        const uscale = webgl.getUniformLocation(line._prog, "uscale");
+        const uscale = webgl.getUniformLocation(this.progThinLine, "uscale");
         webgl.uniformMatrix2fv(
@@ -164,3 +192,3 @@ uscale,
 
-        const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
+        const uoffset = webgl.getUniformLocation(this.progThinLine, "uoffset");
         webgl.uniform2fv(
@@ -171,3 +199,3 @@ uoffset,
 
-        const uColor = webgl.getUniformLocation(line._prog, "uColor");
+        const uColor = webgl.getUniformLocation(this.progThinLine, "uColor");
         webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
@@ -198,4 +226,4 @@
    */
-  public addLine(line: WebglBaseLine): void {
-    line.initProgram(this.webgl);
+  public addLine(line: WebglLine | WebglStep | WebglPolar): void {
+    //line.initProgram(this.webgl);
     line._vbuffer = this.webgl.createBuffer() as WebGLBuffer;
@@ -207,3 +235,3 @@ this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
 
-    line._coord = this.webgl.getAttribLocation(line._prog, "coordinates");
+    line._coord = this.webgl.getAttribLocation(this.progThinLine, "coordinates");
     this.webgl.vertexAttribPointer(line._coord, 2, this.webgl.FLOAT, false, 0, 0);
@@ -215,2 +243,37 @@ this.webgl.enableVertexAttribArray(line._coord);
 
+  private initThinLineProgram() {
+    const vertCode = `
+      attribute vec2 coordinates;
+      uniform mat2 uscale;
+      uniform vec2 uoffset;
+      void main(void) {
+         gl_Position = vec4(uscale*coordinates + uoffset, 0.0, 1.0);
+      }`;
+
+    // Create a vertex shader object
+    const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
+
+    // Attach vertex shader source code
+    this.webgl.shaderSource(vertShader as WebGLShader, vertCode);
+
+    // Compile the vertex shader
+    this.webgl.compileShader(vertShader as WebGLShader);
+
+    // Fragment shader source code
+    const fragCode = `
+         precision mediump float;
+         uniform highp vec4 uColor;
+         void main(void) {
+            gl_FragColor =  uColor;
+         }`;
+
+    const fragShader = this.webgl.createShader(this.webgl.FRAGMENT_SHADER);
+    this.webgl.shaderSource(fragShader as WebGLShader, fragCode);
+    this.webgl.compileShader(fragShader as WebGLShader);
+    this.progThinLine = this.webgl.createProgram() as WebGLProgram;
+    this.webgl.attachShader(this.progThinLine, vertShader as WebGLShader);
+    this.webgl.attachShader(this.progThinLine, fragShader as WebGLShader);
+    this.webgl.linkProgram(this.progThinLine);
+  }
+
   /**
@@ -224,2 +287,9 @@ * remove the last line
   /**
+   * remove all the lines
+   */
+  public removeAllLines(): void {
+    this._lines = [];
+  }
+
+  /**
    * Change the WbGL viewport
@@ -226,0 +296,0 @@ * @param a

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99301

increased by4.34%

Lines of code

2427

increased by3.81%

No dependency changes