npm - littlejsengine - Versions diffs - 1.16.2 → 1.17.5 - Mend

littlejsengine 1.16.2 → 1.17.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/littlejs.d.ts +291 -246
package/dist/littlejs.esm.js +1520 -1271
package/dist/littlejs.esm.min.js +1 -1
package/dist/littlejs.js +1178 -920
package/dist/littlejs.min.js +1 -1
package/dist/littlejs.release.js +1170 -912
package/examples/box2d/gameObjects.js +4 -4
package/examples/breakout/game.js +5 -6
package/examples/electron/index.html +2 -2
package/examples/electron/tiles.png +0 -0
package/examples/htmlMenu/tiles.png +0 -0
package/examples/index.html +9 -8
package/examples/logo.png +0 -0
package/examples/module/build.bat +7 -0
package/examples/module/build.js +121 -0
package/examples/module/tiles.png +0 -0
package/examples/platformer/game.js +1 -1
package/examples/platformer/gameEffects.js +25 -29
package/examples/platformer/gameLevel.js +27 -28
package/examples/puzzle/game.js +2 -2
package/examples/shorts/base.html +4 -1
package/examples/shorts/box2dPool.js +2 -2
package/examples/shorts/box2dTileLayer.js +48 -0
package/examples/shorts/clock.js +3 -3
package/examples/shorts/fontImage.js +4 -3
package/examples/shorts/music.js +2 -2
package/examples/shorts/musicPlayer.js +2 -2
package/examples/shorts/parallax.js +1 -1
package/examples/shorts/sequencer.js +1 -1
package/examples/shorts/shapes.js +1 -1
package/examples/shorts/texture.js +10 -6
package/examples/shorts/tiles.png +0 -0
package/examples/shorts/tiltedView.js +2 -0
package/examples/starter/index.html +2 -2
package/examples/starter/tiles.png +0 -0
package/examples/typescript/tiles.png +0 -0
package/examples/uiSystem/game.js +1 -1
package/examples/uiSystem/tiles.png +0 -0
package/package.json +5 -5
package/plugins/box2d.js +167 -63
package/plugins/postProcess.js +47 -28
package/plugins/uiSystem.js +18 -18
package/plugins/zzfxm.js +2 -2
package/reference.md +4 -3
package/src/engine.js +182 -181
package/src/engineAudio.js +47 -63
package/src/engineDebug.js +8 -8
package/src/engineDraw.js +184 -124
package/src/engineExport.js +325 -334
package/src/engineFont.png +0 -0
package/src/engineInput.js +18 -24
package/src/engineMath.js +24 -113
package/src/engineObject.js +27 -26
package/src/engineParticles.js +2 -2
package/src/engineTileLayer.js +229 -192
package/src/engineUtilities.js +100 -4
package/src/engineWebGL.js +124 -73

package/examples/shorts/parallax.js CHANGED Viewed

@@ -53,7 +53,7 @@ class ParallaxLayer extends CanvasLayer
         this.context.clearRect(0,0,1,h);
         // make WebGL texture
-        this.useWebGL();
+        this.updateWebGL();
     }
     render()

package/examples/shorts/sequencer.js CHANGED Viewed

@@ -72,7 +72,7 @@ function gameInit()
     new UISystemPlugin;
     uiSystem.defaultCornerRadius = 8;
     uiSystem.defaultShadowColor = BLACK;
-    canvasClearColor = hsl(0,0,.3);
+    canvasClearColor = GRAY;
     // create sequencer buttons
     for (let step=stepCount; step--;)

package/examples/shorts/shapes.js CHANGED Viewed

@@ -7,7 +7,7 @@ function gameRender()
     // polygon shapes
     drawRectGradient(vec2(-6,0), vec2(5,4), RED, BLUE)
-    drawRegularPoly(vec2(0,0), vec2(4), 3, PURPLE, .3, WHITE, time);
+    drawRegularPoly(vec2(), vec2(4), 3, PURPLE, .3, WHITE, time);
     let starPath = []
     for (let i=10; i--;)
         starPath.push(vec2(0,2*(i%2?.4:1)).rotate(i/10*PI*2));

