psychopy.org | Reference | Downloads | Github

Blurry / low resolution online

Hi all,

For some reason, my online experiment is running at a much lower resolution than it is locally (see screenshots - if you expand the screenshots, then keep clicking back and forth, you should spot the drop in quality if you look at the same bit of text. You’ll also notice some of the button outlines disappear). I’m not sure why this is…has anyone else encountered this?

I use a lot of .pngs throughout my experiment (e.g. for buttons, backgrounds, stimuli etc.). They look great locally, so I’m sure the .pngs files themselves are fine. I’ve tried .jpgs instead, and also increasing the texture resolution in my PsychoPy Image components, but neither seem to help things look better online. I’ve checked the image files on Gitlab and they seem to be the same file size as they are locally, so it doesn’t look like this is the result of any compression via syncing.

This isn’t much of a problem on my instructions pages; a new user may not even notice that the text and buttons are a bit less sharp, and I could probably even fix that if I used text stim + shape stim within PsychoPy to make my instructions pages (rather than pre-made image files). However, the drop in quality is really important for the images I display throughout the trials of my experiment. I’ll be using the same images both online and in the lab, and ideally I’d like all participants to see the images at the same (high) resolution.

Any help appreciated!

Local:

Online:

Interesting. My guess is that this is something to do with glitches in the rendering pipeline in Pixi.js which we use to draw everything. Probably it needs @apitiot to be involved who knows how the pixi code works.

Could you give us:

  • a bit more info about the system where you see this (especially if it’s a hgih-res system like a retina display)
  • a URL to the study for us to investigate it?

cheers,
jon

1 Like

Hi Jon,

I am indeed using a retina display on a Macbook Pro. Here’s some specs:

You can access the experiment here, just type “A” into the Order field:
https://run.pavlovia.org/j.adams/photonorms-2/html/

Note: It hadn’t occurred to me that my laptop screen might be the issue. Perhaps my experiment looks good online on non-retina screens. I’ll test this next time I get access to another screen and post an update.

OK, so my guess about the blurry aspect is just that pixi.js doesn’t know how (or choose) to use retina displays. I think that isn’t a priority to support.

Why the line is mis-drawn on the button is a puzzle. I’ve seen this recently in the OpenGL (Python) version where I think it’s a slightly broken interpolation setting, but I don’t think Pixi should be using the same method to render

1 Like

Ok, no worries - thanks for the explanation!

Hi, I understand that this is not a priority to support but actually it’s quite easy to solve.

In the core code: https://github.com/psychopy/psychojs/blob/master/js/core/Window.js
add “resolution: window.devicePixelRatio,” after line 395.

For those that want to fix it themselves, download and use a local copy of “core-2020.1.js”. Modify _setupPixi() like this (add the line “resolution: window.devicePixelRatio,” and don’t forget a comma after the previous line):

_setupPixi() {
    this._size[0] = window.innerWidth;
    this._size[1] = window.innerHeight;
    this._renderer = PIXI.autoDetectRenderer(this._size[0], this._size[1], {
      backgroundColor: this.color.int,
      resolution: window.devicePixelRatio,
    });
    this._renderer.view.style.transform = 'translatez(0)';
    this._renderer.view.style.position = 'absolute';
    document.body.appendChild(this._renderer.view);
    document.body.style.backgroundColor = this._color.hex;
    this._rootContainer = new PIXI.Container();
    this._rootContainer.interactive = true;
    Window._resizePixiRenderer(this);
    this.psychoJS.eventManager.addMouseListeners(this._renderer);
    this._resizeCallback = (e) => {
      Window._resizePixiRenderer(this, e);
      this._fullRefresh();
    };
    window.addEventListener('resize', this._resizeCallback);
    window.addEventListener('orientationchange', this._resizeCallback);
  }

I found this solution by reading Pixi.js documentation. It looks simple and obvious now, but took me an evening to figure out. Hope it’s helpful. :slight_smile:

1 Like

Is this something that can be added in a code component in Builder?

@wakecarter, no its part of the PsychoJS lib, so you need to change the PsychoJS lib and upload with your task (at least, I think so). Just looking into an explaination for users now.

Well spotted!
I have just applied the fix and have back-ported it all the way to 3.2.0.
Thank you very much @sijiazhao!
@wakecarter: you do not need to do anything.

Alain

1 Like