littlejsengine 1.12.6 → 1.13.4

package/src/engineWebGL.js

@@ -1,12 +1,13 @@
 /**
  * LittleJS WebGL Interface
  * - All webgl used by the engine is wrapped up here
+ * - Will fall back to 2D canvas rendering if webgl is not supported
  * - For normal stuff you won't need to see or call anything in this file
  * - For advanced stuff there are helper functions to create shaders, textures, etc
  * - Can be disabled with glEnable to revert to 2D canvas rendering
  * - Batches sprite rendering on GPU for incredibly fast performance
  * - Sprite transform math is done in the shader where possible
- * - Supports shadertoy style post processing shaders
+ * - Supports shadertoy style post processing shaders via plugin
  * @namespace WebGL
  */
 
@@ -47,9 +48,17 @@ 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
+    if (!glContext)
+    {
+        console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
+        glCanvas = glContext = undefined;
+        glEnable = false;
+        return;
+    }
+
+    // create the webgl canvas
     const rootElement = mainCanvas.parentElement;
-    glOverlay && rootElement.appendChild(glCanvas);
+    rootElement.appendChild(glCanvas);
 
     // setup vertex and fragment shaders
     glShader = glCreateProgram(
@@ -92,10 +101,11 @@ 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;
+    if (!glEnable || !glContext) return;
 
     // set up the shader and canvas
     glClearCanvas();
@@ -126,41 +136,51 @@ 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
  *  @memberof WebGL */
 function glClearCanvas()
 {
+    if (!glContext) return;
+    
     // 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)
+    if (!glContext || texture == glActiveTexture)
         return;
 
     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
@@ -170,6 +190,8 @@ function glSetTexture(texture)
  *  @memberof WebGL */
 function glCompileShader(source, type)
 {
+    if (!glContext) return;
+
     // build the shader
     const shader = glContext.createShader(type);
     glContext.shaderSource(shader, source);
@@ -188,6 +210,8 @@ function glCompileShader(source, type)
  *  @memberof WebGL */
 function glCreateProgram(vsSource, fsSource)
 {
+    if (!glContext) return;
+
     // build the program
     const program = glContext.createProgram();
     glContext.attachShader(program, glCompileShader(vsSource, glContext.VERTEX_SHADER));
@@ -201,19 +225,19 @@ 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)
 {
+    if (!glContext) return;
+
     // build the texture
     const texture = glContext.createTexture();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     if (image && image.width)
     {
         glSetTextureData(texture, image);
-        
-        const isPowerOfTwo = (value)=> !(value & (value - 1));
         if (!tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height))
         {
             // use mipmap filtering
@@ -237,12 +261,24 @@ function glCreateTexture(image)
     return texture;
 }
 
+
+/** Deletes a WebGL texture
+ *  @param {WebGLTexture} [texture]
+ *  @memberof WebGL */
+function glDeleteTexture(texture)
+{
+    if (!glContext) return;
+    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)
 {
+    if (!glContext) return;
+
     // build the texture
     ASSERT(!!image && image.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -253,7 +289,7 @@ function glSetTextureData(texture, image)
  *  @memberof WebGL */
 function glFlush()
 {
-    if (!glInstanceCount) return;
+    if (!glEnable || !glContext || !glInstanceCount) return;
 
     const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
     glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
@@ -262,25 +298,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 || !glContext)
+        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
@@ -297,18 +330,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();