HTML5 Canvas animatie in Firefox 4

[boontje88]

Ik heb een animatie dmv javascript en een canvas element gemaakt. De animatie bestaat uit een x aantal 24-bit PNG’s in de vorm van wolkjes die naar de onderkant en zijkant van het scherm ‘drijven’. Hierin heb ik een soort perspectief proberen aan te brengen door te spelen met afmeting, bewegingssnelheid en, wellicht belangrijk voor het verhaal, transparantie.

Voor het tekenen en animeren heb ik ongeveer dezelfde aanpak gebruik zoals in de IE9 Fish Tank demo. Dit komt er op neer dat ieder frame de canvas gecleared wordt en vervolgens alle objecten opnieuw in de canvas geplaatst worden. Opzich een redelijk intensief scriptje, maar met GPU versnelling is het resultaat nog niet gek.

Ik heb de animatie in verschillende browsers bekeken en alle browsers die canvas ondersteunen geven het geheel goed weer (snelheid soms daargelaten), behalve Firefox 4. In een paar computer configuraties zijn er geen problemen, maar in andere setups zijn er vreemde scanline achtige strepen door de wolken te zien (screenshot).

De posities van de objecten (wolken) worden niet op hele pixels afgerond voordat ze op het canvas worden gezet. Een x-coordinaat kan dus bijv. een waarde van 221.740932 hebben. Hier heb ik allereerst de oplossing in gezocht, om dus deze waardes af te ronden op hele pixels. Dit was niet de oplossing.

Ik heb verder gezocht naar meer mensen die met dit probleem liepen en het op internet gepost hebben, maar ik kon er niets over vinden. Ik zou verder ook niet weten in welke richting ik een oplossing of oorzaak zou moeten zoeken. Een setup waar ik de strepen niet te zien kreeg was een Win7-64 met AMD955 en HD4850. Op mijn workstation met Win7-64, i7 en HD5770 had ik ze wel en ook op een laptop met i7 en Quadro 880M. Het is dus niet zo simpel te stellen dat merk GPU het beïnvloed.

Ik heb de animatie even geïsoleerd en online gezet. Deze is hier te vinden. Misschien dat iemand er iets zinnigs over kan zeggen?

[RobIII]

Het enige dat me zo snel op valt is dat de png steeds opnieuw geladen wordt terwijl dat niet nodig zou moeten zijn met de juiste caching headers. Of 't met je probleem te maken heeft weet ik niet (maar lijkt me stug maar zeg nooit nooit ).
Excuus, dat was bij "Method 1" en wrsch. een firebug-bug

VV Met PierreAronnax hier beneden; ik zou 't toch als eerst zoeken in de 'halve pixels' richting. Ik heb helaas het probleem hier niet, dus ik kan ook niet zeggen of 't afronden op hele pixels 't probleem oplost

[Voor 47% gewijzigd door RobIII op 26-05-2011 19:02]

[PierreAronnax]

Hoe zeker ben je er van dat afronden niet de oplossing is?

Als ik regel 26 van cloud.js vervang door:

JavaScript:

cloudcanvas[0].getContext('2d').drawImage(img, Math.round(this.x), Math.round(this.y), Math.round(this.s), Math.round(this.s));

zijn bij mij de strepen weg.

[MueR]

FWIW: In FF5b is dit probleem niet te reproduceren.

[boontje88]

Thx voor de snelle replies! Het afronden werkt inderdaad wel, ik denk dat ik in mijn eerdere tests de afmeting ben vergeten en alleen x en y heb afgerond

Ik heb zelf nog even wat zitten vogelen in Firefox en kwam erachter dat met hardware acceleratie uitgeschakeld de strepen ook weg zijn. Ik weet eigenlijk niet zo goed of onafgeronde pixelwaarden in de standaard zijn toegestaan, maar misschien dat er iets in de hardware acceleratie van Firefox 4.0.1 nog niet helemaal goed gaat.

[edit]
@MueR: na je tip heb ik zelf 5b ook even geinstalleerd en daar is het probleem inderdaad niet aanwezig (onafgerond). In zijn geheel is de ervaring op de pagina trouwens een stuk beter in 5b, geen flikkerende menuutjes meer.

[Voor 19% gewijzigd door boontje88 op 26-05-2011 19:24]