thepaperpilot

Members
  • Content Count

    3
  • Joined

  • Last visited

About thepaperpilot

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. I'll check out those mipmap settings. I'm on pixi v4 right now, so I'll try migrating but it's an electron app so might take a bit of tweaking. Thank you Ivan!
  2. Thanks Jon, but that doesn't solve my issue. I tried changing the scale mode from linear (shown in the OP) to nearest neighbor, but the image still didn't look right: For good measure I also tried changing the resolution to 10 as well as using nearest neighbor, with no effect (apart from me needing to zoom in further)
  3. I have a program where images are shown in normal HTML <img> tags as well as inside of PIXI canvases. If I have a large image, I notice it has very crisp edges even when shown at ~1% of its size. The pixi.js canvas is using pixi-viewport (https://www.npmjs.com/package/pixi-viewport) so I can zoom in and out, and I noticed that if I zoom out so that the image is the same size as the HTML one, the edges look blurry. I've tried changing the SCALE_MODE and resolution, tried forcing the canvas renderer or forcing FXAA, and even the image-rendering css property, but I can't seem to make it look like the image inside the <img> tag. This is what I'm seeing: To be clear, the one on the left is inside the <img> and the one on the right is inside a pixi.js canvas. Despite them being about the same size, you'll notice its less clear. If I change the SCALE_MODE it just looks pixelated. If I change the resolution (I've tried 1, 2, 4, and 10) I have to zoom in more, but once I have its just as blurry. Forcing the canvas renderer just made it look worse, and FXAA didn't seem to change anything. The image-rendering property seemed to have no effect except on the pixelate setting (which, obviously, just made it look pixelated). Edit: For reference I'm using pixi.js-4.5.3 and pixi-viewport-3.23.1