littlejsengine 1.14.16 → 1.14.23

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;
+let glShader, glPolyShader, glPolyMode, glAdditive, glBatchAdditive, glActiveTexture, glArrayBuffer, glGeometryBuffer, glPositionData, glColorData, glBatchCount, glTextureInfos, glCanBeEnabled = true;
 
 // WebGL internal constants
 const gl_ARRAY_BUFFER_SIZE = 5e5;
@@ -45,7 +45,14 @@ const gl_MAX_POLY_VERTEXES = gl_ARRAY_BUFFER_SIZE / gl_POLY_VERTEX_BYTE_STRIDE |
 // Initialize WebGL, called automatically by the engine
 function glInit()
 {
-    if (!glEnable || headlessMode) return;
+    // keep set of texture infos so they can be restored if context is lost
+    glTextureInfos = new Set;
+
+    if (!glEnable || headlessMode)
+    {
+        glCanBeEnabled = false;
+        return;
+    }
 
     // create the canvas and textures
     glCanvas = document.createElement('canvas');
@@ -56,74 +63,108 @@ function glInit()
         console.warn('WebGL2 not supported, falling back to 2D canvas rendering!');
         glCanvas = glContext = undefined;
         glEnable = false;
+        glCanBeEnabled = false;
         return;
     }
 
-    // create the WebGL canvas
+    // attach the WebGL canvas
     const rootElement = mainCanvas.parentElement;
     rootElement.appendChild(glCanvas);
+    
+    // startup webgl
+    initWebGL();
 
