littlejsengine 1.19.3 → 1.21.0

package/plugins/pluginExport.js

@@ -92,6 +92,7 @@ export
     drawNineSliceScreen,
     drawThreeSlice,
     drawThreeSliceScreen,
+    TileSlice,
     drawCrescent,
     getCrescentPoints,
 
@@ -102,10 +103,20 @@ export
     tweenUpdate,
     Ease,
 
+    // Scene System
+    setScene,
+    getScene,
+
     // Path Finding
     PathFinder,
     PathFinderNode,
 
+    // Tweakables
+    tweak,
+    tweakDivider,
+    tweakButton,
+    tweakEngineDefaults,
+
     // Math3D
     vec3,
     isVector3,
@@ -132,6 +143,7 @@ export
     Camera3D,
     EngineObject3D,
     Mesh,
+    InstancedMesh3D,
     buildLathe,
     buildCylinder,
     buildSphere,
@@ -143,9 +155,11 @@ export
     buildRibbon,
     buildLoft,
     buildSky,
+    normalMapFromHeight,
     buildExtrude,
     buildText3D,
     HeightMap,
+    VoxelMap,
     Light3D,
     DirectionalLight3D,
     CameraControl3D,
@@ -157,11 +171,22 @@ export
     engineObjectsRaycast3D,
     parseOBJ,
     loadOBJ,
+    GLTFModel,
+    GLTFPart,
+    GLTFObject,
+    GLTFAnimation,
+    parseGLTF,
+    loadGLTF,
     debugBox3D,
     debugSphere3D,
     debugLine3D,
     debugPoint3D,
 
+    // 3D Level
+    level3DAddType,
+    level3DAddMesh,
+    level3DLoad,
+
     // Three.js
     threeJS,
     ThreeJSPlugin,

package/plugins/postProcess.js

@@ -24,20 +24,24 @@ let postProcess;
  * Post Process Plugin - Applies a full screen shader to the rendered output
  * - Create it after any plugin that draws, since plugins render in the order they are made
  *   and this one shades what is on the canvas when its turn comes
+ * - It runs after gameRenderPost, so a HUD drawn there with WebGL is shaded (and bloomed) too;
+ *   draw the HUD with useWebGL=false (the main canvas) or from a plugin created after this one
  * @memberof PostProcess
  */
 class PostProcessPlugin
 {
     /** Create global post processing shader
-    *  @param {string} shaderCode
+    *  @param {string} [shaderCode] - Shadertoy style mainImage code, a pass-through when left out
     *  @param {boolean} [includeMainCanvas] - combine mainCanvas onto glCanvas
-    *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
+    *  @param {boolean} [feedbackTexture] - also pass the shader's own output from the previous frame as iChannel1,
+    *                                       for trails and echoes; iChannel0 is still the frame just drawn
     *  @example
     *  // create the post process plugin object
     *  new PostProcessPlugin(shaderCode);
     */
     constructor(shaderCode, includeMainCanvas=false, feedbackTexture=false)
     {
+        ASSERT(engineInitialized || headlessMode, 'create the plugin after engineInit, e.g. in gameInit');
         ASSERT(!postProcess, 'Post process already initialized');
         ASSERT(!(includeMainCanvas && feedbackTexture), 'Post process cannot both include main canvas and use feedback texture');
         postProcess = this;
@@ -51,6 +55,9 @@ class PostProcessPlugin
         /** @property {WebGLTexture|undefined} - Texture for post processing
          *  @type {WebGLTexture|undefined} */
         this.texture = undefined;
+        /** @property {WebGLTexture|undefined} - The previous frame's output, iChannel1, when feedbackTexture is set
+         *  @type {WebGLTexture|undefined} */
+        this.feedbackTexture = undefined;
         /** @property {WebGLVertexArrayObject|undefined} - Vertex array object
          *  @type {WebGLVertexArrayObject|undefined} */
         this.vao = undefined;
@@ -68,7 +75,15 @@ class PostProcessPlugin
                 return;
             }
 
-            // create resources
+            // create resources, the feedback starting black, as if the frame before the first were empty
+            if (feedbackTexture)
+            {
+                postProcess.feedbackTexture = glCreateTexture();
+                glContext.bindTexture(glContext.TEXTURE_2D, postProcess.feedbackTexture);
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, 1, 1, 0, glContext.RGBA,
+                    glContext.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 255]));
+                glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
+            }
             postProcess.texture = glCreateTexture();
             postProcess.shader = glCreateProgram(
                 '#version 300 es\n' +            // specify GLSL ES version
@@ -78,17 +93,7 @@ class PostProcessPlugin
                 'gl_Position=vec4(p+p-1.,1,1);'+ // set position
                 '}'                              // end of shader
                 ,
-                '#version 300 es\n' +            // specify GLSL ES version
-                'precision highp float;'+        // use highp for accuracy
-                'uniform sampler2D iChannel0;'+  // input texture
-                'uniform vec3 iResolution;'+     // size of output texture
-                'uniform float iTime;'+          // time
-                'out vec4 c;'+                   // out color
-                '\n' + shaderCode + '\n'+        // insert custom shader code
-                'void main(){'+                  // shader entry point
-                'mainImage(c,gl_FragCoord.xy);'+ // call post process function
-                'c.a=1.;'+                       // always use full alpha
-                '}'                              // end of shader
+                postProcessFragmentSource(shaderCode)
             );
 
             // setup VAO for post processing
