WebGL VS Canvas 2D Hardwarebeschleunigung

Question

Heutzutage muss ich viele Bilder auf einer Leinwand zeichnen. Die Leinwandgröße ist 800x600px, und ich habe viele Bilder von 256x256px (einige sind kleiner), um darauf zu zeichnen, diese kleinen Bilder werden ein komplettes Bild auf der Leinwand zusammensetzen. Ich habe zwei Möglichkeiten, dies zu implementieren.

Erstens, wenn ich Leinwand 2D-Kontext verwenden, das ist context = canvas.getContext('2d'), dann kann ich einfach context.drawimage() Methode verwenden, um jedes Bild an der richtigen Stelle der Zeichenfläche zu setzen.

Eine andere Möglichkeit verwende ich WebGL, um diese Bilder auf der Leinwand zu zeichnen. Auf diesem Weg muss ich für jedes kleine Bild ein Rechteck zeichnen. Die Größe des Rechtecks ​​ist dieselbe wie bei diesem kleinen Bild. Außerdem befindet sich das Rechteck an der richtigen Position der Zeichenfläche. Dann benutze ich das Bild als Textur, um es zu füllen.

Dann vergleiche ich die Leistung dieser beiden Methoden. Beide fps erreichen 60, und die Animation (Wenn ich mit der Maus klicke oder mich bewege, wird die Leinwand viele Male neu gezeichnet) sieht sehr glatt aus. Also vergleiche ich ihre CPU-Auslastung. Ich erwarte, dass wenn ich WebGL benutze, die CPU weniger verbrauchen wird, weil GPU viele Zeichnungsarbeiten sichert. Aber das Ergebnis ist, die CPU-Auslastung sieht fast gleich aus. Ich versuche, meinen WebGL-Code zu optimieren, und ich denke, es ist gut genug. Bei Google habe ich festgestellt, dass Browser wie Chrome, Firefox Hardwarebeschleunigung standardmäßig aktiviert. Also versuche ich die Hardwarebeschleunigung zu schließen. Dann wird die CPU-Auslastung der ersten Methode viel höher. Also, meine Frage ist, seit Canvas 2D GPU verwenden, um zu beschleunigen, ist es notwendig für mich, WebGL nur für 2D-Rendering zu verwenden? Was ist der Unterschied zwischen 2D-GPU-Beschleunigung und WebGL? Beide verwenden GPU. Vielleicht gibt es noch eine andere Methode, um die CPU-Auslastung der zweiten Methode zu senken? Jede Antwort wird zu schätzen wissen!

Answer 1

Canvas 2D wird immer noch mehr Orte als WebGL unterstützt. Wenn Sie also keine anderen Funktionen benötigen, würde die Verwendung von Canvas 2D Ihre Seite mit den Browsern mit Canvas, aber nicht WebGL (wie alten Android-Geräten) funktionieren. Natürlich wird es auf diesen Geräten langsam sein und könnte aus anderen Gründen fehlschlagen, wie zum Beispiel wenn bei vielen Bildern der Arbeitsspeicher knapp wird.

Theoretisch kann WebGL schneller sein, da die Standardeinstellung für Canvas 2d ist, dass der Zeichenpuffer beibehalten wird, während dies für WebGL nicht der Fall ist. Das heißt, wenn Sie das Anti-Aliasing in WebGL ausschalten, hat der Browser die Option, den Puffer zu verdoppeln. Etwas, das mit canvas2d nicht möglich ist. Eine weitere Optimierung ist in WebGL können Sie Alpha deaktivieren, was bedeutet, dass der Browser die Option Blending beim Compositing Ihres WebGL mit der Seite ausschalten kann, wiederum etwas, das es nicht mit Canvas 2d zu tun hat. (Es gibt Pläne, Alpha für Canvas 2d abschalten zu können, aber ab 2017/6 wird es nicht mehr weit verbreitet)

Aber, Option ich meine genau das. Es liegt am Browser zu entscheiden, ob diese Optimierungen durchgeführt werden oder nicht.

Andernfalls, wenn Sie diese Optimierungen nicht auswählen, ist es möglich, dass die 2 die gleiche Geschwindigkeit hat. Ich persönlich habe das nicht so gefunden. Ich habe versucht, einige drawImage nur Dinge mit Canvas 2d zu tun und nicht eine glatte Framerate waren wie ich mit WebGL. Es machte keinen Sinn zu sein, aber ich nahm an, dass etwas in dem Browser vorging, von dem ich nichts wusste.

Ich denke, das bringt den letzten Unterschied. WebGL ist Low-Level und gut bekannt. Es gibt nicht viel, was der Browser tun kann, um es zu vermasseln. Oder anders gesagt: Sie haben 100% Kontrolle.

Mit Canvas2D ist es andererseits Sache des Browsers was zu tun ist und welche Optimierungen gemacht werden sollen. Sie können sich bei jeder Veröffentlichung ändern. Ich weiß für Chrome an einem Punkt jeder Leinwand unter 256x256 wurde nicht hardwarebeschleunigt. Ein anderes Beispiel wäre, was die Leinwand beim Zeichnen eines Bildes macht.In WebGL machen Sie die Textur. Sie entscheiden, wie kompliziert Ihr Shader ist. In Canvas haben Sie keine Ahnung, was es macht. Vielleicht ist es ein komplizierter Shader, der alle verschiedenen Canvas globalCompositeOperation, Maskierung und andere Funktionen unterstützt. Vielleicht spaltet sie zur Speicherverwaltung Bilder in Chucks und rendert sie in Stücke. Für jeden Browser sowie für jede Version desselben Browsers ist es Sache des jeweiligen Teams, wo es wie bei WebGL zu 100% bei Ihnen liegt. Es gibt nicht viel, was sie in der Mitte tun können, um WebGL zu vermasseln.

FYI: Hier ist an article detailing how to write a WebGL version of the canvas2d drawImage function und es wird gefolgt von an article on how to implement the canvas2d matrix stack.