Merge pull request #53 from lootic/shaders-once-lazy-init

Improved performance addLine, suggestion #2

Author: danchitnis

dist/WebglBaseLine.d.ts

@@ -3,6 +3,9 @@ import { ColorRGBA } from "./ColorRGBA";
  * Baseline class
  */
 export declare class WebglBaseLine {
+    private static readonly vertCode;
+    private static readonly fragCode;
+    private static program;
     intensity: number;
     visible: boolean;
     /**
@@ -63,6 +66,8 @@ export declare class WebglBaseLine {
      * @internal
      */
     _coord: number;
+    initProgram(webgl: WebGLRenderingContext): void;
+    private createProgram;
     /**
      * @internal
      */

dist/WebglBaseLine.d.ts.map

@@ -26,7 +26,40 @@ class WebglBaseLine {
         this.visible = true;
         this.intensity = 1;
     }
+    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;
+      }`;
 
 /**
  * The standard Line class
@@ -385,37 +418,10 @@ class WebGLPlot {
      * ```
      */
     addLine(line) {
+        line.initProgram(this.webgl);
         line._vbuffer = this.webgl.createBuffer();
         this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
         this.webgl.bufferData(this.webgl.ARRAY_BUFFER, line.xy, this.webgl.STREAM_DRAW);
-        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);
-        line._prog = this.webgl.createProgram();
-        this.webgl.attachShader(line._prog, vertShader);
-        this.webgl.attachShader(line._prog, fragShader);
-        this.webgl.linkProgram(line._prog);
         this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
         line._coord = this.webgl.getAttribLocation(line._prog, "coordinates");
         this.webgl.vertexAttribPointer(line._coord, 2, this.webgl.FLOAT, false, 0, 0);