Don't touch the GPU at all if nothing changed

Author: GarboMuffin

src/Drawable.js

@@ -59,11 +59,13 @@ class Drawable {
      * An object which can be drawn by the renderer.
      * @todo double-buffer all rendering state (position, skin, effects, etc.)
      * @param {!int} id - This Drawable's unique ID.
+     * @param {!RenderWebGL} renderer - The renderer that created this Drawable
      * @constructor
      */
-    constructor (id) {
+    constructor (id, renderer) {
         /** @type {!int} */
         this._id = id;
+        this._renderer = renderer;
 
         /**
          * The uniforms to be used by the vertex and pixel shaders.
@@ -222,6 +224,7 @@ class Drawable {
                 this._position[0] = Math.round(position[0]);
                 this._position[1] = Math.round(position[1]);
             }
+            this._renderer.dirty = true;
             this.setTransformDirty();
         }
     }
@@ -233,6 +236,7 @@ class Drawable {
     updateDirection (direction) {
         if (this._direction !== direction) {
             this._direction = direction;
+            this._renderer.dirty = true;
             this._rotationTransformDirty = true;
             this.setTransformDirty();
         }
@@ -247,6 +251,7 @@ class Drawable {
             this._scale[1] !== scale[1]) {
             this._scale[0] = scale[0];
             this._scale[1] = scale[1];
+            this._renderer.dirty = true;
             this._rotationCenterDirty = true;
             this._skinScaleDirty = true;
             this.setTransformDirty();
@@ -260,6 +265,7 @@ class Drawable {
     updateVisible (visible) {
         if (this._visible !== visible) {
             this._visible = visible;
+            this._renderer.dirty = true;
             this.setConvexHullDirty();
         }
     }
@@ -270,6 +276,7 @@ class Drawable {
      * @param {number} rawValue A new effect value.
      */
     updateEffect (effectName, rawValue) {
+        this._renderer.dirty = true;
         const effectInfo = ShaderManager.EFFECT_INFO[effectName];
         if (rawValue) {
             this.enabledEffects |= effectInfo.mask;
@@ -675,6 +682,7 @@ class Drawable {
      * @private
      */
     _skinWasAltered () {
+        this._renderer.dirty = true;
         this._rotationCenterDirty = true;
         this._skinScaleDirty = true;
         this.setConvexHullDirty();

src/RenderWebGL.js

@@ -215,6 +215,8 @@ class RenderWebGL extends EventEmitter {
         // tw: add high quality render option
         this.useHighQualityRender = false;
 
+        this.dirty = true;
+
         this._createGeometry();
 
         this.on(RenderConstants.Events.NativeSizeChanged, this.onNativeSizeChanged);
@@ -231,6 +233,7 @@ class RenderWebGL extends EventEmitter {
 
     // tw: implement high quality pen option
     setUseHighQualityRender (enabled) {
+        this.dirty = true;
         this.useHighQualityRender = enabled;
         this.emit(RenderConstants.Events.UseHighQualityRenderChanged, enabled);
         this._updateRenderQuality();
@@ -274,6 +277,7 @@ class RenderWebGL extends EventEmitter {
      * @param {int} pixelsTall The desired height in device-independent pixels.
      */
     resize (pixelsWide, pixelsTall) {
+        this.dirty = true;
         const {canvas} = this._gl;
         const pixelRatio = window.devicePixelRatio || 1;
         const newWidth = pixelsWide * pixelRatio;
@@ -517,7 +521,7 @@ class RenderWebGL extends EventEmitter {
             return;
         }
         const drawableID = this._nextDrawableId++;
-        const drawable = new Drawable(drawableID);
+        const drawable = new Drawable(drawableID, this);
         this._allDrawables[drawableID] = drawable;
         this._addToDrawList(drawableID, group);
         // tw: implement high quality render
@@ -588,6 +592,7 @@ class RenderWebGL extends EventEmitter {
             log.warn('Cannot destroy drawable without known layer group.');
             return;
         }
+        this.dirty = true;
         const drawable = this._allDrawables[drawableID];
         drawable.dispose();
         delete this._allDrawables[drawableID];
@@ -643,6 +648,7 @@ class RenderWebGL extends EventEmitter {
             return;
         }
 
+        this.dirty = true;
         const currentLayerGroup = this._layerGroups[group];
         const startIndex = currentLayerGroup.drawListOffset;
         const endIndex = this._endIndexForKnownLayerGroup(currentLayerGroup);
@@ -686,6 +692,11 @@ class RenderWebGL extends EventEmitter {
      * Draw all current drawables and present the frame on the canvas.
      */
     draw () {
+        if (!this.dirty) {
+            return;
+        }
+        this.dirty = false;
+
         this._doExitDrawRegion();
 
         const gl = this._gl;
@@ -1708,6 +1719,7 @@ class RenderWebGL extends EventEmitter {
      * @param {int} penSkinID - the unique ID of a Pen Skin.
      */
     penClear (penSkinID) {
+        this.dirty = true;
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
         skin.clear();
     }
@@ -1720,6 +1732,7 @@ class RenderWebGL extends EventEmitter {
      * @param {number} y - the Y coordinate of the point to draw.
      */
     penPoint (penSkinID, penAttributes, x, y) {
+        this.dirty = true;
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
         skin.drawPoint(penAttributes, x, y);
     }
@@ -1734,6 +1747,7 @@ class RenderWebGL extends EventEmitter {
      * @param {number} y1 - the Y coordinate of the end of the line.
      */
     penLine (penSkinID, penAttributes, x0, y0, x1, y1) {
+        this.dirty = true;
         const skin = /** @type {PenSkin} */ this._allSkins[penSkinID];
         skin.drawLine(penAttributes, x0, y0, x1, y1);
     }
@@ -1744,6 +1758,7 @@ class RenderWebGL extends EventEmitter {
      * @param {int} stampID - the unique ID of the Drawable to use as the stamp.
      */
     penStamp (penSkinID, stampID) {
+        this.dirty = true;
         const stampDrawable = this._allDrawables[stampID];
         if (!stampDrawable) {
             return;
@@ -1829,6 +1844,7 @@ class RenderWebGL extends EventEmitter {
      * @private
      */
     onNativeSizeChanged (event) {
+        this.dirty = true;
         const [width, height] = event.newSize;
 
         const gl = this._gl;
@@ -2157,6 +2173,7 @@ class RenderWebGL extends EventEmitter {
      * @param {snapshotCallback} callback Function called in the next frame with the snapshot data
      */
     requestSnapshot (callback) {
+        this.dirty = true;
         this._snapshotCallbacks.push(callback);
     }
 }

test/unit/DrawableTests.js

@@ -28,7 +28,7 @@ const snapToNearest = function (rect, decimals = 3) {
 
 test('translate by position', t => {
     const expected = new Rectangle();
-    const drawable = new Drawable();
+    const drawable = new Drawable(null, {});
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
 
@@ -44,7 +44,7 @@ test('translate by position', t => {
 
 test('translate by costume center', t => {
     const expected = new Rectangle();
-    const drawable = new Drawable();
+    const drawable = new Drawable(null, {});
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
 
@@ -61,7 +61,7 @@ test('translate by costume center', t => {
 
 test('translate and rotate', t => {
     const expected = new Rectangle();
-    const drawable = new Drawable();
+    const drawable = new Drawable(null, {});
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
 
@@ -86,7 +86,7 @@ test('translate and rotate', t => {
 
 test('rotate by non-right-angles', t => {
     const expected = new Rectangle();
-    const drawable = new Drawable();
+    const drawable = new Drawable(null, {});
     drawable.skin = new MockSkin();
     drawable.skin.size = [10, 10];
     drawable.skin.rotationCenter = [5, 5];
@@ -103,7 +103,7 @@ test('rotate by non-right-angles', t => {
 
 test('scale', t => {
     const expected = new Rectangle();
-    const drawable = new Drawable();
+    const drawable = new Drawable(null, {});
     drawable.skin = new MockSkin();
     drawable.skin.size = [200, 50];
 
@@ -125,7 +125,7 @@ test('scale', t => {
 
 test('rotate and scale', t => {
     const expected = new Rectangle();
-    const drawable = new Drawable();
+    const drawable = new Drawable(null, {});
     drawable.skin = new MockSkin();
     drawable.skin.size = [100, 1000];