Skip to content

Commit

Permalink
Don't touch the GPU at all if nothing changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@GarboMuffin
GarboMuffin committed Jul 1, 2021
1 parent a5a2d14 commit 4ee5dfb
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 8 deletions.
10 changes: 9 additions & 1 deletion src/Drawable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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();
}
}
Expand All @@ -233,6 +236,7 @@ class Drawable {
updateDirection (direction) {
if (this._direction !== direction) {
this._direction = direction;
this._renderer.dirty = true;
this._rotationTransformDirty = true;
this.setTransformDirty();
}
Expand All @@ -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();
Expand All @@ -260,6 +265,7 @@ class Drawable {
updateVisible (visible) {
if (this._visible !== visible) {
this._visible = visible;
this._renderer.dirty = true;
this.setConvexHullDirty();
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -675,6 +682,7 @@ class Drawable {
* @private
*/
_skinWasAltered () {
this._renderer.dirty = true;
this._rotationCenterDirty = true;
this._skinScaleDirty = true;
this.setConvexHullDirty();
Expand Down
19 changes: 18 additions & 1 deletion src/RenderWebGL.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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();
}
Expand All @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -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;
Expand Down Expand Up @@ -1829,6 +1844,7 @@ class RenderWebGL extends EventEmitter {
* @private
*/
onNativeSizeChanged (event) {
this.dirty = true;
const [width, height] = event.newSize;

const gl = this._gl;
Expand Down Expand Up @@ -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);
}
}
Expand Down
12 changes: 6 additions & 6 deletions test/unit/DrawableTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand All @@ -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];

Expand All @@ -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];

Expand All @@ -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];
Expand All @@ -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];

Expand All @@ -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];

Expand Down

0 comments on commit 4ee5dfb

Please sign in to comment.