package/examples/shorts/texture.js CHANGED Viewed

@@ -1,12 +1,16 @@
 function gameRender()
 {
     // show the full texture
-    let pos = vec2(0,0);             // world position to draw
-    let size = vec2(15);             // world size of the tile
-    let color = hsl(0,0,1);          // color to multiply the tile by
-    let tilePos  = vec2(0,0);        // top left corner in pixels
-    let tileSize = vec2(256);        // source size in pixels
+    let pos = vec2();         // world position to draw
+    let size = vec2(15);      // world size of the tile
+    let color = hsl(0,0,1);   // color to multiply the tile by
+    let tilePos  = vec2();    // top left corner in pixels
+    let tileSize = vec2(256); // source size in pixels
     let tileInfo = new TileInfo(tilePos, tileSize); // tile info
-    drawRect(pos, size, GRAY);       // draw background
+    // draw background
+    drawRect(pos, size, GRAY);
+    // draw the tile
     drawTile(pos, size, tileInfo, color);
 }

package/examples/shorts/tiles.png CHANGED Viewed

Binary file

package/examples/shorts/tiltedView.js CHANGED Viewed

@@ -19,6 +19,8 @@ class Player extends GameObject
 {
     update()
     {
+        super.update();
         // apply movement controls
         const moveInput = keyDirection().clampLength(1).scale(.2);
         this.velocity = this.velocity.add(moveInput);

package/examples/starter/index.html CHANGED Viewed

@@ -7,7 +7,7 @@
 </head><body>
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1.16.2></script>
+<script src=../../dist/littlejs.js?1.17.5></script>
 <!-- LittleJS Engine Source
 <script src=../../src/engine.js></script>
@@ -32,4 +32,4 @@
 -->
 <!-- Add your game scripts here -->
-<script src=game.js?1.16.2></script>
+<script src=game.js?1.17.5></script>

package/examples/starter/tiles.png CHANGED Viewed

Binary file

package/examples/typescript/tiles.png CHANGED Viewed

Binary file

package/examples/uiSystem/game.js CHANGED Viewed

@@ -38,7 +38,7 @@ function createUI()
     // setup example menu
     uiMenu = new LJS.UIObject(vec2(0,500));
     uiRoot.addChild(uiMenu);
-    const uiBackground = new LJS.UIObject(vec2(0,0), vec2(450,580));
+    const uiBackground = new LJS.UIObject(vec2(), vec2(450,580));
     uiBackground.lineWidth = 8;
     uiMenu.addChild(uiBackground);

package/examples/uiSystem/tiles.png CHANGED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "littlejsengine",
-  "version": "1.16.2",
+  "version": "1.17.5",
   "description": "LittleJS - Tiny and Fast HTML5 Game Engine",
   "main": "dist/littlejs.esm.js",
   "types": "dist/littlejs.d.ts",
@@ -34,11 +34,11 @@
   },
   "devDependencies": {
     "bestzip": "^2.2.1",
+    "electron": "^38.2.0",
+    "electron-packager": "^17.1.2",
     "google-closure-compiler": "~20230502.0.0",
     "roadroller": "~2.1.0",
     "typescript": "~5.1.6",
-    "uglify-js": "~3.17.4",
-    "electron": "^38.2.0",
-    "electron-packager": "^17.1.2"
+    "uglify-js": "~3.17.4"
   }
-}
+}

package/plugins/box2d.js CHANGED Viewed

@@ -9,6 +9,7 @@
  * - Contact begin and end callbacks
  * - Wraps b2Vec2 type to/from Vector2
  * - Raycasting and querying
+ * - Box2dTileLayer for grid based collision
  * - Every type of joint
  * - Debug physics drawing
  * @namespace Box2D
@@ -60,21 +61,24 @@ class Box2dObject extends EngineObject
         bodyDef.set_type(bodyType);
         bodyDef.set_position(box2d.vec2dTo(pos));
         bodyDef.set_angle(-angle);
+        /** @property {Object} - The Box2d body */
         this.body = box2d.world.CreateBody(bodyDef);
