littlejsengine 1.8.9 → 1.9.0

package/src/engineUtilities.js

@@ -44,15 +44,15 @@ function sign(value) { return Math.sign(value); }
 
 /** Returns first parm modulo the second param, but adjusted so negative numbers work as expected
  *  @param {Number} dividend
- *  @param {Number} [divisor=1]
+ *  @param {Number} [divisor]
  *  @return {Number}
  *  @memberof Utilities */
 function mod(dividend, divisor=1) { return ((dividend % divisor) + divisor) % divisor; }
 
 /** Clamps the value beween max and min
  *  @param {Number} value
- *  @param {Number} [min=0]
- *  @param {Number} [max=1]
+ *  @param {Number} [min]
+ *  @param {Number} [max]
  *  @return {Number}
  *  @memberof Utilities */
 function clamp(value, min=0, max=1) { return value < min ? min : value > max ? max : value; }
@@ -77,7 +77,7 @@ function lerp(percent, valueA, valueB) { return valueA + clamp(percent) * (value
 /** Returns signed wrapped distance between the two values passed in
  *  @param {Number} valueA
  *  @param {Number} valueB
- *  @param {Number} [wrapSize=1]
+ *  @param {Number} [wrapSize]
  *  @returns {Number}
  *  @memberof Utilities */
 function distanceWrap(valueA, valueB, wrapSize=1)
@@ -87,7 +87,7 @@ function distanceWrap(valueA, valueB, wrapSize=1)
  *  @param {Number} percent
  *  @param {Number} valueA
  *  @param {Number} valueB
- *  @param {Number} [wrapSize=1]
+ *  @param {Number} [wrapSize]
  *  @returns {Number}
  *  @memberof Utilities */
 function lerpWrap(percent, valueA, valueB, wrapSize=1)
@@ -98,7 +98,7 @@ function lerpWrap(percent, valueA, valueB, wrapSize=1)
  *  @param {Number} angleB
  *  @returns {Number}
  *  @memberof Utilities */
-function distanceAngle(angleA, angleB) { distanceWrap(angleA, angleB, 2*PI); }
+function distanceAngle(angleA, angleB) { return distanceWrap(angleA, angleB, 2*PI); }
 
 /** Linearly interpolates between the angles passed in with wrappping
  *  @param {Number} percent
@@ -134,10 +134,10 @@ function isOverlapping(pointA, sizeA, pointB, sizeB)
 }
 
 /** Returns an oscillating wave between 0 and amplitude with frequency of 1 Hz by default
- *  @param {Number} [frequency=1] - Frequency of the wave in Hz
- *  @param {Number} [amplitude=1] - Amplitude (max height) of the wave
- *  @param {Number} [t=time]      - Value to use for time of the wave
- *  @return {Number}              - Value waving between 0 and amplitude
+ *  @param {Number} [frequency] - Frequency of the wave in Hz
+ *  @param {Number} [amplitude] - Amplitude (max height) of the wave
+ *  @param {Number} [t=time]    - Value to use for time of the wave
+ *  @return {Number}            - Value waving between 0 and amplitude
  *  @memberof Utilities */
 function wave(frequency=1, amplitude=1, t=time)
 { return amplitude/2 * (1 - Math.cos(t*frequency*2*PI)); }
@@ -154,15 +154,15 @@ function formatTime(t) { return (t/60|0) + ':' + (t%60<10?'0':'') + (t%60|0); }
  *  @namespace Random */
 
 /** Returns a random value between the two values passed in
- *  @param {Number} [valueA=1]
- *  @param {Number} [valueB=0]
+ *  @param {Number} [valueA]
+ *  @param {Number} [valueB]
  *  @return {Number}
  *  @memberof Random */
 function rand(valueA=1, valueB=0) { return valueB + Math.random() * (valueA-valueB); }
 
 /** Returns a floored random value the two values passed in
  *  @param {Number} valueA
- *  @param {Number} [valueB=0]
+ *  @param {Number} [valueB]
  *  @return {Number}
  *  @memberof Random */
 function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
@@ -173,14 +173,14 @@ function randInt(valueA, valueB=0) { return Math.floor(rand(valueA,valueB)); }
 function randSign() { return randInt(2) * 2 - 1; }
 
 /** Returns a random Vector2 with the passed in length
- *  @param {Number} [length=1]
+ *  @param {Number} [length]
  *  @return {Vector2}
  *  @memberof Random */
 function randVector(length=1) { return new Vector2().setAngle(rand(2*PI), length); }
 
 /** Returns a random Vector2 within a circular shape
- *  @param {Number} [radius=1]
- *  @param {Number} [minRadius=0]
+ *  @param {Number} [radius]
+ *  @param {Number} [minRadius]
  *  @return {Vector2}
  *  @memberof Random */
 function randInCircle(radius=1, minRadius=0)
@@ -192,7 +192,7 @@ function randInCircle(radius=1, minRadius=0)
  *  @param {Boolean} [linear]
  *  @return {Color}
  *  @memberof Random */
-function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear)
+function randColor(colorA=new Color, colorB=new Color(0,0,0,1), linear=false)
 {
     return linear ? colorA.lerp(colorB, rand()) : 
         new Color(rand(colorA.r,colorB.r), rand(colorA.g,colorB.g), rand(colorA.b,colorB.b), rand(colorA.a,colorB.a));
@@ -221,8 +221,8 @@ class RandomGenerator
     }
 
     /** Returns a seeded random value between the two values passed in
-    *  @param {Number} [valueA=1]
-    *  @param {Number} [valueB=0]
+    *  @param {Number} [valueA]
+    *  @param {Number} [valueB]
     *  @return {Number} */
     float(valueA=1, valueB=0)
     {
@@ -235,7 +235,7 @@ class RandomGenerator
 
     /** Returns a floored seeded random value the two values passed in
     *  @param {Number} valueA
-    *  @param {Number} [valueB=0]
+    *  @param {Number} [valueB]
     *  @return {Number} */
     int(valueA, valueB=0) { return Math.floor(this.float(valueA, valueB)); }
 
@@ -248,8 +248,8 @@ class RandomGenerator
 
 /** 
  * Create a 2d vector, can take another Vector2 to copy, 2 scalars, or 1 scalar
- * @param {(Number|Vector2)} [x=0]
- * @param {Number} [y=0]
+ * @param {(Number|Vector2)} [x]
+ * @param {Number} [y]
  * @return {Vector2}
  * @example
  * let a = vec2(0, 1); // vector with coordinates (0, 1)
@@ -259,15 +259,15 @@ class RandomGenerator
  * @memberof Utilities
  */
 function vec2(x=0, y)
-{ return x.x == undefined ? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y); }
+{ return typeof x === 'number'? new Vector2(x, y == undefined? x : y) : new Vector2(x.x, x.y); }
 
 /** 
  * Check if object is a valid Vector2
- * @param {Vector2} v
+ * @param {any} v
  * @return {Boolean}
  * @memberof Utilities
  */
-function isVector2(v) { return !isNaN(v.x) && !isNaN(v.y); }
+function isVector2(v) { return typeof v === 'object' && typeof v.x === 'number' && typeof v.y === 'number'; }
 
 /** 
  * 2D Vector object with vector math library
@@ -281,8 +281,8 @@ function isVector2(v) { return !isNaN(v.x) && !isNaN(v.y); }
 class Vector2
 {
     /** Create a 2D vector with the x and y passed in, can also be created with vec2()
-     *  @param {Number} [x=0] - X axis location
-     *  @param {Number} [y=0] - Y axis location */
+     *  @param {Number} [x] - X axis location
+     *  @param {Number} [y] - Y axis location */
     constructor(x=0, y=0)
     {
         /** @property {Number} - X axis location */
@@ -339,12 +339,12 @@ class Vector2
     distanceSquared(v) { return (this.x - v.x)**2 + (this.y - v.y)**2; }
 
     /** Returns a new vector in same direction as this one with the length passed in
-     * @param {Number} [length=1]
+     * @param {Number} [length]
      * @return {Vector2} */
     normalize(length=1) { const l = this.length(); return l ? this.scale(length/l) : new Vector2(0, length); }
 
     /** Returns a new vector clamped to length passed in
-     * @param {Number} [length=1]
+     * @param {Number} [length]
      * @return {Vector2} */
     clampLength(length=1) { const l = this.length(); return l > length ? this.scale(length/l) : this; }
 
@@ -363,8 +363,8 @@ class Vector2
     angle() { return Math.atan2(this.x, this.y); }
 
     /** Sets this vector with angle and length passed in
-     * @param {Number} [angle=0]
-     * @param {Number} [length=1]
+     * @param {Number} [angle]
+     * @param {Number} [length]
      * @return {Vector2} */
     setAngle(angle=0, length=1) 
     { this.x = length*Math.sin(angle); this.y = length*Math.cos(angle); return this; }
@@ -449,10 +449,10 @@ function hsl(h, s, l, a) { return new Color().setHSLA(h, s, l, a); }
 class Color
 {
     /** Create a color with the rgba components passed in, white by default
-     *  @param {Number} [r=1] - red
-     *  @param {Number} [g=1] - green
-     *  @param {Number} [b=1] - blue
-     *  @param {Number} [a=1] - alpha*/
+     *  @param {Number} [r] - red
+     *  @param {Number} [g] - green
+     *  @param {Number} [b] - blue
+     *  @param {Number} [a] - alpha*/
     constructor(r=1, g=1, b=1, a=1)
     {
         /** @property {Number} - Red */
@@ -507,10 +507,10 @@ class Color
     lerp(c, percent) { return this.add(c.subtract(this).scale(clamp(percent))); }
 
     /** Sets this color given a hue, saturation, lightness, and alpha
-     * @param {Number} [h=0] - hue
-     * @param {Number} [s=0] - saturation
-     * @param {Number} [l=1] - lightness
-     * @param {Number} [a=1] - alpha
+     * @param {Number} [h] - hue
+     * @param {Number} [s] - saturation
+     * @param {Number} [l] - lightness
+     * @param {Number} [a] - alpha
      * @return {Color} */
     setHSLA(h=0, s=0, l=1, a=1)
     {
@@ -556,8 +556,8 @@ class Color
     }
 
     /** Returns a new color that has each component randomly adjusted
-     * @param {Number} [amount=.05]
-     * @param {Number} [alphaAmount=0]
+     * @param {Number} [amount]
+     * @param {Number} [alphaAmount]
      * @return {Color} */
     mutate(amount=.05, alphaAmount=0) 
     {
@@ -571,9 +571,9 @@ class Color
     }
 
     /** Returns this color expressed as a hex color code
-     * @param {Boolean} [useAlpha=1] - if alpha should be included in result
+     * @param {Boolean} [useAlpha] - if alpha should be included in result
      * @return {String} */
-    toString(useAlpha = 1)      
+    toString(useAlpha = true)      
     { 
         const toHex = (c)=> ((c=c*255|0)<16 ? '0' : '') + c.toString(16);
         return '#' + toHex(this.r) + toHex(this.g) + toHex(this.b) + (useAlpha ? toHex(this.a) : '');
@@ -622,7 +622,7 @@ class Timer
     constructor(timeLeft) { this.time = timeLeft == undefined ? undefined : time + timeLeft; this.setTime = timeLeft; }
 
     /** Set the timer with seconds passed in
-     *  @param {Number} [timeLeft=0] - How much time left before the timer is elapsed in seconds */
+     *  @param {Number} [timeLeft] - How much time left before the timer is elapsed in seconds */
     set(timeLeft=0) { this.time = time + timeLeft; this.setTime = timeLeft; }
 
     /** Unset the timer */

package/src/engineWebGL.js

@@ -1,4 +1,4 @@
-/** 
+/**
  * LittleJS WebGL Interface
  * - All webgl used by the engine is wrapped up here
  * - For normal stuff you won't need to see or call anything in this file
@@ -17,13 +17,13 @@
  *  @memberof WebGL */
 let glCanvas;
 
-/** 2d context for glCanvas 
- *  @type {WebGLRenderingContext}
+/** 2d context for glCanvas
+ *  @type {WebGL2RenderingContext}
  *  @memberof WebGL */
 let glContext;
 
 // WebGL internal variables not exposed to documentation
-let glActiveTexture, glShader, glArrayBuffer, glVertexData, glPositionData, glColorData, glBatchCount, glBatchAdditive, glAdditive;
+let glShader, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glInstanceCount, glAdditive, glBatchAdditive;
 
 ///////////////////////////////////////////////////////////////////////////////
 
@@ -39,73 +39,89 @@ function glInit()
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
-        '#version 300 es\n' +         // specify GLSL ES version
-        'precision highp float;'+     // use highp for better accuracy
-        'uniform mat4 m;'+            // transform matrix
-        'in vec4 p,c,a;'+             // position, uv, color, additiveColor
-        'out vec4 v,d,e;'+            // return uv, color, additiveColor
-        'void main(){'+               // shader entry point
-        'gl_Position=m*vec4(p.xy,1,1);'+ // transform position
-        'v=p;d=c;e=a;'+               // pass stuff to fragment shader
-        '}'                           // end of shader
+        '#version 300 es\n' +     // specify GLSL ES version
+        'precision highp float;'+ // use highp for better accuracy
+        'uniform mat4 m;'+        // transform matrix
+        'in vec2 g;'+             // geometry
+        'in vec4 p,u,c,a;'+       // position/size, uvs, color, additiveColor
+        'in float r;'+            // rotation
+        'out vec2 v;'+            // return uv, color, additiveColor
+        'out vec4 d,e;'+          // return uv, color, additiveColor
+        'void main(){'+           // shader entry point
+        'vec2 s=(g-.5)*p.zw;'+    // get size offset
+        'gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);'+ // transform position
+        'v=mix(u.xw,u.zy,g);'+    // pass uv to fragment shader
+        'd=c;e=a;'+               // pass colors to fragment shader
+        '}'                       // end of shader
         ,
-        '#version 300 es\n' +         // specify GLSL ES version
-        'precision highp float;'+     // use highp for better accuracy
-        'in vec4 v,d,e;'+             // position, uv, color, additiveColor
-        'uniform sampler2D s;'+       // texture
-        'out vec4 c;'+                // out color
-        'void main(){'+               // shader entry point
-        'c=texture(s,v.zw)*d+e;'+     // modulate texture by color plus additive
-        '}'                           // end of shader
+        '#version 300 es\n' +     // specify GLSL ES version
+        'precision highp float;'+ // use highp for better accuracy
+        'in vec2 v;'+             // uv
+        'in vec4 d,e;'+           // color, additiveColor
+        'uniform sampler2D s;'+   // texture
+        'out vec4 c;'+            // out color
+        'void main(){'+           // shader entry point
+        'c=texture(s,v)*d+e;'+    // modulate texture by color plus additive
+        '}'                       // end of shader
     );
 
     // init buffers
-    glVertexData = new ArrayBuffer(gl_VERTEX_BUFFER_SIZE);
-    glPositionData = new Float32Array(glVertexData);
-    glColorData = new Uint32Array(glVertexData);
+    const glInstanceData = new ArrayBuffer(gl_INSTANCE_BUFFER_SIZE);
+    glPositionData = new Float32Array(glInstanceData);
+    glColorData = new Uint32Array(glInstanceData);
     glArrayBuffer = glContext.createBuffer();
-    glBatchCount = 0;
+    glGeometryBuffer = glContext.createBuffer();
+
+    // create the geometry buffer, triangle strip square
+    const geometry = new Float32Array([glInstanceCount=0,0,1,0,0,1,1,1]);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, geometry, gl_STATIC_DRAW);
 }
 
 // Setup render each frame, called automatically by engine
 function glPreRender()
 {
     // clear and set to same size as main canvas
-    glContext.viewport(0, 0, glCanvas.width = mainCanvas.width, glCanvas.height = mainCanvas.height);
+    glContext.viewport(0, 0, glCanvas.width=mainCanvas.width, glCanvas.height=mainCanvas.height);
     glContext.clear(gl_COLOR_BUFFER_BIT);
 
     // set up the shader
     glContext.useProgram(glShader);
     glContext.activeTexture(gl_TEXTURE0);
     glContext.bindTexture(gl_TEXTURE_2D, glActiveTexture = textureInfos[0].glTexture);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, gl_VERTEX_BUFFER_SIZE, gl_DYNAMIC_DRAW);
-    glAdditive = 0;
-    
+
     // set vertex attributes
-    let offset = 0;
-    const initVertexAttribArray = (name, type, typeSize, size, normalize=0)=>
+    let offset = glAdditive = glBatchAdditive = 0;
+    let initVertexAttribArray = (name, type, typeSize, size)=>
     {
         const location = glContext.getAttribLocation(glShader, name);
+        const stride = typeSize && gl_INSTANCE_BYTE_STRIDE; // only if not geometry
+        const divisor = typeSize && 1; // only if not geometry
+        const normalize = typeSize==1; // only if color
         glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, gl_VERTEX_BYTE_STRIDE, offset);
+        glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
+        glContext.vertexAttribDivisor(location, divisor);
         offset += size*typeSize;
     }
-    initVertexAttribArray('p', gl_FLOAT, 4, 4);            // position & texture
-    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4, 1); // color
-    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+    initVertexAttribArray('g', gl_FLOAT, 0, 2); // geometry
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glArrayBuffer);
+    glContext.bufferData(gl_ARRAY_BUFFER, gl_INSTANCE_BUFFER_SIZE, gl_DYNAMIC_DRAW);
+    initVertexAttribArray('p', gl_FLOAT, 4, 4); // position & size
+    initVertexAttribArray('u', gl_FLOAT, 4, 4); // texture coords
+    initVertexAttribArray('c', gl_UNSIGNED_BYTE, 1, 4); // color
+    initVertexAttribArray('a', gl_UNSIGNED_BYTE, 1, 4); // additiveColor
+    initVertexAttribArray('r', gl_FLOAT, 4, 1); // rotation
 
     // build the transform matrix
