Effects in PreFX on mobile have a strange green tint

[ClaudiaFoglieni]

Version

• Phaser Version: Phaser v3.60 Beta 19 to Phaser v3.60 Beta 23

• Operating system: Android

• Browser: Firefox Mobile 111.1.1, Chrome 112.0.5615.48, Internet Samsung 20.0.6.5, Android System WebView 111.0.5563.116

Description

Using the examples found on Phaser Labs ( https://labs.phaser.io/index.html?dir=3.60/fx/&q= ) for the beta versione 3.60 on a mobile browser, all the codes presents in the FX folder are showing a green tint on the screen.
The same code on mobile are working correctly.
I have tried also the compare version, checking from version 3.60 beta 19 to the dev one, and the issue is still present.

Example Test Code

You can test these two examples:

• https://labs.phaser.io/view.html?src=src\3.60\fx\glow\glow%20fx.js
• https://labs.phaser.io/view.html?src=src\3.60\fx\displacement\displacement%20skull%20fx.js

Additional Information

These are the screenshots from Firefox mobile browser:

[photonstorm]

Very strange - I've tested this on Android without seeing it before.

Here's a video of a Samsung Galaxy S23 (Android v13) running Firefox:

2023-04-11_14-43-33.mp4

Does anyone else see this? Perhaps it's device specific?

[ClaudiaFoglieni]

I have tested these devices after your input and the green tint is present:

• starting from Galaxy S21 and below, with Android 12 or below
• starting from Galaxy Note 10 and below, with any Android version
• starting from Huawei P30 and below, with any Android version

A difference that I have found is about the supported extensions inside the WebGLRenderer:

• on the mobile phone with the green tint the list is
  0: "ANGLE_instanced_arrays"
  1: "EXT_blend_minmax"
  2: "EXT_float_blend"
  3: "EXT_texture_filter_anisotropic"
  4: "EXT_sRGB"
  5: "OES_element_index_uint"
  6: "OES_fbo_render_mipmap"
  7: "OES_standard_derivatives"
  8: "OES_texture_float_linear"
  9: "OES_vertex_array_object"
  10: "WEBGL_compressed_texture_astc"
  11: "WEBGL_compressed_texture_etc"
  12: "WEBGL_compressed_texture_etc1"
  13: "WEBGL_debug_renderer_info"
  14: "WEBGL_debug_shaders"
  15: "WEBGL_depth_texture"
  16: "WEBGL_lose_context"
  17: "WEBGL_multi_draw"
• on the device where the example is working fine the list is:
  0: "ANGLE_instanced_arrays"
  1: "EXT_blend_minmax"
  2: "EXT_color_buffer_half_float"
  3: "EXT_float_blend"
  4: "EXT_texture_compression_bptc"
  5: "EXT_texture_compression_rgtc"
  6: "EXT_texture_filter_anisotropic"
  7: "EXT_sRGB"
  8: "OES_element_index_uint"
  9: "OES_fbo_render_mipmap"
  10: "OES_standard_derivatives"
  11: "OES_texture_float"
  12: "OES_texture_float_linear"
  13: "OES_texture_half_float"
  14: "OES_texture_half_float_linear"
  15: "OES_vertex_array_object"
  16: "WEBGL_color_buffer_float"
  17: "WEBGL_compressed_texture_astc"
  18: "WEBGL_compressed_texture_etc"
  19: "WEBGL_compressed_texture_etc1"
  20: "WEBGL_compressed_texture_s3tc"
  21: "WEBGL_compressed_texture_s3tc_srgb"
  22: "WEBGL_debug_renderer_info"
  23: "WEBGL_debug_shaders"
  24: "WEBGL_depth_texture"
  25: "WEBGL_lose_context"
  26: "WEBGL_multi_draw"

[spayton]

I've also seen seen this on the built in FX.

A quick play on browserstack confirms @ClaudiaFoglieni device/version list. It also does it on these fx: barrel, pixelate, colormatrix, shadow, vignette, wipe.

[photonstorm]

Thanks for confirming both. So yeah, it's device specific (rather than browser version specific, I think).

I'll have a look. It's likely something simple in the shader that I'm assuming it supports but clearly doesn't.

[wayfu]

I've had reports from friends who use linux on the desktop with similar behavior (which, lacking linux, I cannot test). As soon as I attached PreFX Glows to objects, they would turn blue or black for them in Firefox.

[tasmanavt]

I have the same problem. I have encountered this kind of browser on android. But when I updated the browser the problem disappeared. Can you please tell me what it is and how to avoid it?

[photonstorm]

Hiya - sorry we took a while to get to this, but we've tested it extensively under v3.80 and cannot replicate this issue any more, over a wide range of hardware. It's possibly because of the highp precision 3.60 beta used, or maybe that old version of Chrome had an issue? But we've tested modern Android chrome widely and are confident this is resolved now.

[p4dd9]

Hi, using Phaser 3.85.2 using preFX with shadow results on modern chrome browser and brave browser using chromium with the same tint?-issue on the following devices:

• Pixel 6
• Samsung A50
  
  

It also affects ImageObjects that use a spritesheet frame to expose the full spritesheet instead of the selected frame.

Codesnippet:
this.img.preFX?.addShadow(-2, -4, 0.05, 1, 0x000000, 3)

[p4dd9]

Might relate to #6926

[photonstorm]

Yeah it's the same as #6926 and is fixed in v4.0.0 but if we get time, we'll see if there's an easy fix for 3.87. It's very, very device + OS + browser specific, it's not a case of 'everything does it' (because that would be easy to fix!)