Basic program render.

src/map/render/webgl_v2/webgl_v2_render_utils.ts

@@ -36,22 +36,22 @@ export const getLayerGl2Objects = (props: LayerGl2ObjectsProps): WebGl2Object[]
     return [];
   }
 
-  const programs: WebGl2Object[] = [];
+  const objects: WebGl2Object[] = [];
   const backgroundPrograms = getLayerBackground(props);
 
   if (backgroundPrograms.length) {
-    programs.push(...backgroundPrograms);
+    objects.push(...backgroundPrograms);
   }
 
   for (const feature of props.layer.getFeatures()) {
     const featureGlGrograms = getFeatureGl2Objects(feature, props);
 
     if (featureGlGrograms.length) {
-      programs.push(...featureGlGrograms);
+      objects.push(...featureGlGrograms);
     }
   }
 
-  return programs;
+  return objects;
 };
 
 export const getFeatureGl2Objects = (feature: TileFeature, props: LayerGl2ObjectsProps): WebGl2Object[] => {

src/webgl_v2/objects/circle.ts

@@ -1,5 +1,5 @@
 import { BucketPointer, BufferBucket } from '../buffer/buffer_bucket';
-import { WebGl2ProgramDefaultUniforms, ProgramObjectType } from '../programs/default/default_program';
+import { WebGl2ProgramDefaultUniforms } from '../programs/default/default_program';
 import { WebGl2ProgramType } from '../programs/program';
 import { Vector2 } from '../types';
 import {
@@ -24,7 +24,7 @@ export class WebGl2Circle extends WebGl2Object<WebGl2CircleAttributes> {
   getUniforms(): WebGl2ProgramDefaultUniforms {
     return {
       ...super.getUniforms(),
-      u_object_type: ProgramObjectType.CIRCLE,
+      // u_object_type: ProgramObjectType.CIRCLE,
     };
   }
 

src/webgl_v2/objects/line.ts

@@ -1,6 +1,6 @@
 import { BufferBucket, BucketPointer } from '../buffer/buffer_bucket';
 import { WebGl2ProgramType } from '../programs/program';
-import { WebGl2ProgramDefaultUniforms, ProgramObjectType } from '../programs/default/default_program';
+import { WebGl2ProgramDefaultUniforms } from '../programs/default/default_program';
 import { Vector2 } from '../types';
 import {
   PrimitiveType,
@@ -27,8 +27,7 @@ export class WebGl2Line extends WebGl2Object<WebGl2LineAttributes> {
   getUniforms(): WebGl2ProgramDefaultUniforms {
     return {
       ...super.getUniforms(),
-      u_line_width: this.attributes.lineWidth,
-      u_object_type: ProgramObjectType.LINE,
+      // u_line_width: this.attributes.lineWidth,
     };
   }
 

src/webgl_v2/objects/rectangle.ts

@@ -9,13 +9,13 @@ import {
   WebGl2ObjectDrawAttrs,
 } from './object';
 
-export interface WebGl2Rectanglettributes extends WebGl2ObjectAttributes {
+export interface WebGl2RectangleAttributes extends WebGl2ObjectAttributes {
   p: Vector2;
   width: number;
   height: number;
 }
 
-export class WebGl2Rectangle extends WebGl2Object<WebGl2Rectanglettributes> {
+export class WebGl2Rectangle extends WebGl2Object<WebGl2RectangleAttributes> {
   primitiveType = PrimitiveType.TRIANGLES;
 
   programType = WebGl2ProgramType.default;

src/webgl_v2/objects/triangle.ts

@@ -0,0 +1,34 @@
+import { BucketPointer, BufferBucket } from '../buffer/buffer_bucket';
+import { WebGl2ProgramType } from '../programs/program';
+import { Vector2 } from '../types';
+import {
+  WebGl2Object,
+  PrimitiveType,
+  WebGl2ObjectAttributes,
+  WebGl2ObjectDrawType,
+  WebGl2ObjectDrawAttrs,
+} from './object';
+
+export interface WebGl2TriangleAttributes extends WebGl2ObjectAttributes {
+  p1: Vector2;
+  p2: Vector2;
+  p3: Vector2;
+}
+
+export class WebGl2Triangle extends WebGl2Object<WebGl2TriangleAttributes> {
+  primitiveType = PrimitiveType.TRIANGLES;
+
+  programType = WebGl2ProgramType.default;
+
+  drawType = WebGl2ObjectDrawType.ARRAYS;
+
+  bufferDataToBucket(bufferBucket: BufferBucket): BucketPointer {
+    return bufferBucket.writeAndCommit([...this.attributes.p1, ...this.attributes.p2, ...this.attributes.p3]);
+  }
+
+  getDrawAttributes(): WebGl2ObjectDrawAttrs {
+    return {
+      numElements: 3,
+    };
+  }
+}

src/webgl_v2/painter.ts

@@ -17,9 +17,9 @@ export class WebGl2Painter {
   public init() {
     const gl = this.gl;
 
-    this.initPrograms();
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
     this.clear();
+    this.initPrograms();
   }
 
   public destroy() {}
@@ -59,11 +59,7 @@ export class WebGl2Painter {
       ptr: obj.bufferDataToBucket(bucket),
     }));
 
-    let currentProgramType = objects[0].programType;
-    let currentProgram = this.programsMap[currentProgramType];
-    currentProgram.use();
-    currentProgram.setBuffer(bucket.getBuffer());
-
+    let currentProgram = null;
     for (let objectIndex = 0; objectIndex < objects.length; objectIndex++) {
       const { obj, ptr } = objWithBuffer[objectIndex];
 
@@ -74,21 +70,22 @@ export class WebGl2Painter {
         currentProgram.setBuffer(bucket.getBuffer());
       }
 
-      const { numElements, instanceCount } = obj.getDrawAttributes();
+      // Set uniforms and buffers.
+      currentProgram.setUniforms(obj.getUniforms());
 
+      const { numElements, instanceCount } = obj.getDrawAttributes();
       const offset = Float32Array.BYTES_PER_ELEMENT * ptr.offset;
 
-      // Set uniforms.
-      currentProgram.setUniforms(obj.getUniforms());
+      this.gl.vertexAttribPointer(0, 2, this.gl.FLOAT, true, 8, offset);
 
       if (obj.drawType === WebGl2ObjectDrawType.ARRAYS) {
-        gl.drawArrays(obj.primitiveType, offset, numElements);
+        gl.drawArrays(obj.primitiveType, 0, numElements);
       } else if (obj.drawType === WebGl2ObjectDrawType.ELEMENTS) {
-        gl.drawElements(obj.primitiveType, numElements, gl.UNSIGNED_SHORT, offset);
+        gl.drawElements(obj.primitiveType, numElements, gl.UNSIGNED_SHORT, 0);
       } else if (obj.drawType === WebGl2ObjectDrawType.ARRAYS_INSTANCED) {
-        gl.drawArraysInstanced(obj.primitiveType, offset, numElements, instanceCount);
+        gl.drawArraysInstanced(obj.primitiveType, 0, numElements, instanceCount);
       } else if (obj.drawType === WebGl2ObjectDrawType.ELEMENTS_INSTANCED) {
-        gl.drawElementsInstanced(obj.primitiveType, numElements, gl.UNSIGNED_SHORT, offset, instanceCount);
+        gl.drawElementsInstanced(obj.primitiveType, numElements, gl.UNSIGNED_SHORT, 0, instanceCount);
       }
     }
 

src/webgl_v2/programs/default/default_program.ts

@@ -2,19 +2,7 @@ import VERTEX_SHADER from './default_program_vs.glsl';
 import FRAGMENT_SHADER from './default_program_fs.glsl';
 import { WebGl2Program, WebGl2ProgramUniforms } from '../program';
 
-export enum ProgramObjectType {
-  CIRCLE = 0,
-  LINE = 1,
-  POLYGON = 2,
-  TEXT = 3,
-  IMAGE = 4,
-}
-
-export interface WebGl2ProgramDefaultUniforms extends WebGl2ProgramUniforms {
-  u_object_type: ProgramObjectType;
-  // line specific uniforms
-  u_line_width?: number;
-}
+export interface WebGl2ProgramDefaultUniforms extends WebGl2ProgramUniforms {}
 
 export class WebGl2ProgramDefault extends WebGl2Program {
   protected u_colorLocation: WebGLUniformLocation;
@@ -55,22 +43,24 @@ export class WebGl2ProgramDefault extends WebGl2Program {
     this.u_colorLocation = gl.getUniformLocation(this.program, 'u_color');
     this.u_resolutionLocation = gl.getUniformLocation(this.program, 'u_resolution');
     this.u_matrixLocation = gl.getUniformLocation(this.program, 'u_matrix');
-    this.u_object_typeLocation = gl.getUniformLocation(this.program, 'u_object_type');
-    this.u_line_widthLocation = gl.getUniformLocation(this.program, 'u_line_width');
   }
 
   /**
    * Bind buffer to the webgl2 program.
    * @param bufferData buffer data to be binded.
    */
-  setBuffer(data: Float32Array): number {
+  setBuffer(data: Float32Array) {
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
     this.gl.bufferData(this.gl.ARRAY_BUFFER, data, this.gl.STATIC_DRAW);
 
+    // const vao = this.gl.createVertexArray();
+    // this.gl.bindVertexArray(vao);
+    this.gl.enableVertexAttribArray(this.a_positionLocation);
+
     // 2D Objects supported only for now.
     this.gl.vertexAttribPointer(this.a_positionLocation, 2, this.gl.FLOAT, true, 8, 0);
 
-    return this.a_positionLocation;
+    // this.gl.bindVertexArray(vao);
   }
 
   /**
@@ -81,7 +71,5 @@ export class WebGl2ProgramDefault extends WebGl2Program {
     this.gl.uniform4fv(this.u_colorLocation, uniforms.u_color);
     this.gl.uniform2f(this.u_resolutionLocation, uniforms.u_resolution[0], uniforms.u_resolution[1]);
     this.gl.uniformMatrix3fv(this.u_matrixLocation, false, uniforms.u_matrix);
-    this.gl.uniform1ui(this.u_object_typeLocation, uniforms.u_object_type);
-    this.gl.uniform1f(this.u_line_widthLocation, uniforms.u_line_width || 1);
   }
 }

src/webgl_v2/programs/default/default_program_fs.glsl

@@ -1,5 +1,5 @@
 #version 300 es
-precision lowp float;
+precision highp float;
 
 uniform vec4 u_color;
 

src/webgl_v2/programs/default/default_program_vs.glsl

@@ -1,43 +1,14 @@
 #version 300 es
-precision highp float;
 
 in vec2 a_position;
-in vec2 point_a;
-in vec2 point_b;
-
-#define OBJECT_TYPE_CIRCLE   0x00000000u
-#define OBJECT_TYPE_LINE     0x00000001u
-#define OBJECT_TYPE_POLYGON  0x00000002u
-#define OBJECT_TYPE_TEXT     0x00000003u
-#define OBJECT_TYPE_IMAGE    0x00000004u
-uniform uint u_object_type;
 
 uniform vec2 u_resolution;
 uniform mat3 u_matrix;
 
-// OBJECT_TYPE_LINE specific uniforms
-uniform float u_line_width;
-
-vec2 get_line_position() {
-  vec2 xBasis = point_b - point_a;
-  vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
-
-  return point_a + xBasis * a_position.x + yBasis * u_line_width * a_position.y;
-}
-
-vec2 get_position() {
-  if (u_object_type == OBJECT_TYPE_LINE) {
-    return get_line_position();
-  }
-
-  return a_position;
-}
-
+// all shaders have a main function
 void main() {
-  vec2 pos = get_position();
-
-  // Apply tranlation, rotation and scale.
-  vec2 position = (u_matrix * vec3(pos, 1)).xy;
+    // Apply tranlation, rotation and scale.
+  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
 
   // Apply resolution.
   vec2 zeroToOne = position / u_resolution;
@@ -46,3 +17,51 @@ void main() {
 
   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
 }
+
+// precision highp float;
+
+// in vec2 a_position;
+// in vec2 point_a;
+// in vec2 point_b;
+
+// #define OBJECT_TYPE_CIRCLE   0x00000000u
+// #define OBJECT_TYPE_LINE     0x00000001u
+// #define OBJECT_TYPE_POLYGON  0x00000002u
+// #define OBJECT_TYPE_TEXT     0x00000003u
+// #define OBJECT_TYPE_IMAGE    0x00000004u
+// uniform uint u_object_type;
+
+// uniform vec2 u_resolution;
+// uniform mat3 u_matrix;
+
+// // OBJECT_TYPE_LINE specific uniforms
+// uniform float u_line_width;
+
+// vec2 get_line_position() {
+//   vec2 xBasis = point_b - point_a;
+//   vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
+
+//   return point_a + xBasis * a_position.x + yBasis * u_line_width * a_position.y;
+// }
+
+// vec2 get_position() {
+//   if (u_object_type == OBJECT_TYPE_LINE) {
+//     return get_line_position();
+//   }
+
+//   return a_position;
+// }
+
+// void main() {
+//   vec2 pos = get_position();
+
+//   // Apply tranlation, rotation and scale.
+//   vec2 position = (u_matrix * vec3(pos, 1)).xy;
+
+//   // Apply resolution.
+//   vec2 zeroToOne = position / u_resolution;
+//   vec2 zeroToTwo = zeroToOne * 2.0;
+//   vec2 clipSpace = zeroToTwo - 1.0;
+
+//   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
+// }

src/webgl_v2/programs/program.ts

@@ -74,7 +74,7 @@ export abstract class WebGl2Program {
    * Bind buffer to the webgl2 program.
    * @param bufferData buffer data to be binded.
    */
-  abstract setBuffer(bufferData: Float32Array): number;
+  abstract setBuffer(bufferData: Float32Array): void;
 
   /**
    * Bind all uniform values to gl program.