littlejsengine 1.19.3 → 1.21.0

package/src/engineWebGL.js

@@ -32,7 +32,19 @@ 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, glInstancedVAO, glPolyVAO, glFramebuffer, glRenderTarget, glShaderObjects = [], glCustomShader, glBatchShader, glProgramCustom, glTransform, glUniformLocations = new Map, glCanBeEnabled = true;
+let glMipmappedTextures = new WeakSet, glMipmapsUntilTarget = new WeakSet, glMipmapsStale = new Set, glPremultipliedTextures = new WeakSet, glShaderPremultiplied, glEnableBeforeLoss = true, glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos = new Set, glInstancedVAO, glPolyVAO, glFramebuffer, glRenderTarget, glShaderObjects = [], glCustomShader, glBatchShader, glProgramCustom, glTransform, glRenderTargetSaved, glUniformLocations = new WeakMap, glCanBeEnabled = true;
+// ANDed onto every packed color as a draw is queued; the light system's shadow pass sets 0xff000000
+// to draw everything black with its alpha kept (rgbaInt packs alpha in the top byte)
+let glColorMask = -1;
+// ORed onto the additive color of every quad and onto every poly point's color as a draw is queued; the light system's
+// emissive pass sets a grey with the mask at 0xff000000, so a draw comes out that grey in its own shape
+let glColorAdditive = 0;
+// a texture drawn into with the canvas's own transform and its size, the light system's lightmap while its pass
+// runs: a target set and ended inside it, like a tile layer redrawn in a renderLight, goes back to it, not the canvas
+let glRenderTargetBase;
+// set by the light system's shadow pass, which draws the world with its own camera, so a screen space
+// WebGL draw in a render() is skipped instead of landing somewhere in the world
+let glSkipScreenSpace = false;
 
 // WebGL internal constants
 const gl_ARRAY_BUFFER_SIZE = 5e5;
@@ -45,7 +57,6 @@ const gl_MAX_POLY_VERTEXES = gl_ARRAY_BUFFER_SIZE / gl_POLY_VERTEX_BYTE_STRIDE |
 
 ///////////////////////////////////////////////////////////////////////////////
 
-// Initialize WebGL, called automatically by the engine
 // the sprite vertex shader, shared by the engine's program and every Shader so one vertex layout fits all
 const gl_VERTEX_SOURCE =
     '#version 300 es\n' +            // specify GLSL ES version
@@ -66,11 +77,19 @@ const gl_VERTEX_SOURCE =
     'l=g;d=c;e=a;'+                  // pass local uv and colors to fragment shader
     '}';                             // end of shader
 