-        this.body.object = this;
+        /** @property {Color} - Line color used for default box2d drawing */
         this.lineColor = BLACK;
-        box2d.objects.push(this);
-        // edge lists and loops for drawing
+        /** @property {Array<Object>} - List of all edges for default box2d drawing */
         this.edgeLists = [];
+        /** @property {Array<Object>} - List of all edge loops for default box2d drawing */
         this.edgeLoops = [];
+        this.body.object = this; // link body to this object
+        box2d.objects.push(this); // keep track of all box2d objects
     }
     /** Destroy this object and its physics body */
     destroy()
     {
-        if (this.destroyed)
-            return;
+        if (this.destroyed) return;
         // destroy physics body, fixtures, and joints
         ASSERT(this.body, 'Box2dObject has no body to destroy');
@@ -105,11 +109,12 @@ class Box2dObject extends EngineObject
     }
     /** Draws all this object's fixtures
-     *  @param {Color}  [color]
-     *  @param {Color}  [lineColor]
-     *  @param {number} [lineWidth]
+     *  @param {Color}   [color]
+     *  @param {Color}   [lineColor]
+     *  @param {number}  [lineWidth]
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, context)
+    drawFixtures(color=WHITE, lineColor=BLACK, lineWidth=.1, useWebGL, context)
     {
         // draw non-edge fixtures
         this.getFixtureList().forEach((fixture)=>
@@ -117,7 +122,7 @@ class Box2dObject extends EngineObject
             const shape = box2d.castObjectType(fixture.GetShape());
             if (shape.GetType() !== box2d.instance.b2Shape.e_edge)
             {
-                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, context);
+                box2d.drawFixture(fixture, this.pos, this.angle, color, lineColor, lineWidth, useWebGL, context);
             }
         });
@@ -343,6 +348,14 @@ class Box2dObject extends EngineObject
         return fixtures;
     }
+    /** Destroy a fixture from the body
+     *  @param {Object} [fixture] */
+    destroyFixture(fixture) { this.body.DestroyFixture(fixture); }
+    /** Destroy all fixture from the body */
+    destroyAllFixtures()
+    { this.getFixtureList().forEach(fixture=>this.destroyFixture(fixture)); }
     ///////////////////////////////////////////////////////////////////////////////
     // physics get functions
