melonjs 10.0.2 → 10.2.1

package/src/video/webgl/buffer/vertex.js

@@ -0,0 +1,130 @@
+/**
+ * @classdesc
+ * a Vertex Buffer object
+ * @class VertexArrayBuffer
+ * @private
+ */
+
+class VertexArrayBuffer {
+
+    constructor(vertex_size, vertex_per_quad) {
+        // the size of one vertex
+        this.vertexSize = vertex_size;
+        // size of a quad in vertex
+        this.quadSize = vertex_per_quad;
+        // the maximum number of vertices the vertex array buffer can hold
+        this.maxVertex = 256;
+        // the current number of vertices added to the vertex array buffer
+        this.vertexCount = 0;
+
+        // the actual vertex data buffer
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        // Float32 and Uint32 view of the vertex data array buffer
+        this.bufferF32 = new Float32Array(this.buffer);
+        this.bufferU32 = new Uint32Array(this.buffer);
+
+
+        return this;
+    }
+
+    /**
+     * clear the vertex array buffer
+     */
+    clear() {
+        this.vertexCount = 0;
+    }
+
+
+    /**
+     * return true if full
+     */
+    isFull(vertex = 0) {
+         return (this.vertexCount + vertex >= this.maxVertex);
+    }
+
+    /**
+     * resize the vertex buffer, retaining its original contents
+     */
+    resize() {
+        // double the vertex size
+        this.maxVertex <<= 1;
+        // save a reference to the previous data
+        var data = this.bufferF32;
+
+        // recreate ArrayBuffer and views
+        this.buffer = new ArrayBuffer(this.maxVertex * this.vertexSize * this.quadSize);
+        this.bufferF32 = new Float32Array(this.buffer);
+        this.bufferU32 = new Uint32Array(this.buffer);
+
+        // copy previous data
+        this.bufferF32.set(data);
+
+        return this;
+    }
+
+    /**
+     * push a new vertex to the buffer
+     */
+    push(x, y, u, v, tint) {
+        var offset = this.vertexCount * this.vertexSize;
+
+        if (this.vertexCount >= this.maxVertex) {
+            this.resize();
+        }
+
+        this.bufferF32[offset + 0] = x;
+        this.bufferF32[offset + 1] = y;
+
+        if (typeof u !== "undefined") {
+            this.bufferF32[offset + 2] = u;
+            this.bufferF32[offset + 3] = v;
+        }
+
+        if (typeof tint !== "undefined") {
+            this.bufferU32[offset + 4] = tint;
+        }
+
+        this.vertexCount++;
+
+        return this;
+    }
+
+    /**
+     * return a reference to the data in Float32 format
+     */
+    toFloat32(begin, end) {
+        if (typeof end !== "undefined") {
+            return this.bufferF32.subarray(begin, end);
+        } else {
+            return this.bufferF32;
+        }
+    }
+
+    /**
+     * return a reference to the data in Uint32 format
+     */
+    toUint32(begin, end) {
+        if (typeof end !== "undefined") {
+            return this.bufferU32.subarray(begin, end);
+        } else {
+            return this.bufferU32;
+        }
+    }
+
+    /**
+     * return the size of the vertex in vertex
+     */
+    length() {
+        return this.vertexCount;
+    }
+
+    /**
+     * return true if empty
+     */
+    isEmpty() {
+        return this.vertexCount === 0;
+    }
+
+};
+
+export default VertexArrayBuffer;

package/src/video/webgl/shaders/quad.vert

@@ -11,6 +11,6 @@ void main(void) {
     // Transform the vertex position by the projection matrix
      gl_Position = uProjectionMatrix * vec4(aVertex, 0.0, 1.0);
     // Pass the remaining attributes to the fragment shader
-    vColor = vec4(aColor.rgb * aColor.a, aColor.a);
+    vColor = vec4(aColor.bgr * aColor.a, aColor.a);
     vRegion = aRegion;
 }

package/src/video/webgl/webgl_compositor.js

@@ -1,5 +1,6 @@
 import Vector2d from "./../../math/vector2.js";
 import GLShader from "./glshader.js";
+import VertexArrayBuffer from "./buffer/vertex.js";
 import * as event from "./../../system/event.js";
 import { isPowerOfTwo } from "./../../math/math.js";
 