-    // setup instanced rendering shader program
-    glShader = glCreateProgram(
-        '#version 300 es\n' +     // specify GLSL ES version
-        'precision highp float;'+ // use highp for better accuracy
-        'uniform mat4 m;'+        // transform matrix
-        'in vec2 g;'+             // in: geometry
-        'in vec4 p,u,c,a;'+       // in: position/size, uvs, color, additiveColor
-        'in float r;'+            // in: rotation
-        'out vec2 v;'+            // out: uv
-        'out vec4 d,e;'+          // out: color, additiveColor
-        'void main(){'+           // shader entry point
-        'vec2 s=(g-.5)*p.zw;'+    // get size offset
-        'gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);'+ // transform position
-        'v=mix(u.xw,u.zy,g);'+    // pass uv to fragment shader
-        'd=c;e=a;'+               // pass colors to fragment shader
-        '}'                       // end of shader
-        ,
-        '#version 300 es\n' +     // specify GLSL ES version
-        'precision highp float;'+ // use highp for better accuracy
-        'uniform sampler2D s;'+   // texture
-        '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
-        '}'                       // end of shader
-    );
-
-    // setup poly rendering shaders
-    glPolyShader = glCreateProgram(
-        '#version 300 es\n' +     // specify GLSL ES version
-        'precision highp float;'+ // use highp for better accuracy
-        'uniform mat4 m;'+        // transform matrix
-        'in vec2 p;'+             // in: position
-        'in vec4 c;'+             // in: color
-        'out vec4 d;'+            // out: color
-        'void main(){'+           // shader entry point
-        'gl_Position=m*vec4(p,1,1);'+ // transform position
-        'd=c;'+                   // pass color to fragment shader
-        '}'                       // end of shader
-        ,
-        '#version 300 es\n' +     // specify GLSL ES version
-        'precision highp float;'+ // use highp for better accuracy
-        'in vec4 d;'+             // in: color
-        'out vec4 c;'+            // out: color
-        'void main(){'+           // shader entry point
-        'c=d;'+                   // set color
-        '}'                       // end of shader
-    );
-
-    // init buffers
-    const glInstanceData = new ArrayBuffer(gl_ARRAY_BUFFER_SIZE);
-    glPositionData = new Float32Array(glInstanceData);
-    glColorData = new Uint32Array(glInstanceData);
-    glArrayBuffer = glContext.createBuffer();
-    glGeometryBuffer = glContext.createBuffer();
-
-    // create the geometry buffer, triangle strip square
-    const geometry = new Float32Array([glBatchCount=0,0,1,0,0,1,1,1]);
-    glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
-    glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
+    // setup context lost and restore handlers
+    glCanvas.addEventListener('webglcontextlost', (e)=>
+    {
+        glEnable = false; // disable WebGL rendering
+        glCanvas.style.display = 'none'; // hide the gl canvas
+        e.preventDefault(); // prevent default to allow restoration
+        LOG('WebGL context lost! Switching to Canvas2d rendering.');
+
+        // remove WebGL textures
+        for (const info of glTextureInfos)
+            info.glTexture = undefined;
+        glActiveTexture = undefined;
+        pluginList.forEach(plugin=>plugin.glContextLost?.());
+    });
+    glCanvas.addEventListener('webglcontextrestored', ()=>
+    {
+        glEnable = true; // re-enable WebGL rendering
+        glCanvas.style.display = ''; // show the gl canvas
+        LOG('WebGL context restored, reinitializing...');
+
+        // reinit WebGL and restore textures
+        initWebGL();
+        for (const info of glTextureInfos)
+            info.glTexture = glCreateTexture(info.image);
+        pluginList.forEach(plugin=>plugin.glContextRestored?.());
+    });
+
+    function initWebGL()
+    {
+        // setup instanced rendering shader program
+        glShader = glCreateProgram(
+            '#version 300 es\n' +     // specify GLSL ES version
+            'precision highp float;'+ // use highp for better accuracy
+            'uniform mat4 m;'+        // transform matrix
+            'in vec2 g;'+             // in: geometry
+            'in vec4 p,u,c,a;'+       // in: position/size, uvs, color, additiveColor
+            'in float r;'+            // in: rotation
+            'out vec2 v;'+            // out: uv
+            'out vec4 d,e;'+          // out: color, additiveColor
+            'void main(){'+           // shader entry point
+            'vec2 s=(g-.5)*p.zw;'+    // get size offset
+            'gl_Position=m*vec4(p.xy+s*cos(r)-vec2(-s.y,s)*sin(r),1,1);'+ // transform position
+            'v=mix(u.xw,u.zy,g);'+    // pass uv to fragment shader
+            'd=c;e=a;'+               // pass colors to fragment shader
+            '}'                       // end of shader
+            ,
+            '#version 300 es\n' +     // specify GLSL ES version
+            'precision highp float;'+ // use highp for better accuracy
+            'uniform sampler2D s;'+   // texture
+            '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
+            '}'                       // end of shader
+        );
+
+        // setup poly rendering shaders
+        glPolyShader = glCreateProgram(
+            '#version 300 es\n' +     // specify GLSL ES version
+            'precision highp float;'+ // use highp for better accuracy
+            'uniform mat4 m;'+        // transform matrix
+            'in vec2 p;'+             // in: position
+            'in vec4 c;'+             // in: color
+            'out vec4 d;'+            // out: color
+            'void main(){'+           // shader entry point
+            'gl_Position=m*vec4(p,1,1);'+ // transform position
+            'd=c;'+                   // pass color to fragment shader
+            '}'                       // end of shader
+            ,
+            '#version 300 es\n' +     // specify GLSL ES version
+            'precision highp float;'+ // use highp for better accuracy
+            'in vec4 d;'+             // in: color
+            'out vec4 c;'+            // out: color
+            'void main(){'+           // shader entry point
+            'c=d;'+                   // set color
+            '}'                       // end of shader
+        );
+
+        // init buffers
+        const glInstanceData = new ArrayBuffer(gl_ARRAY_BUFFER_SIZE);
+        glPositionData = new Float32Array(glInstanceData);
+        glColorData = new Uint32Array(glInstanceData);
+        glArrayBuffer = glContext.createBuffer();
+        glGeometryBuffer = glContext.createBuffer();
+
+        // create the geometry buffer, triangle strip square
+        const geometry = new Float32Array([glBatchCount=0,0,1,0,0,1,1,1]);
+        glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+        glContext.bufferData(glContext.ARRAY_BUFFER, geometry, glContext.STATIC_DRAW);
+    }
 }
 
 function glSetInstancedMode()
@@ -201,8 +242,8 @@ function glPreRender()
     const s = vec2(2*cameraScale).divide(mainCanvasSize);
     const rotatedCam = cameraPos.rotate(-cameraAngle);
     const p = vec2(-1).subtract(rotatedCam.multiply(s));
-    const ca = Math.cos(cameraAngle);
-    const sa = Math.sin(cameraAngle);
+    const ca = cos(cameraAngle);
+    const sa = sin(cameraAngle);
     const transform = [
         s.x  * ca,  s.y * sa, 0, 0,
         -s.x * sa,  s.y * ca, 0, 0,
@@ -230,7 +271,7 @@ function glPreRender()
     // start with additive blending off
     glAdditive = glBatchAdditive = false;
 
-    // force it to enter instanced mode
+    // force it to set instanced mode by first setting poly mode true
     glPolyMode = true;
     glSetInstancedMode();
 }
@@ -371,6 +412,41 @@ function glSetTextureData(texture, image)
     glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture); // rebind active texture
 }
 
