fixed ordered attributes (#636)

Attributes have to be bound by order 0, 1, 2, 3, etc. If it comes in
mixed order f.e; 0, 3, 4, 2, 1 it can cause problems on devices.

Author: wouterlucas

src/core/lib/WebGlContextWrapper.ts

@@ -716,16 +716,17 @@ export class WebGlContextWrapper {
    * @param program
    * @returns object with numbers
    */
-  getAttributeLocations(program: WebGLProgram): Record<string, number> {
+  getAttributeLocations(program: WebGLProgram): string[] {
     const gl = this.gl;
     const length = gl.getProgramParameter(
       program,
       gl.ACTIVE_ATTRIBUTES,
     ) as number;
-    const result = {} as Record<string, number>;
+
+    const result: string[] = [];
     for (let i = 0; i < length; i++) {
       const { name } = gl.getActiveAttrib(program, i) as WebGLActiveInfo;
-      result[name] = gl.getAttribLocation(program, name);
+      result[gl.getAttribLocation(program, name)] = name;
     }
     return result;
   }

src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -45,7 +45,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
   protected vao: WebGLVertexArrayObject | undefined;
   protected renderer: WebGlRenderer;
   protected glw: WebGlContextWrapper;
-  protected attributeLocations: Record<string, number>;
+  protected attributeLocations: string[];
   protected uniformLocations: Record<string, WebGLUniformLocation> | null;
   protected lifecycle: Pick<WebGlShaderType, 'update' | 'canBatch'>;
   protected useSystemAlpha = false;
@@ -135,8 +135,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
   disableAttributes() {
     const glw = this.glw;
-    const attribs = Object.keys(this.attributeLocations);
-    const attribLen = attribs.length;
+    const attribLen = this.attributeLocations.length;
     for (let i = 0; i < attribLen; i++) {
       glw.disableVertexAttribArray(i);
     }
@@ -278,7 +277,7 @@ export class WebGlShaderProgram implements CoreShaderProgram {
 
   bindBufferCollection(buffer: BufferCollection) {
     const { glw } = this;
-    const attribs = Object.keys(this.attributeLocations);
+    const attribs = this.attributeLocations;
     const attribLen = attribs.length;
 
     for (let i = 0; i < attribLen; i++) {
@@ -332,8 +331,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
     this.program = null;
     this.uniformLocations = null;
 
-    const attribs = Object.keys(this.attributeLocations);
-    const attribLen = attribs.length;
+    const attribs = this.attributeLocations;
+    const attribLen = this.attributeLocations.length;
     for (let i = 0; i < attribLen; i++) {
       this.glw.deleteBuffer(attribs[i]!);
     }