Phaser 3 - Shapes are Pixelated in WebGL

Phaser 3
1

I am drawing lines and circles (with stroke) using scene.add.line and scene.add.circle

I am noticing the with WebGL on all the circles are incredible pixelated. While in CANVAS, they are not. I definitely want to enforce WebGL for this application though.

Any ideas what might be the cause?

2

Try roundPixels: false in the game config.

3

Thanks, I think that might have maybe made it a bit better. But I notice some pixelation still as I zoom in.

For context here is my config:

        type: Phaser.WEBGL,
        fps: {
          target: 60,
          min: 30,
          max: 120,
          smoothStep: true
        },
        backgroundColor: theme.palette.background.paper,
        antialias: true,
        pixelArt: false,
        roundPixels: false,
        scale: {
          mode: Phaser.Scale.RESIZE,
          parent: 'area',
          width: 800,
          height: 600,
        }
4

Actually, I don’t see any pixelation unless I use antialiasGL: false or pixelArt: true.

For Graphics the Canvas and WebGL renderers are quite different, so I think they won’t look identical.

graphics line thickness
graphics line thickness1170×1057 113 KB

5

Hm… antialiasGL: false seems to have no effect for me.
I am forcing it to use WEBGL because I want to utilize bitmap stuff that CANVAS can’t do.