Blue Artifacts in WEBGL on Mobile

[DuncanPriebe]

I have a game with several background tilesprites, some tileset layers, as well as a few sprites and text objects on screen. I am seeing a blue artifact effect appear at various locations on the screen. I'm using Phaser v3.54.0, and I've tested also reproduced the effect with other versions (I went backward until 3.2x, where the code no longer ran).

Unfortunately my phone security settings forbid screenshots, but here's what it looks like:

Here's a summary of the effect:

• Occurs on Android devices (haven't tried iPhone), not on desktop (even in mobile mode)
• Appears in all Android browsers (tried 3 different Android phones)
• Only occurs in WEBGL, not in CANVAS
• Tends to occur along edges of sprites, text, and tiles (shooting a fireball causes the effect to appear all around the player)
• Appears at predictable times and locations (i.e. the same places and times every playthrough, other things constant)
• Changing camera and game object properties (depth, alpha, position) causes the effect to appear at different times and in different locations

After removing everything I could while retaining the effect. I was left with the code below. Here's a summary of what I've found in this example:

• Removing the tilesprites, tilemap layer, images, or text objects causes the effect to disappear
• Failing to preload the background images or player sprite has no impact, but failing to preload the card images, or changing their image source, changes or removes the effect
• Changing the background tilesprite size or location has no effect
• Changing the tilemap size or content has no effect

Here is the example code:

var _game = {
mapIndex: null,
platforms: null,
player: null
};

_game.playScene = new Phaser.Scene('play');

var config = {
type: Phaser.AUTO,
parent: 'game',
width: 450,
height: 800,
pixelArt: true, // Removing pixelArt changes the artifact pattern
scale: {
},
scene: [
_game.playScene
],
physics: {
default: 'arcade',
arcade: {
debug: _game.debugging
}
}
};

_game.game = new Phaser.Game(config);

_game.game.scene.start('play', { map: 0 });

_game.playScene.init = function(data) {
_game.mapIndex = data.map;
};

_game.playScene.preload = function() {
this.load.image('cloudback', 'img/CloudsBack.png');
this.load.image('cloudfront', 'img/CloudsFront.png');
this.load.image('bgback', 'img/BGBack.png');
this.load.image('bgfront', 'img/BGFront.png');

this.load.image('tileset', 'img/Tileset.png');

this.load.tilemapCSV('map_platforms' + _game.mapIndex, 'lib/' + _game.mapIndex + '_Platforms.csv');

this.load.image('cardJump', 'img/CardJump.png');
this.load.image('cardAttack', 'img/CardAttack.png');
this.load.image('cardMagic', 'img/CardMagic.png');
this.load.image('cardDash', 'img/CardDash.png');

this.load.spritesheet('adventurer', 'img/Adventurer.png', { frameWidth: 50, frameHeight: 37});

};

_game.playScene.create = function() {
this.cloudback = this.add.tileSprite(0, 0, 100, 100, 'cloudback');
this.cloudfront = this.add.tileSprite(0, 0, 100, 100, 'cloudfront');
this.bgback = this.add.tileSprite(0, 0, 100, 100, 'bgback');
this.bgfront = this.add.tileSprite(0, 0, 100, 100, 'bgfront');

var map_platforms = this.make.tilemap({ key: 'map_platforms' + _game.mapIndex, tileWidth: 16, tileHeight: 16 });
var pl_tileset = map_platforms.addTilesetImage('tileset');

var pl_layer = map_platforms.createLayer(0, pl_tileset, 0, 0);

_game.player = this.physics.add.sprite(10, 200, 'adventurer');

this.cardJump = this.add.sprite(60, 555, 'cardJump')
this.cardAttack = this.add.sprite(180, 555, 'cardAttack')
this.cardMagic = this.add.sprite(300, 555, 'cardMagic')
this.cardDash = this.add.sprite(420, 555, 'cardDash')

var cardJump = this.add.text(115, 112, 9);
var cardAttack = this.add.text(171, 112, 9);
var cardMagic = this.add.text(227, 112, 9);
var cardDash = this.add.text(283, 112, 9);

};

Thanks for your time!

Duncan Priebe

[orjandh]

Possibly related to #5655

[DuncanPriebe]

Possibly related to #5655

I think you're right. The issue I'm experiencing looks identical to the one shown in issue #5655.

[photonstorm]

Try this in your game config:

render: {
  batchSize: 1024,
  maxTextures: 8
}

Also, try maxTextures: 1 too.

[DuncanPriebe]

Try this in your game config:

render: {
  batchSize: 1024,
  maxTextures: 8
}

Also, try maxTextures: 1 too.

Thanks for the quick response!

Adding the code above changes the color and location of the artifact effect. It now seems to be alternate between the colors of the various background images. Also, adding the code causes the player, background, and tiles to appear blurry and for gray lines to appear between the tiles both on desktop and mobile:

Setting maxTextures to 1 results in an empty blue screen:

I'm not familiar with the render object or its properties, but after playing around with those properties I found that simply adding an empty render object (render: { }) causes the same blurryness and gray lines.

EDIT:
After additional testing I've found that I can get rid of the blurryness by removing mode: Phaser.Scale.FIT from the config object, and I can fix the gray lines by disabling camera zoom.

This doesn't really help, since everything is displaying incorrectly and I still have the original issue.

[photonstorm]

The lines between the tiles is standard texture bleeding and is fixed by using an extruded tileset.

[sangnv-mirabo]

i got same problem on Android 10, any update here?

[photonstorm]

I really need someone to create a minimum-sized reproducible test case for this. Without that, it just delays this getting worked on.

[ddanushkin]

I really need someone to create a minimum-sized reproducible test case for this. Without that, it just delays this getting worked on.

https://codepen.io/ddanushkin/pen/YzNozvE

[actionmoon]

Phaser Version:3.52.0
Operating system: Android 10

https://codepen.io/yangpan/pen/ExWXLzB?editors=0010

[actionmoon]

maybe something wrong in WebGLRenderer.CanvasToTexture Or CanvasPool.create , I found that WebGLRenderer.CanvasToTexture & CanvasPool.create is required in both tileSprite and Text objects

[actionmoon]

render: {
batchSize: 1024,
maxTextures: 7
}

When maxTextures is equal to an odd number, the problem is solved

[actionmoon]

MulitPipeline.js - Multi-frag.js compatibility issues with WebGL in Android . you must set maxTextures 2 not 1 to disable batch sprite .

[actionmoon]

I have located the cause of the problem ， MulitPipeline.js - Multi-frag.js

    //  Multiply texture tint
    vec4 color = texture * texel;

    if (outTintEffect == 1.0)
    {
        //  Solid color + texture alpha
        color.rgb = mix(texture.rgb, outTint.bgr * outTint.a, texture.a);
    }
    else if (outTintEffect == 2.0)
    {
        //  Solid color, no texture
        color = texel;
    }

varying vec4 outTint;

Perhaps Shader parameter binding error or vertex buffer error ?

When you comment the above script, everything works fine

@photonstorm

[actionmoon]

@photonstorm
The cause of the problem is the accuracy of the floating-point number in the shader，modify
precision mediump float;
to
precision highp float;
in PHASER_MULTI_VS & PHASER_MULTI_FS .

the outTintEffect calculation is correct, Otherwise error will occur ！

[photonstorm]

I wonder why it makes a difference on Android but works fine on iOS and desktops?!

[photonstorm]

This issue has been mentioned on Phaser. There might be relevant details there:

https://phaser.discourse.group/t/pixel-error-flicker-effect-on-mobile-browser/9789/4

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.