littlejsengine 1.14.11 → 1.14.19

package/examples/shorts/tiltedView.js

@@ -9,8 +9,10 @@ class GameObject extends EngineObject
     render()
     {
         // adjust draw postion to be at the bottom of the object
-        const pos = this.pos.add(vec2(0,this.size.y/2).rotate(this.angle));
-        drawTile(pos, this.size, this.tileInfo, this.color, this.angle);
+        const drawSize = this.drawSize || this.size;
+        const offset = vec2(0,drawSize.y/2).rotate(this.angle);
+        const pos = this.pos.add(offset);
+        drawTile(pos, drawSize, this.tileInfo, this.color, this.angle);
     }
 }
 
@@ -23,6 +25,7 @@ class Player extends GameObject
         // apply movement controls
         const moveInput = keyDirection().clampLength(1).scale(.2);
         this.velocity = this.velocity.add(moveInput);
+        this.setCollision(); // make object collide
 
         // move camera with player
         cameraPos = this.pos.add(vec2(0,2));
@@ -33,13 +36,29 @@ function gameInit()
 {
     // setup level
     objectDefaultDamping = .7;
-    new Player(vec2(), vec2(3), tile(5), 0, RED);
+    const player = new Player(vec2(), vec2(3,1), tile(5), 0, RED);
+    player.drawSize = vec2(3);
 
     // create background objects
     for (let i=1; i<300; ++i)
-        new EngineObject(randInCircle(90), vec2(rand(59),rand(59)), 0, 0, hsl(.4,.2,rand(.4,.5),.8), -1e5);
+    {
+        const pos = randInCircle(90);
+        const size = vec2(rand(59), rand(59));
+        const color = hsl(.4,.2,rand(.4,.5),.8);
+        new EngineObject(pos, size, 0, 0, color, -1e5);
+    }
 
     // create world objects
     for (let i=1; i<1e3; ++i)
-        new GameObject(randInCircle(7+i,7), vec2(rand(1,2),rand(4,9)), 0, 0, hsl(.1,.5,rand(.2,.3)));
+    {
+        const pos = randInCircle(7+i,7);
+        const isRock = randBool();
+        const size = vec2(isRock ? rand(2,4) : rand(1,2));
+        const color = hsl(.1,isRock ? 0 : .5,rand(.2,.3));
+        const o = new GameObject(pos, size, 0, 0, color);
+        o.setCollision(); // make object collide
+        o.mass = 0; // make object have static physics
+        o.angle = rand(-.1,.1); // random tilt
+        o.drawSize = vec2(size.x, isRock ? rand(2,4) : rand(5,10));
+    }
 }

package/examples/shorts/timers.js

@@ -1,4 +1,5 @@
 let timerButton, timerSlider;
+let timerSound = new Sound([2,0,999,,,,,1.5,,.3,-99,.1,1.63,,,.11]);
 
 function gameInit()
 {
@@ -13,13 +14,16 @@ function gameInit()
     timerButton.timer = new Timer;
     timerButton.onClick = ()=>
     {
+        timerButton.isSet = true;
         if (timerButton.timer.isSet())
         {
+            timerSound.play(0, .5, 2);
             timerButton.timer.unset();
             timerButton.text = 'Start';
         }
         else
         {
+            timerSound.play(0, .5, .5);
             timerButton.timer.set(3);
             timerButton.text = 'Stop';
         }
@@ -30,6 +34,12 @@ function gameInit()
     timerSlider.interactive = false;
     timerSlider.update = ()=>
     {
+        if (timerButton.isSet && timerButton.timer.elapsed())
+        {
+            timerSound.play();
+            timerButton.isSet = 0;
+        }
+
         // update the timer display
         const t = timerButton.timer.get();
         const timeText = t.toFixed(2) + 's';

package/examples/shorts/topDown.js

@@ -30,7 +30,10 @@ function gameInit()
     // create collision objects
     for (let i=300; i--;)
     {
-        const o = new EngineObject(randInCircle(15+i,7), vec2(rand(4,9),rand(4,9)), 0, 0, hsl(0,0,rand(.1,.3)));
+        const pos = randInCircle(15+i,7);
+        const size = vec2(rand(4,9),rand(4,9));
+        const color = hsl(.1,.5,rand(.2));
+        const o = new EngineObject(pos, size, 0, 0, color);
         o.setCollision(); // make object collide
         o.mass = 0; // make object have static physics
     }

package/examples/shorts/uiSystem.js

@@ -2,12 +2,13 @@ function gameInit()
 {
     // setup ui system plugin
     new UISystemPlugin;
-    uiSystem.defaultSoundPress = new Sound([1,0,220]);
-    uiSystem.defaultSoundClick = new Sound([1,0,440]);
+    uiSystem.defaultSoundPress = new Sound([.5,0,220]);
+    uiSystem.defaultSoundClick = new Sound([.5,0,440]);
     uiSystem.defaultCornerRadius = 8;
 
     // example button that returns to menu
-    const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200), 'Back\nto\nMenu');
+    const buttonBack = new UIButton(mainCanvasSize.scale(.5), vec2(200),
+        'Back\nto\nMenu');
     buttonBack.textHeight = 60;
     buttonBack.onClick = ()=> uiMenu.visible = true;
 
@@ -16,7 +17,8 @@ function gameInit()
     canvasClearColor = hsl(0,0,.8);
 
     // example text
-    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80), 'LittleJS UI\nSystem Demo'));
+    uiMenu.addChild(new UIText(vec2(-80,-120), vec2(500, 80),
+        'LittleJS UI\nSystem Demo'));
 
     // example image
     uiMenu.addChild(new UITile(vec2(200,-140), vec2(128), tile(3, 128)));