@@ -106,6 +111,7 @@ class PostProcessPlugin
         {
             postProcess.shader = undefined;
             postProcess.texture = undefined;
+            postProcess.feedbackTexture = undefined;
             LOG('PostProcessPlugin: WebGL context lost');
         }
         function postProcessContextRestored()
@@ -117,6 +123,13 @@ class PostProcessPlugin
         {
             if (headlessMode || !glEnable) return;
 
+            // made now if WebGL was off when the plugin was made, or when a lost context came back
+            if (!postProcess.shader)
+            {
+                if (glContext.isContextLost()) return;
+                initPostProcess();
+            }
+
             // clear out the buffer
             glFlush();
 
@@ -128,6 +141,9 @@ class PostProcessPlugin
             glContext.useProgram(postProcess.shader);
             glContext.bindVertexArray(postProcess.vao);
             glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, true);
+            // upload the canvas the way it shows, premultiplied, since the shader writes full alpha; unpremultiplied
+            // a see-through pixel would come out at its full brightness instead of faded over the background
+            glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
             glContext.disable(glContext.BLEND);
 
             // setup texture
@@ -141,37 +157,67 @@ class PostProcessPlugin
                 workCanvas.height = mainCanvas.height;
                 glCopyToContext(workContext);
                 workContext.drawImage(mainCanvas, 0, 0);
-                mainCanvas.width |= 0; // setting size clears the main canvas
-
-                // that also reset the transform, restore it so anything drawn
-                // later this frame is still in css pixels
-                const dpr = getCanvasPixelRatio();
-                mainContext.setTransform(dpr, 0, 0, dpr, 0, 0);
+                // clear the main canvas with clearRect, resizing it would also
+                // reset the context state (smoothing, line caps) for anything
+                // drawn after this and reallocate the canvas every frame
+                mainContext.save();
+                mainContext.setTransform(1, 0, 0, 1, 0, 0);
+                mainContext.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
+                mainContext.restore();
 
                 // copy work canvas to texture
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, workCanvas);
             }
-            else if (!feedbackTexture)
+            else
             {
                 // copy glCanvas to texture
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, glCanvas);
             }
 
+            // the previous frame's output, on the second texture unit
+            if (feedbackTexture)
+            {
+                glContext.activeTexture(glContext.TEXTURE1);
+                glContext.bindTexture(glContext.TEXTURE_2D, postProcess.feedbackTexture);
+            }
+
+            // the 3D depth, when render3D draws it, on the third texture unit, with what sceneDepth needs to read it
+            const depth = typeof render3D != 'undefined' && render3D?.depthTexture ? render3D : undefined;
+            glContext.activeTexture(glContext.TEXTURE2);
+            glContext.bindTexture(glContext.TEXTURE_2D, depth?.cameraDepthTexture || null);
+            glContext.activeTexture(glContext.TEXTURE0);
+            const camera = depth?.camera;
+            camera && glContext.uniform3f(glUniformLocation(postProcess.shader, 'iDepthRange'), camera.near,
+                camera.far == Infinity ? 0 : camera.far, camera.orthographic ? 1 : 0);
+
             // set uniforms and draw
