littlejsengine 1.16.1 → 1.17.1

package/src/engineWebGL.js

@@ -29,7 +29,7 @@ let glContext;
 let glAntialias = true;
 
 // WebGL internal variables not exposed to documentation
-let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glCanBeEnabled = true;
+let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glInstancedVAO, glPolyVAO, glFramebuffer, glRenderTarget, glCanBeEnabled = true;
 
 // WebGL internal constants
 const gl_ARRAY_BUFFER_SIZE = 5e5;
@@ -105,7 +105,7 @@ function glInit(rootElement)
         // setup instanced rendering shader program
         glShader = glCreateProgram(
             '#version 300 es\n' +     // specify GLSL ES version
-            'precision highp float;'+ // use highp for better accuracy
+            'precision highp float;'+ // use highp for accuracy
             'uniform mat4 m;'+        // transform matrix
             'in vec2 g;'+             // in: geometry
             'in vec4 p,u,c,a;'+       // in: position/size, uvs, color, additiveColor
@@ -120,7 +120,7 @@ function glInit(rootElement)
             '}'                       // end of shader
             ,
             '#version 300 es\n' +     // specify GLSL ES version
-            'precision highp float;'+ // use highp for better accuracy
+            'precision highp float;'+ // use highp for accuracy
             'uniform sampler2D s;'+   // texture
             'in vec2 v;'+             // in: uv
             'in vec4 d,e;'+           // in: color, additiveColor
@@ -158,87 +158,96 @@ function glInit(rootElement)
         glColorData = new Uint32Array(glInstanceData);
         glArrayBuffer = glContext.createBuffer();
         glGeometryBuffer = glContext.createBuffer();
+        glFramebuffer = glContext.createFramebuffer();
+        glBatchCount = 0;
 
         // create the geometry buffer, triangle strip square
-        const geometry = new Float32Array([glBatchCount=0,0,1,0,0,1,1,1]);
+        const geometry = new Float32Array([0,0,1,0,0,1,1,1]);
         glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
         glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
+        
+        let offset, shader, stride;
+        const initVertexAttrib = (name, type, typeSize, size, divisor=0)=>
+        {
+            const location = glContext.getAttribLocation(shader, name);
+            const normalize = typeSize === 1;
+            const fixedStride = typeSize && stride;
+            glContext.enableVertexAttribArray(location);
+            glContext.vertexAttribPointer(location, size, type, normalize, fixedStride, offset);
+            glContext.vertexAttribDivisor(location, divisor);
+            offset += size*typeSize;
+        }
+
+        // setup VAO for instanced rendering
+        glInstancedVAO = glContext.createVertexArray();
+        glContext.bindVertexArray(glInstancedVAO);
+        
+        // configure instanced vertex attributes
+        offset = 0, shader = glShader, stride = gl_INSTANCE_BYTE_STRIDE;
+        glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+        initVertexAttrib('g', glContext.FLOAT, 0, 2); // geometry
+        glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
+        glContext.bufferData(glContext.ARRAY_BUFFER, gl_ARRAY_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
+        initVertexAttrib('p', glContext.FLOAT, 4, 4, 1); // position & size
+        initVertexAttrib('u', glContext.FLOAT, 4, 4, 1); // texture coords
+        initVertexAttrib('c', glContext.UNSIGNED_BYTE, 1, 4, 1); // color
+        initVertexAttrib('a', glContext.UNSIGNED_BYTE, 1, 4, 1); // additiveColor
+        initVertexAttrib('r', glContext.FLOAT, 4, 1, 1); // rotation
+
+        // setup VAO for poly rendering
+        glPolyVAO = glContext.createVertexArray();
+        glContext.bindVertexArray(glPolyVAO);
+        
+        // configure poly vertex attributes
+        offset = 0, shader = glPolyShader, stride = gl_POLY_VERTEX_BYTE_STRIDE;
+        initVertexAttrib('p', glContext.FLOAT, 4, 2);         // position
+        initVertexAttrib('c', glContext.UNSIGNED_BYTE, 1, 4); // color
     }
 }
 