@@ -33,7 +35,8 @@ function gameInit()
     uiMenu.addChild(checkbox);
 
     // example scrollbar
-    const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), soundVolume, 'Volume');
+    const scrollbar = new UIScrollbar(vec2(0,90), vec2(300, 50), soundVolume,
+        'Volume');
     uiMenu.addChild(scrollbar);
     scrollbar.onChange = ()=> setSoundVolume(scrollbar.value);
 

package/examples/starter/game.js

@@ -65,16 +65,16 @@ function gameInit()
     // create particle emitter
     particleEmitter = new ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        0, 0, 500, PI,              // emitSize, emitTime, emitRate, emitCone
+        0, 0, 500, PI,              // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
+        1, .2, .2, .1, .05,         // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, PI,              // damping, angleDamping, gravityScale, cone
         .05, .5, true, true         // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.trailScale = 2;   // stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -86,7 +86,7 @@ function gameUpdate()
         sound_click.play(mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = randColor();
         particleEmitter.colorStartB = randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);

package/examples/starter/index.html

@@ -7,7 +7,7 @@
 </head><body>
 
 <!-- LittleJS Engine -->
-<script src=../../dist/littlejs.js?1136></script>
+<script src=../../dist/littlejs.js?11417></script>
 
 <!-- LittleJS Engine Source
 <script src=../../src/engineDebug.js></script>
@@ -31,4 +31,4 @@
 -->
 
 <!-- Add your game scripts here -->
-<script src=game.js?1136></script>
+<script src=game.js?11417></script>

package/examples/style.css

@@ -73,6 +73,7 @@ iframe
     margin: 5px;
     text-align: center;
     font-size: 40px;
