How to increase quality on a PixiJS canvas?

Question

I made horizontal scroll website with PIXI JS and it has a ripple effect. it worked fine till now but the only issue is it's showing a very low quality when I open up the website and from what I figured out that PIXI JS renderer get width and height to 800 x 600 resolution. any ideas how to change the quality ?

here's the PIXI JS code snippet:

// Set up the variables needed and loads the images to create the effect.
      // Once the images are loaded the ‘setup’ function will be called.
      const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: 1,
  antialias : true
});
        document.body.appendChild(app.view);

        app.stage.interactive = true;
        var posX, displacementSprite, displacementFilter, bg, vx;
        var container = new PIXI.Container();
        app.stage.addChild(container);

       PIXI.loader.add("depth.png").add("polygonexample.jpg").load(setup);

       // In the ‘setup’ function the displacement sprite is created
      // that will create the effect and this is added to a displacement filter.
      // It’s then set to move its anchor point to the centre of the image and positioned on the screen.
      function setup() {
            posX = app.renderer.width / 2;
            displacementSprite = new PIXI.Sprite(PIXI.loader.resources["depth.png"].texture);
            displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
            displacementSprite.anchor.set(0.5);
            displacementSprite.x = app.renderer.width / 2;
            displacementSprite.y = app.renderer.height / 2;
            vx = displacementSprite.x;

            // To finish off the ‘setup’ function, the displacement filter scale is set and the background positioned.
      // Notice the scale is ‘0’ for the displacement, that’s because it will be set to a height as soon as the mouse moves.

      app.stage.addChild(displacementSprite);
            container.filters = [displacementFilter];
            displacementFilter.scale.x = 0;
            displacementFilter.scale.y = 0;
            bg = new PIXI.Sprite(PIXI.loader.resources["polygonexample.jpg"].texture);
            bg.width = app.renderer.width;
            bg.height = app.renderer.height;
            container.addChild(bg);
            app.stage.on('mousemove', onPointerMove).on('touchmove', onPointerMove);
            loop();
        }

        // grab the position of the mouse on the x-axis whenever the mouse moves.

        function onPointerMove(eventData) {
            posX = eventData.data.global.x;
        }

      // create a function that continually updates the screen. A velocity for the x-axis is worked out using the position of the mouse and the ripple.

        function loop() {
            requestAnimationFrame(loop);
            vx += (posX - displacementSprite.x) * 0.045;
            displacementSprite.x = vx;
            var disp = Math.floor(posX - displacementSprite.x);
            if (disp < 0) disp = -disp;
            var fs = map(disp, 0, 500, 0, 120);
            disp = map(disp, 0, 500, 0.1, 0.6);
            displacementSprite.scale.x = disp;
            displacementFilter.scale.x = fs;
        }

      // Finally, the map function is declared that maps value ranges to new values.


        map = function(n, start1, stop1, start2, stop2) {
            var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
            return newval;
        };

  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>

score 2 · Answer 1 · answered Jan 25 '21 at 15:13

2

Try creating renderer using this code

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  resolution: 1,
});

But if you resize window after creating renderer, it won't be automatically resized to window size. To solve that you can listen to resize event

EDIT: Removing margins also might help.

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    display: block;
}

answered Jan 25 '21 at 15:13

Grzegorz Barański

280
5
6

still the same issue, just to mention my website is very wide ( 9102 x 1024) so i am trying to make a one page horizontal scroll on a wide image. it's just the quality is not the same as if i tried to make a canvas that has a background image and takes the full width of the body – Omar Elassal Jan 25 '21 at 15:27
bro. thank you so much actually i found the issue and it was multiplying innerwidth and height by 3 or 2. this multiplies the quality of the renderer and by applying a preloader i believe the very small delay in the rendering will be covered – Omar Elassal Jan 25 '21 at 16:20
@OmarElassal no problem :), if my answer was helpful you can mark it as correct – Grzegorz Barański Jan 25 '21 at 18:33

score -1 · Accepted Answer · answered Jan 25 '21 at 16:18

just found the answer and it was very silly thing actually.

the issue was with the width and the height they were set to window.innerWidth and window.innerHeight. my image quality was quite high so basically multiplying the width and the height inside PIXI.Application by 3 or 4 increases the qualit.

const app = new PIXI.Application({
  width: window.innerWidth*3,
  height: window.innerHeight*3,
  resolution: 1,
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.7/pixi.min.js"></script>

marking your own answer as best is cringe when someone else puts his effort to help you — szymeo, Jun 24 '22 at 12:51

How to increase quality on a PixiJS canvas?

2 Answers2