@@ -575,6 +588,136 @@ class Box2dObject extends EngineObject
     }
 }
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Box2D Static Object - Box2d with a static physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dStaticObject extends Box2dObject
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeStatic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Box2D Kiematic Object - Box2d with a kinematic physics body
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dKiematicObject extends Box2dObject
+{
+    /** Create a LittleJS object with Box2d physics
+     *  @param {Vector2}  [pos]
+     *  @param {Vector2}  [size]
+     *  @param {TileInfo} [tileInfo]
+     *  @param {number}   [angle]
+     *  @param {Color}    [color]
+     *  @param {number}   [renderOrder] */
+    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
+    {
+        const bodyType = box2d.bodyTypeKinematic;
+        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
+    }
+}
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * Box2d Tile Layer
+ * - adds Box2d support to tile layers
+ * - creates static box2d fixtures for solid tiles
+ * @extends Box2dObject
+ * @memberof Box2D
+ */
+class Box2dTileLayer extends Box2dStaticObject
+{
+    /** Create a Box2d tile layer object
+    *  @param {TileCollisionLayer} tileLayer - Tile layer for this object */
+    constructor(tileLayer)
+    {
+        ASSERT(tileLayer instanceof TileCollisionLayer, 'tileLayer must be a TileCollisionLayer');
+        super(tileLayer.pos, tileLayer.size);
+        /** @property {TileLayer} - The tile layer */
+        this.tileLayer = tileLayer;
+        this.addChild(tileLayer);
+    }
+    render()
+    {
+        // do not render fixtures, tile layer handles rendering
+    }
+    /** Create box2d collision fixtures for solid tiles
+    *  @param {number} [friction]
+    *  @param {number} [restitution] */
+    buildCollision(friction=.2, restitution=0)
+    {
+        // destroy all fixtures and create new ones
+        this.destroyAllFixtures();
+        // create box2d object for this layer
+        const size = this.tileLayer.size;
+        this.pos = this.tileLayer.pos.copy();
+        this.size = size.copy();
+        // track which tiles have been processed
+        const processed = [];
+        const getIndex = (x, y)=> x + y * size.x;
+        const isSolidUnprocessed = (x, y)=>
+            !processed[getIndex(x, y)] &&
+            this.tileLayer.getCollisionData(vec2(x, y)) > 0;
+        // combine tiles into larger boxes
+        for (let x = 0; x < size.x; ++x)
+        for (let y = 0; y < size.y; ++y)
+        {
+            if (!isSolidUnprocessed(x, y)) continue;
+            // find max width by scanning right
+            let width = 1, height = 1, canExpand = true;
+            while (isSolidUnprocessed(x + width, y))
+                ++width;
+            // find max height by scanning up, ensuring all rows have the same width
+            while (canExpand)
+            {
+                for (let checkX = 0; checkX < width; ++checkX)
+                {
+                    if (!isSolidUnprocessed(x + checkX, y + height))
+                    {
+                        canExpand = false;
+                        break;
+                    }
+                }
+                if (canExpand)
+                    ++height;
+            }
+            // mark all tiles in this rectangle as processed
+            for (let rectX = width;  rectX--;)
+            for (let rectY = height; rectY--;)
+                processed[getIndex(x + rectX, y + rectY)] = true;
+            // create a single fixture for the entire rectangle
+            const shapeSize = vec2(width, height);
+            const offset = vec2(x + width/2, y + height/2);
+            this.addBox(shapeSize, offset, 0, 0, friction, restitution);
+        }
+    }
+}
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * Box2D Raycast Result
@@ -616,6 +759,7 @@ class Box2dJoint
      *  @param {Object} jointDef */
     constructor(jointDef)
     {
+        /** @property {Object} - The Box2d joint */
         this.box2dJoint = box2d.castObjectType(box2d.world.CreateJoint(jointDef));
     }
@@ -962,7 +1106,7 @@ class Box2dGearJoint extends Box2dJoint
      *  @param {Box2dObject} objectB
      *  @param {Box2dJoint} joint1
      *  @param {Box2dJoint} joint2
-     *  @param {ratio} [ratio] */
+     *  @param {number} [ratio] */
     constructor(objectA, objectB, joint1, joint2, ratio=1)
     {
         const jointDef = new box2d.instance.b2GearJointDef();
@@ -1104,50 +1248,6 @@ class Box2dPrismaticJoint extends Box2dJoint
     getMotorForce(time) { return this.box2dJoint.GetMotorForce(1/time); }
 }