+    font-weight: bold;
 }
 #exampleInfo
 {

package/examples/typescript/game.js

@@ -52,16 +52,16 @@ function gameInit() {
     LJS.setGravity(vec2(0, -.01));
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(vec2(16, 9), 0, // emitPos, emitAngle
-    1, 0, 500, Math.PI, // emitSize, emitTime, emitRate, emitCone
+    1, 0, 500, Math.PI, // emitSize, emitTime, rate, cone
     tile(0, 16), // tileIndex, tileSize
     hsl(1, 1, 1), hsl(0, 0, 0), // colorStartA, colorStartB
     hsl(0, 0, 0, 0), hsl(0, 0, 0, 0), // colorEndA, colorEndB
-    2, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
+    1, .2, .2, .1, .05, // time, sizeStart, sizeEnd, speed, angleSpeed
     .99, 1, 1, Math.PI, // damping, angleDamping, gravityScale, cone
     .05, .5, true, true // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2; // stretch in direction of motion
+    particleEmitter.trailScale = 2;  // stretch as it moves
 }
 ///////////////////////////////////////////////////////////////////////////////
 function gameUpdate() {
@@ -69,7 +69,7 @@ function gameUpdate() {
         // play sound when mouse is pressed
         sound_click.play(LJS.mousePos);
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = LJS.randColor();
         particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1, 0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1, 0);

package/examples/typescript/game.ts

@@ -69,16 +69,16 @@ function gameInit()
     // create particle emitter
     particleEmitter = new LJS.ParticleEmitter(
         vec2(16,9), 0,              // emitPos, emitAngle
-        1, 0, 500, Math.PI,         // emitSize, emitTime, emitRate, emitCone
+        1, 0, 500, Math.PI,         // emitSize, emitTime, rate, cone
         tile(0, 16),                // tileIndex, tileSize
         hsl(1,1,1),   hsl(0,0,0),   // colorStartA, colorStartB
         hsl(0,0,0,0), hsl(0,0,0,0), // colorEndA, colorEndB
-        2, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
+        1, .2, .2, .1, .05,   // time, sizeStart, sizeEnd, speed, angleSpeed
         .99, 1, 1, Math.PI,   // damping, angleDamping, gravityScale, cone
         .05, .5, true, true   // fadeRate, randomness, collide, additive
     );
     particleEmitter.restitution = .3; // bounce when it collides
-    particleEmitter.trailScale = 2;  // stretch in direction of motion
+    particleEmitter.trailScale = 2;  // stretch stretch as it moves
 }
 
 ///////////////////////////////////////////////////////////////////////////////
@@ -90,7 +90,7 @@ function gameUpdate()
         sound_click.play(LJS.mousePos);
 
         // change particle color and set to fade out
-        particleEmitter.colorStartA = hsl();
+        particleEmitter.colorStartA = LJS.randColor();
         particleEmitter.colorStartB = LJS.randColor();
         particleEmitter.colorEndA = particleEmitter.colorStartA.scale(1,0);
         particleEmitter.colorEndB = particleEmitter.colorStartB.scale(1,0);

package/examples/uiSystem/game.js

@@ -21,9 +21,10 @@ LJS.setCanvasPixelated(false);
 
 function createUI()
 {
-    LJS.uiSystem.defaultSoundPress = new LJS.Sound([1,0,220]);
-    LJS.uiSystem.defaultSoundClick = new LJS.Sound([1,0,440]);
+    LJS.uiSystem.defaultSoundPress = new LJS.Sound([.5,0,220]);
+    LJS.uiSystem.defaultSoundClick = new LJS.Sound([.5,0,440]);
     LJS.uiSystem.defaultCornerRadius = 8;
+    LJS.uiSystem.defaultGradientColor = LJS.WHITE;
 
     // setup root to attach all ui elements to
     uiRoot = new LJS.UIObject;
@@ -63,7 +64,7 @@ function createUI()
     // example button
     const button1 = new LJS.UIButton(vec2(0,140), vec2(350, 50), 'Test Button');
     uiMenu.addChild(button1);
-    button1.onClick = ()=> LOG('Button 1 clicked');
+    button1.onClick = ()=> uiBackground.color = hsl(Math.random(),1,.7);
 
     // example checkbox
     const checkbox = new LJS.UICheckbox(vec2(-140,-20), vec2(40));

package/package.json

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

package/plugins/box2d.js

@@ -39,6 +39,7 @@ function box2dSetDebug(enable) { box2dDebug = enable; }
  * - Each object has a Box2D body which can have multiple fixtures and joints
  * - Provides interface for Box2D body and fixture functions
  * @extends EngineObject
+ * @memberof Box2D
  */
 class Box2dObject extends EngineObject 
 {
@@ -50,7 +51,7 @@ class Box2dObject extends EngineObject
      *  @param {Color}    [color]
      *  @param {number}   [bodyType]
      *  @param {number}   [renderOrder] */
-    constructor(pos=vec2(), size, tileInfo, angle=0, color, bodyType=box2d.bodyTypeDynamic, renderOrder=0)
+    constructor(pos, size, tileInfo, angle=0, color, bodyType=box2d.bodyTypeDynamic, renderOrder=0)
     {
         super(pos, size, tileInfo, angle, color, renderOrder);
 
@@ -64,7 +65,7 @@ class Box2dObject extends EngineObject
         this.lineColor = BLACK;
     }
 
-    /** Destroy this object and it's physics body */
+    /** Destroy this object and its physics body */
     destroy()
     {
         // destroy physics body, fixtures, and joints
@@ -548,6 +549,7 @@ class Box2dRaycastResult
  * Box2D Joint
  * - Base class for Box2D joints 
  * - A joint is used to connect objects together
+ * @memberof Box2D
  */
 class Box2dJoint
 {
@@ -603,6 +605,7 @@ class Box2dJoint
  * - This a soft constraint with a max force
  * - This allows the constraint to stretch and without applying huge forces
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dTargetJoint extends Box2dJoint
 {
@@ -652,6 +655,7 @@ class Box2dTargetJoint extends Box2dJoint
  * - Constrains two points on two objects to remain at a fixed distance
  * - You can view this as a massless, rigid rod
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dDistanceJoint extends Box2dJoint
 {
@@ -715,6 +719,7 @@ class Box2dDistanceJoint extends Box2dJoint
  * Box2D Pin Joint
  * - Pins two objects together at a point
  * @extends Box2dDistanceJoint
+ * @memberof Box2D
  */
 class Box2dPinJoint extends Box2dDistanceJoint
 {
@@ -734,6 +739,7 @@ class Box2dPinJoint extends Box2dDistanceJoint
  * Box2D Rope Joint
  * - Enforces a maximum distance between two points on two objects
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dRopeJoint extends Box2dJoint
 {
@@ -786,6 +792,7 @@ class Box2dRopeJoint extends Box2dJoint
  * - You can use a motor to drive the relative rotation about the shared point
  * - A maximum motor torque is provided so that infinite forces are not generated
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dRevoluteJoint extends Box2dJoint
 {
@@ -887,6 +894,7 @@ class Box2dRevoluteJoint extends Box2dJoint
  * - Either joint can be a revolute or prismatic joint
  * - You specify a gear ratio to bind the motions together
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dGearJoint extends Box2dJoint
 {
@@ -935,6 +943,7 @@ class Box2dGearJoint extends Box2dJoint
  * - You can use a joint limit to restrict the range of motion
  * - You can use a joint motor to drive the motion or to model joint friction
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dPrismaticJoint extends Box2dJoint
 {
@@ -1044,6 +1053,7 @@ class Box2dPrismaticJoint extends Box2dJoint
  * - You can use a joint motor to drive the motion or to model joint friction
  * - This joint is designed for vehicle suspensions
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dWheelJoint extends Box2dJoint
 {
@@ -1139,6 +1149,7 @@ class Box2dWheelJoint extends Box2dJoint
  * Box2D Weld Joint
  * - Glues two objects together
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dWeldJoint extends Box2dJoint
 {
@@ -1197,6 +1208,7 @@ class Box2dWeldJoint extends Box2dJoint
  * - Used to apply top-down friction
  * - Provides 2D translational friction and angular friction
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dFrictionJoint extends Box2dJoint
 {
@@ -1251,6 +1263,7 @@ class Box2dFrictionJoint extends Box2dJoint
  * - The pulley supports a ratio such that: length1 + ratio * length2 <= constant
  * - The force transmitted is scaled by the ratio
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dPulleyJoint extends Box2dJoint
 {
@@ -1318,6 +1331,7 @@ class Box2dPulleyJoint extends Box2dJoint
  * - Controls the relative motion between two objects
  * - Typical usage is to control the movement of a object with respect to the ground
  * @extends Box2dJoint
+ * @memberof Box2D
  */
 class Box2dMotorJoint extends Box2dJoint
 {
@@ -1381,6 +1395,7 @@ class Box2dMotorJoint extends Box2dJoint
 /** 
  * Box2D Global Object
  * - Wraps Box2d world and provides global functions
+ * @memberof Box2D
  */
 class Box2dPlugin
 {

package/plugins/newgrounds.js

@@ -1,24 +1,25 @@
 /** 
- * LittleJS Newgrounds API
+ * LittleJS Newgrounds Plugin
  * - NewgroundsMedal extends Medal with Newgrounds API functionality
- * - Call new NewgroundsPlugin() to setup Newgrounds
+ * - Call new NewgroundsPlugin(app_id) to setup Newgrounds
  * - Uses CryptoJS for encryption if optional cipher is provided
+ * - provides functions to interact with medals scoreboards
  * - Keeps connection alive and logs views
- * - Functions to interact with scoreboards
- * - Functions to unlock medals
+ * @namespace Newgrounds
  */
 
 'use strict';
 
 /** Global Newgrounds object
  *  @type {NewgroundsPlugin}
- *  @memberof Medal */
+ *  @memberof Newgrounds */
 let newgrounds;
 
 ///////////////////////////////////////////////////////////////////////////////
 /**
  * Newgrounds medal auto unlocks in newgrounds API
  * @extends Medal
+ * @memberof Newgrounds
  */
 class NewgroundsMedal extends Medal
 {
@@ -43,6 +44,7 @@ class NewgroundsMedal extends Medal
 ///////////////////////////////////////////////////////////////////////////////
 /** 
  * Newgrounds API object
+ * @memberof Newgrounds
  */
 class NewgroundsPlugin
 {

package/plugins/postProcess.js

@@ -1,8 +1,9 @@
 /**
  * LittleJS Post Processing Plugin
  * - Supports shadertoy style post processing shaders
- * - call new new PostProcessPlugin() to setup post processing
+ * - call new PostProcessPlugin() to setup post processing
  * - can be enabled to pass other canvases through a final shader
+ * @namespace PostProcess
  */
 
 'use strict';
@@ -10,92 +11,111 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 /** Global Post Process plugin object
- *  @type {PostProcessPlugin} */
+ *  @type {PostProcessPlugin}
+ *  @memberof PostProcess */
 let postProcess;
 
 /////////////////////////////////////////////////////////////////////////
 /** 
  * UI System Global Object
+ * @memberof PostProcess
  */
 class PostProcessPlugin
 {
     /** Create global post processing shader
     *  @param {string} shaderCode
     *  @param {boolean} [includeOverlay]
+    *  @param {boolean} [includeMainCanvas]
      *  @example
      *  // create the post process plugin object
      *  new PostProcessPlugin(shaderCode);
      */
-    constructor(shaderCode, includeOverlay=false)
+    constructor(shaderCode, includeOverlay=false, includeMainCanvas=true)
     {
         ASSERT(!postProcess, 'Post process already initialized');
         postProcess = this;
 
-        if (headlessMode) return;
-
-        if (!glEnable)
-        {
-            console.warn('PostProcessPlugin: WebGL not enabled!');
-            return;
-        }
-
         if (!shaderCode) // default shader pass through
             shaderCode = 'void mainImage(out vec4 c,vec2 p){c=texture(iChannel0,p/iResolution.xy);}';
 
         /** @property {WebGLProgram} - Shader for post processing */
-        this.shader = glCreateProgram(
-            '#version 300 es\n' +            // specify GLSL ES version
-            'precision highp float;'+        // use highp for better 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
-            '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
-        );
+        this.shader = undefined;
 
         /** @property {WebGLTexture} - Texture for post processing */
-        this.texture = glCreateTexture();
+        this.texture = undefined;
 
-        /** @property {boolean} - Should overlay canvas be included in post processing */
-        this.includeOverlay = includeOverlay;
+        // setup the post processing plugin
+        initPostProcess();
+        engineAddPlugin(undefined, postProcessRender, postProcessContextLost, postProcessContextRestored);
 
-        // Render the post processing shader, called automatically by the engine
-        engineAddPlugin(undefined, postProcessRender);
-        function postProcessRender()
+        function initPostProcess()
         {
             if (headlessMode) return;
-            
-            // prepare to render post process shader
-            if (glEnable)
-            {
-                glFlush(); // clear out the buffer
-                mainContext.drawImage(glCanvas, 0, 0); // copy to the main canvas
-            }
-            else
+
+            if (!glEnable)
             {
-                // set the viewport
-                glContext.viewport(0, 0, glCanvas.width = drawCanvas.width, glCanvas.height = drawCanvas.height);
+                console.warn('PostProcessPlugin: WebGL not enabled!');
+                return;
             }
 
-            if (postProcess.includeOverlay)
+            // create resources
+            postProcess.texture = glCreateTexture();
+            postProcess.shader = glCreateProgram(
+                '#version 300 es\n' +            // specify GLSL ES version
+                'precision highp float;'+        // use highp for better 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
+                '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
+            );
+        }
+        function postProcessContextLost()
+        {
+            postProcess.shader = undefined;
+            postProcess.texture = undefined;
+            LOG('PostProcessPlugin: WebGL context lost');
+        }
+        function postProcessContextRestored()
+        {
+            initPostProcess();
+            LOG('PostProcessPlugin: WebGL context restored');
+        }
+        function postProcessRender()
+        {
+            if (headlessMode) return;
+
+            if (!glEnable)
+                return;
+            
+            // clear out the buffer
+            glFlush();
+            
+            if (includeMainCanvas || includeOverlay)
             {
-                // copy overlay canvas so it will be included in post processing
-                mainContext.drawImage(overlayCanvas, 0, 0);
-                overlayCanvas.width |= 0;
+                // copy WebGL to the main canvas
+                mainContext.drawImage(glCanvas, 0, 0);
+
+                if (includeOverlay)
+                {
+                    // copy overlay canvas so it will be included in post processing
+                    mainContext.drawImage(overlayCanvas, 0, 0);
+                    overlayCanvas.width |= 0; // clear overlay canvas
+                }
             }
 
-            // setup shader program to draw one triangle
+            // 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);
@@ -104,7 +124,10 @@ class PostProcessPlugin
             // set textures, pass in the 2d canvas and gl canvas in separate texture channels
             glContext.activeTexture(glContext.TEXTURE0);
             glContext.bindTexture(glContext.TEXTURE_2D, postProcess.texture);
-            glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
+            if (includeMainCanvas || includeOverlay)
+            {
+                glContext.texImage2D(glContext.TEXTURE_2D, 0, glContext.RGBA, glContext.RGBA, glContext.UNSIGNED_BYTE, mainCanvas);
+            }
 
             // set vertex position attribute
             const vertexByteStride = 8;