-function glSetInstancedMode()
+function glSetInstancedMode(force=false)
 {
-    if (!glPolyMode)
-        return;
+    if (!force && !glPolyMode) return;
     
     // setup instanced mode
     glFlush();
     glPolyMode = false;
     glContext.useProgram(glShader);
-
-    // set vertex attributes
-    let offset = 0;
-    const 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, stride, offset);
-        glContext.vertexAttribDivisor(location, divisor);
-        offset += size*typeSize;
-    }
-    glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
-    initVertexAttribArray('g', glContext.FLOAT, 0, 2); // geometry
-    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(glContext.ARRAY_BUFFER, gl_ARRAY_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
-    initVertexAttribArray('p', glContext.FLOAT, 4, 4); // position & size
-    initVertexAttribArray('u', glContext.FLOAT, 4, 4); // texture coords
-    initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
-    initVertexAttribArray('a', glContext.UNSIGNED_BYTE, 1, 4); // additiveColor
-    initVertexAttribArray('r', glContext.FLOAT, 4, 1); // rotation
+    glContext.bindVertexArray(glInstancedVAO);
 }
 
 function glSetPolyMode()
 {
-    if (glPolyMode)
-        return;
+    if (glPolyMode) return;
     
     // setup poly mode
     glFlush();
     glPolyMode = true;
     glContext.useProgram(glPolyShader);
-
-    // set vertex attributes
-    let offset = 0;
-    const initVertexAttribArray = (name, type, typeSize, size)=>
-    {
-        const location = glContext.getAttribLocation(glPolyShader, name);
-        const normalize = typeSize === 1; // only normalize if color
-        const stride = gl_POLY_VERTEX_BYTE_STRIDE;
-        glContext.enableVertexAttribArray(location);
-        glContext.vertexAttribPointer(location, size, type, normalize, stride, offset);
-        glContext.vertexAttribDivisor(location, 0);
-        offset += size*typeSize;
-    }
-    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
-    glContext.bufferData(glContext.ARRAY_BUFFER, gl_ARRAY_BUFFER_SIZE, glContext.DYNAMIC_DRAW);
-    initVertexAttribArray('p', glContext.FLOAT, 4, 2);         // position
-    initVertexAttribArray('c', glContext.UNSIGNED_BYTE, 1, 4); // color
+    glContext.bindVertexArray(glPolyVAO);
 }
 
 // Setup WebGL render each frame, called automatically by engine
 // Also used by tile layer rendering when redrawing tiles
-function glPreRender()
+function glPreRender(clear=true)
 {
     if (!glEnable || !glContext) return;
 
-    // clear the canvas
-    glClearCanvas();
+    ASSERT(!glBatchCount, 'glPreRender called with unflushed batch.');
+
+    if (!glRenderTarget)
+    {
+        // set to same size as main canvas
+        glCanvas.width = mainCanvasSize.x;
+        glCanvas.height = mainCanvasSize.y;
+    }
+    glContext.viewport(0, 0, mainCanvasSize.x, mainCanvasSize.y);
+    clear && glClearCanvas();
 
     // build the transform matrix
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
+    if (glRenderTarget)
+        s.y = -s.y; // invert y when using render target
     const rotatedCam = cameraPos.rotate(-cameraAngle);
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
     const ca = cos(cameraAngle);
@@ -267,12 +276,14 @@ function glPreRender()
         glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
     }
 
+    // rebind the array buffer
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer);
+
     // start with additive blending off
     glAdditive = glBatchAdditive = false;
 