+// the end of every sprite fragment shader, the engine's and each Shader's: t is the surface color
+// a render target and a smooth image hold premultiplied color, so their batches blend with ONE and premultiply here,
+// giving what a straight texel gives, clamped as the blend clamps it: exactly when the additive alpha is 0 or
+// the texel is clear or opaque, and close otherwise, since the straight color is not kept to be multiplied
+const gl_FRAGMENT_TINT_SOURCE =
+    'c=t*d+e;'+                      // modulate by color plus additive
+    'if(premultipliedTexture){'+     // a render target or a smooth image
+    'c.a=min(c.a,1.);'+              // the alpha the blend uses
+    'c.rgb=min(t.rgb*d.rgb*min(d.a+e.a,1.)+e.rgb*c.a,c.a);}';
+
+// Initialize WebGL, called automatically by the engine
 function glInit(rootElement)
 {
-    // keep set of texture infos so they can be restored if context is lost
-    glTextureInfos = new Set;
-
     if (!glEnable || headlessMode)
     {
         glCanBeEnabled = false;
@@ -93,12 +112,15 @@ function glInit(rootElement)
     // attach the WebGL canvas;
     rootElement.appendChild(glCanvas);
     
-    // startup webgl
+    // startup webgl, and make the textures of any texture infos made before it
     initWebGL();
+    for (const info of glTextureInfos)
+        info.glTexture ||= glCreateTexture(info.image, info.wrap);
 
     // setup context lost and restore handlers
     glCanvas.addEventListener('webglcontextlost', (e)=>
     {
+        glEnableBeforeLoss = glEnable;
         glEnable = false; // disable WebGL rendering
         glCanvas.style.display = 'none'; // hide the gl canvas
         e.preventDefault(); // prevent default to allow restoration
@@ -113,7 +135,7 @@ function glInit(rootElement)
             shader.program = undefined;
         glBatchShader = undefined;
         glProgramCustom = true;
-        glUniformLocations = new Map; // the programs those belonged to are gone
+        glUniformLocations = new WeakMap; // the programs those belonged to are gone
         // drop any partially-filled batch so the next glFlush doesn't
         // upload stale glBatchCount against fresh empty buffers on restore
         glBatchCount = 0;
@@ -122,15 +144,23 @@ function glInit(rootElement)
     });
     glCanvas.addEventListener('webglcontextrestored', ()=>
     {
-        glEnable = true; // re-enable WebGL rendering
+        glEnable = glEnableBeforeLoss; // WebGL rendering as it was before the loss
         glCanvas.style.display = ''; // show the gl canvas
         LOG('WebGL context restored, reinitializing...');
 
         // reinit WebGL and restore textures
+        glMipmappedTextures = new WeakSet;
+        glMipmapsUntilTarget = new WeakSet;
+        glMipmapsStale.clear();
+        glPremultipliedTextures = new WeakSet; // the tile layers draw into their new textures again below
         initWebGL();
         for (const info of glTextureInfos)
             info.glTexture = glCreateTexture(info.image, info.wrap);
         pluginList.forEach(plugin=>plugin.glContextRestored?.());
+
+        // a tile layer drawn on the GPU only had its tiles in the lost texture, it draws them again
+        for (const o of engineObjects)
+            o instanceof TileLayer && o.isUsingWebGL && !o.destroyed && o.redraw();
     });
 
     function initWebGL()
@@ -140,13 +170,16 @@ function glInit(rootElement)
             '#version 300 es\n' +     // specify GLSL ES version
             'precision highp float;'+ // use highp for accuracy
             'uniform sampler2D s;'+   // texture
+            'uniform bool premultipliedTexture;'+ // is the texture premultiplied, a render target or a smooth image
             'in vec2 v;'+             // in: uv
             'in vec4 d,e;'+           // in: color, additiveColor
             'out vec4 c;'+            // out: color
             'void main(){'+           // shader entry point
-            'c=texture(s,v)*d+e;'+    // modulate texture by color plus additive
+            'vec4 t=texture(s,v);'+   // sample the texture
+            gl_FRAGMENT_TINT_SOURCE + // apply color and additive
             '}'                       // end of shader
         );
+        glShaderPremultiplied = false; // a new program starts with its uniforms at 0
 
         // setup poly rendering shaders
         glPolyShader = glCreateProgram(
@@ -203,7 +236,8 @@ function glInit(rootElement)
         // 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
+        // geometry, its own packed buffer: typeSize 0 gives stride 0 and does not advance the offset
+        initVertexAttrib('g', glContext.FLOAT, 0, 2);
         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
@@ -232,6 +266,7 @@ function glSetInstancedMode(force=false)
     glPolyMode = false;
     glContext.useProgram(glShader);
     glContext.bindVertexArray(glInstancedVAO);
+    glContext.bindBuffer(glContext.ARRAY_BUFFER, glArrayBuffer); // a VAO does not keep this binding
 }
 
 function glSetPolyMode()
@@ -279,6 +314,8 @@ function glPreRender(clear=true)
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
     const ca = cos(cameraAngle);
     const sa = sin(cameraAngle);
+    // column major; the shaders send (x, y, 1, 1), so the third column adds 1 to x and y and p takes it back off:
+    // clip = s * (world turned by -cameraAngle - the camera turned the same way), z = 1
     const transform = [
         s.x  * ca,  s.y * sa, 0, 0,
         -s.x * sa,  s.y * ca, 0, 0,
@@ -290,8 +327,7 @@ function glPreRender(clear=true)
     const initUniform = (program, uniform, value)=>
     {
         glContext.useProgram(program);
-        const location = glContext.getUniformLocation(program, uniform);
-        glContext.uniformMatrix4fv(location, false, value);
+        glContext.uniformMatrix4fv(glUniformLocation(program, uniform), false, value);
     }
     initUniform(glPolyShader, 'm', transform);
     initUniform(glShader, 'm', transform);
@@ -314,15 +350,15 @@ function glPreRender(clear=true)
     glSetInstancedMode(true);
 }
 
-/** Clear the canvas and setup the viewport
+/** Clear the canvas or render target to canvasClearColor
  *  @memberof WebGL */
 function glClearCanvas()
 {
     if (!glContext) return;
 
-    // clear using the canvasClearColor
+    // clear using the canvasClearColor, premultiplied like everything the blend writes
     const color = canvasClearColor;
-    glContext.clearColor(color.r, color.g, color.b, color.a);
+    glContext.clearColor(color.r*color.a, color.g*color.a, color.b*color.a, color.a);
     glContext.clear(glContext.COLOR_BUFFER_BIT);
 }
 
@@ -332,18 +368,36 @@ function glClearCanvas()
  *  @memberof WebGL */
 function glSetTexture(texture)
 {
-    // must flush cache with the old texture to set a new one
-    if (!glContext || texture === glActiveTexture) return;
+    if (!glContext) return;
+    if (texture !== glActiveTexture)
+    {
+        // must flush cache with the old texture to set a new one
+        glFlush();
+        glActiveTexture = texture;
+        glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
+    }
+    glMipmapsStale.size && glUpdateMipmaps(texture); // bound already or not, drawn into since
+}
 
-    glFlush();
-    glActiveTexture = texture;
-    glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
+// make the smaller levels of a texture again if it was drawn into since, it must be the bound texture
+function glUpdateMipmaps(texture)
+{
+    if (!glMipmapsStale.has(texture)) return;
+    glMipmapsStale.delete(texture);
+    glContext.generateMipmap(glContext.TEXTURE_2D);
 }
 
-/** Set the wrap mode (REPEAT or CLAMP_TO_EDGE) on an existing WebGL texture
+// a texture's wrap as its two WebGL modes, across and down: true repeats both and false clamps both, or a pair of
+// modes as a glTF sampler gives them; the pairs are WebGL's fixed values, shared so a draw makes no array
+const glWrapRepeat = Object.freeze([10497, 10497]), glWrapClamp = Object.freeze([33071, 33071]);
+function glWrapModes(wrap)
+{ return isArray(wrap) ? wrap : wrap ? glWrapRepeat : glWrapClamp; }
+
+/** Set the wrap mode on an existing WebGL texture
  *  Flushes the current batch only if the texture is the active one
  *  @param {WebGLTexture} texture
- *  @param {boolean} [wrap] - true for REPEAT, false for CLAMP_TO_EDGE
+ *  @param {boolean|Array<number>} [wrap] - true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and
+ *    down, like [gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT]
  *  @memberof WebGL */
 function glSetTextureWrap(texture, wrap=true)
 {
@@ -356,9 +410,9 @@ function glSetTextureWrap(texture, wrap=true)
     else
         glContext.bindTexture(glContext.TEXTURE_2D, texture);
 
-    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);
+    const [wrapS, wrapT] = glWrapModes(wrap);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_WRAP_S, wrapS);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_WRAP_T, wrapT);
 
     if (!isCurrent && glActiveTexture)
         glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