@@ -9,6 +10,13 @@ import quadVertex from "./shaders/quad.vert";
 import quadFragment from "./shaders/quad.frag";
 
 
+// a pool of resuable vectors
+var V_ARRAY = [
+    new Vector2d(),
+    new Vector2d(),
+    new Vector2d(),
+    new Vector2d()
+];
 
 // Handy constants
 var VERTEX_SIZE = 2;
@@ -18,15 +26,32 @@ var COLOR_SIZE = 4;
 var ELEMENT_SIZE = VERTEX_SIZE + REGION_SIZE + COLOR_SIZE;
 var ELEMENT_OFFSET = ELEMENT_SIZE * Float32Array.BYTES_PER_ELEMENT;
 
-var VERTEX_ELEMENT = 0;
-var REGION_ELEMENT = VERTEX_ELEMENT + VERTEX_SIZE;
-var COLOR_ELEMENT = REGION_ELEMENT + REGION_SIZE;
-
 var ELEMENTS_PER_QUAD = 4;
 var INDICES_PER_QUAD = 6;
 
 var MAX_LENGTH = 16000;
 
+/**
+ * Create a full index buffer for the element array
+ * @ignore
+ */
+function createIB() {
+    var indices = [
+        0, 1, 2,
+        2, 1, 3
+    ];
+
+    // ~384KB index buffer
+    var data = new Array(MAX_LENGTH * INDICES_PER_QUAD);
+    for (var i = 0; i < data.length; i++) {
+        data[i] = indices[i % INDICES_PER_QUAD] +
+            ~~(i / INDICES_PER_QUAD) * ELEMENTS_PER_QUAD;
+    }
+
+    return new Uint16Array(data);
+};
+
+
 /**
  * @classdesc
  * A WebGL Compositor object. This class handles all of the WebGL state<br>
@@ -57,20 +82,12 @@ class WebGLCompositor {
          * @type Number
          * @readonly
          */
-        this.length = 0;
+        //this.length = 0;
 
         // list of active texture units
         this.currentTextureUnit = -1;
         this.boundTextures = [];
 
-        // Vector pool
-        this.v = [
-            new Vector2d(),
-            new Vector2d(),
-            new Vector2d(),
-            new Vector2d()
-        ];
-
         // the associated renderer
         this.renderer = renderer;
 
