Pixi.js: Колебание анимации спрайтов на iOS

Созданный на 16 февр. 2017  ·  29Комментарии  ·  Источник: pixijs/pixi.js

Пример: http://moonrat.co.uk/html5/pixi-ios-animation-bug/

То, что вы видите, это 3 размера анимации: x0,5 вверху, затем x0,75 посередине и x1 внизу. С левой стороны используется обычный путь рендеринга, с правой стороны три анимации используют pixi-picture.

Теперь я _наблюдаю эту проблему только на устройствах iOS в режиме WebGL_. Любой другой браузер, даже Safari на Mac, работает абсолютно нормально. iOS в режиме холста, абсолютно нормально. Но устройства iOS (iPad и iPhone), использующие WebGL... шатаются

@ivanpopelyshev предложил попробовать pixi-picture для более точного рендеринга, и это помогает на большинстве устройств, но не на всех, и очень редко устраняет проблему.

Вот список того, как все устройства iOS, которые у меня есть, выглядят на приведенном выше примере.

iPad Mini 2: 10.0.2 - pixi качается, pixi-изображение нет
iPad 4: 8.4 — pixi качает, pixi-picture да, но не так сильно
iPad Air: 10.2 — пикси дрожит, пикси-изображение — нет
iPad Air: 10.3 — пикси дрожит, пикси-изображение — нет
iPad Air2: 8.3 — pixi дрожит, pixi-picture да, но меньше

iphone 4s: 9.1 - pixi качает, pixi-picture да, но меньше
iphone 4s: 9.2.1 - pixi качает, pixi-picture да, но меньше
iphone 5:9.1 - пикси качает, пикси-картинка тоже
iphone 5:10.1 - пикси качает, пикси-картинка тоже
iphone 5s: 10.0.2 - пикси качает, пикси-картинка нет
iphone 6:8.2 - pixi качает, pixi-picture качает, но меньше
iphone 6: 10.0.2 - pixi качает, pixi-picture да, но меньше
iphone 6+: 8.4 - pixi качает, pixi-picture да, но меньше
iphone 6+: 9.2.1 - pixi качает, pixi-picture да, но меньше
iphone se: 10.2 - pixi качает, pixi-картинка нет
iphone 7:10.2 - пикси качает, пикси-картинка да, но меньше

Есть идеи?

💾 v4.x (Legacy)

Самый полезный комментарий

Если проблема заключается просто в колебании спрайтов на IOS, тогда да, сделайте «если ios, то установите высокую точность фрагмента».
Если это не ios, то может потребоваться плагин для картинок. Но это было не только для моих проблем с iOS :)

Все 29 Комментарий

Дополнительная информация; это колебание НЕ происходит на последней версии pixi v3: http://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/

v3 лучше? Это интересно

У меня такая же проблема с «колебанием» на iOS только при вращении некоторых фигур (это происходит, когда их угол движется вокруг 0). Не могу вернуться к версии 3...

единственная разница, которая, я думаю, может быть в том, что мы храним данные вершин в массивах float32 в v4? Может проблема в точности?

@GoodBoyDigital Я проверил это сегодня, @themoonrat сказал, что это то же самое.

круто - может точность шейдера?

Стоит ли тестировать с roundPixels, установленным в false, чтобы увидеть, остановит ли это его?

В пятницу, 17 февраля 2017 г., в 16:13 Мэт Гроувс [email protected] написал:

круто - может точность шейдера?


Вы получаете это, потому что подписаны на эту тему.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953 ,
или заглушить тему
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.

roundPixels по умолчанию ложно, я уже проверил.

Подожди, подожди, это напомнило мне!

@ivanpopelyshev - вы знаете, как вы просили меня изменить точность шейдера по умолчанию на highp, и это ничего не изменило. Ну, я только что попробовал это в вашей новой версии, которую вы мне дали сегодня утром, и она _исправила_ это!

Хорошо, это странно.
Так.
Даже текущая ветка dev с highp для PRECISION работает. Однако....