@@ -423,16 +477,17 @@ function glShaderProgram(shader)
         'uniform sampler2D iChannel0;' + // the texture
         'uniform vec3 iResolution;' +    // canvas size in pixels
         'uniform float iTime;' +         // engine time
+        'uniform bool premultipliedTexture;' + // is the texture premultiplied, a render target or a smooth image
         'in vec2 v,l;in vec4 d,e;out vec4 c;\n' + // a define needs its own line
         '#define localUV l\n' +
         shader.fragmentCode + '\n' +
-        'void main(){vec4 t;mainImage(t,v);c=t*d+e;}');
+        'void main(){vec4 t;mainImage(t,v);' + gl_FRAGMENT_TINT_SOURCE + '}');
 }
 
 /** Create WebGL texture from an image and init the texture settings
  *  Restores the active texture when done
- *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} [image]
- *  @param {boolean} [wrap] - true for REPEAT, false for CLAMP_TO_EDGE
+ *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap} [image]
+ *  @param {boolean|Array<number>} [wrap] - true for REPEAT, false for CLAMP_TO_EDGE, or the WebGL modes across and down
  *  @return {WebGLTexture}
  *  @memberof WebGL */
 function glCreateTexture(image, wrap=false)
@@ -446,7 +501,10 @@ function glCreateTexture(image, wrap=false)
     {
         glSetTextureData(texture, image);
         glContext.bindTexture(glContext.TEXTURE_2D, texture);
-        mipMap = !tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height);
+        // WebGL2 makes mipmaps at any size, a texture that becomes a render target keeps them only at powers of two
+        mipMap = !tilesPixelated;
+        if (mipMap && !(isPowerOfTwo(image.width) && isPowerOfTwo(image.height)))
+            glMipmapsUntilTarget.add(texture);
     }
     else
     {
@@ -461,11 +519,14 @@ function glCreateTexture(image, wrap=false)
     const minFilter = mipMap ? glContext.LINEAR_MIPMAP_LINEAR : magFilter;
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MAG_FILTER, magFilter);
     glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, minFilter);