-    const sx = 2 * cameraScale / mainCanvas.width;
-    const sy = 2 * cameraScale / mainCanvas.height;
-    const cx = -1 - sx*cameraPos.x;
-    const cy = -1 - sy*cameraPos.y;
-    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), 0,
+    const s = vec2(2*cameraScale).divide(mainCanvasSize);
+    const p = vec2(-1).subtract(cameraPos.multiply(s));
+    glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), false,
         new Float32Array([
-            sx,  0,  0,  0,
-             0, sy,  0,  0,
-             1,  1, -1,  1,
-            cx, cy,  0,  0
+            s.x, 0,   0,   0,
+            0,   s.y, 0,   0,
+            1,   1,   1,   1,
+            p.x, p.y, 0,   0
         ])
     );
 }
@@ -126,7 +142,7 @@ function glSetTexture(texture)
 
 /** Compile WebGL shader of the given type, will throw errors if in debug mode
  *  @param {String} source
- *  @param          type
+ *  @param {Number} type
  *  @return {WebGLShader}
  *  @memberof WebGL */
 function glCompileShader(source, type)
@@ -143,8 +159,8 @@ function glCompileShader(source, type)
 }
 
 /** Create WebGL program with given shaders
- *  @param {WebGLShader} vsSource
- *  @param {WebGLShader} fsSource
+ *  @param {String} vsSource
+ *  @param {String} fsSource
  *  @return {WebGLProgram}
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
@@ -162,7 +178,7 @@ function glCreateProgram(vsSource, fsSource)
 }
 
 /** Create WebGL texture from an image and init the texture settings
- *  @param {Image} image
+ *  @param {HTMLImageElement} image
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image)
@@ -172,7 +188,7 @@ function glCreateTexture(image)
     glContext.bindTexture(gl_TEXTURE_2D, texture);
     if (image)
         glContext.texImage2D(gl_TEXTURE_2D, 0, gl_RGBA, gl_RGBA, gl_UNSIGNED_BYTE, image);
-        
+
     // use point filtering for pixelated rendering
     const filter = canvasPixelated ? gl_NEAREST : gl_LINEAR;
     glContext.texParameteri(gl_TEXTURE_2D, gl_TEXTURE_MIN_FILTER, filter);
@@ -187,29 +203,31 @@ function glCreateTexture(image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glBatchCount) return;
+    if (!glInstanceCount) return;
 
     const destBlend = glBatchAdditive ? gl_ONE : gl_ONE_MINUS_SRC_ALPHA;
     glContext.blendFuncSeparate(gl_SRC_ALPHA, destBlend, gl_ONE, destBlend);
     glContext.enable(gl_BLEND);
 
     // draw all the sprites in the batch and reset the buffer
-    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glVertexData);
-    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, glBatchCount);
-    glBatchCount = 0;
+    glContext.bufferSubData(gl_ARRAY_BUFFER, 0, glPositionData);
+    glContext.drawArraysInstanced(gl_TRIANGLE_STRIP, 0, 4, glInstanceCount);
+    if (showWatermark)
+        drawCount += glInstanceCount;
+    glInstanceCount = 0;
     glBatchAdditive = glAdditive;
 }
 
 /** Draw any sprites still in the buffer, copy to main canvas and clear
  *  @param {CanvasRenderingContext2D} context
- *  @param {Boolean} [forceDraw=0]
+ *  @param {Boolean} [forceDraw]
  *  @memberof WebGL */