+/** Tells WebGL to create or update the glTexture and start tracking it
+ *  @param {TextureInfo} textureInfo
+ *  @memberof WebGL */
+function glRegisterTextureInfo(textureInfo)
+{
+    if (headlessMode) return;
+
+    // add texture info to tracking list even if gl is not enabled
+    glTextureInfos.add(textureInfo);
+
+    if (!glContext) return;
+
+    // create or set the texture data
+    if (textureInfo.glTexture)
+        glSetTextureData(textureInfo.glTexture, textureInfo.image);
+    else
+        textureInfo.glTexture = glCreateTexture(textureInfo.image);
+}
+
+/** Tells WebGL to destroy the glTexture and stop tracking it
+ *  @param {TextureInfo} textureInfo
+ *  @memberof WebGL */
+function glUnregisterTextureInfo(textureInfo)
+{
+    if (headlessMode) return;
+
+    // delete texture info from tracking list even if gl is not enabled
+    glTextureInfos.delete(textureInfo);
+
+    // unset and destroy the texture
+    const glTexture = textureInfo.glTexture;
+    textureInfo.glTexture = undefined;
+    glDeleteTexture(glTexture);
+}
+
 /** Draw all sprites and clear out the buffer, called automatically by the system whenever necessary
  *  @memberof WebGL */
 function glFlush()
@@ -472,8 +548,8 @@ function glDrawPointsTransform(points, rgba, x, y, sx, sy, angle, tristrip=true)
         // transform the point
         const px = p.x*sx;
         const py = p.y*sy;
-        const sa = Math.sin(-angle);
-        const ca = Math.cos(-angle);
+        const sa = sin(-angle);
+        const ca = cos(-angle);
         pointsOut.push(vec2(x + ca*px - sa*py, y + sa*px + ca*py));
     }
     const drawPoints = tristrip ? glPolyStrip(pointsOut) : pointsOut;

package/examples/shorts/raycasting.js

@@ -1,79 +0,0 @@
-let playerPos = vec2(), playerAngle = 0;
-
-// a simple function to generate a level
-const levelTest = (X,Y)=> ((X|0)**3&(Y|0)**2)%30>5;
-
-// cast a ray and return the distance to the first wall hit (0-1)
-function raycast(pos, angle)
-{
-    const maxDistance = 40, delta = .05;
-    const rayX = delta*Math.sin(angle);
-    const rayY = delta*Math.cos(angle);
-    let posX = pos.x, posY = pos.y;
-    for (let distance = 0; distance < maxDistance; distance += delta)
-    {
-        if (levelTest(posX, posY))
-            return distance/maxDistance;
-        posX += rayX;
-        posY += rayY;
-    }
-    return 1;
-}
-
-function gameUpdate()
-{
-    // update camera angle with mouse pointer lock
-    if (mouseWasPressed(0))
-        pointerLockRequest();
-    if (keyWasPressed('Escape'))
-        pointerLockExit()
-    if (pointerLockIsActive() || isTouchDevice)
-        playerAngle += mouseDelta.x * .003;
-
-    // update player movement, prevent walking through walls
-    let velocity = keyDirection();
-    if (velocity.y && mouseIsDown(0))
-        velocity.y = 1; // forward movement with mouse
-    velocity = velocity.rotate(playerAngle).scale(.1);
-    const newPos = playerPos.add(velocity);
-    if (!levelTest(newPos.x, newPos.y))
-        playerPos = newPos;
-}
-
-function gameRender()
-{
-    {
-        // draw horizontal slizes to create floor and ceiling
-        const h = 9;
-        let pos = vec2(), size = vec2(39, .15), color = rgb();
-        for (let y=-h; y<h; y+=.1)
-        {
-            const p = 1.01-abs(y/h)
-            pos.y = y;
-            color.setHSLA(.1, y>0?0:.5, .7-p*.7);
-            drawRect(pos, size, color);
-        }
-    }
-    {
-        // draw vertical slices to create the walls
-        const w = 20;
-        const pos = vec2(), size = vec2(.15), color = rgb();
-        for (let x=-w; x<w; x+=.1)
-        {
-            const p = raycast(playerPos, playerAngle + x/w);
-            pos.x = x;
-            size.y = .4/p;
-            color.setHSLA(.6, .5, .7-p*.7);
-            drawRect(pos, size, color);
-        }
-    }
-    // draw instructions and pointer lock status
-    const instructions = pointerLockIsActive() ? 
-        'Mouse Control Active - ESC To Exit' : 
-        'Click To Enable Mouse Control';
-    const textPos = vec2(mainCanvasSize.x/2, 50);
-    const textSize = 24;
-    const textColor = pointerLockIsActive() ? GREEN : WHITE;
-    if (!isTouchDevice)
-        drawTextScreen(instructions, textPos, textSize, textColor);
-}