-    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);
+    const [wrapS, wrapT] = glWrapModes(wrap);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_WRAP_S, wrapS);
+    glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_WRAP_T, wrapT);
     if (mipMap)
+    {
         glContext.generateMipmap(glContext.TEXTURE_2D);
+        glMipmappedTextures.add(texture);
+    }
 
     // rebind active texture
     glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
@@ -484,28 +545,46 @@ function glDeleteTexture(texture)
 
 /** Set WebGL texture data from an image, restores the active texture when done
  *  @param {WebGLTexture} texture
- *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas} image
+ *  @param {HTMLImageElement|HTMLCanvasElement|OffscreenCanvas|ImageBitmap} image
  *  @memberof WebGL */
 function glSetTextureData(texture, image)
 {
     if (!glContext) return;
 
-    // build the texture
+    // build the texture, after drawing what was queued with the old image
     ASSERT(image?.width > 0, 'Invalid image data.');
+    texture === glActiveTexture && glFlush();
     glContext.bindTexture(glContext.TEXTURE_2D, texture);
+    if (typeof ImageBitmap != 'undefined' && image instanceof ImageBitmap)
+    {
+        // WebGL ignores the unpack flag below for a bitmap and uploads it as it was made, so it is drawn onto a
+        // canvas first, which reads either kind of bitmap right and uploads as the flag says
+        const canvas = new OffscreenCanvas(image.width, image.height);
+        canvas.getContext('2d').drawImage(image, 0, 0);
+        image = canvas;
+    }
+    // smooth filtering mixes a texel with its see through neighbors, right only for premultiplied color, or the
+    // edges go dark; pixel art is sampled a texel at a time, and uploads straight color as it always has
+    const premultiply = !tilesPixelated;
+    glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, premultiply);
     glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, image);
