littlejsengine 1.12.4 → 1.13.1

package/src/engineWebGL.js

@@ -47,9 +47,9 @@ function glInit()
     glCanvas = document.createElement('canvas');
     glContext = glCanvas.getContext('webgl2', {antialias:glAntialias});
 
-    // some browsers are much faster without copying the gl buffer so we just overlay it instead
+    // create the webgl canvas
     const rootElement = mainCanvas.parentElement;
-    glOverlay && rootElement.appendChild(glCanvas);
+    rootElement.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
@@ -92,7 +92,8 @@ function glInit()
     glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
 }
 
-// Setup render each frame, called automatically by engine
+// Setup webgl render each frame, called automatically by engine
+// Also used by tile layer rendering when redrawing tiles
 function glPreRender()
 {
     if (!glEnable || headlessMode) return;
@@ -126,18 +127,20 @@ function glPreRender()
     initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
     initVertexAttribArray('a', glContext.UNSIGNED_BYTE, 1, 4); // additiveColor
     initVertexAttribArray('r', glContext.FLOAT, 4, 1); // rotation
-
+    
     // build the transform matrix
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
-    const p = vec2(-1).subtract(cameraPos.multiply(s));
+    const rotatedCam = cameraPos.rotate(-cameraAngle);
+    const p = vec2(-1).subtract(rotatedCam.multiply(s));
+    const ca = Math.cos(cameraAngle);
+    const sa = Math.sin(cameraAngle);
     glContext.uniformMatrix4fv(glContext.getUniformLocation(glShader, 'm'), false,
-        [
-            s.x, 0,   0,   0,
-            0,   s.y, 0,   0,
-            1,   1,   1,   1,
-            p.x, p.y, 0,   0
-        ]
-    );
+    [
+        s.x  * ca,  s.y * sa, 0, 0,
+        -s.x * sa,  s.y * ca, 0, 0,
+        1,          1,        1, 0,
+        p.x,        p.y,      0, 1
+    ]);
 }
 
 /** Clear the canvas and setup the viewport
@@ -145,15 +148,16 @@ function glPreRender()
 function glClearCanvas()
 {
     // 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=drawCanvas.width, glCanvas.height=drawCanvas.height);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
 /** Set the WebGl texture, called automatically if using multiple textures
  *  - This may also flush the gl buffer resulting in more draw calls and worse performance
  *  @param {WebGLTexture} texture
+ *  @param {boolean} wrap - Should the texture wrap or clamp
  *  @memberof WebGL */
-function glSetTexture(texture)
+function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
     if (headlessMode || texture == glActiveTexture)
@@ -161,6 +165,11 @@ function glSetTexture(texture)
 
     glFlush();
     glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture = texture);
+
+    // set wrap mode
+    const wrapMode = wrap ? glContext.REPEAT : glContext.CLAMP_TO_EDGE;
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_WRAP_S, wrapMode);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_WRAP_T, wrapMode);
 }
 
 /** Compile WebGL shader of the given type, will throw errors if in debug mode
@@ -201,7 +210,7 @@ function glCreateProgram(vsSource, fsSource)
 }
 
 /** Create WebGL texture from an image and init the texture settings
- *  @param {HTMLImageElement} image
+ *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} [image]
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image)
@@ -210,7 +219,17 @@ function glCreateTexture(image)
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     if (image && image.width)
+    {
         glSetTextureData(texture, image);
+        if (!tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height))
+        {
+            // use mipmap filtering
+            glContext.generateMipmap(glContext.TEXTURE_2D);
+            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, glContext.LINEAR_MIPMAP_LINEAR);
+            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, glContext.LINEAR);
+            return texture;
+        }
+    }
     else
     {
         // create a white texture
@@ -218,16 +237,25 @@ function glCreateTexture(image)
         glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA, glContext.UNSIGNED_BYTE, whitePixel);
     }
     
-    // use point filtering for pixelated rendering
+    // set texture filtering
     const filter = tilesPixelated ? glContext.NEAREST : glContext.LINEAR;
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, filter);
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, filter);
     return texture;
 }
 
+
+/** Deletes a WebGL texture
+ *  @param {WebGLTexture} [texture]
+ *  @memberof WebGL */
+function glDeleteTexture(texture)
+{
+    glContext.deleteTexture(texture);
+}
+
 /** Set WebGL texture data from an image
  *  @param {WebGLTexture} texture
- *  @param {HTMLImageElement} image
+ *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image
  *  @memberof WebGL */
 function glSetTextureData(texture, image)
 {
@@ -241,7 +269,7 @@ function glSetTextureData(texture, image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glInstanceCount) return;
+    if (!glEnable || !glInstanceCount) return;
 
     const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
     glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
@@ -250,25 +278,22 @@ function glFlush()
     // draw all the sprites in the batch and reset the buffer
     glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData);
     glContext.drawArraysInstanced(glContext.TRIANGLE_STRIP, 0, 4, glInstanceCount);
-    if (showWatermark)
+    if (debug || showWatermark)
         drawCount += glInstanceCount;
     glInstanceCount = 0;
     glBatchAdditive = glAdditive;
 }
 
-/** Draw any sprites still in the buffer and copy to main canvas
+/** Flush any sprites still in the buffer and copy to main canvas
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
- *  @param {boolean} [forceDraw]
  *  @memberof WebGL */
-function glCopyToContext(context, forceDraw=false)
+function glCopyToContext(context)
 {
-    if (!glEnable || !glInstanceCount && !forceDraw) return;
+    if (!glEnable)
+        return;
 
     glFlush();
-
-    // do not draw in overlay mode because the canvas is visible
-    if (!glOverlay || forceDraw)
-        context.drawImage(glCanvas, 0, 0);
+    context.drawImage(glCanvas, 0, 0);
 }
 
 /** Set anti-aliasing for webgl canvas
@@ -285,18 +310,16 @@ function glSetAntialias(antialias=true)
  *  @param {Number} y
  *  @param {Number} sizeX
  *  @param {Number} sizeY
- *  @param {Number} angle
- *  @param {Number} uv0X
- *  @param {Number} uv0Y
- *  @param {Number} uv1X
- *  @param {Number} uv1Y
+ *  @param {Number} [angle]
+ *  @param {Number} [uv0X]
+ *  @param {Number} [uv0Y]
+ *  @param {Number} [uv1X]
+ *  @param {Number} [uv1Y]
  *  @param {Number} [rgba=-1] - white is -1
  *  @param {Number} [rgbaAdditive=0] - black is 0
  *  @memberof WebGL */
-function glDraw(x, y, sizeX, sizeY, angle, uv0X, uv0Y, uv1X, uv1Y, rgba=-1, rgbaAdditive=0)
+function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgba=-1, rgbaAdditive=0)
 {
-    ASSERT(typeof rgba == 'number' && typeof rgbaAdditive == 'number', 'invalid color');
-
     // flush if there is not enough room or if different blend mode
     if (glInstanceCount >= gl_MAX_INSTANCES || glBatchAdditive != glAdditive)
         glFlush();