-    // force it to set instanced mode by first setting poly mode true
-    glPolyMode = true;
-    glSetInstancedMode();
+    // force it to set instanced mode
+    glSetInstancedMode(true);
 }
 
 /** Clear the canvas and setup the viewport
@@ -281,13 +292,9 @@ function glClearCanvas()
 {
     if (!glContext) return;
 
-    // clear and set to same size as main canvas
-    glCanvas.width = drawCanvas.width;
-    glCanvas.height = drawCanvas.height;
-    glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+    // clear using the canvasClearColor
     const color = canvasClearColor;
-    if (color.a > 0)
-        glContext.clearColor(color.r, color.g, color.b, color.a);
+    glContext.clearColor(color.r, color.g, color.b, color.a);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -299,8 +306,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;
@@ -365,7 +371,7 @@ function glCreateTexture(image)
     // build the texture
     const texture = glContext.createTexture();
     let mipMap = false;
-    if (image && image.width)
+    if (image?.width)
     {
         glSetTextureData(texture, image);
         glContext.bindTexture(glContext.TEXTURE_2D, texture);
@@ -386,7 +392,9 @@ function glCreateTexture(image)
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, minFilter);
     if (mipMap)
         glContext.generateMipmap(glContext.TEXTURE_2D);
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
+
+    // rebind active texture
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
     return texture;
 }
 
@@ -396,6 +404,7 @@ function glCreateTexture(image)
 function glDeleteTexture(texture)
 {
     if (!glContext) return;
+    
     glContext.deleteTexture(texture);
 }
 
@@ -408,10 +417,12 @@ function glSetTextureData(texture, image)
     if (!glContext) return;
 
     // build the texture
-    ASSERT(!!image && image.width > 0, 'Invalid image data.');
+    ASSERT(image?.width > 0, 'Invalid image data.');
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
     glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
+
+    // rebind active texture
+    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
 }
 
 /** Tells WebGL to create or update the glTexture and start tracking it
@@ -480,8 +491,7 @@ function glFlush()
  *  @memberof WebGL */
 function glCopyToContext(context)
 {
-    if (!glEnable || !glContext)
-        return;
+    if (!glEnable || !glContext) return;
 
     glFlush();
     context.drawImage(glCanvas, 0, 0);
@@ -631,6 +641,48 @@ function glDrawColoredPoints(points, pointColors)
     glBatchCount += vertCount;
 }
 
+/** Set the WebGL render target to the given texture or back to the canvas
+ *  @param {WebGLTexture} [texture] - a texture or undefined to use normal glCanvas
+ *  @param {boolean} [clear] - should the render target be cleared
+ *  @memberof WebGL */
+function glSetRenderTarget(texture, clear=false)
+{
+    if (texture)
+    {
+        glRenderTarget = texture;
+        glContext.bindFramebuffer(glContext.FRAMEBUFFER, glFramebuffer);
+        glContext.framebufferTexture2D(glContext.FRAMEBUFFER, 
+            glContext.COLOR_ATTACHMENT0, glContext.TEXTURE_2D, texture, 0);
+       glPreRender(clear);
+    }
+    else
+    {
+        glFlush();
+        glRenderTarget = undefined;
+        glContext.bindFramebuffer(glContext.FRAMEBUFFER, null);
+    }
+}
+
+/** Clear out a rectangle area of the WebGL canvas or render target
+ *  @param {number} x
+ *  @param {number} y
+ *  @param {number} width
+ *  @param {number} height
+ *  @memberof WebGL */
+function glClearRect(x, y, width, height)
+{
+    if (!glEnable) return;
+
+    // Enable scissor test to clear only the specified area
+    glContext.enable(glContext.SCISSOR_TEST);
+    glContext.scissor(x, y, width, height);
+    glContext.clearColor(0, 0, 0, 0);
+    glContext.clear(glContext.COLOR_BUFFER_BIT);
+    glContext.disable(glContext.SCISSOR_TEST);
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
 // WebGL internal function to convert polygon to outline triangle strip
 function glMakeOutline(points, width, wrap=true)
 {
@@ -764,23 +816,20 @@ function glPolyStrip(points)
             const a = points[i0], b = points[i1], c = points[i2];
 
             // check if convex
-            if (cross(a, b, c) < e)
-                continue;
+            if (cross(a, b, c) < e) continue;
                 
             // check if any other point is inside
             let hasInside = false;
             for (let j = 0; j < indices.length; j++)
             {
                 const k = indices[j];
-                if (k === i0 || k === i1 || k === i2)
-                    continue;
+                if (k === i0 || k === i1 || k === i2) continue;
+
                 const p = points[k];
                 hasInside = pointInTriangle(p, a, b, c);
-                if (hasInside)
-                    break;
+                if (hasInside) break;
             }
-            if (hasInside)
-                continue;
+            if (hasInside) continue;
 
             // found valid ear
             triangles.push([i0, i1, i2]);
@@ -805,8 +854,7 @@ function glPolyStrip(points)
                     worstIndex = i;
                 }
             }
-            if (worstIndex < 0)
-                break;
+            if (worstIndex < 0) break;
             
             const i0 = indices[(worstIndex + indices.length - 1) % indices.length];
             const i1 = indices[worstIndex];