littlejsengine 1.15.9 → 1.16.2

package/src/engineWebGL.js

@@ -13,7 +13,7 @@
 
 'use strict';
 
-/** The WebGL canvas which appears above the main canvas and below the overlay canvas
+/** The WebGL canvas which appears below the main canvas
  *  @type {HTMLCanvasElement}
  *  @memberof WebGL */
 let glCanvas;
@@ -43,7 +43,7 @@ const gl_MAX_POLY_VERTEXES = gl_ARRAY_BUFFER_SIZE / gl_POLY_VERTEX_BYTE_STRIDE |
 ///////////////////////////////////////////////////////////////////////////////
 
 // Initialize WebGL, called automatically by the engine
-function glInit()
+function glInit(rootElement)
 {
     // keep set of texture infos so they can be restored if context is lost
     glTextureInfos = new Set;
@@ -67,8 +67,7 @@ function glInit()
         return;
     }
 
-    // attach the WebGL canvas
-    const rootElement = mainCanvas.parentElement;
+    // attach the WebGL canvas;
     rootElement.appendChild(glCanvas);
     
     // startup webgl
@@ -169,8 +168,7 @@ function glInit()
 
 function glSetInstancedMode()
 {
-    if (!glPolyMode)
-        return;
+    if (!glPolyMode) return;
     
     // setup instanced mode
     glFlush();
@@ -203,8 +201,7 @@ function glSetInstancedMode()
 
 function glSetPolyMode()
 {
-    if (glPolyMode)
-        return;
+    if (glPolyMode) return;
     
     // setup poly mode
     glFlush();
@@ -283,9 +280,12 @@ function glClearCanvas()
     if (!glContext) return;
 
     // clear and set to same size as main canvas
-    glCanvas.width = drawCanvas.width;
-    glCanvas.height = drawCanvas.height;
+    glCanvas.width = mainCanvasSize.x;
+    glCanvas.height = mainCanvasSize.y;
     glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+    const color = canvasClearColor;
+    if (color.a > 0)
+        glContext.clearColor(color.r, color.g, color.b, color.a);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -297,8 +297,7 @@ function glClearCanvas()
 function glSetTexture(texture, wrap=false)
 {
     // must flush cache with the old texture to set a new one
-    if (!glContext || texture === glActiveTexture)
-        return;
+    if (!glContext || texture === glActiveTexture) return;
 
     glFlush();
     glActiveTexture = texture;
@@ -394,6 +393,7 @@ function glCreateTexture(image)
 function glDeleteTexture(texture)
 {
     if (!glContext) return;
+    
     glContext.deleteTexture(texture);
 }
 
@@ -478,8 +478,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable || !glContext)
-        return;
+    if (!glEnable || !glContext) return;
 
     glFlush();
     context.drawImage(glCanvas, 0, 0);
@@ -515,7 +514,6 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
         glFlush();
     glSetInstancedMode();
 
-    glPolyMode = false;
     let offset = glBatchCount++ * gl_INDICES_PER_INSTANCE;
     glPositionData[offset++] = x;
     glPositionData[offset++] = y;