Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chrome image performance #69

Open
Joncom opened this issue Sep 26, 2019 · 1 comment
Open

Chrome image performance #69

Joncom opened this issue Sep 26, 2019 · 1 comment

Comments

@Joncom
Copy link
Collaborator

Joncom commented Sep 26, 2019

Does ig.Image.resize need the same fix that's already in ig.BackgroundMap, this one?

// Workaround for Chrome 49 bug - handling many offscreen canvases
// seems to slow down the browser significantly. So we convert the
// canvas to an image.
var image = new Image();
image.src = chunk.toDataURL();

@Joncom
Copy link
Collaborator Author

Joncom commented Sep 26, 2019

In a game with many images, I was having some severe performance issues in Chrome only, and patching ig.Image with this resolved it, if my memory serves me correctly...

However, I also vaguely recall it creating an issue where the engine would try to draw these images before the Image.onload event fired, and in Chrome (but not Firefox) the images would briefly have a width/height of 0, which caused an error to be thrown...

Just pulled the fix out of that old codebase, and I think it basically would look like the reverse (red means add, green means remove) of the following diff:

diff --git a/lib/impact/background-map.js b/lib/impact/background-map.js
index 703ba10a..3d44ada3 100644
--- a/lib/impact/background-map.js
+++ b/lib/impact/background-map.js
@@ -175,13 +175,6 @@ ig.BackgroundMap = ig.Map.extend({
                        for( var cx = minChunkX; cx < maxChunkX; cx++ ) {
                                var chunk = this.preRenderedChunks[cy % maxRealChunkY][cx % maxRealChunkX];

-                               // A pre-rendered chunk is an image element created from
-                               // a canvas data URL. In Chrome, the image.width and height
-                               // are 0 until after the image "load" event has fired.
-                               if(chunk.width === 0 || chunk.height === 0) {
-                                       return;
-                               }
-
                                var x = -dx + cx * this.chunkSize - nudgeX;
                                var y = -dy + cy * this.chunkSize - nudgeY;
                                ig.system.context.drawImage( chunk, x, y);
diff --git a/lib/impact/image.js b/lib/impact/image.js
index f103a73f..47d124ae 100644
--- a/lib/impact/image.js
+++ b/lib/impact/image.js
@@ -108,12 +108,7 @@ ig.Image = ig.Class.extend({
                        }
                }
                scaledCtx.putImageData( scaledPixels, 0, 0 );
-
-               // Workaround for Chrome 49 bug - handling many offscreen canvases
-               // seems to slow down the browser significantly. So we convert the
-               // upscaled canvas back to an image.
-               this.data = new Image();
-               this.data.src = scaled.toDataURL();
+               this.data = scaled;
        },

@Joncom Joncom changed the title Image performance Chrome image performance Sep 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant