HTML5, Canvas und Transformationen

[BlueJay]

Hallo, Leute,

Nachdem ich herausgefunden habe, dass man im Canvas-Kontext nicht die Elemente transformiert, sondern den Canvas,
dachte ich so in meinem spätjugendlichem Leichtsinn, dass man da ein schönes "Erdbeben" simulieren kann, indem man
ein paar passend getimte translates auf den Canvas-(context) loslässt.

Code: ctx ist der Canvas-Kontext


function wackeln()
{ ctx.save();
ruettel(10);
}
function ruettel(nr)
{ if (nr>0)
{ ctx.translate(16.0*Math.random()-8.0,8.0*Math.random()-4.0);
zeige_staebe();
setTimeout('ruettel('+(nr-1)+')',50);
}
else
{ ctx.restore();
zeige_staebe();
gameover(1);
}
}




Das klappte gut mit 4 Objekten, aber bei 41 schneckt Mozilla doch ziemlich. Das kann Java ja besser, auch wenn man
dort die Einzelobjekte bewegt.

nächster Versuch:
alle Objekte wurde "zu Fuß" versetzt, das war trotz etlicher Kommandos geringfügig schneller (kein Vergleich zu Java!)

Frage:
Gibt es was Schnelleres, um alle Objekte eines Canvasses (simultan) zu bewegen? Eine Phase sollte nicht länger als 50ms
dauern.

Gruß,
Ulrike

[undefined]

Es gäbe noch die Möglichkeit mit requestAnimationFrame
Ist aber stark Browser Versions abhängig.
https://developer.mozilla.org/en/DOM/window.mozRequestAnimationFrame
Für IE.. siehe http://ie.microsoft.com/testdrive/Default.html

DEMO: http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html

[BlueJay]

... na das sind ja wirklich noch "ganz rohe Eier",
(http://www.w3.org/TR/animation-timing/)

Die Demo-Uhr hat ja wohl absolut nicht viel zu tun. :)

Aber ist es nicht beruhigend, dass Mozilla und IE schon denselben Working Draft vom W3C zitieren?

Mittlerweile habe ich mir so geholfen, dass nur die beteiligten Stäbe wackeln, das kann man verschmerzen.

Die Technik in diesem Link scheint auch interessant:
http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/

aber mein Grundproblem ist ja, dass die Berechnung der Bilder vor dem Neuzeichnen zu lange dauert, und mein Verdacht ist es, dass die Canvas-Translates einfach kein "Blitter-Gewitter" machen, sondern alle Punkte Objekt für Objekt mühsam neu berechnen.

Gruß,
Ulrike

p.s. mein Testlink hat sich geändert auf
http://www.gamecraft.de/mikado/index.htm

[undefined]

Hast du den Fische Test mal ausprobiert?
http://ie.microsoft.com/testdrive/Performance/FishBowl/Default.html

[BlueJay]

Mozilla:
Frame Counts von ummi 3
Rotes Wasser :confused:
Gradienten scheinen noch ganz schön alles auszubremsen.
Und beim Sprung von 10 auf 50 Fische scheint sich alles bei einigen Grad über 0 abzuspielen :D

IE:
Frame Counts von ummi 30
oops, tadellos! Sogar blaues Wasser mit echten Wellen!
Und bei 50 Fischen noch 'nen Benchmark von 26!

Chrome:
etwas langsamer als Mozilla (2), aber blaues Wasser mit Wellen
dafür rühren sich die Fische kaum. Das Ganze geht hoch auf 3, wenn man Gradienten abschaltet.
Den 50-Fische-Test habe ich lieber nicht ausgeführt.

Opera:
siehe Mozilla

Scheint wohl für IE optimiert worden zu sein:
Das Wasser wird durch ein Video abgebildet.

Die Fische sind, wie meine Spieße, transformierte Canvas-Images.
Ansonsten wird schwer mit Opacity gearbeitet.

Das war's, was mir beim 1. Blick so auffiel.

Gruß,
Ulrike

[undefined]

Dein Mozilla läuft im Sicheren Modus.
Siehe bei Firefox ab Version 6 unter about:config


layers.acceleration.force-enabled
webgl.force-enabled


Ich habe bei Firefox mit 250 = 60fps CPU 25% zwei Kerne
Danach geht es abwärts.
http://www.bitblokes.de/2011/05/firefox-6-sollte-das-problem-mit-linux-gpu-beschleunigung-bereinigen/

Du kommst bei SVG einfach nicht mehr an der GPU vorbei.
Bei KDE3 oder Inkscape hatte man schon mit einfachen Grafiken erhebliche Performance Probleme.

[BlueJay]

Damit hast Du gerade fast meine nächste Frage beantwortet. Dummerweise bin ich schon ein Update weiter und auf Windows, an diese Schraube komme ich so nicht ran. Und Hardware-Beschleunigung hat schon seinen Haken.

Ich bastele gerade an Kollisions-Detektionen auf dem Canvas via Maske.

Die Zeile
var idata=cctx.getImageData(mx,my,1,1); // liefert 4 Daten: r,g,b,a gab mir im Firefox einen Security error, im IE lief alles wunderbar!

Und wie beschrieben, glaubt der FF wohl, das Bild kommt aus einer anderen Domain.
Online tut FF, was er soll.


Gruß,
Ulrike