Pixi.js: Animations de spritesheet vacillantes sur iOS

Créé le 16 févr. 2017  ·  29Commentaires  ·  Source: pixijs/pixi.js

Exemple : http://moonrat.co.uk/html5/pixi-ios-animation-bug/

Ce que vous voyez est 3 tailles d'animation, x0.5 en haut, puis x0.75 au milieu et x1 en bas. Sur le côté gauche, le chemin de rendu régulier est pris, sur le côté droit, les trois animations utilisent pixi-picture.

Maintenant, je ne vois ce problème que sur les appareils iOS en mode WebGL_. Tout autre navigateur, même Safari sur Mac, fonctionne parfaitement. iOS en mode canevas, tout à fait bien. Mais les appareils iOS (iPads et iPhones) utilisant WebGL... vacillent

@ivanpopelyshev a suggéré d'essayer pixi-picture, pour un rendu plus précis, et cela aide sur la plupart des appareils, mais pas sur tous, et cela élimine très rarement le problème

Voici une liste de la façon dont tous les appareils iOS que j'ai regardent sur l'exemple ci-dessus

iPad Mini 2 : 10.0.2 - pixi tremble, pas pixi-picture
iPad 4 : 8.4 - pixi tremble, pixi-picture le fait, mais moins
iPad Air : 10.2 - pixi tremble, pas pixi-picture
iPad Air : 10.3 - pixi tremble, pas pixi-picture
iPad Air2 : 8.3 - pixi tremble, pixi-picture le fait, mais moins

iphone 4s: 9.1 - pixi tremble, pixi-picture aussi, mais moins
iphone 4s: 9.2.1 - pixi tremble, pixi-picture le fait, mais moins
iphone 5: 9.1 - pixi tremble, pixi-picture aussi
iphone 5: 10.1 - pixi tremble, pixi-picture aussi
iphone 5s: 10.0.2 - pixi tremble, pas pixi-picture
iphone 6: 8.2 - pixi tremble, pixi-picture le fait, mais moins
iphone 6: 10.0.2 - pixi tremble, pixi-picture le fait, mais moins
iphone 6+: 8.4 - pixi tremble, pixi-picture le fait, mais moins
iphone 6+ : 9.2.1 - pixi tremble, pixi-picture le fait, mais moins
iphone se: 10.2 - pixi tremble, pas pixi-picture
iphone 7: 10.2 - pixi tremble, pixi-picture le fait, mais moins

Des idées?

💾 v4.x (Legacy)

Commentaire le plus utile

Si le problème est simplement des sprites vacillants sur IOS, alors oui, faites un "si ios alors définissez le fragment de précision sur élevé".
Si ce n'est pas ios, le plugin d'image peut être requis. Mais ce n'était pas pour mes seuls problèmes iOS :)

Tous les 29 commentaires

Information additionnelle; cette oscillation ne se produit PAS sur le dernier pixi v3 : http://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/

la v3 est mieux ? C'est intéressant

J'ai le même problème de "vacillement" sur iOS uniquement lors de la rotation de certaines formes (cela se produit lorsque leur angle se déplace autour de 0). Impossible de revenir à la v3…

la seule différence que je pense que cela pourrait être est que nous stockons les données de vertex dans des tableaux float32 dans la v4 ? Peut-être un problème de précision ?

@GoodBoyDigital Je l'ai testé aujourd'hui, @themoonrat a dit que c'était la même chose.

cool - peut-être la précision du shader ?

Vaut-il la peine de tester avec roundPixels défini sur false pour voir si cela l'arrête?

Le vendredi 17 février 2017 à 16h13, Mat Groves [email protected] a écrit :

cool - peut-être la précision du shader ?


Vous recevez ceci parce que vous êtes abonné à ce fil.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.

roundPixels est faux par défaut, je l'ai déjà vérifié.

Attendez, attendez, ça m'a rappelé !

@ivanpopelyshev - vous savez comment vous m'avez demandé de changer la précision du shader par défaut en highp et cela n'a rien changé. Eh bien, je viens d'essayer cela sur votre nouvelle version que vous m'avez donnée ce matin, et cela _répare_ le problème !

Ok, c'est bizarre.
Alors.
Même la branche de développement actuelle, avec highp pour PRECISION, fonctionne. Toutefois....

PIXI.settings.PRECISION = 'highp'
Ne fonctionne pas
Si vous allez directement dans pixi.js et modifiez
PRECISION: 'mediump',
pour
PRECISION: 'highp',
Alors ça marche.

