phoboslab / Impact

HTML5 Game Engine
MIT License
2k stars 201 forks source link

Chrome image performance #69

Open Joncom opened 5 years ago

Joncom commented 5 years ago

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

https://github.com/phoboslab/Impact/blob/823541c0f21ae489ac8357299f7915552703385a/lib/impact/background-map.js#L116-L120

Joncom commented 5 years ago

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;
        },