如何提高 PixiJS 画布的质量？

Question

我用PIXI JS做了横向滚动的网站，它有一个涟漪效应。 到目前为止它运行良好，但唯一的问题是当我打开网站时它显示的质量非常低，据我发现 PIXI JS 渲染器的宽度和高度达到 800 x 600 分辨率。 任何想法如何改变质量？

这是 PIXI JS 代码 sn-p：

// 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>

Answer 1

刚刚找到答案，实际上这是非常愚蠢的事情。

问题在于它们设置为 window.innerWidth 和 window.innerHeight 的宽度和高度。我的图像质量非常高，所以基本上将 PIXI.Application 中的宽度和高度乘以 3 或 4 会提高质量。

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>

Answer 2

尝试使用此代码创建渲染器

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

但是如果您在创建渲染器后调整窗口大小，它不会自动调整为窗口大小。要解决这个问题，你可以听resize event

编辑：删除边距也可能有所帮助。

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