@@ -80,9 +97,6 @@ class WebGLCompositor {
         // Global fill color
         this.color = renderer.currentColor;
 
-        // Global tint color
-        this.tint = renderer.currentTint;
-
         // Global transformation matrix
         this.viewMatrix = renderer.currentTransform;
 
@@ -118,9 +132,9 @@ class WebGLCompositor {
         /// define all vertex attributes
         this.addAttribute("aVertex", 2, gl.FLOAT, false, 0 * Float32Array.BYTES_PER_ELEMENT); // 0
         this.addAttribute("aRegion", 2, gl.FLOAT, false, 2 * Float32Array.BYTES_PER_ELEMENT); // 1
-        this.addAttribute("aColor",  4, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT); // 2
+        this.addAttribute("aColor",  4, gl.UNSIGNED_BYTE, true, 4 * Float32Array.BYTES_PER_ELEMENT); // 2
 
-        // Stream buffer
+        // vertex buffer
         gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
         gl.bufferData(
             gl.ARRAY_BUFFER,
@@ -128,17 +142,11 @@ class WebGLCompositor {
             gl.STREAM_DRAW
         );
 
-        this.sbSize = 256;
-        this.sbIndex = 0;
+        this.vertexBuffer = new VertexArrayBuffer(ELEMENT_SIZE, ELEMENTS_PER_QUAD);
 
-        // Quad stream buffer
-        this.stream = new Float32Array(
-            this.sbSize * ELEMENT_SIZE * ELEMENTS_PER_QUAD
-        );
-
-        // Index buffer
+        // Cache index buffer (TODO Remove use for cache by replacing drawElements by drawArrays)
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.createIB(), gl.STATIC_DRAW);
+        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, createIB(), gl.STATIC_DRAW);
 
         // register to the CANVAS resize channel
         event.on(event.CANVAS_ONRESIZE, (width, height) => {
@@ -154,9 +162,6 @@ class WebGLCompositor {
      * @ignore
      */
     reset() {
-        this.sbIndex = 0;
-        this.length = 0;
-
         // WebGL context
         this.gl = this.renderer.gl;
 
@@ -194,7 +199,7 @@ class WebGLCompositor {
      * @param {String} name name of the attribute in the vertex shader
      * @param {Number} size number of components per vertex attribute. Must be 1, 2, 3, or 4.
      * @param {GLenum} type data type of each component in the array
-     * @param {Boolean} normalized whether integer data values should be normalized into a certain
+     * @param {Boolean} normalized whether integer data values should be normalized into a certain range when being cast to a float
      * @param {Number} offset offset in bytes of the first component in the vertex attribute array
      */
     addAttribute(name, size, type, normalized, offset) {
@@ -242,10 +247,10 @@ class WebGLCompositor {
         var gl = this.gl;
         var isPOT = isPowerOfTwo(w || image.width) && isPowerOfTwo(h || image.height);
         var texture = gl.createTexture();
-        var rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion === 2) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
-        var rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion === 2) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        var rs = (repeat.search(/^repeat(-x)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+        var rt = (repeat.search(/^repeat(-y)?$/) === 0) && (isPOT || this.renderer.WebGLVersion > 1) ? gl.REPEAT : gl.CLAMP_TO_EDGE;
 
-        this.setTexture2D(texture, unit);
+        this.bindTexture2D(texture, unit);
 
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, rs);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, rt);
@@ -269,13 +274,13 @@ class WebGLCompositor {
 
     /**
      * assign the given WebGL texture to the current batch
-     * @name setTexture2D
+     * @name bindTexture2D
      * @memberOf me.WebGLCompositor
      * @function
      * @param {WebGLTexture} a WebGL texture
      * @param {Number} unit Texture unit to which the given texture is bound
      */
-    setTexture2D(texture, unit) {
+    bindTexture2D(texture, unit) {
         var gl = this.gl;
 
         if (texture !== this.boundTextures[unit]) {
@@ -295,6 +300,17 @@ class WebGLCompositor {
         }
     }
 
+    /**
+     * unbind the given WebGL texture, forcing it to be reuploaded
+     * @name unbindTexture2D
+     * @memberOf me.WebGLCompositor
+     * @function
+     * @param {WebGLTexture} a WebGL texture
+     */
+    unbindTexture2D(texture) {
+        var unit = this.renderer.cache.getUnit(texture);
+        this.boundTextures[unit] = null;
+    }
 
     /**
      * @ignore
@@ -315,43 +331,12 @@ class WebGLCompositor {
                 texture.premultipliedAlpha
             );
         } else {
-            this.setTexture2D(texture2D, unit);
+            this.bindTexture2D(texture2D, unit);
         }
 
         return this.currentTextureUnit;
     }
 
-    /**
-     * Create a full index buffer for the element array
-     * @ignore
-     */
-    createIB() {
-        var indices = [
-            0, 1, 2,
-            2, 1, 3
-        ];
-
-        // ~384KB index buffer
-        var data = new Array(MAX_LENGTH * INDICES_PER_QUAD);
-        for (var i = 0; i < data.length; i++) {
-            data[i] = indices[i % INDICES_PER_QUAD] +
-                ~~(i / INDICES_PER_QUAD) * ELEMENTS_PER_QUAD;
-        }
-
-        return new Uint16Array(data);
-    }
-
-    /**
-     * Resize the stream buffer, retaining its original contents
-     * @ignore
-     */
-    resizeSB() {
-        this.sbSize <<= 1;
-        var stream = new Float32Array(this.sbSize * ELEMENT_SIZE * ELEMENTS_PER_QUAD);
-        stream.set(this.stream);
-        this.stream = stream;
-    }
-
     /**
      * Select the shader to use for compositing
      * @name useShader
@@ -389,33 +374,29 @@ class WebGLCompositor {
      * @memberOf me.WebGLCompositor
      * @function
      * @param {me.Renderer.Texture} texture Source texture
-     * @param {String} key Source texture region name
      * @param {Number} x Destination x-coordinate
      * @param {Number} y Destination y-coordinate
      * @param {Number} w Destination width
      * @param {Number} h Destination height
+     * @param {number} u0 Texture UV (u0) value.
+     * @param {number} v0 Texture UV (v0) value.
+     * @param {number} u1 Texture UV (u1) value.
+     * @param {number} v1 Texture UV (v1) value.
+     * @param {number} tint tint color to be applied to the texture in UINT32 format
      */
-    addQuad(texture, key, x, y, w, h) {
-        //var gl = this.gl;
-        var color = this.color.toArray();
-        var tint = this.tint.toArray();
+    addQuad(texture, x, y, w, h, u0, v0, u1, v1, tint) {
 
-        if (color[3] < 1 / 255) {
+        if (this.color.alpha < 1 / 255) {
             // Fast path: don't send fully transparent quads
             return;
-        } else {
-            // use the global alpha
-            tint[3] = color[3];
         }
 
-        if (this.length >= MAX_LENGTH) {
+        this.useShader(this.quadShader);
+
+        if (this.vertexBuffer.isFull(4)) {
+            // is the vertex buffer full if we add 4 more vertices
             this.flush();
         }
-        if (this.length >= this.sbSize) {
-            this.resizeSB();
-        }
-
-        this.useShader(this.quadShader);
 
         // upload and activate the texture if necessary
         var unit = this.uploadTexture(texture);
@@ -424,56 +405,22 @@ class WebGLCompositor {
 
         // Transform vertices
         var m = this.viewMatrix,
-            v0 = this.v[0].set(x, y),
-            v1 = this.v[1].set(x + w, y),
-            v2 = this.v[2].set(x, y + h),
-            v3 = this.v[3].set(x + w, y + h);
+            vec0 = V_ARRAY[0].set(x, y),
+            vec1 = V_ARRAY[1].set(x + w, y),
+            vec2 = V_ARRAY[2].set(x, y + h),
+            vec3 = V_ARRAY[3].set(x + w, y + h);
 
         if (!m.isIdentity()) {
-            m.apply(v0);
-            m.apply(v1);
-            m.apply(v2);
-            m.apply(v3);
+            m.apply(vec0);
+            m.apply(vec1);
+            m.apply(vec2);
+            m.apply(vec3);
         }
 
-        // Array index computation
-        var idx0 = this.sbIndex,
-            idx1 = idx0 + ELEMENT_SIZE,
-            idx2 = idx1 + ELEMENT_SIZE,
-            idx3 = idx2 + ELEMENT_SIZE;
-
-        // Fill vertex buffer
-        // FIXME: Pack each vertex vector into single float
-        this.stream[idx0 + VERTEX_ELEMENT + 0] = v0.x;
-        this.stream[idx0 + VERTEX_ELEMENT + 1] = v0.y;
-        this.stream[idx1 + VERTEX_ELEMENT + 0] = v1.x;
-        this.stream[idx1 + VERTEX_ELEMENT + 1] = v1.y;
-        this.stream[idx2 + VERTEX_ELEMENT + 0] = v2.x;
-        this.stream[idx2 + VERTEX_ELEMENT + 1] = v2.y;
-        this.stream[idx3 + VERTEX_ELEMENT + 0] = v3.x;
-        this.stream[idx3 + VERTEX_ELEMENT + 1] = v3.y;
-
-        // Fill texture coordinates buffer
-        var uvs = texture.getUVs(key);
-        // FIXME: Pack each texture coordinate into single floats
-        this.stream[idx0 + REGION_ELEMENT + 0] = uvs[0];
-        this.stream[idx0 + REGION_ELEMENT + 1] = uvs[1];
-        this.stream[idx1 + REGION_ELEMENT + 0] = uvs[2];
-        this.stream[idx1 + REGION_ELEMENT + 1] = uvs[1];
-        this.stream[idx2 + REGION_ELEMENT + 0] = uvs[0];
-        this.stream[idx2 + REGION_ELEMENT + 1] = uvs[3];
-        this.stream[idx3 + REGION_ELEMENT + 0] = uvs[2];
-        this.stream[idx3 + REGION_ELEMENT + 1] = uvs[3];
-
-        // Fill color buffer
-        // FIXME: Pack color vector into single float
-        this.stream.set(tint, idx0 + COLOR_ELEMENT);
-        this.stream.set(tint, idx1 + COLOR_ELEMENT);
-        this.stream.set(tint, idx2 + COLOR_ELEMENT);
-        this.stream.set(tint, idx3 + COLOR_ELEMENT);
-
-        this.sbIndex += ELEMENT_SIZE * ELEMENTS_PER_QUAD;
-        this.length++;
+        this.vertexBuffer.push(vec0.x, vec0.y, u0, v0, tint);
+        this.vertexBuffer.push(vec1.x, vec1.y, u1, v0, tint);
+        this.vertexBuffer.push(vec2.x, vec2.y, u0, v1, tint);
+        this.vertexBuffer.push(vec3.x, vec3.y, u1, v1, tint);
     }
 
     /**
@@ -482,28 +429,32 @@ class WebGLCompositor {
      * @memberOf me.WebGLCompositor
      * @function
      */
-    flush() {
-        if (this.length) {
+    flush(mode = this.mode) {
+        var vertex = this.vertexBuffer;
+        var vertexCount = vertex.vertexCount;
+
+        if (vertexCount > 0) {
             var gl = this.gl;
+            var vertexSize = vertex.vertexSize;
 
             // Copy data into stream buffer
-            var len = this.length * ELEMENT_SIZE * ELEMENTS_PER_QUAD;
-            gl.bufferData(
-                gl.ARRAY_BUFFER,
-                this.stream.subarray(0, len),
-                gl.STREAM_DRAW
-            );
+            if (this.renderer.WebGLVersion > 1) {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(), gl.STREAM_DRAW, 0, vertexCount * vertexSize);
+            } else {
+                gl.bufferData(gl.ARRAY_BUFFER, vertex.toFloat32(0, vertexCount * vertexSize), gl.STREAM_DRAW);
+            }
 
             // Draw the stream buffer
-            gl.drawElements(
-                this.mode,
-                this.length * INDICES_PER_QUAD,
-                gl.UNSIGNED_SHORT,
-                0
-            );
+            // TODO : finalize the WebGLCompositor implementation (splitting this one into two)
+            // so that different compositor with different attributes/uniforms & drawing method can be used
+            if (this.activeShader === this.primitiveShader) {
+                gl.drawArrays(mode, 0, vertexCount);
+            } else {
+                gl.drawElements(mode, vertexCount / vertex.quadSize * INDICES_PER_QUAD, gl.UNSIGNED_SHORT, 0);
+            }
 
-            this.sbIndex = 0;
-            this.length = 0;
+            // clear the vertex buffer
+            vertex.clear();
         }
     }
 
@@ -512,43 +463,29 @@ class WebGLCompositor {
      * @name drawVertices
      * @memberOf me.WebGLCompositor
      * @function
-     * @param {GLENUM} [mode=gl.TRIANGLES] primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
-     * @param {me.Vector2d[]} [verts=[]] vertices
+     * @param {GLENUM} mode primitive type to render (gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, gl.TRIANGLES)
+     * @param {me.Vector2d[]} verts vertices
      * @param {Number} [vertexCount=verts.length] amount of points defined in the points array
      */
-    drawVertices(mode, verts, vertexCount) {
-        var gl = this.gl;
-
-        vertexCount = vertexCount || verts.length;
-
+    drawVertices(mode, verts, vertexCount = verts.length) {
         // use the primitive shader
         this.useShader(this.primitiveShader);
-
         // Set the line color
         this.primitiveShader.setUniform("uColor", this.color);
 
-        // Put vertex data into the stream buffer
-        var offset = 0;
         var m = this.viewMatrix;
+        var vertex = this.vertexBuffer;
         var m_isIdentity = m.isIdentity();
+
         for (var i = 0; i < vertexCount; i++) {
             if (!m_isIdentity) {
                 m.apply(verts[i]);
             }
-            this.stream[offset + 0] = verts[i].x;
-            this.stream[offset + 1] = verts[i].y;
-            offset += ELEMENT_SIZE;
+            vertex.push(verts[i].x, verts[i].y);
         }
 
-        // Copy data into the stream buffer
-        gl.bufferData(
-            gl.ARRAY_BUFFER,
-            this.stream.subarray(0, vertexCount * ELEMENT_SIZE),
-            gl.STREAM_DRAW
-        );
-
-        // Draw the stream buffer
-        gl.drawArrays(mode, 0, vertexCount);
+        // flush
+        this.flush(mode);
     }
 
     /**

package/src/video/webgl/webgl_renderer.js

@@ -40,14 +40,6 @@ class WebGLRenderer extends Renderer {
         // parent contructor
         super(options);
 
-        /**
-         * The WebGL context
-         * @name gl
-         * @memberOf me.WebGLRenderer
-         * type {WebGLRenderingContext}
-         */
-        this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
-
         /**
          * The WebGL version used by this renderer (1 or 2)
          * @name WebGLVersion
@@ -56,7 +48,7 @@ class WebGLRenderer extends Renderer {
          * @default 1
          * @readonly
          */
-        this.webGLVersion = 1;
+        this.WebGLVersion = 1;
 
         /**
          * The vendor string of the underlying graphics driver.
@@ -78,6 +70,14 @@ class WebGLRenderer extends Renderer {
          */
         this.GPURenderer = null;
 
+        /**
+         * The WebGL context
+         * @name gl
+         * @memberOf me.WebGLRenderer
+         * type {WebGLRenderingContext}
+         */
+        this.context = this.gl = this.getContextGL(this.getScreenCanvas(), options.transparent);
+
         /**
          * Maximum number of texture unit supported under the current context
          * @name maxTextures
@@ -354,14 +354,18 @@ class WebGLRenderer extends Renderer {
         this.currentCompositor.uploadTexture(this.fontTexture, 0, 0, 0, true);
 
         // Add the new quad
-        var key = bounds.left + "," + bounds.top + "," + bounds.width + "," + bounds.height;
+        var uvs = this.fontTexture.getUVs(bounds.left + "," + bounds.top + "," + bounds.width + "," + bounds.height);
         this.currentCompositor.addQuad(
             this.fontTexture,
-            key,
             bounds.left,
             bounds.top,
             bounds.width,
-            bounds.height
+            bounds.height,
+            uvs[0],
+            uvs[1],
+            uvs[2],
+            uvs[3],
+            this.currentTint.toUint32()
         );
 
         // Clear font context2D
@@ -421,8 +425,9 @@ class WebGLRenderer extends Renderer {
             dy |= 0;
         }
 
-        var key = sx + "," + sy + "," + sw + "," + sh;
-        this.currentCompositor.addQuad(this.cache.get(image), key, dx, dy, dw, dh);
+        var texture = this.cache.get(image);
+        var uvs = texture.getUVs(sx + "," + sy + "," + sw + "," + sh);
+        this.currentCompositor.addQuad(texture, dx, dy, dw, dh, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32());
     }
 
     /**
@@ -438,8 +443,8 @@ class WebGLRenderer extends Renderer {
      * @see me.WebGLRenderer#createPattern
      */
     drawPattern(pattern, x, y, width, height) {
-        var key = "0,0," + width + "," + height;
-        this.currentCompositor.addQuad(pattern, key, x, y, width, height);
+        var uvs = pattern.getUVs("0,0," + width + "," + height);
+        this.currentCompositor.addQuad(pattern, x, y, width, height, uvs[0], uvs[1], uvs[2], uvs[3], this.currentTint.toUint32());
     }
 
 
@@ -653,7 +658,7 @@ class WebGLRenderer extends Renderer {
      * @param {Number} alpha 0.0 to 1.0 values accepted.
      */
     setGlobalAlpha(a) {
-        this.currentColor.glArray[3] = a;
+        this.currentColor.alpha = a;
     }
 
     /**
@@ -665,9 +670,9 @@ class WebGLRenderer extends Renderer {
      * @param {me.Color|String} color css color string.
      */
     setColor(color) {
-        var alpha = this.currentColor.glArray[3];
+        var alpha = this.currentColor.alpha;
         this.currentColor.copy(color);
-        this.currentColor.glArray[3] *= alpha;
+        this.currentColor.alpha *= alpha;
     }
 
     /**
@@ -924,7 +929,7 @@ class WebGLRenderer extends Renderer {
         }
 
         // calculate all vertices
-        for (i = 0; i < indices.length; i ++ ) {
+        for (i = 0; i < indices.length; i++ ) {
             glPoints[i].set(x + points[indices[i]].x, y + points[indices[i]].y);
         }