littlejsengine 1.19.3 → 1.20.0

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
@@ -81,6 +96,7 @@ class PostProcessPlugin
                 '#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 vec3 iResolution;'+     // size of output texture
                 'uniform float iTime;'+          // time
                 'out vec4 c;'+                   // out color
@@ -106,6 +122,7 @@ class PostProcessPlugin
         {
             postProcess.shader = undefined;
             postProcess.texture = undefined;
+            postProcess.feedbackTexture = undefined;
             LOG('PostProcessPlugin: WebGL context lost');
         }
         function postProcessContextRestored()
@@ -117,6 +134,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 +152,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 +168,52 @@ 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);
+            }
+
             // 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.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
+            // 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);
@@ -232,6 +274,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