-            const uniformLocation = (name)=>glContext.getUniformLocation(postProcess.shader, name);
+            const uniformLocation = (name)=>glUniformLocation(postProcess.shader, name);
             glContext.uniform1i(uniformLocation('iChannel0'), 0);
+            glContext.uniform1i(uniformLocation('iChannel1'), 1);
+            glContext.uniform1i(uniformLocation('iChannel2'), 2);
             glContext.uniform1f(uniformLocation('iTime'), time);
             glContext.uniform3f(uniformLocation('iResolution'), mainCanvas.width, mainCanvas.height, 1);
             glContext.drawArrays(glContext.TRIANGLE_STRIP, 0, 4);
 
             if (feedbackTexture)
             {
-                // pass glCanvas back to overlay texture
+                // keep this frame's output for the next one, then hand the first texture unit back to the engine
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, glCanvas);
+                glContext.activeTexture(glContext.TEXTURE0);
             }
 
-            // restore default so subsequent dynamic texture uploads aren't flipped
+            // the depth leaves the third unit for whatever draws next
+            glContext.activeTexture(glContext.TEXTURE2);
+            glContext.bindTexture(glContext.TEXTURE_2D, null);
+            glContext.activeTexture(glContext.TEXTURE0);
+
+            // restore defaults so subsequent dynamic texture uploads aren't flipped or premultiplied
             glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, false);
+            glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+
+            // bind back the texture the 2D batch thinks is bound, a plugin drawing after this one uses it
+            if (glActiveTexture)
+                glContext.bindTexture(glContext.TEXTURE_2D, glActiveTexture);
 
             // force it to set instanced mode
             glSetInstancedMode(true);
@@ -181,6 +227,31 @@ class PostProcessPlugin
 
 ///////////////////////////////////////////////////////////////////////////////
 
+// the fragment shader of the post process pass around its mainImage snippet: the frame on iChannel0, the last output
+// on iChannel1 with a feedback texture, and the 3D depth on iChannel2 when render3D.depthTexture is on, read with
+// sceneDepth(uv), the distance from the camera along its view in world units, uv 0 to 1 across the screen
+function postProcessFragmentSource(shaderCode)
+{
+    return '#version 300 es\n' +        // specify GLSL ES version
+        'precision highp float;'+        // use highp for accuracy
+        'uniform sampler2D iChannel0;'+  // input texture
+        'uniform sampler2D iChannel1;'+  // the previous frame's output, when feedbackTexture is set
+        'uniform sampler2D iChannel2;'+  // the 3D depth, when render3D.depthTexture is on
+        'uniform vec3 iResolution;'+     // size of output texture
+        'uniform float iTime;'+          // time
+        'uniform vec3 iDepthRange;'+     // the camera's near, its far or 0 for none, and 1 when orthographic
+        'out vec4 c;'+                   // out color
+        // the depth texture's value back to a distance, as the camera's projection put it there
+        'float sceneDepth(vec2 uv){'+
+        'float d=texture(iChannel2,uv).r*2.-1.,n=iDepthRange.x,f=iDepthRange.y;'+
+        'return iDepthRange.z>0.?(d*(f-n)+f+n)/2.:f>0.?2.*n*f/(f+n-d*(f-n)):2.*n/(1.-d);}'+
+        '\n' + shaderCode + '\n'+        // insert custom shader code
+        'void main(){'+                  // shader entry point
+        'mainImage(c,gl_FragCoord.xy);'+ // call post process function
+        'c.a=1.;'+                       // always use full alpha
+        '}';                             // end of shader
+}
+
 /**
  * Shader code for a bloom effect, the bright parts of the image blurred back over it
  * - Pass it to PostProcessPlugin, or edit the string to build an effect on top of it
@@ -232,6 +303,7 @@ function postProcessBloomShader(threshold=.6, strength=1, size=6)
  * @param {number} [strength] - How much glow to add
  * @param {number} [size] - How far the glow spreads in pixels
  * @param {boolean} [includeMainCanvas] - Glow the 2D canvas too, off by default so HUD text stays crisp
+ *   (a HUD drawn with WebGL in gameRenderPost glows either way, draw it with useWebGL=false)
  * @return {PostProcessPlugin}
  * @memberof PostProcess
  * @example