donc, haute précision + valeurs doubles ? Il semble que la conversion double->float->highp soit une mauvaise chose pour l'iphone/ipad. Je pense que c'est parce qu'il n'arrondit pas, mais tronque en fait beaucoup de choses.

On dirait donc que c'est un problème de paramètres qui n'est pas pris en charge plutôt qu'autre chose

belle prise @themoonrat

k, j'ai un correctif ; cela est dû au style d'importation d'un paramètre. Rend le temps d'importation statique, plutôt que dynamique par rapport à ce qu'il est actuellement. Élever un PR bientôt

De plus, nous devrions vraiment utiliser Float64Array dans Sprrite au lieu de Float32Array, cela réduira un peu l'erreur.

EDIT : ce n'est pas le cas, mais avec d'autres mesures, c'est possible :)

@ivanpopelyshev je pense que nous allons bien tels quels - nous les téléchargeons en tant que float32 donc il est inutile de les tenir avec une double précision ..

Malheureusement, je rencontre toujours des oscillations sur un iPad Mini3 avec pixi4.4.1.
Je règle manuellement PIXI.settings.PRECISION = 'highp', que dois-je faire d'autre ?

Voyez-vous un avertissement d'obsolescence dans la console ? Si oui, alors vous utilisez vraiment 4.4.1.

Quel est votre cas d'utilisation ? Juste quelques sprites dans un stage ?

Oui, je vois l'avertissement d'obsolescence Veuillez utiliser PIXI.settings.PRECISION_FRAGMENT.
Mon test a juste 1 AnimatedSprite jouant à 24fps (vitesse 0,4).
L'animation a été créée avec TexturePacker et les dimensions de la texture de base sont POT (2048x2048)
En 4.4.1, il vacille moins qu'avant, mais c'est toujours une gigue notable.

Et si vous utilisiez le moteur de rendu pixi-picture pour cela ? Ajoutez simplement celui-ci : https://github.com/pixijs/pixi-picture/tree/master/bin et écrivez

sprite.pluginName = 'picture';

Génial! En utilisant pixi-picture, ça a l'air parfait :)
C'est donc un moteur de rendu de sprite alternatif ?
Dans quels cas doit-on l'utiliser ? (en plus de ce cas évident). Peut-il être utilisé comme moteur de rendu général (prend en charge le traitement par lots multi-textures) ou s'agit-il davantage d'un objectif spécifique ?

Ensuite, je sais ce qui ne va pas avec le rendu de sprite principal. L'image Pixi est une chose stupide qui n'est pas du tout groupée, mais elle réduit les artefacts de bordure et prend en charge les modes de fusion superposition / lumière dure.

La principale différence est la façon dont les coordonnées UV sont transmises. Le rendu de sprite principal utilise Uint16, tandis que l'image, comme tous les autres plugins, utilise Float.

POUR VOTRE INFORMATION:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
résout les animations ios bancales pour moi sans aucun plugin

ps - @ivanpopelyshev , vous avez défini PRECISION_VERTEX 'highp' par défaut pour résoudre ce problème, mais peut-être avez-vous choisi le mauvais? Y a-t-il des inconvénients pour mon jeu à le rétrograder à "moyen" ?
pps - devrions-nous faire en sorte que tout paramètre "highp" soit rétrogradé à "medium" si le mode hérité est activé ?

J'ai le même problème et j'utilise pixi v4.6.2. C'est un bug très critique pour moi. @ivanpopelyshev , Quelqu'un a-t-il résolu ce problème ?

PIXI.settings.PRECISION_FRAGMENT = 'highp'
avant de créer le moteur de rendu

N'oubliez pas que certains appareils ne le prennent pas en charge et qu'il est préférable d'activer highp uniquement sur des appareils particuliers qui vacillent.

Utilisez également le plugin pixi-picture et sprite.pluginName='picture' si vous souhaitez résoudre le problème pour un petit nombre d'objets.

Si le problème est simplement des sprites vacillants sur IOS, alors oui, faites un "si ios alors définissez le fragment de précision sur élevé".
Si ce n'est pas ios, le plugin d'image peut être requis. Mais ce n'était pas pour mes seuls problèmes iOS :)

@ivanpopelyshev , @themoonrat merci, ça marche.

Ce fil a été automatiquement verrouillé puisqu'il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau problème pour les bogues associés.

Cette page vous a été utile?
0 / 5 - 0 notes