-///////////////////////////////////////////////////////////////////////////////
-/**
- * Box2D Static Object - Box2d with a static physics body
- * @extends Box2dObject
- * @memberof Box2D
- */
-class Box2dStaticObject extends Box2dObject
-{
-    /** Create a LittleJS object with Box2d physics
-     *  @param {Vector2}  [pos]
-     *  @param {Vector2}  [size]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {number}   [angle]
-     *  @param {Color}    [color]
-     *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
-    {
-        const bodyType = box2d.bodyTypeStatic;
-        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
-    }
-}
-///////////////////////////////////////////////////////////////////////////////
-/**
- * Box2D Kiematic Object - Box2d with a kinematic physics body
- * @extends Box2dObject
- * @memberof Box2D
- */
-class Box2dKiematicObject extends Box2dObject
-{
-    /** Create a LittleJS object with Box2d physics
-     *  @param {Vector2}  [pos]
-     *  @param {Vector2}  [size]
-     *  @param {TileInfo} [tileInfo]
-     *  @param {number}   [angle]
-     *  @param {Color}    [color]
-     *  @param {number}   [renderOrder] */
-    constructor(pos, size, tileInfo, angle=0, color, renderOrder=0)
-    {
-        const bodyType = box2d.bodyTypeKinematic;
-        super(pos, size, tileInfo, angle, color, bodyType, renderOrder);
-    }
-}
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * Box2D Wheel Joint
@@ -1508,10 +1608,13 @@ class Box2dPlugin
     {
         ASSERT(!box2d, 'Box2D already initialized');
         box2d = this;
+        /** @property {Object} - The Box2d instance */
         this.instance = instance;
+        /** @property {Object} - The Box2d world */
         this.world = new box2d.instance.b2World();
+        /** @property {Array<Box2dObject>} - List of all Box2d objects */
         this.objects = [];
         /** @property {number} - Velocity iterations per update*/
         this.velocityIterations = 8;
         /** @property {number} - Position iterations per update*/
@@ -1710,8 +1813,9 @@ class Box2dPlugin
      *  @param {Color} [color]
      *  @param {Color} [lineColor]
      *  @param {number} [lineWidth]
+     *  @param {boolean} [useWebGL=glEnable]
      *  @param {CanvasRenderingContext2D} [context] */
-    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, context)
+    drawFixture(fixture, pos, angle, color=WHITE, lineColor=BLACK, lineWidth=.1, useWebgl, context)
     {
         const shape = box2d.castObjectType(fixture.GetShape());
         switch (shape.GetType())
@@ -1721,20 +1825,20 @@ class Box2dPlugin
                 let points = [];
                 for (let i=shape.GetVertexCount(); i--;)
                     points.push(box2d.vec2From(shape.GetVertex(i)));
-                drawPoly(points, color, lineWidth, lineColor, pos, angle);
+                drawPoly(points, color, lineWidth, lineColor, pos, angle, useWebgl, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_circle:
             {
                 const radius = shape.get_m_radius();
-                drawCircle(pos, radius*2, color, lineWidth, lineColor);
+                drawCircle(pos, radius*2, color, lineWidth, lineColor, useWebgl, false, context);
                 break;
             }
             case box2d.instance.b2Shape.e_edge:
             {
                 const v1 = box2d.vec2From(shape.get_m_vertex1());
                 const v2 = box2d.vec2From(shape.get_m_vertex2());
-                drawLine(v1, v2, lineWidth, lineColor, pos, angle);
+                drawLine(v1, v2, lineWidth, lineColor, pos, angle, useWebgl, false, context);
                 break;
             }
         }
@@ -1752,7 +1856,7 @@ class Box2dPlugin
     }
     /** converts a box2d vec2 pointer to a Vector2
-     *  @param {Object} v */
+     *  @param {Object} vp */
     vec2FromPointer(vp)
     {
         const v = box2d.instance.wrapPointer(vp, box2d.instance.b2Vec2);
@@ -1864,7 +1968,7 @@ async function box2dInit()
         const box2dColorPointer = (c)=>
             box2dColor(box2d.instance.wrapPointer(c, box2d.instance.b2Color));
         const getDebugColor = (color)=>box2dColorPointer(color).scale(1,.8);
-        const getPointsList = (vertices, vertexCount) =>
+        const getPointsList = (vertices, vertexCount)=>
         {
             const points = [];
             for (let i=vertexCount; i--;)

package/plugins/postProcess.js CHANGED Viewed

@@ -24,14 +24,16 @@ class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
-    *  @param {boolean} [includeMainCanvas]
-     *  @example
-     *  // create the post process plugin object
-     *  new PostProcessPlugin(shaderCode);
-     */
-    constructor(shaderCode, includeMainCanvas=true)
+    *  @param {boolean} [includeMainCanvas] - combine mainCanvs onto glCanvas
+    *  @param {boolean} [feedbackTexture] - use glCanvas from previous frame as the texture
+    *  @example
+    *  // create the post process plugin object
+    *  new PostProcessPlugin(shaderCode);
+    */
+    constructor(shaderCode, includeMainCanvas=false, feedbackTexture=false)
     {
         ASSERT(!postProcess, 'Post process already initialized');
+        ASSERT(!(includeMainCanvas && feedbackTexture), 'Post process cannot both include main canvas and use feedback texture');
         postProcess = this;
         if (!shaderCode) // default shader pass through
@@ -39,9 +41,10 @@ class PostProcessPlugin
         /** @property {WebGLProgram} - Shader for post processing */
         this.shader = undefined;
         /** @property {WebGLTexture} - Texture for post processing */
         this.texture = undefined;
+        /** @property {WebGLVertexArrayObject} - Vertex array object */
+        this.vao = undefined;
         // setup the post processing plugin
         initPostProcess();
@@ -50,7 +53,6 @@ class PostProcessPlugin
         function initPostProcess()
         {
             if (headlessMode) return;
             if (!glEnable)
             {
                 console.warn('PostProcessPlugin: WebGL not enabled!');
@@ -61,14 +63,14 @@ class PostProcessPlugin
             postProcess.texture = glCreateTexture();
             postProcess.shader = glCreateProgram(
                 '#version 300 es\n' +            // specify GLSL ES version
-                'precision highp float;'+        // use highp for better accuracy
+                'precision highp float;'+        // use highp for accuracy
                 'in vec2 p;'+                    // position
                 'void main(){'+                  // shader entry point
                 '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 better accuracy
+                'precision highp float;'+        // use highp for accuracy
                 'uniform sampler2D iChannel0;'+  // input texture
                 'uniform vec3 iResolution;'+     // size of output texture
                 'uniform float iTime;'+          // time
@@ -79,6 +81,17 @@ class PostProcessPlugin
                 'c.a=1.;'+                       // always use full alpha
                 '}'                              // end of shader
             );
+            // setup VAO for post processing
+            postProcess.vao = glContext.createVertexArray();
+            glContext.bindVertexArray(postProcess.vao);
+            glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
+            // configure vertex attributes
+            const vertexByteStride = 8;
+            const pLocation = glContext.getAttribLocation(postProcess.shader, 'p');
+            glContext.enableVertexAttribArray(pLocation);
+            glContext.vertexAttribPointer(pLocation, 2, glContext.FLOAT, false, vertexByteStride, 0);
         }
         function postProcessContextLost()
         {
@@ -93,14 +106,17 @@ class PostProcessPlugin
         }
         function postProcessRender()
         {
-            if (headlessMode) return;
-            if (!glEnable)
-                return;
+            if (headlessMode || !glEnable) return;
             // clear out the buffer
             glFlush();
+            // setup shader program to draw a quad
+            glContext.useProgram(postProcess.shader);
+            glContext.bindVertexArray(postProcess.vao);
+            glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, true);
+            glContext.disable(glContext.BLEND);
             // setup texture
             glContext.activeTexture(glContext.TEXTURE0);
             glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
@@ -111,29 +127,32 @@ class PostProcessPlugin
                 workCanvas.height = mainCanvasSize.y;
                 glCopyToContext(workContext);
                 workContext.drawImage(mainCanvas, 0, 0);
+                mainCanvas.width |= 0
                 // copy work canvas to texture
                 glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, workCanvas);
             }
-            // setup shader program to draw a quad
-            glContext.useProgram(postProcess.shader);
-            glContext.bindBuffer(glContext.ARRAY_BUFFER, glGeometryBuffer);
-            glContext.pixelStorei(glContext.UNPACK_FLIP_Y_WEBGL, 1);
-            glContext.disable(glContext.BLEND);
-            // set vertex position attribute
-            const vertexByteStride = 8;
-            const pLocation = glContext.getAttribLocation(postProcess.shader, 'p');
-            glContext.enableVertexAttribArray(pLocation);
-            glContext.vertexAttribPointer(pLocation, 2, glContext.FLOAT, false, vertexByteStride, 0);
+            else if (!feedbackTexture)
+            {
+                // copy glCanvas to texture
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, glCanvas);
+            }
             // set uniforms and draw
             const uniformLocation = (name)=>glContext.getUniformLocation(postProcess.shader, name);
             glContext.uniform1i(uniformLocation('iChannel0'), 0);
             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
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, glCanvas);
+            }
+            // force it to set instanced mode
+            glSetInstancedMode(true);
         }
     }
 }