+    glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    if (premultiply)
+        glPremultipliedTextures.add(texture); // drawn with the premultiplied blend, as a render target is
+    else
+        glPremultipliedTextures.delete(texture); // an image uploads straight color, even into a used render target
 
-    // keep mipmaps in sync with new level 0 data (same condition as glCreateTexture)
-    if (!tilesPixelated && isPowerOfTwo(image.width) && isPowerOfTwo(image.height))
+    // keep mipmaps in sync with new level 0 data, for any texture that has them
+    if (glMipmappedTextures.has(texture))
         glContext.generateMipmap(glContext.TEXTURE_2D);
 
     // rebind active texture
     glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
 }
 
-/** Tells WebGL to create or update the glTexture and start tracking it
+/** Internal: tells WebGL to create or update the glTexture and start tracking it, TextureInfo calls it
  *  @param {TextureInfo} textureInfo
- *  @memberof WebGL */
+ *  @ignore */
 function glRegisterTextureInfo(textureInfo)
 {
     if (headlessMode) return;
@@ -522,9 +601,9 @@ function glRegisterTextureInfo(textureInfo)
         textureInfo.glTexture = glCreateTexture(textureInfo.image, textureInfo.wrap);
 }
 
-/** Tells WebGL to destroy the glTexture and stop tracking it
+/** Internal: tells WebGL to destroy the glTexture and stop tracking it, TextureInfo calls it
  *  @param {TextureInfo} textureInfo
- *  @memberof WebGL */
+ *  @ignore */
 function glUnregisterTextureInfo(textureInfo)
 {
     if (headlessMode) return;
@@ -532,9 +611,16 @@ function glUnregisterTextureInfo(textureInfo)
     // delete texture info from tracking list even if gl is not enabled
     glTextureInfos.delete(textureInfo);
 
-    // unset and destroy the texture
+    // unset and destroy the texture, drawing what is batched with it first, since deleting unbinds it
     const glTexture = textureInfo.glTexture;
     textureInfo.glTexture = undefined;
+    if (glTexture && glTexture === glActiveTexture)
+    {
+        glFlush();
+        glActiveTexture = undefined; // so nothing binds the deleted texture again
+    }
+    glMipmapsStale.delete(glTexture);
+    glPremultipliedTextures.delete(glTexture);
     glDeleteTexture(glTexture);
 }
 
@@ -544,9 +630,14 @@ function glFlush()
 {
     if (glEnable && glContext && glBatchCount)
     {
+        // a render target holds premultiplied color, a batch drawing one takes its color as it is
+        // glSetTexture flushes on every change, so the whole batch drew with the bound texture
+        const premultiplied = !glPolyMode && glPremultipliedTextures.has(glActiveTexture);
+
         // set blend mode
+        const sourceBlend = premultiplied ? glContext.ONE : glContext.SRC_ALPHA;
         const destBlend = glBatchAdditive ? glContext.ONE : glContext.ONE_MINUS_SRC_ALPHA;
-        glContext.blendFuncSeparate(glContext.SRC_ALPHA, destBlend, glContext.ONE, destBlend);
+        glContext.blendFuncSeparate(sourceBlend, destBlend, glContext.ONE, destBlend);
         glContext.enable(glContext.BLEND);
 
         // a Shader's program for this batch, or the engine's own again after one
@@ -560,10 +651,20 @@ function glFlush()
                 const uniform = (name)=> glUniformLocation(program, name);
                 glContext.uniformMatrix4fv(uniform('m'), false, glTransform);
                 glContext.uniform1f(uniform('iTime'), time);
-                glContext.uniform3f(uniform('iResolution'), glCanvas.width, glCanvas.height, 1);
+                // a render target is the size glPreRender gave its viewport
+                const width = glRenderTarget ? mainCanvasSize.x : glCanvas.width;
+                const height = glRenderTarget ? mainCanvasSize.y : glCanvas.height;
+                glContext.uniform3f(uniform('iResolution'), width, height, 1);
+                glContext.uniform1i(uniform('premultipliedTexture'), +premultiplied);
             }
         }
