Supported instanced draw on WebGL 1 (#124)

* Supported instanced draw on WebGL 1

* TILES-5073 Bumped version to 0.13.0

Author: EvgenyRodygin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "2gl",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "WebGL library for 2GIS projects",
   "repository": {
     "type": "git",

src/Buffer.js

@@ -60,26 +60,37 @@ class Buffer {
      *
      * Если используется первый раз, добавляет данные в контекст WebGL.
      *
-     * @param {WebGLRenderingContext} gl
+     * @param {WebGLRenderingContext | WebGL2RenderingContext} gl
      * @param {?Number} location Положение аттрибута для связывания данных с переменными в шейдере
      * @param {?BufferBindOptions} options Параметры передаваемые в функцию vertexAttribPointer, если их нет,
      * то используются параметры конкретного буфера. Параметры должны быть переданы все.
+     * @param {?ANGLE_instanced_arrays} instancesExt Экстеншн для работы с instanced буферами,
      */
-    bind(gl, location, options) {
+    bind(gl, location, options, instancesExt) {
         if (!this._glBuffer) {
             this.prepare(gl);
         }
 
         if (this.type === Buffer.ArrayBuffer) {
             gl.bindBuffer(gl.ARRAY_BUFFER, this._glBuffer);
 
+            location = location || 0;
             options = options || this.options;
 
             gl.vertexAttribPointer(location, options.itemSize, this._toGlParam(gl, options.dataType),
                 options.normalized, options.stride, options.offset);
 
             if (options.instanceDivisor) {
-                gl.vertexAttribDivisor(location, options.instanceDivisor);
+                if (gl instanceof WebGLRenderingContext) {
+                    if (instancesExt) {
+                        instancesExt.vertexAttribDivisorANGLE(location, options.instanceDivisor);
+                    } else {
+                        console.error('Can\'t set up instanced attribute divisor. ' +
+                                      'Missing ANGLE_instanced_arrays extension');
+                    }
+                } else {
+                    gl.vertexAttribDivisor(location, options.instanceDivisor);
+                }
             }
         } else if (this.type === Buffer.ElementArrayBuffer) {
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._glBuffer);

src/BufferChannel.js

@@ -30,8 +30,8 @@ class BufferChannel {
      * Связывает данные с контекстом WebGL с нужными параметрами.
      * Вызывает {@link Buffer#bind} исходного буфера.
      */
-    bind(gl, location) {
-        this._buffer.bind(gl, location, this.options);
+    bind(gl, location, instancesExt) {
+        this._buffer.bind(gl, location, this.options, instancesExt);
     }
 }
 

src/Vao.js

@@ -15,9 +15,8 @@ class Vao {
 
         /**
          * WebGL экстеншен, в котором был инициализирован буфер.
-         * Используется только для удаления vao, подумать хорошо, прежде чем использовать для чего-то ещё.
          */
-        this._ext = null;
+        this._vaoExt = null;
     }
 
     /**
@@ -26,9 +25,10 @@ class Vao {
      * @param {State} Стейт рендера
      */
     bind(state) {
-        const ext = state.extensions.OES_vertex_array_object;
+        const vaoExt = state.extensions.OES_vertex_array_object;
+        const instancesExt = state.extensions.ANGLE_instanced_arrays;
 
-        this._bind(state.gl, ext);
+        this._bind(state.gl, vaoExt, instancesExt);
 
         return this;
     }
@@ -60,17 +60,17 @@ class Vao {
         return this;
     }
 
-    _bind(gl, ext) {
+    _bind(gl, vaoExt, instancesExt) {
         if (!this._vao) {
-            this._prepare(gl, ext);
+            this._prepare(gl, vaoExt, instancesExt);
         } else {
             this._glBindVertexArray(this._vao);
         }
     }
 
-    _prepare(gl, ext) {
+    _prepare(gl, vaoExt, instancesExt) {
         this._gl = gl;
-        this._ext = ext;
+        this._vaoExt = vaoExt;
 
         this._vao = this._glCreateVertexArray();
         this._glBindVertexArray(this._vao);
@@ -84,13 +84,13 @@ class Vao {
             if (shaderAttribute.index !== true) {
                 gl.enableVertexAttribArray(shaderAttribute.location);
             }
-            attributes[name].bind(gl, shaderAttribute.location, undefined);
+            attributes[name].bind(gl, shaderAttribute.location, instancesExt);
         }
     }
 
     _glCreateVertexArray() {
         const gl = this._gl;
-        const ext = this._ext;
+        const ext = this._vaoExt;
         if (this._isWebGL2(gl)) {
             return gl.createVertexArray();
         } else if (ext) {
@@ -101,7 +101,7 @@ class Vao {
 
     _glBindVertexArray(vao) {
         const gl = this._gl;
-        const ext = this._ext;
+        const ext = this._vaoExt;
         if (this._isWebGL2(gl)) {
             gl.bindVertexArray(vao);
         } else if (ext) {
@@ -114,7 +114,7 @@ class Vao {
 
     _glDeleteVertexArray(vao) {
         const gl = this._gl;
-        const ext = this._ext;
+        const ext = this._vaoExt;
         if (this._isWebGL2(gl)) {
             gl.deleteVertexArray(vao);
         } else if (ext) {