-function glCopyToContext(context, forceDraw)
+function glCopyToContext(context, forceDraw=false)
 {
-    if (!glBatchCount && !forceDraw) return;
-    
+    if (!glInstanceCount && !forceDraw) return;
+
     glFlush();
-    
+
     // do not draw in overlay mode because the canvas is visible
     if (!glOverlay || forceDraw)
         context.drawImage(glCanvas, 0, 0);
@@ -231,60 +249,22 @@ function glCopyToContext(context, forceDraw)
 function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba, rgbaAdditive=0)
 {
     // flush if there is not enough room or if different blend mode
-    const vertCount = 6;
-    if (glBatchCount >= gl_MAX_BATCH-vertCount || glBatchAdditive != glAdditive)
+    if (glInstanceCount >= gl_MAX_INSTANCES-1 || glBatchAdditive != glAdditive)
         glFlush();
 
-    // prepare to create the verts from size and angle
-    const c = Math.cos(angle)/2, s = Math.sin(angle)/2;
-    const cx = c*sizeX, cy = c*sizeY, sx = s*sizeX, sy = s*sizeY;
-    const positionData = 
-    [
-        x-cx+sy, y+cy+sx, uv0X, uv0Y,
-        x-cx-sy, y-cy+sx, uv0X, uv1Y,
-        x+cx+sy, y+cy-sx, uv1X, uv0Y,
-        x+cx-sy, y-cy-sx, uv1X, uv1Y,
-    ];
-
-    // setup 2 triangle strip quad
-    for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
-    {
-        const j = clamp(i-1, 0, 3)*4;  // degenerate tri at ends
-        glPositionData[offset++] = positionData[j+0];
-        glPositionData[offset++] = positionData[j+1];
-        glPositionData[offset++] = positionData[j+2];
-        glPositionData[offset++] = positionData[j+3];
-        glColorData[offset++] = rgba; 
-        glColorData[offset++] = rgbaAdditive;
-    }
-    glBatchCount += vertCount;
-}
-
-/** Add a convex polygon to the gl draw list
- *  @param {Array} points - Array of Vector2 points
- *  @param {Number} rgba - Color of the polygon
- *  @memberof WebGL */
-function glDrawPoints(points, rgba)
-{
-    // flush if there is not enough room or if different blend mode
-    const vertCount = points.length + 2;
-    if (glBatchCount >= gl_MAX_BATCH-vertCount || glBatchAdditive != glAdditive)
-        glFlush();
-  
-    // setup triangle strip from list of points
-    for(let i = vertCount, offset = glBatchCount * gl_INDICIES_PER_VERT; i--;)
-    {
-        const j = clamp(i-1, 0, vertCount-3);  // degenerate tri at ends
-        const h = j>>1;
-        const point = points[j%2? h : vertCount-3-h];
-        glPositionData[offset++] = point.x;
-        glPositionData[offset++] = point.y;
-        glPositionData[offset++] = 0; // uvx
-        glPositionData[offset++] = 0; // uvy
-        glColorData[offset++] = 0;    // nothing to tint
-        glColorData[offset++] = rgba; // apply rgba via additive
-    }
-    glBatchCount += vertCount;
+    let offset = glInstanceCount * gl_INDICIES_PER_INSTANCE;
+    glPositionData[offset++] = x;
+    glPositionData[offset++] = y;
+    glPositionData[offset++] = sizeX;
+    glPositionData[offset++] = sizeY;
+    glPositionData[offset++] = uv0X;
+    glPositionData[offset++] = uv0Y;
+    glPositionData[offset++] = uv1X;
+    glPositionData[offset++] = uv1Y;
+    glColorData[offset++] = rgba;
+    glColorData[offset++] = rgbaAdditive;
+    glPositionData[offset++] = angle;
+    glInstanceCount++;
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -298,7 +278,7 @@ let glPostShader, glPostArrayBuffer, glPostTexture, glPostIncludeOverlay;
  *  @memberof WebGL */
 function glInitPostProcess(shaderCode, includeOverlay)
 {
-    ASSERT(!glPostShader); // can only have 1 post effects shader
+    ASSERT(!glPostShader, 'can only have 1 post effects shader');
 
     if (!shaderCode) // default shader pass through
         shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
@@ -309,14 +289,14 @@ function glInitPostProcess(shaderCode, includeOverlay)
         'precision highp float;'+        // use highp for better accuracy
         'in vec2 p;'+                    // position
         'void main(){'+                  // shader entry point
-        'gl_Position=vec4(p,1,1);'+      // set position
+        'gl_Position=vec4(p+p-1.,1,1);'+ // set position
         '}'                              // end of shader
         ,
         '#version 300 es\n' +            // specify GLSL ES version
         'precision highp float;'+        // use highp for better accuracy
         'uniform sampler2D iChannel0;'+  // input texture
         'uniform vec3 iResolution;'+     // size of output texture
-        'uniform float iTime;'+          // time passed
+        'uniform float iTime;'+          // time
         'out vec4 c;'+                   // out color
         '\n' + shaderCode + '\n'+        // insert custom shader code
         'void main(){'+                  // shader entry point
@@ -327,7 +307,7 @@ function glInitPostProcess(shaderCode, includeOverlay)
 
     // create buffer and texture
     glPostArrayBuffer = glContext.createBuffer();
-    glPostTexture = glCreateTexture();
+    glPostTexture = glCreateTexture(undefined);
     glPostIncludeOverlay = includeOverlay;
 
     // hide the original 2d canvas
@@ -363,10 +343,9 @@ function glRenderPostProcess()
 
     // setup shader program to draw one triangle
     glContext.useProgram(glPostShader);
+    glContext.bindBuffer(gl_ARRAY_BUFFER, glGeometryBuffer);
+    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, 1);
     glContext.disable(gl_BLEND);
-    glContext.bindBuffer(gl_ARRAY_BUFFER, glPostArrayBuffer);
-    glContext.bufferData(gl_ARRAY_BUFFER, new Float32Array([-3,1,1,-3,1,1]), gl_STATIC_DRAW);
-    glContext.pixelStorei(gl_UNPACK_FLIP_Y_WEBGL, true);
 
     // set textures, pass in the 2d canvas and gl canvas in separate texture channels
     glContext.activeTexture(gl_TEXTURE0);
@@ -377,19 +356,19 @@ function glRenderPostProcess()
     const vertexByteStride = 8;
     const pLocation = glContext.getAttribLocation(glPostShader, 'p');
     glContext.enableVertexAttribArray(pLocation);
-    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, 0, vertexByteStride, 0);
+    glContext.vertexAttribPointer(pLocation, 2, gl_FLOAT, false, vertexByteStride, 0);
 
     // set uniforms and draw
     const uniformLocation = (name)=>glContext.getUniformLocation(glPostShader, name);
     glContext.uniform1i(uniformLocation('iChannel0'), 0);
     glContext.uniform1f(uniformLocation('iTime'), time);
     glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