-        
+        if (!glPolyMode && !glBatchShader && glShaderPremultiplied !== premultiplied)
+        {
+            // the engine's program is the one in use, and it keeps the flag until it changes
+            glContext.uniform1i(glUniformLocation(glShader, 'premultipliedTexture'), +premultiplied);
+            glShaderPremultiplied = premultiplied;
+        }
+
         const byteLength = glBatchCount * 
             (glPolyMode ? gl_INDICES_PER_POLY_VERTEX : gl_INDICES_PER_INSTANCE);
         glContext.bufferSubData(glContext.ARRAY_BUFFER, 0, glPositionData, 0, byteLength);
@@ -581,7 +682,7 @@ function glFlush()
     glBatchShader = glCustomShader;
 }
 
-/** Flush any sprites still in the buffer and copy to main canvas
+/** Flush any sprites still in the buffer and copy the WebGL canvas to a 2D context
  *  @param {CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D} context
  *  @memberof WebGL */
 function glCopyToContext(context)
@@ -631,8 +732,8 @@ function glDraw(x, y, sizeX, sizeY, angle=0, uv0X=0, uv0Y=0, uv1X=1, uv1Y=1, rgb
     glPositionData[offset++] = uv0Y;
     glPositionData[offset++] = uv1X;
     glPositionData[offset++] = uv1Y;
-    glColorData[offset++] = rgba;
-    glColorData[offset++] = rgbaAdditive;
+    glColorData[offset++] = rgba & glColorMask;
+    glColorData[offset++] = rgbaAdditive & glColorMask | glColorAdditive;
     glPositionData[offset++] = angle;
 }
 
@@ -678,7 +779,7 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
     glDrawPoints(drawPoints, rgba);
 }
 
-/** Transform and add a polygon to the gl draw list
+/** Transform and add a polygon's outline to the gl draw list
  *  @param {Array<Vector2>} points - Array of Vector2 points
  *  @param {number} rgba - Color of the polygon as a 32-bit integer
  *  @param {number} lineWidth - Width of the outline
@@ -700,36 +801,18 @@ function glDrawOutlineTransform(points, rgba, lineWidth, x, y, sx, sy, angle, wr
  *  @param {number} rgba - Color as a 32-bit integer
  *  @memberof WebGL */
 function glDrawPoints(points, rgba)
-{
-    if (!glEnable || points.length < 3)
-        return; // needs at least 3 points to have area
-
-    // flush if there is not enough room or if different blend mode
-    const vertCount = points.length + 2;
-    if (glBatchCount+vertCount >= gl_MAX_POLY_VERTEXES || glBatchAdditive !== glAdditive)
-        glFlush();
-    ASSERT(vertCount < gl_MAX_POLY_VERTEXES, 'poly exceeds max batch size');
-    if (vertCount >= gl_MAX_POLY_VERTEXES) return; // release-build safety net
-    glSetPolyMode();
-  
-    // setup triangle strip with degenerate verts at start and end
-    let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
-    for (let i = vertCount; i--;)
-    {
-        const j = clamp(i-1, 0, vertCount-3);
-        const point = points[j];
-        glPositionData[offset++] = point.x;
-        glPositionData[offset++] = point.y;
-        glColorData[offset++] = rgba;
-    }
-    glBatchCount += vertCount;
-}
+{ glDrawPolyStrip(points, rgba); }
 
 /** Add a list of colored points to the gl draw list
  *  @param {Array<Vector2>} points - Array of Vector2 points in tri strip order
  *  @param {Array<number>} pointColors - Array of 32-bit integer colors
  *  @memberof WebGL */
 function glDrawColoredPoints(points, pointColors)
