From 5195b74af9fa18fbf41b636115424149f0eb1953 Mon Sep 17 00:00:00 2001 From: Jonathan Lundholm Date: Sat, 29 Aug 2020 21:00:46 +0200 Subject: [PATCH] Initializing the shaders for the lines in WebglBaseLine to better separate responsibilities and reduce the time it takes for lines to render --- dist/WebglBaseLine.d.ts | 5 +++ dist/WebglBaseLine.d.ts.map | 2 +- dist/WebglBaseLine.js | 33 ++++++++++++++++++++ dist/WebglBaseLine.js.map | 2 +- dist/webglplot.d.ts.map | 2 +- dist/webglplot.esm.js | 62 ++++++++++++++++++++----------------- dist/webglplot.js | 29 +---------------- dist/webglplot.js.map | 2 +- dist/webglplot.umd.js | 62 ++++++++++++++++++++----------------- src/WebglBaseLine.ts | 41 ++++++++++++++++++++++++ src/webglplot.ts | 35 +-------------------- 11 files changed, 153 insertions(+), 122 deletions(-) diff --git a/dist/WebglBaseLine.d.ts b/dist/WebglBaseLine.d.ts index 2e354f7..6f7e8b3 100644 --- a/dist/WebglBaseLine.d.ts +++ b/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 */ diff --git a/dist/WebglBaseLine.d.ts.map b/dist/WebglBaseLine.d.ts.map index ce7a106..282139f 100644 --- a/dist/WebglBaseLine.d.ts.map +++ b/dist/WebglBaseLine.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"WebglBaseLine.d.ts","sourceRoot":"","sources":["../src/WebglBaseLine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,qBAAa,aAAa;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IAExB;;OAEG;IACI,SAAS,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACI,EAAE,EAAE,YAAY,CAAC;IAExB;;OAEG;IACI,KAAK,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,IAAI,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACI,cAAc,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACI,QAAQ,EAAE,WAAW,CAAC;IAE7B;;;OAGG;IACI,KAAK,EAAE,YAAY,CAAC;IAE3B;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC;IAEtB;;OAEG;;CAeJ"} \ No newline at end of file +{"version":3,"file":"WebglBaseLine.d.ts","sourceRoot":"","sources":["../src/WebglBaseLine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAOzB;IAEP,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAMzB;IAEP,OAAO,CAAC,MAAM,CAAC,OAAO,CAAe;IAE9B,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IAExB;;OAEG;IACI,SAAS,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACI,EAAE,EAAE,YAAY,CAAC;IAExB;;OAEG;IACI,KAAK,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,IAAI,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACI,cAAc,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACI,QAAQ,EAAE,WAAW,CAAC;IAE7B;;;OAGG;IACI,KAAK,EAAE,YAAY,CAAC;IAE3B;;;OAGG;IACI,MAAM,EAAE,MAAM,CAAC;IAEf,WAAW,CAAC,KAAK,EAAC,qBAAqB;IAO9C,OAAO,CAAC,aAAa;IAerB;;OAEG;;CAeJ"} \ No newline at end of file diff --git a/dist/WebglBaseLine.js b/dist/WebglBaseLine.js index 1a5e59b..b9590d4 100644 --- a/dist/WebglBaseLine.js +++ b/dist/WebglBaseLine.js @@ -17,5 +17,38 @@ export 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; + }`; //# sourceMappingURL=WebglBaseLine.js.map \ No newline at end of file diff --git a/dist/WebglBaseLine.js.map b/dist/WebglBaseLine.js.map index 5d6d166..2ed6902 100644 --- a/dist/WebglBaseLine.js.map +++ b/dist/WebglBaseLine.js.map @@ -1 +1 @@ -{"version":3,"file":"WebglBaseLine.js","sourceRoot":"","sources":["../src/WebglBaseLine.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,aAAa;IA0ExB;;OAEG;IACH;QACE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QAEjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACrB,CAAC;CACF"} \ No newline at end of file +{"version":3,"file":"WebglBaseLine.js","sourceRoot":"","sources":["../src/WebglBaseLine.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,OAAO,aAAa;IAmHxB;;OAEG;IACH;QACE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QAEjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAElB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;IACrB,CAAC;IAtCM,WAAW,CAAC,KAA2B;QAC5C,IAAG,CAAC,aAAa,CAAC,OAAO,EAAE;YACzB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SAC3B;QACD,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC;IACrC,CAAC;IAEO,aAAa,CAAC,KAA2B;QAC/C,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QAC3D,KAAK,CAAC,YAAY,CAAC,UAAyB,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACtE,KAAK,CAAC,aAAa,CAAC,UAAyB,CAAC,CAAC;QAE/C,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC7D,KAAK,CAAC,YAAY,CAAC,UAAyB,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACtE,KAAK,CAAC,aAAa,CAAC,UAAyB,CAAC,CAAC;QAE/C,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC,aAAa,EAAkB,CAAC;QAC9D,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,EAAE,UAAyB,CAAC,CAAC;QACrE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,OAAO,EAAE,UAAyB,CAAC,CAAC;QACrE,KAAK,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;;AAhHuB,sBAAQ,GAAG;;;;;;;QAO7B,CAAC;AAEiB,sBAAQ,GAAG;;;;;;QAM7B,CAAC"} \ No newline at end of file diff --git a/dist/webglplot.d.ts.map b/dist/webglplot.d.ts.map index 6b1140f..0487c16 100644 --- a/dist/webglplot.d.ts.map +++ b/dist/webglplot.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"webglplot.d.ts","sourceRoot":"","sources":["../src/webglplot.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAEvD;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B;;OAEG;IACH,OAAO,CAAC,KAAK,CAAwB;IAErC;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,QAAQ,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACI,QAAQ,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACI,QAAQ,EAAE,MAAM,CAAC;IAExB;;OAEG;IACI,KAAK,EAAE,aAAa,EAAE,CAAC;IAE9B;;OAEG;IACI,KAAK,UAAS;IAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;gBACS,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO;IA+BxE;;OAEG;IACI,MAAM,IAAI,IAAI;IAmCd,KAAK,IAAI,IAAI;IAMpB;;;;;;;;;OASG;IACI,OAAO,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAgDzC;;OAEG;IACI,OAAO,IAAI,IAAI;IAItB;;;;;;OAMG;IACI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAIjE,OAAO,CAAC,GAAG;CAKZ"} \ No newline at end of file +{"version":3,"file":"webglplot.d.ts","sourceRoot":"","sources":["../src/webglplot.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;AAEvD;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,SAAS;IAC5B;;OAEG;IACH,OAAO,CAAC,KAAK,CAAwB;IAErC;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,OAAO,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACI,QAAQ,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACI,QAAQ,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACI,QAAQ,EAAE,MAAM,CAAC;IAExB;;OAEG;IACI,KAAK,EAAE,aAAa,EAAE,CAAC;IAE9B;;OAEG;IACI,KAAK,UAAS;IAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCG;gBACS,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO;IA+BxE;;OAEG;IACI,MAAM,IAAI,IAAI;IAmCd,KAAK,IAAI,IAAI;IAMpB;;;;;;;;;OASG;IACI,OAAO,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IAezC;;OAEG;IACI,OAAO,IAAI,IAAI;IAItB;;;;;;OAMG;IACI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAIjE,OAAO,CAAC,GAAG;CAKZ"} \ No newline at end of file diff --git a/dist/webglplot.esm.js b/dist/webglplot.esm.js index 18b777e..db7f9a7 100644 --- a/dist/webglplot.esm.js +++ b/dist/webglplot.esm.js @@ -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); diff --git a/dist/webglplot.js b/dist/webglplot.js index d4a57cc..15e62a9 100644 --- a/dist/webglplot.js +++ b/dist/webglplot.js @@ -118,37 +118,10 @@ export default 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); diff --git a/dist/webglplot.js.map b/dist/webglplot.js.map index c28d215..85db20b 100644 --- a/dist/webglplot.js.map +++ b/dist/webglplot.js.map @@ -1 +1 @@ -{"version":3,"file":"webglplot.js","sourceRoot":"","sources":["../src/webglplot.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"webglplot.js","sourceRoot":"","sources":["../src/webglplot.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/dist/webglplot.umd.js b/dist/webglplot.umd.js index d43c691..20687b2 100644 --- a/dist/webglplot.umd.js +++ b/dist/webglplot.umd.js @@ -32,7 +32,40 @@ 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 @@ -391,37 +424,10 @@ * ``` */ 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); diff --git a/src/WebglBaseLine.ts b/src/WebglBaseLine.ts index ba52cde..d9542b0 100644 --- a/src/WebglBaseLine.ts +++ b/src/WebglBaseLine.ts @@ -4,6 +4,25 @@ import { ColorRGBA } from "./ColorRGBA"; * Baseline class */ export class WebglBaseLine { + private static readonly vertCode = ` + attribute vec2 coordinates; + uniform mat2 uscale; + uniform vec2 uoffset; + + 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; public visible: boolean; @@ -77,6 +96,28 @@ export class WebglBaseLine { */ public _coord: number; + 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); + } + /** * @internal */ diff --git a/src/webglplot.ts b/src/webglplot.ts index a31220a..bc9fe2a 100644 --- a/src/webglplot.ts +++ b/src/webglplot.ts @@ -187,44 +187,11 @@ export default class WebGLPlot { * ``` */ public addLine(line: WebglBaseLine): void { + line.initProgram(this.webgl); line._vbuffer = this.webgl.createBuffer() as WebGLBuffer; this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer); this.webgl.bufferData(this.webgl.ARRAY_BUFFER, line.xy as ArrayBuffer, 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 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); - line._prog = this.webgl.createProgram() as WebGLProgram; - this.webgl.attachShader(line._prog, vertShader as WebGLShader); - this.webgl.attachShader(line._prog, fragShader as WebGLShader); - this.webgl.linkProgram(line._prog); - this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer); line._coord = this.webgl.getAttribLocation(line._prog, "coordinates");