autumnplot-gl 2.2.2 → 3.0.0

package/lib/PlotLayer.worker.js

@@ -241,11 +241,11 @@ function makePolylinesMiter(lines) {
 function makePolylines(lines) {
     const n_points_per_vert = Object.fromEntries(Object.entries(lines[0]).map(([k, v]) => {
         let n_verts;
-        if (v.length === undefined) {
+        if (typeof v === 'number') {
             n_verts = 1;
         }
-        else if (v[0].length === undefined) {
-            n_verts = v.length;
+        else if (typeof v[0] === 'number') {
+            n_verts = 1;
         }
         else {
             n_verts = v[0].length;
@@ -253,85 +253,121 @@ function makePolylines(lines) {
         return [k, n_verts];
     }));
     n_points_per_vert['extrusion'] = 2;
-    const n_verts = lines.map(l => l['verts'].length).reduce((a, b) => a + b);
-    const n_out_verts = (n_verts - lines.length) * 6;
+    n_points_per_vert['vertices'] += 1;
+    const n_verts = lines.map(l => l.vertices.length).reduce((a, b) => a + b);
+    const n_out_verts = n_verts * 4 - lines.length * 2;
     const ary_lens = Object.fromEntries(Object.entries(n_points_per_vert).map(([k, nppv]) => [k, n_out_verts * nppv]));
     let ret = {
-        'verts': new Float32Array(ary_lens['verts']),
-        'origin': new Float32Array(ary_lens['origin']),
-        'extrusion': new Float32Array(ary_lens['extrusion']),
-        'zoom': new Float32Array(ary_lens['zoom']),
-        'texcoords': new Float32Array(ary_lens['texcoords']),
+        vertices: new Float32Array(ary_lens['vertices']),
+        extrusion: new Float32Array(ary_lens['extrusion']),
     };
+    if ('offsets' in lines[0]) {
+        ret.offsets = new Float32Array(ary_lens['offsets']);
+    }
+    if ('data' in lines[0]) {
+        ret.data = new Float32Array(ary_lens['data']);
+    }
+    if ('zoom' in lines[0]) {
+        ret.zoom = new Float32Array(ary_lens['zoom']);
+    }
     let ilns = Object.fromEntries(Object.keys(ary_lens).map(k => [k, 0]));
-    const compute_normal_vec = (pt1, pt2) => {
+    const compute_normal_vec = (pt1, pt2, flip_y_coord) => {
         const line_vec_x = pt2[0] - pt1[0];
         const line_vec_y = pt2[1] - pt1[1];
         const line_vec_mag = Math.hypot(line_vec_x, line_vec_y);
-        return [line_vec_y / line_vec_mag, -line_vec_x / line_vec_mag];
+        const ext_x = line_vec_y / line_vec_mag;
+        const ext_y = -line_vec_x / line_vec_mag;
+        return [ext_x, flip_y_coord ? -ext_y : ext_y];
     };
     lines.forEach(line => {
-        const verts = line['verts'];
-        const texcoords = line['texcoords'];
-        let ary_ivt = ilns['verts'];
+        const verts = line.vertices.map(v => {
+            const v_ll = new LngLat(...v).toMercatorCoord();
+            return [v_ll.x, v_ll.y];
+        });
+        const has_offsets = line.offsets !== undefined;
+        const extrusion_verts = has_offsets ? line.offsets : verts;
         let pt_prev, pt_this = verts[0], pt_next = verts[1];
-        let tc_prev, tc_this = texcoords[0], tc_next = texcoords[1];
-        let [ext_x, ext_y] = compute_normal_vec(pt_this, pt_next);
-        ret['verts'][ary_ivt + 0] = pt_this[0];
-        ret['verts'][ary_ivt + 1] = pt_this[1];
-        ret['texcoords'][ary_ivt + 0] = tc_this[0];
-        ret['texcoords'][ary_ivt + 1] = tc_this[1];
-        ret['extrusion'][ary_ivt + 0] = ext_x;
-        ret['extrusion'][ary_ivt + 1] = ext_y;
+        let ept_prev, ept_this = extrusion_verts[0], ept_next = extrusion_verts[1];
+        let len_prev, len_this = 0;
+        let [ext_x, ext_y] = compute_normal_vec(ept_this, ept_next, !has_offsets);
+        ret.vertices[ilns.vertices++] = pt_this[0];
+        ret.vertices[ilns.vertices++] = pt_this[1];
+        ret.vertices[ilns.vertices++] = len_this;
+        ret.extrusion[ilns.extrusion++] = ext_x;
+        ret.extrusion[ilns.extrusion++] = ext_y;
         for (let ivt = 1; ivt < verts.length; ivt++) {
             pt_this = verts[ivt];
             pt_prev = verts[ivt - 1];
-            tc_this = texcoords[ivt];
-            tc_prev = texcoords[ivt - 1];
-            [ext_x, ext_y] = compute_normal_vec(pt_prev, pt_this);
-            ary_ivt = ilns['verts'] + (1 + (ivt - 1) * 4) * n_points_per_vert['verts'];
-            ret['verts'][ary_ivt + 0] = pt_prev[0];
-            ret['verts'][ary_ivt + 1] = pt_prev[1];
-            ret['verts'][ary_ivt + 2] = pt_prev[0];
-            ret['verts'][ary_ivt + 3] = pt_prev[1];
-            ret['verts'][ary_ivt + 4] = pt_this[0];
-            ret['verts'][ary_ivt + 5] = pt_this[1];
-            ret['verts'][ary_ivt + 6] = pt_this[0];
-            ret['verts'][ary_ivt + 7] = pt_this[1];
-            ret['texcoords'][ary_ivt + 0] = tc_prev[0];
-            ret['texcoords'][ary_ivt + 1] = tc_prev[1];
-            ret['texcoords'][ary_ivt + 2] = tc_prev[0];
-            ret['texcoords'][ary_ivt + 3] = tc_prev[1];
-            ret['texcoords'][ary_ivt + 4] = tc_this[0];
-            ret['texcoords'][ary_ivt + 5] = tc_this[1];
-            ret['texcoords'][ary_ivt + 6] = tc_this[0];
-            ret['texcoords'][ary_ivt + 7] = tc_this[1];
-            ret['extrusion'][ary_ivt + 0] = ext_x;
-            ret['extrusion'][ary_ivt + 1] = ext_y;
-            ret['extrusion'][ary_ivt + 2] = -ext_x;
-            ret['extrusion'][ary_ivt + 3] = -ext_y;
-            ret['extrusion'][ary_ivt + 4] = ext_x;
-            ret['extrusion'][ary_ivt + 5] = ext_y;
-            ret['extrusion'][ary_ivt + 6] = -ext_x;
-            ret['extrusion'][ary_ivt + 7] = -ext_y;
+            ept_this = extrusion_verts[ivt];
+            ept_prev = extrusion_verts[ivt - 1];
+            [ext_x, ext_y] = compute_normal_vec(ept_prev, ept_this, !has_offsets);
+            len_prev = len_this;
+            len_this += Math.hypot(verts[ivt - 1][0] - verts[ivt][0], verts[ivt - 1][1] - verts[ivt][1]);
+            ret.vertices[ilns.vertices++] = pt_prev[0];
+            ret.vertices[ilns.vertices++] = pt_prev[1];
+            ret.vertices[ilns.vertices++] = len_prev;
+            ret.vertices[ilns.vertices++] = pt_prev[0];
+            ret.vertices[ilns.vertices++] = pt_prev[1];
+            ret.vertices[ilns.vertices++] = len_prev;
+            ret.vertices[ilns.vertices++] = pt_this[0];
+            ret.vertices[ilns.vertices++] = pt_this[1];
+            ret.vertices[ilns.vertices++] = len_this;
+            ret.vertices[ilns.vertices++] = pt_this[0];
+            ret.vertices[ilns.vertices++] = pt_this[1];
+            ret.vertices[ilns.vertices++] = len_this;
+            ret.extrusion[ilns.extrusion++] = ext_x;
+            ret.extrusion[ilns.extrusion++] = ext_y;
+            ret.extrusion[ilns.extrusion++] = -ext_x;
+            ret.extrusion[ilns.extrusion++] = -ext_y;
+            ret.extrusion[ilns.extrusion++] = ext_x;
+            ret.extrusion[ilns.extrusion++] = ext_y;
+            ret.extrusion[ilns.extrusion++] = -ext_x;
+            ret.extrusion[ilns.extrusion++] = -ext_y;
         }
-        ret['verts'][ary_ivt + 8] = pt_this[0];
-        ret['verts'][ary_ivt + 9] = pt_this[1];
-        ret['texcoords'][ary_ivt + 8] = tc_this[0];
-        ret['texcoords'][ary_ivt + 9] = tc_this[1];
-        ret['extrusion'][ary_ivt + 8] = -ext_x;
-        ret['extrusion'][ary_ivt + 9] = -ext_y;
-        for (let ivt = 0; ivt < (verts.length - 1) * 6 * n_points_per_vert['origin']; ivt += n_points_per_vert['origin']) {
-            line['origin'].forEach((cd, icd) => {
-                ret['origin'][ilns['origin'] + ivt + icd] = cd;
-            });
+        ret.vertices[ilns.vertices++] = pt_this[0];
+        ret.vertices[ilns.vertices++] = pt_this[1];
+        ret.vertices[ilns.vertices++] = len_this;
+        ret.extrusion[ilns.extrusion++] = -ext_x;
+        ret.extrusion[ilns.extrusion++] = -ext_y;
+        if ('offsets' in ret) {
+            const offsets = line.offsets;
+            let off_prev, off_this = offsets[0];
+            ret.offsets[ilns.offsets++] = off_this[0];
+            ret.offsets[ilns.offsets++] = off_this[1];
+            for (let ivt = 1; ivt < offsets.length; ivt++) {
+                off_this = offsets[ivt];
+                off_prev = offsets[ivt - 1];
+                ret.offsets[ilns.offsets++] = off_prev[0];
+                ret.offsets[ilns.offsets++] = off_prev[1];
+                ret.offsets[ilns.offsets++] = off_prev[0];
+                ret.offsets[ilns.offsets++] = off_prev[1];
+                ret.offsets[ilns.offsets++] = off_this[0];
+                ret.offsets[ilns.offsets++] = off_this[1];
+                ret.offsets[ilns.offsets++] = off_this[0];
+                ret.offsets[ilns.offsets++] = off_this[1];
+            }
+            ret.offsets[ilns.offsets++] = off_this[0];
+            ret.offsets[ilns.offsets++] = off_this[1];
         }
-        for (let ivt = 0; ivt < (verts.length - 1) * 6 * n_points_per_vert['zoom']; ivt += n_points_per_vert['zoom']) {
-            ret['zoom'][ilns['zoom'] + ivt] = line['zoom'];
+        if ('data' in ret) {
+            const data = line.data;
+            let data_prev, data_this = data[0];
+            ret.data[ilns.data++] = data_this;
+            for (let ivt = 1; ivt < data.length; ivt++) {
+                data_this = data[ivt];
+                data_prev = data[ivt - 1];
+                ret.data[ilns.data++] = data_prev;
+                ret.data[ilns.data++] = data_prev;
+                ret.data[ilns.data++] = data_this;
+                ret.data[ilns.data++] = data_this;
+            }
+            ret.data[ilns.data++] = data_this;
+        }
+        if ('zoom' in ret) {
+            for (let ivt = 0; ivt < verts.length * 4 - 2; ivt++) {
+                ret.zoom[ilns.zoom++] = line['zoom'];
+            }
         }
-        Object.keys(ilns).forEach(k => {
-            ilns[k] += (verts.length - 1) * 6 * n_points_per_vert[k];
-        });
     });
     return ret;
 }

package/lib/PolylineCollection.d.ts

@@ -1,17 +1,28 @@
-import { WGLTextureSpec } from "autumn-wgl";
-import { PolylineSpec, LineSpec, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { LineData, WebGLAnyRenderingContext } from "./AutumnTypes";
+import { ColorMap } from "./Colormap";
+interface PolylineCollectionOpts {
+    offset_scale?: number;
+    color?: string;
+    cmap?: ColorMap;
+    line_width?: number;
+}
 declare class PolylineCollection {
     readonly width: number;
-    readonly scale: number;
+    readonly scale: number | null;
     private readonly program;
-    private readonly origin;
-    private readonly offset;
+    private readonly vertices;
     private readonly extrusion;
+    private readonly offset;
     private readonly min_zoom;
-    private readonly texture;
-    private readonly texcoords;
-    constructor(gl: WebGLAnyRenderingContext, polyline: PolylineSpec, tex_image: WGLTextureSpec, line_width: number, offset_scale: number);
+    private readonly line_data;
+    private readonly line_texture;
+    private readonly color;
+    private readonly cmap_min;
+    private readonly cmap_max;
+    private readonly index_map;
+    private readonly cmap_nonlin_texture;
+    private constructor();
+    static make(gl: WebGLAnyRenderingContext, lines: LineData[], opts?: PolylineCollectionOpts): Promise<PolylineCollection>;
     render(gl: WebGLAnyRenderingContext, matrix: number[] | Float32Array, [map_width, map_height]: [number, number], map_zoom: number, map_bearing: number, map_pitch: number): void;
 }
 export { PolylineCollection };
-export type { PolylineSpec, LineSpec };

package/lib/PolylineCollection.js

@@ -1,20 +1,39 @@
+import { Float16Array } from "@petamoriken/float16";
 import { WGLBuffer, WGLProgram, WGLTexture } from "autumn-wgl";
+import { makeIndexMap, makeTextureImage } from "./Colormap";
+import { getGLFormatTypeAlignment, layer_worker } from "./PlotComponent";
+import { hex2rgba } from "./utils";
 const polyline_vertex_src = `uniform mat4 u_matrix;
 uniform int u_offset;
 
 attribute vec2 a_pos;
-attribute float a_min_zoom;
 attribute vec2 a_extrusion;
+attribute float a_data;
+
+#ifdef ZOOM
+attribute float a_min_zoom;
+#endif
+
+#ifdef OFFSET
 attribute vec2 a_offset;
-attribute vec2 a_tex_coord;
-uniform lowp float u_offset_scale;
-uniform lowp float u_map_aspect;
-uniform lowp float u_zoom;
+#endif
+
 uniform lowp float u_line_width;
+uniform lowp float u_map_width;
+uniform lowp float u_map_height;
 uniform highp float u_map_bearing;
 
+#ifdef ZOOM
+uniform lowp float u_zoom;
+#endif
 
-varying highp vec2 v_tex_coord;
+#ifdef OFFSET
+uniform lowp float u_offset_scale;
+#endif
+
+#ifdef DATA
+varying highp float v_data;
+#endif
 
 mat4 scalingMatrix(float x_scale, float y_scale, float z_scale) {
     return mat4(x_scale, 0.0,     0.0,     0.0,
@@ -29,8 +48,8 @@ mat4 rotationZMatrix(float angle) {
 
     return mat4( c,  s,  0., 0.,
                 -s,  c,  0., 0.,
-                    0., 0., 1., 0.,
-                    0., 0., 0., 1.);
+                 0., 0., 1., 0.,
+                 0., 0., 0., 1.);
 }
 
 mat4 rotationXMatrix(float angle) {
@@ -38,9 +57,9 @@ mat4 rotationXMatrix(float angle) {
     float c = cos(angle);
 
     return mat4( 1.,  0., 0., 0.,
-                    0.,  c,  s,  0.,
-                    0., -s,  c,  0.,
-                    0.,  0., 0., 1.);
+                 0.,  c,  s,  0.,
+                 0., -s,  c,  0.,
+                 0.,  0., 0., 1.);
 }
 
 void main() {
@@ -49,47 +68,154 @@ void main() {
 
     vec4 center_pos = u_matrix * vec4(a_pos.xy + globe_offset, 0.0, 1.0);
     vec4 offset = vec4(0.0, 0.0, 0.0, 0.0);
-    
+
+#ifdef ZOOM
     if (u_zoom >= a_min_zoom) {
-        vec2 offset_2d = a_offset + u_line_width * a_extrusion;
+#endif
+
+        vec2 offset_ext = u_line_width * 1.5 * a_extrusion;
+
+        mat4 map_stretch_matrix = scalingMatrix(u_map_height / u_map_width, 1., 1.);
+        mat4 rotation_matrix = rotationZMatrix(radians(u_map_bearing));  
+        offset = map_stretch_matrix * rotation_matrix * vec4(offset_ext, 0., 0.);
 
-        mat4 rotation_matrix = rotationZMatrix(radians(u_map_bearing));
-        mat4 map_stretch_matrix = scalingMatrix(u_offset_scale, u_offset_scale / u_map_aspect, 1.);
-        offset = map_stretch_matrix * rotation_matrix * vec4(offset_2d, 0., 0.);
+#ifdef OFFSET
+        map_stretch_matrix = scalingMatrix(1., u_map_width / u_map_height, 1.);
+        vec2 offset_offset = u_offset_scale * a_offset;
+        offset += map_stretch_matrix * rotation_matrix * vec4(offset_offset, 0., 0.);
+#endif
+
+#ifdef ZOOM
     }
+#endif
 
     gl_Position = center_pos + offset;
-    v_tex_coord = a_tex_coord;
+
+#ifdef DATA
+    v_data = a_data;
+#endif
 }`
-const polyline_fragment_src = `varying highp vec2 v_tex_coord;
+const polyline_fragment_src = `#ifdef DATA
+varying highp float v_data;
 
-uniform sampler2D u_sampler;
+uniform sampler2D u_cmap_sampler;
+uniform sampler2D u_cmap_nonlin_sampler;
+uniform highp float u_cmap_min;
+uniform highp float u_cmap_max;
+uniform int u_n_index;
+#else
+uniform lowp vec4 u_color;
+#endif
 
 void main() {
-    if (v_tex_coord.x > 1.0) {
+    lowp vec4 color;
+#ifdef DATA
+    lowp float index_buffer = 1. / (2. * float(u_n_index));
+    lowp float normed_val = (v_data - u_cmap_min) / (u_cmap_max - u_cmap_min);
+
+    if (normed_val < 0.0 || normed_val > 1.0) {
         discard;
     }
 
-    lowp vec4 tex_color = texture2D(u_sampler, v_tex_coord);
-    gl_FragColor = tex_color;
+    normed_val = index_buffer + normed_val * (1. - 2. * index_buffer); 
+    highp float nonlin_val = texture2D(u_cmap_nonlin_sampler, vec2(normed_val, 0.5)).r;
+    color = texture2D(u_cmap_sampler, vec2(nonlin_val, 0.5));
+#else
+    color = u_color;
+#endif
+    gl_FragColor = color;
 }`
 class PolylineCollection {
-    constructor(gl, polyline, tex_image, line_width, offset_scale) {
+    constructor(gl, polyline, opts) {
+        opts = opts === undefined ? {} : opts;
+        this.color = opts.color === undefined ? [0., 0., 0., 1.] : hex2rgba(opts.color);
+        const line_width = opts.line_width === undefined ? 1 : opts.line_width;
         this.width = line_width;
-        this.scale = offset_scale;
-        this.program = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src);
-        this.origin = new WGLBuffer(gl, polyline['origin'], 2, gl.TRIANGLE_STRIP);
-        this.offset = new WGLBuffer(gl, polyline['verts'], 2, gl.TRIANGLE_STRIP);
+        const shader_defines = [];
+        this.vertices = new WGLBuffer(gl, polyline['vertices'], 3, gl.TRIANGLE_STRIP);
         this.extrusion = new WGLBuffer(gl, polyline['extrusion'], 2, gl.TRIANGLE_STRIP);
-        this.min_zoom = new WGLBuffer(gl, polyline['zoom'], 1, gl.TRIANGLE_STRIP);
-        this.texture = new WGLTexture(gl, tex_image);
-        this.texcoords = new WGLBuffer(gl, polyline['texcoords'], 2, gl.TRIANGLE_STRIP);
+        if (polyline.offsets !== undefined) {
+            this.offset = new WGLBuffer(gl, polyline.offsets, 2, gl.TRIANGLE_STRIP);
+            this.scale = opts.offset_scale === undefined ? 1 : opts.offset_scale;
+            shader_defines.push('OFFSET');
+        }
+        else {
+            this.offset = null;
+            this.scale = null;
+        }
+        if (polyline.zoom !== undefined) {
+            this.min_zoom = new WGLBuffer(gl, polyline.zoom, 1, gl.TRIANGLE_STRIP);
+            shader_defines.push('ZOOM');
+        }
+        else {
+            this.min_zoom = null;
+        }
+        this.cmap_min = -3.40282347e+38;
+        this.cmap_max = 3.40282347e+38;
+        if (polyline.data !== undefined) {
+            // TAS: this needs some cleanup (there's some repated code between here and the contour fills that should be combined?)
+            this.min_zoom = new WGLBuffer(gl, polyline.zoom, 1, gl.TRIANGLE_STRIP);
+            shader_defines.push('DATA');
+            const { format: format_nonlin, type: type_nonlin, row_alignment: row_alignment_nonlin } = getGLFormatTypeAlignment(gl, true);
+            let tex_image;
+            if (opts.cmap === undefined) {
+                tex_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'width': 1, 'height': 1, 'image': new Uint8Array(this.color), 'mag_filter': gl.NEAREST };
+                this.index_map = new Float16Array([0., 1.]);
+            }
+            else {
+                tex_image = { 'format': gl.RGBA, 'type': gl.UNSIGNED_BYTE, 'image': makeTextureImage(opts.cmap), 'mag_filter': gl.NEAREST };
+                this.cmap_min = opts.cmap.levels[0];
+                this.cmap_max = opts.cmap.levels[opts.cmap.levels.length - 1];
+                this.index_map = makeIndexMap(opts.cmap);
+            }
+            const cmap_nonlin_image = { 'format': format_nonlin, 'type': type_nonlin,
+                'width': this.index_map.length, 'height': 1,
+                'image': new Uint16Array(this.index_map.buffer),
+                'mag_filter': gl.LINEAR, 'row_alignment': row_alignment_nonlin,
+            };
+            this.cmap_nonlin_texture = new WGLTexture(gl, cmap_nonlin_image);
+            this.line_texture = new WGLTexture(gl, tex_image);
+            this.line_data = new WGLBuffer(gl, polyline['data'], 1, gl.TRIANGLE_STRIP);
+        }
+        else {
+            this.line_texture = null;
+            this.line_data = null;
+            this.index_map = null;
+        }
+        this.program = new WGLProgram(gl, polyline_vertex_src, polyline_fragment_src, { define: shader_defines });
+    }
+    static async make(gl, lines, opts) {
+        const polylines = await layer_worker.makePolyLines(lines);
+        return new PolylineCollection(gl, polylines, opts);
     }
     render(gl, matrix, [map_width, map_height], map_zoom, map_bearing, map_pitch) {
         if (matrix instanceof Float32Array)
             matrix = [...matrix];
-        this.program.use({ 'a_pos': this.origin, 'a_offset': this.offset, 'a_extrusion': this.extrusion, 'a_min_zoom': this.min_zoom, 'a_tex_coord': this.texcoords }, { 'u_offset_scale': this.scale * (map_height / map_width), 'u_line_width': this.width, 'u_matrix': matrix,
-            'u_map_aspect': map_height / map_width, 'u_zoom': map_zoom, 'u_map_bearing': map_bearing, 'u_offset': 0 }, { 'u_sampler': this.texture });
+        const attributes = { 'a_pos': this.vertices, 'a_extrusion': this.extrusion };
+        const uniforms = {
+            'u_matrix': matrix, 'u_line_width': this.width, 'u_map_width': map_width, 'u_map_height': map_height, 'u_map_bearing': map_bearing, 'u_offset': 0
+        };
+        const textures = {};
+        if (this.offset !== null) {
+            attributes['a_offset'] = this.offset;
+            uniforms['u_offset_scale'] = this.scale * (map_height / map_width);
+        }
+        if (this.min_zoom !== null) {
+            attributes['a_min_zoom'] = this.min_zoom;
+            uniforms['u_zoom'] = map_zoom;
+        }
+        if (this.line_data !== null && this.line_texture !== null) {
+            attributes['a_data'] = this.line_data;
+            textures['u_cmap_sampler'] = this.line_texture;
+            textures['u_cmap_nonlin_sampler'] = this.cmap_nonlin_texture;
+            uniforms['u_cmap_min'] = this.cmap_min;
+            uniforms['u_cmap_max'] = this.cmap_max;
+            uniforms['u_n_index'] = this.index_map.length;
+        }
+        else {
+            uniforms['u_color'] = this.color;
+        }
+        this.program.use(attributes, uniforms, textures);
         gl.enable(gl.BLEND);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         this.program.draw();