diff --git a/demo/demo.js b/demo/demo.js
index 9ede54a..1bec70b 100644
--- a/demo/demo.js
+++ b/demo/demo.js
@@ -5,6 +5,8 @@ function main() {
const dataSin = [];
const dataCos = [];
const chart = new TimeChart(el, {
+ // debugWebGL: true,
+ // forceWebGL1: true,
baseTime: Date.now() - performance.now(),
series: [
{
diff --git a/demo/index.html b/demo/index.html
index 665990d..074ab5a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -30,6 +30,7 @@ 1000 points / second adding to chart.
+
diff --git a/rollup.config.js b/rollup.config.js
index 9c34db7..d939f13 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -17,7 +17,7 @@ const config = {
format: 'umd',
sourcemap: true
},
- { file: pkg.module, format: 'es', sourcemap: true },
+ { file: 'dist/timechart.module.js', format: 'es', sourcemap: true },
],
external: (id) => id.startsWith('d3-'),
watch: {
diff --git a/src/canvasLayer.ts b/src/canvasLayer.ts
index d70cf83..0a39899 100644
--- a/src/canvasLayer.ts
+++ b/src/canvasLayer.ts
@@ -1,9 +1,23 @@
import { resolveColorRGBA, ResolvedRenderOptions } from './options';
import { RenderModel } from './renderModel';
+function getContext(canvas: HTMLCanvasElement, forceWebGL1: boolean) {
+ if (!forceWebGL1) {
+ const ctx = canvas.getContext('webgl2');
+ if (ctx) {
+ return ctx;
+ }
+ }
+ const ctx = canvas.getContext('webgl');
+ if (ctx) {
+ return ctx;
+ }
+ throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.');
+}
+
export class CanvasLayer {
canvas: HTMLCanvasElement
- gl: WebGL2RenderingContext;
+ gl: WebGL2RenderingContext | WebGLRenderingContext;
constructor(el: HTMLElement, private options: ResolvedRenderOptions, model: RenderModel) {
el.style.position = 'relative';
@@ -13,14 +27,10 @@ export class CanvasLayer {
canvas.style.position = 'absolute';
el.appendChild(canvas);
- const ctx = canvas.getContext('webgl2');
- if (!ctx) {
- throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.');
- }
- this.gl = ctx;
+ this.gl = getContext(canvas, options.forceWebGL1);
const bgColor = resolveColorRGBA(options.backgroundColor);
- ctx.clearColor(...bgColor);
+ this.gl.clearColor(...bgColor);
this.canvas = canvas;
@@ -30,7 +40,7 @@ export class CanvasLayer {
el.removeChild(canvas);
canvas.width = 0;
canvas.height = 0;
- const lossContext = ctx.getExtension('WEBGL_lose_context');
+ const lossContext = this.gl.getExtension('WEBGL_lose_context');
if (lossContext) {
lossContext.loseContext();
}
diff --git a/src/index.ts b/src/index.ts
index 24e0a4a..a402f11 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -26,6 +26,7 @@ const defaultOptions = {
realTime: false,
baseTime: 0,
debugWebGL: false,
+ forceWebGL1: false,
} as const;
const defaultSeriesOptions = {
diff --git a/src/lineChartRenderer.ts b/src/lineChartRenderer.ts
index 76b2899..7c7cd35 100644
--- a/src/lineChartRenderer.ts
+++ b/src/lineChartRenderer.ts
@@ -10,10 +10,8 @@ const enum VertexAttribLocations {
DIR = 1,
}
-const vsSource = `#version 300 es
-layout (location = ${VertexAttribLocations.DATA_POINT}) in vec2 aDataPoint;
-layout (location = ${VertexAttribLocations.DIR}) in vec2 aDir;
-
+function vsSource(gl: WebGL2RenderingContext | WebGLRenderingContext) {
+ const body = `
uniform vec2 uModelScale;
uniform vec2 uModelTranslation;
uniform vec2 uProjectionScale;
@@ -25,20 +23,41 @@ void main() {
dir = normalize(dir);
vec2 pos2d = uProjectionScale * (cssPose + vec2(-dir.y, dir.x) * uLineWidth);
gl_Position = vec4(pos2d, 0, 1);
+}`;
+
+ if (gl instanceof WebGL2RenderingContext) {
+ return `#version 300 es
+layout (location = ${VertexAttribLocations.DATA_POINT}) in vec2 aDataPoint;
+layout (location = ${VertexAttribLocations.DIR}) in vec2 aDir;
+${body}`;
+ } else {
+ return `
+attribute vec2 aDataPoint;
+attribute vec2 aDir;
+${body}`;
+ }
}
-`;
-const fsSource = `#version 300 es
+function fsSource(gl: WebGL2RenderingContext | WebGLRenderingContext) {
+ const body = `
+`;
+ if (gl instanceof WebGL2RenderingContext) {
+ return `#version 300 es
precision lowp float;
-
uniform vec4 uColor;
-
out vec4 outColor;
-
void main() {
outColor = uColor;
+}`;
+ } else {
+ return `
+precision lowp float;
+uniform vec4 uColor;
+void main() {
+ gl_FragColor = uColor;
+}`;
+ }
}
-`;
class LineChartWebGLProgram extends LinkedWebGLProgram {
locations: {
@@ -48,14 +67,24 @@ class LineChartWebGLProgram extends LinkedWebGLProgram {
uLineWidth: WebGLUniformLocation;
uColor: WebGLUniformLocation;
};
- constructor(gl: WebGLRenderingContext, debug: boolean) {
- super(gl, vsSource, fsSource, debug);
+ constructor(gl: WebGL2RenderingContext | WebGLRenderingContext, debug: boolean) {
+ super(gl, vsSource(gl), fsSource(gl), debug);
+
+ if (gl instanceof WebGLRenderingContext) {
+ gl.bindAttribLocation(this.program, VertexAttribLocations.DATA_POINT, 'aDataPoint');
+ gl.bindAttribLocation(this.program, VertexAttribLocations.DIR, 'aDir');
+ }
+
+ this.link();
+
+ const getLoc = (name: string) => throwIfFalsy(gl.getUniformLocation(this.program, name));
+
this.locations = {
- uModelScale: throwIfFalsy(gl.getUniformLocation(this.program, 'uModelScale')),
- uModelTranslation: throwIfFalsy(gl.getUniformLocation(this.program, 'uModelTranslation')),
- uProjectionScale: throwIfFalsy(gl.getUniformLocation(this.program, 'uProjectionScale')),
- uLineWidth: throwIfFalsy(gl.getUniformLocation(this.program, 'uLineWidth')),
- uColor: throwIfFalsy(gl.getUniformLocation(this.program, 'uColor')),
+ uModelScale: getLoc('uModelScale'),
+ uModelTranslation: getLoc('uModelTranslation'),
+ uProjectionScale: getLoc('uProjectionScale'),
+ uLineWidth: getLoc('uLineWidth'),
+ uColor: getLoc('uColor'),
}
}
}
@@ -67,8 +96,51 @@ const BYTES_PER_POINT = INDEX_PER_POINT * Float32Array.BYTES_PER_ELEMENT;
const BUFFER_DATA_POINT_CAPACITY = 128 * 1024;
const BUFFER_CAPACITY = BUFFER_DATA_POINT_CAPACITY * INDEX_PER_DATAPOINT + 2 * POINT_PER_DATAPOINT;
-class VertexArray {
- vao: WebGLVertexArrayObject;
+interface IVAO {
+ bind(): void;
+ clear(): void;
+}
+
+class WebGL2VAO implements IVAO {
+ private vao: WebGLVertexArrayObject;
+ constructor(private gl: WebGL2RenderingContext) {
+ this.vao = throwIfFalsy(gl.createVertexArray());
+ this.bind();
+ }
+ bind() {
+ this.gl.bindVertexArray(this.vao);
+ }
+ clear() {
+ this.gl.deleteVertexArray(this.vao);
+ }
+}
+
+class OESVAO implements IVAO {
+ vao: WebGLVertexArrayObjectOES;
+ constructor(private vaoExt: OES_vertex_array_object) {
+ this.vao = throwIfFalsy(vaoExt.createVertexArrayOES());
+ this.bind();
+ }
+ bind() {
+ this.vaoExt.bindVertexArrayOES(this.vao);
+ }
+ clear() {
+ this.vaoExt.deleteVertexArrayOES(this.vao);
+ }
+}
+
+class WebGL1BufferInfo implements IVAO {
+ constructor(private bindFunc: () => void) {
+ }
+ bind() {
+ this.bindFunc();
+ }
+ clear() {
+ }
+}
+
+class SeriesSegmentVertexArray {
+ vao: IVAO;
dataBuffer: WebGLBuffer;
length = 0;
@@ -76,26 +148,33 @@ class VertexArray {
* @param firstDataPointIndex At least 1, since datapoint 0 has no path to draw.
*/
constructor(
- private gl: WebGL2RenderingContext,
+ private gl: WebGL2RenderingContext | WebGLRenderingContext,
private dataPoints: ArrayLike