+{ glDrawPolyStrip(points, 0, pointColors); }
+
+// queue a triangle strip in the poly batch with degenerate verts at start and end,
+// one color for all its points or one each
+function glDrawPolyStrip(points, rgba, pointColors)
 {
     if (!glEnable || points.length < 3)
         return; // needs at least 3 points to have area
@@ -741,29 +824,46 @@ function glDrawColoredPoints(points, pointColors)
     ASSERT(vertCount < gl_MAX_POLY_VERTEXES, 'poly exceeds max batch size');
     if (vertCount >= gl_MAX_POLY_VERTEXES) return; // release-build safety net
     glSetPolyMode();
-  
+
     // setup triangle strip with degenerate verts at start and end
     let offset = glBatchCount * gl_INDICES_PER_POLY_VERTEX;
     for (let i = vertCount; i--;)
     {
         const j = clamp(i-1, 0, vertCount-3);
         const point = points[j];
-        const color = pointColors[j];
+        const color = pointColors ? pointColors[j] : rgba;
         glPositionData[offset++] = point.x;
         glPositionData[offset++] = point.y;
-        glColorData[offset++] = color;
+        glColorData[offset++] = color & glColorMask | glColorAdditive;
     }
     glBatchCount += vertCount;
 }
 
 /** Set the WebGL render target to the given texture or back to the canvas
+ *  - What is drawn into a texture is stored premultiplied, and draws of that texture blend it as such
  *  @param {WebGLTexture} [texture] - a texture or undefined to use normal glCanvas
- *  @param {boolean} [clear] - should the render target be cleared
+ *  @param {boolean} [clear] - should the render target be cleared, to canvasClearColor, CLEAR_BLACK for a transparent one
  *  @memberof WebGL */
 function glSetRenderTarget(texture, clear=false)
 {
+    // what was batched so far draws where it was meant to, before the target changes
+    glFlush();
+    const previousTarget = glRenderTarget;
     if (texture)
     {
+        if (glMipmapsUntilTarget.has(texture))
+        {
+            // a layer at a size other than a power of two draws without mipmaps as it always has,
+            // so they are not made again after every redraw, the 3D renderer still makes its own
+            glMipmapsUntilTarget.delete(texture);
+            glMipmappedTextures.delete(texture);
+            glContext.bindTexture(glContext.TEXTURE_2D, texture);
+            glContext.texParameteri(glContext.TEXTURE_2D, glContext.TEXTURE_MIN_FILTER, glContext.LINEAR);
+            glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
+        }
+        glPremultipliedTextures.add(texture); // the blend writes premultiplied color into it
+        // coming from the canvas, keep its transform and blend mode to put back after
+        glRenderTarget || (glRenderTargetSaved = [glTransform, glAdditive]);
         glRenderTarget = texture;
         glContext.bindFramebuffer(glContext.FRAMEBUFFER, glFramebuffer);
         glContext.framebufferTexture2D(glContext.FRAMEBUFFER, 
@@ -772,17 +872,49 @@ function glSetRenderTarget(texture, clear=false)
     }
     else
     {
-        glFlush();
         glRenderTarget = undefined;
-        glContext.bindFramebuffer(glContext.FRAMEBUFFER, null);
+        if (glRenderTargetBase)
+        {
+            // back to the texture the canvas transform was drawing into, at its own size
+            const [baseTexture, baseSize] = glRenderTargetBase;
+            glContext.bindFramebuffer(glContext.FRAMEBUFFER, glFramebuffer);
+            glContext.framebufferTexture2D(glContext.FRAMEBUFFER,
+                glContext.COLOR_ATTACHMENT0, glContext.TEXTURE_2D, baseTexture, 0);
+            glContext.viewport(0, 0, baseSize.x, baseSize.y);
+        }
+        else
+        {
+            glContext.bindFramebuffer(glContext.FRAMEBUFFER, null);
 
-        // use the backing store size, mainCanvasSize is css pixels and may
-        // still be the render target's size when unwinding a layer redraw
-        glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+            // use the backing store size, mainCanvasSize is css pixels and may
+            // still be the render target's size when unwinding a layer redraw
+            glContext.viewport(0, 0, glCanvas.width, glCanvas.height);
+        }
+
+        // the canvas's own transform and blend mode again, the target set its own
+        if (glRenderTargetSaved)
+        {
+            [glTransform, glAdditive] = glRenderTargetSaved;
+            glRenderTargetSaved = undefined;
+            for (const program of [glPolyShader, glShader])
+            {
+                glContext.useProgram(program);
+                glContext.uniformMatrix4fv(glUniformLocation(program, 'm'), false, glTransform);
+            }
+            glBatchAdditive = glAdditive;
+            glSetInstancedMode(true);
+        }
     }
+
+    // a target with mipmaps drawn into has only its top level new, the smaller levels are made again from it
+    // the next time it is drawn from
+    if (previousTarget && previousTarget !== texture && glMipmappedTextures.has(previousTarget))
+        glMipmapsStale.add(previousTarget);
 }
 
 /** Clear out a rectangle area of the WebGL canvas or render target
+ *  - In framebuffer pixels from the bottom left: backing store pixels on the canvas, texture pixels in a
+ *    render target
  *  @param {number} x
  *  @param {number} y
  *  @param {number} width
@@ -791,6 +923,7 @@ function glSetRenderTarget(texture, clear=false)
 function glClearRect(x, y, width, height)
 {
     if (!glEnable) return;
+    glFlush(); // tiles batched before the clear go down before it, not over what replaces them
 
     // Enable scissor test to clear only the specified area
     glContext.enable(glContext.SCISSOR_TEST);
@@ -906,8 +1039,32 @@ function glPolyStrip(points)
     if (signedArea(points) < 0)
         points = points.slice().reverse();
 
+    // a convex polygon, which every circle, ellipse and regular polygon is, zigzags between its two sides
+    // into one strip with no bridges, so it skips the ear clipping below and draws with a fifth of the vertices
+    // convex is every corner turning left, and the edges going right then left only once each way round, since
+    // a star listed point by point also turns left at every corner but winds around twice
+    const e = 1e-9, n = points.length;
+    let convex = true, flips = 0, lastSide = 0;
+    for (let i = 0; convex && i < n; ++i)
+    {
+        const a = points[(i + n - 1) % n], b = points[i], dx = points[(i + 1) % n].x - b.x;
+        convex = cross(a, b, points[(i + 1) % n]) > -e;
+        const side = dx > e ? 1 : dx < -e ? -1 : 0;
+        if (side && side !== lastSide)
+            lastSide && ++flips, lastSide = side;
+    }
+    if (convex && flips <= 2)
+    {
+        const strip = [points[0]];
+        for (let i = 1, j = n - 1; i <= j; ++i, --j)
+        {
+            strip.push(points[i]);
+            i === j || strip.push(points[j]);
+        }
+        return strip;
+    }
+
     // check if point is inside triangle
-    const e = 1e-9;
     const pointInTriangle = (p, a, b, c)=>
     {
         const c1 = cross(a, b, p);

package/src/jsconfig.json

@@ -1,13 +1,17 @@
-{
-  "compilerOptions": {
-    "checkJs": true,
-    "target": "ES2020",
-    "module": "esnext",
-    "noImplicitAny": false,
-    "strict": false
-  },
-  "exclude": [
-    "engineRelease.js",
-    "engineExport.js"
-  ]
-}
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "target": "ES2020",
+    "module": "esnext",
+    "noImplicitAny": false,
+    "strict": false
+  },
+  "include": [
+    "*.js",
+    "../plugins/math3d.js"
+  ],
+  "exclude": [
+    "engineRelease.js",
+    "engineExport.js"
+  ]
+}