-    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 3);
+    glContext.drawArrays(gl_TRIANGLE_STRIP, 0, 4);
 }
 
 ///////////////////////////////////////////////////////////////////////////////
 // store gl constants as integers so their name doesn't use space in minifed
-const 
+const
 gl_ONE = 1,
 gl_TRIANGLE_STRIP = 5,
 gl_SRC_ALPHA = 770,
@@ -411,14 +390,14 @@ gl_TEXTURE0 = 33984,
 gl_ARRAY_BUFFER = 34962,
 gl_STATIC_DRAW = 35044,
 gl_DYNAMIC_DRAW = 35048,
-gl_FRAGMENT_SHADER = 35632, 
+gl_FRAGMENT_SHADER = 35632,
 gl_VERTEX_SHADER = 35633,
 gl_COMPILE_STATUS = 35713,
 gl_LINK_STATUS = 35714,
 gl_UNPACK_FLIP_Y_WEBGL = 37440,
 
 // constants for batch rendering
-gl_INDICIES_PER_VERT = 6,
-gl_MAX_BATCH = 1e5,
-gl_VERTEX_BYTE_STRIDE = (4 * 2) * 2 + (4) * 2, // vec2 * 2 + (char * 4) * 2
-gl_VERTEX_BUFFER_SIZE = gl_MAX_BATCH * gl_VERTEX_BYTE_STRIDE;
+gl_INDICIES_PER_INSTANCE = 11,
+gl_MAX_INSTANCES = 1e4,
+gl_INSTANCE_BYTE_STRIDE = gl_INDICIES_PER_INSTANCE * 4, // 11 * 4
+gl_INSTANCE_BUFFER_SIZE = gl_MAX_INSTANCES * gl_INSTANCE_BYTE_STRIDE;

package/src/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "target": "ES6"
+  },
+  "exclude": [
+    "engineRelease.js",
+    "engineExport.js"
+  ]
+}