如何提高 PixiJS 画布的质量？

Question

我用PIXI JS制作了水平滚动网站，它有连锁反应。 到目前为止，它工作正常，但唯一的问题是，当我打开网站时，它显示的质量非常低，并且根据我的了解，PIXI JS 渲染器的宽度和高度为 800 x 600 分辨率。 有什么想法如何改变质量吗？

这是 PIXI JS 代码片段：

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

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

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

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

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

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

Answer 2

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

问题在于宽度和高度设置为 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 3

您可以做两件事：
1.：使用分辨率：1：

new PIXI.Application({resolution: 1})

2.：打开抗锯齿：

new PIXI.Application({antialias:  true})

（使用分辨率：1并没有直接修复我的项目，使用抗锯齿也并没有真正添加更多像素，但它确实使它看起来像素比实际多）

纹理也会自动缩放，为了使缩放更平滑，请使用

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;