HTML5-Canvas-Pixel-Rendering beschleunigen

Question

Ich entwerfe eine Webanwendung im Photoshop-Stil, die auf dem HTML5-Canvas-Element ausgeführt wird. Das Programm läuft gut und ist sehr schnell, bis ich Mischmodi in die Gleichung einfüge. Ich erreiche Mischmodi, indem ich jedes Canvas-Element zu einem zusammenfasse und jedes Pixel von jedem Canvas mit den richtigen Mischmodi kombiniere, die auf der unteren Leinwand beginnen.

for (int i=0; i<width*height*4; i+=4) { 
    var base = [layer[0][i],layer[0][i+1],layer[0][i+2],layer[0][i+3]]; 
    var nextLayerPixel = [layer[1][i],layer[1][i+1],layer[1][i+2],layer[1][i+3]]; 
    //Apply first blend between first and second layer 
    basePixel = blend(base,nextLayerPixel); 
    for(int j=0;j+1 != layer.length;j++){ 
     //Apply subsequent blends here to basePixel 
     nextLayerPixel = [layer[j+1][i],layer[j+1][i+1],layer[j+1][i+2],layer[j+1][i+3]]; 
     basePixel = blend(basePixel,nextLayerPixel); 
    } 
    pixels[i] = base[0]; 
    pixels[i+1] = base[1]; 
    pixels[i+2] = base[2]; 
    pixels[i+3] = base[3]; 
} 
canvas.getContext('2d').putImageData(imgData,x,y); 

Mit Aufruf für verschiedene Mischmodi aufrufen. Meine ‚normale‘ Mischmodus ist wie folgt:

var blend = function(base,blend) { 
    var fgAlpha = blend[3]/255; 
    var bgAlpha = (1-blend[3]/255)*base[3]/255; 
    blend[0] = (blend[0]*fgAlpha+base[0]*bgAlpha); 
    blend[1] = (blend[1]*fgAlpha+base[1]*bgAlpha); 
    blend[2] = (blend[2]*fgAlpha+base[2]*bgAlpha); 
    blend[3] = ((blend[3]/255+base[3])-(blend[3]/255*base[3]))*255; 
    return blend; 
} 

Meine Testergebnisse in Chrome (einige der besten aus den getesteten Browsern Nachgeben) wurde um 400 ms Mischen drei Schichten zusammen auf einer Leinwand 620x385 (238.700 Pixel).

Dies ist eine sehr kleine Implementierung, da die meisten Projekte größer sind und mehr Layer enthalten, was die Ausführungszeit unter dieser Methode in die Höhe schnellen lässt.

Ich frage mich, ob es eine schnellere Möglichkeit gibt, zwei Canvas-Kontexte mit einem Mischmodus zu kombinieren, ohne jedes Pixel durchlaufen zu müssen.

Answer 1

Erstellen sollte viel schneller gehen, wenn Sie den vorhandenen Speicher verwenden. Vielleicht möchten Sie auch die reduce function auf Ihrem layer Array verwenden, das scheint genau das, was Sie brauchen. Wenn Sie jedoch überhaupt keine Funktionen verwenden, können Sie eine weitere Berührung schneller machen - es ist keine Erstellung von Ausführungskontexten erforderlich. Der folgende Code ruft die Überblendungsfunktion nur für jeden Layer und nicht für jeden Pixel * Layer auf.

var layer = [...]; // an array of CanvasPixelArrays 
var base = imgData.data; // the base CanvasPixelArray whose values will be changed 
         // if you don't have one, copy layer[0] 
layer.reduce(blend, base); // returns the base, on which all layers are blended 
canvas.getContext('2d').putImageData(imgData, x, y); 

function blend(base, pixel) { 
// blends the pixel array into the base array and returns base 
    for (int i=0; i<width*height*4; i+=4) { 
     var fgAlpha = pixel[i+3]/255, 
      bgAlpha = (1-pixel[i+3]/255)*fgAlpha; 
     base[i ] = (pixel[i ]*fgAlpha+base[i ]*bgAlpha); 
     base[i+1] = (pixel[i+1]*fgAlpha+base[i+1]*bgAlpha); 
     base[i+2] = (pixel[i+2]*fgAlpha+base[i+2]*bgAlpha); 
     base[i+3] = ((fgAlpha+base[i+3])-(fgAlpha*base[i+3]))*255; 
//       ^this seems wrong, but I don't know how to fix it 
    } 
    return base; 
} 

---

Alternative Lösung: Sie mischen nicht die Schichten miteinander in JavaScript, um alle an. Stellen Sie Ihre Leinwände einfach übereinander und geben Sie ihnen ein CSS opacity. Dies sollte die Anzeige viel beschleunigen. Nur bin ich mir nicht sicher, ob das mit Ihren anderen Effekten zusammenarbeitet, sollten sie auf mehreren Ebenen angewendet werden müssen.

Answer 2

Normalerweise wird diese Art der massiven Pixelmanipulation beschleunigt, indem sie auf der GPU statt auf der CPU ausgeführt werden. Leider Canvas unterstützt dies nicht, aber Sie könnten möglicherweise eine Problemumgehung mit SVG Filters implementieren. Auf diese Weise können Sie hardwarebeschleunigte Mischmodi (feBlend) verwenden, um zwei Bilder miteinander zu vermischen. Wenn Sie Ihre Ebenen in zwei Bilder rendern und diese Bilder dann in Ihrem SVG anzeigen, können Sie dies tun.

Hier ist ein schöner illustrierte Übersicht, wie dies funktionieren könnte:

http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx (für IE10 aber gilt für jeden Browser, der SVG-Filter unterstützt) so viele 4-Wert-Arrays, ist es nicht