PIXI.settings.PRECISION = 'highp'
Не работает
Если вы зайдете прямо в pixi.js и отредактируете
PRECISION: 'mediump',
к
PRECISION: 'highp',
Тогда это работает.

Итак, высокая точность + двойные значения? Похоже, что преобразование double->float->highp — это плохо для iphone/ipad. Я думаю, это потому, что он не округляется, а на самом деле сильно обрезает материал.

Так что похоже, что это проблема с неподбираемыми настройками, а не с чем-то еще

хороший улов

k, у меня есть исправление; это связано со стилем импорта настроек. Делает его статическим для импорта времени, а не динамическим для того, что оно есть в настоящее время. Скоро поднимем пиар

Также мы действительно должны использовать Float64Array в Sprrite вместо Float32Array, это немного уменьшит ошибку.

РЕДАКТИРОВАТЬ: не будет, но с некоторыми другими мерами может :)

@ivanpopelyshev я думаю, что у нас все в порядке - мы загружаем их как float32, поэтому нет смысла хранить их с двойной точностью ..

К сожалению, я все еще испытываю колебания на iPad Mini3 с pixi4.4.1.
Я вручную устанавливаю PIXI.settings.PRECISION = 'highp', что еще я должен делать?

Вы видите предупреждение об устаревании в консоли? Если да, то вы действительно используете 4.4.1.

Каков ваш вариант использования? Всего несколько спрайтов на сцене?

Да, я вижу предупреждение об устаревании, пожалуйста, используйте PIXI.settings.PRECISION_FRAGMENT.
В моем тесте только 1 AnimatedSprite воспроизводится со скоростью 24 кадра в секунду (скорость 0,4).
Анимация была создана с помощью TexturePacker, а размеры базовой текстуры — POT (2048x2048).
В 4.4.1 он качается меньше, чем раньше, но все же заметное дрожание.

А что, если использовать для этого pixi-picture renderer? Просто добавьте этот: https://github.com/pixijs/pixi-picture/tree/master/bin и напишите

sprite.pluginName = 'picture';

Здорово! С pixi-picture это выглядит идеально :)
Так это альтернативный рендерер спрайтов?
В каких случаях мы должны его использовать? (кроме этого очевидного случая). Можно ли его использовать в качестве общего рендерера (поддерживает пакетную обработку нескольких текстур) или это более специфическая вещь?

Тогда я знаю, что не так с основным рендерером спрайтов. Картинка Pixi — глупая вещь, которая вообще не пакетная, но она уменьшает артефакты границ и поддерживает режимы наложения overlay/hardlight.

Основное отличие заключается в том, как передаются UV-координаты. Основной рендерер спрайтов использует Uint16, в то время как изображения, как и все другие плагины, используют Float.

К вашему сведению:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
решает шаткую анимацию ios для меня без каких-либо плагинов

ps - @ivanpopelyshev , вы сделали PRECISION_VERTEX 'highp' по умолчанию, чтобы решить эту проблему, но, возможно, вы выбрали не тот? Есть ли недостатки для моей игры, чтобы понизить ее до «средней»?
pps — должны ли мы сделать так, чтобы любой параметр «highp» был понижен до «medium», если включен устаревший режим?

У меня такая же проблема, и я использую pixi v4.6.2. Для меня это очень критичный баг. @ivanpopelyshev , Кто-нибудь решил эту проблему?

PIXI.settings.PRECISION_FRAGMENT = 'высокий'
перед созданием рендерера

Помните, что некоторые устройства не поддерживают его, и лучше включать highp только на тех устройствах, на которых существует колебание.

Кроме того, используйте плагин pixi-picture и sprite.pluginName='picture' , если вы хотите решить проблему для небольшого количества объектов.

Если проблема заключается просто в колебании спрайтов на IOS, тогда да, сделайте «если ios, то установите высокую точность фрагмента».
Если это не ios, то может потребоваться плагин для картинок. Но это было не только для моих проблем с iOS :)

@ivanpopelyshev , @themoonrat спасибо, все работает.

Эта ветка была автоматически заблокирована, так как после ее закрытия не было никаких действий в последнее время. Пожалуйста, откройте новую проблему для связанных ошибок.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги