Parallax scroller very much slows down on the phone

[khaninD]

Hi, 

Why parallax scroller very much brakes on the phone (samsung a3 2016), in 2 - 3 minutes after the application launch?

[ivan.popelyshev]

Try it on newer pixi version

[khaninD]

Ivan, thank you for answer. Later, I'll post the code using the new version of pixi, and a link to the app so you can see for yourself

[khaninD]

        const width = window.innerWidth;
        const height = window.innerHeight;
        const imgWidth = 3500;
        const imgHeight = 1589;
        const app = new PIXI.Application(
          {
            width,
            height,
            transparent: true
          }
        );
        const u = new SpriteUtilities(PIXI);
        const bg = u.tilingSprite("./src/bg.png", imgWidth, imgHeight);
        imageScale({imgWidth, imgHeight}, bg);
        app.stage.addChild(bg);
        app.ticker.add(parallaxFn);
        document.getElementById('app').appendChild(app.view);

        function parallaxFn() {
          bg.tilePosition.x -= 5;
        }

        function imageScale({imgWidth, imgHeight}, sprite) {
          const widthRatio = width / imgWidth;
          const heightRation = height / imgHeight;
          sprite.scale.x = widthRatio;
          sprite.scale.y = heightRation;
        }

i use 

https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js

And I have (see image file) after one minute, this only on mobile

[ivan.popelyshev]

Floating-point precision in shaders.

bg.tilePosition.x = (bg.tilePosition.x - 5) % bg.texture.width;

Welcome to The Far Lands.

[khaninD]

ivan thank you for solution!!!

[mazoku]

@ivan.popelyshev can you explain it with a bit more words? I'm sorry to ask but I am curious 

Thank you!

[ivan.popelyshev]

TilingSprite uploads transformation matrix to GL uniform. The problem is that the precision of operations with floats on shader-side is low compared to our good old 32-bit floats. The biggest numbers are in matrix, the bigger quantifier of numbers that shader computes - you see this picture above. The fix is to trim the number before it becomes too big.

[mazoku]

Thank you. That actually explains one of my problems.