Pixi.js: Wobbling spritesheet animations on iOS
Example: http://moonrat.co.uk/html5/pixi-ios-animation-bug/
What you see is 3 sizes of an animation, x0.5 at the top, then x0.75 in the middle and the x1 at the bottom. On the left hand side the regular rendering path is taken, on the right hand side the three animations use pixi-picture.
Now, I _only see this issue on iOS devices in WebGL mode_. Any other browser, even Safari on a Mac, works absolutely fine. iOS in canvas mode, absolutely fine. But iOS (iPads and iPhones) devices using WebGL... wobble
@ivanpopelyshev suggested giving pixi-picture a go, for more accurate rendering, and it does help on most devices, but not on all, and it very rarely eliminates the issue
Here is a list of how all of the iOS devices I have look on the above example
iPad Mini 2: 10.0.2 - pixi shakes, pixi-picture doesn't
iPad 4: 8.4 - pixi shakes, pixi-picture does, but less so
iPad Air: 10.2 - pixi shakes, pixi-picture doens't
iPad Air: 10.3 - pixi shakes, pixi-picture doesn't
iPad Air2: 8.3 - pixi shakes, pixi-picture does, but less so
iphone 4s: 9.1 - pixi shakes, pixi-picture does, but less so
iphone 4s: 9.2.1 - pixi shakes, pixi-picture does, but less so
iphone 5: 9.1 - pixi shakes, pixi-picture does too
iphone 5: 10.1 - pixi shakes, pixi-picture does too
iphone 5s: 10.0.2 - pixi shakes, pixi-picture doesn't
iphone 6: 8.2 - pixi shakes, pixi-picture does, but less so
iphone 6: 10.0.2 - pixi shakes, pixi-picture does, but less so
iphone 6+: 8.4 - pixi shakes, pixi-picture does, but less so
iphone 6+: 9.2.1 - pixi shakes, pixi-picture does, but less so
iphone se: 10.2 - pixi shakes, pixi-picture doesn't
iphone 7: 10.2 - pixi shakes, pixi-picture does, but less so
Any ideas?
themoonrat
All 29 comments
Additional info; this wobble does NOT occur on the last pixi v3: http://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/
themoonrat
on 16 Feb 2017
v3 is better? that's interesting
ivanpopelyshev
on 16 Feb 2017
I have the same "wobbling" issue on iOS only when rotating some shapes (it happens when their angle is moving around 0). Can't go back to v3…
LePhasme
on 17 Feb 2017
only difference that I think it could be is that we are storing vertex data in float32 arrays in v4? Maybe a precision issue?
GoodBoyDigital
on 17 Feb 2017
@GoodBoyDigital I tested it today, @themoonrat said its the same.
ivanpopelyshev
on 17 Feb 2017
cool - maybe shader precision?
GoodBoyDigital
on 17 Feb 2017
Is it worth testing with roundPixels set to false to see if that stops it?
On Fri, 17 Feb 2017 at 16:13 Mat Groves notifications@github.com wrote:
cool - maybe shader precision?
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.
macguffin
on 17 Feb 2017
roundPixels is false by default, i checked it already.
ivanpopelyshev
on 17 Feb 2017
Wait, wait, that reminded me!
@ivanpopelyshev - you know how you asked me to change default shader precision to highp and it didn't change anything. Well I just tried that on your new version you gave me this morning, and it _does_ fix it!
themoonrat
on 17 Feb 2017
Ok, this is wierd.
So.
Even the current, dev branch, with highp for PRECISION works. However....
PIXI.settings.PRECISION = 'highp'
Doesn't work
If you go directly into pixi.js, and edit
PRECISION: 'mediump',
to
PRECISION: 'highp',
Then it works.
themoonrat
on 17 Feb 2017
so, high precision + double values? It seems that double->float->highp conversion is bad thing for iphone/ipad. I think that's because it doesn't round, but actually truncates stuff a lot.
ivanpopelyshev
on 17 Feb 2017
So looks like this is a settings not being picked up problem rather than anything else
themoonrat
on 17 Feb 2017
nice catch @themoonrat
GoodBoyDigital
on 17 Feb 2017
k, I've got a fix; it's due to the style of importing a setting. Makes it static to import time, rather than dynamic to what it currently is. Raising a PR soon
themoonrat
on 17 Feb 2017
Also we really should use Float64Array in Sprrite instead of Float32Array, that will reduce the error a bit.
EDIT: it wont, but with some other measures it can :)
ivanpopelyshev
on 17 Feb 2017
@ivanpopelyshev i think we are fine as is - we upload them as float32 so theres no point holding them with double precision..
GoodBoyDigital
on 17 Feb 2017
Unfortunately I'm still experiencing wobbles on an iPad Mini3 with pixi4.4.1.
I am manually setting PIXI.settings.PRECISION = 'highp', anything else I should be doing?
Patrick-Hammond
on 3 Mar 2017
Do you see deprecation warning in console? If yes then you are really using 4.4.1 .
What's your use case ? Just a few sprites in a stage?
ivanpopelyshev
on 3 Mar 2017
Yes, I'm seeing the please use PIXI.settings.PRECISION_FRAGMENT deprecation warning.
My test just has 1 AnimatedSprite playing at 24fps (speed 0.4).
The animation was created with TexturePacker and the base texture dimensions are POT (2048x2048)
In 4.4.1 he wobbles less than before, but it is still a noticable jitter.
Patrick-Hammond
on 3 Mar 2017
And what if you use pixi-picture renderer for it? Just add this one: https://github.com/pixijs/pixi-picture/tree/master/bin and write
sprite.pluginName = 'picture';
Great! Using pixi-picture it looks perfect :)
So this is an alternative sprite renderer?
In which cases should we use it? (besides this obvious case). Can it be used as a general renderer (supports multi-texture batching) or is it more of a specific purpose thing?
Patrick-Hammond
on 3 Mar 2017
Then I know what's wrong with main sprite renderer. Pixi picture is stupid thing that is not batched at all, but it reduces border artifacts and supports overlay/hardlight blendmodes.
The main difference is how UV coordinates are passed. Main sprite renderer uses Uint16, while picture like all other plugins uses Float's.
ivanpopelyshev
on 3 Mar 2017
FYI:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
solves the wobbly ios animations for me without any plugins
ps - @ivanpopelyshev, you made PRECISION_VERTEX 'highp' by default to solve this, but perhaps you chose the wrong one? Any downsides for my game to downgrade it back to 'mediump'?
pps - should we make it so that any 'highp' setting be downgraded to 'mediump' if legacy mode is enabled?
themoonrat
on 15 Mar 2017
I have the same problem and i use pixi v4.6.2. It's very critical bug for me. @ivanpopelyshev, Has anybody resolved this problem?
chaurtik
on 20 Dec 2017
PIXI.settings.PRECISION_FRAGMENT = 'highp'
before creating the renderer
themoonrat
on 20 Dec 2017
Remember that some devices dont support it , and its better to enable highp only on particular devices that wobbling exists.
Also, use pixi-picture plugin and sprite.pluginName='picture' if you want to fix the problem for a small number of objects.
ivanpopelyshev
on 20 Dec 2017
If the problem is just wobbling sprites on IOS, then yeah, do an "if ios then set precision fragment to high".
If it's not ios, then the picture plugin may be required. But it wasn't for my ios only issues :)
themoonrat
on 20 Dec 2017
@ivanpopelyshev, @themoonrat thanks, it works.
chaurtik
on 21 Dec 2017
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
![lock[bot] picture](https://avatars1.githubusercontent.com/in/6672?v=4&s=40)
lock[bot]
on 24 Feb 2019
Related issues
samueller
·
3Comments
readygosports
·
3Comments
gaccob
·
3Comments
lucap86
·
3Comments
zcr1
·
3Comments
Most helpful comment
If the problem is just wobbling sprites on IOS, then yeah, do an "if ios then set precision fragment to high".
If it's not ios, then the picture plugin may be required. But it wasn't for my ios only issues :)