• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

Question - Code Mobile Browser Shaders & WebGL

Rekenq

Member
Hi forum!

I'm developing an HTML5 game, that is supposed to run on both Desktop and Mobile browsers. Within this project, various shaders are used and I've been having some troubles, specifically on mobile browsers. Shaders on mobile browsers end up drawing black images or not event drawing at all on some cases.

I ran a few tests on as many browsers as I could. I have a control group that are sprites edited to look exactly as the shader should output them, and then there's the actually shaded versions of the original sprite.

Please take a look at the tests.

Windows Browsers (Chrome/Firefox/Opera)
WindowsBrowsers.PNG

Android Browsers (Phone: One Plus One / Android: Marshmallow) (Chrome/Firefox/Opera)
AndroidBrowsers.png

iPad (5h generation / iOS 12) (Chrome/Safari)
iPadBrowsers.png

Notes:
  • As you can see results differ a lot and I'm guessing this is because of each browsers specific implementation of WebGL and not a game maker's bug.
  • Opera doesn't work at all with HTML5 builds for some weird reason, I even checked opera://gpu and it said that both WebGL and WebGL2 were supported but still got the WebGL required screen.
  • Firefox for Android works fine.
  • Chrome for Android on the One plus One failed but I also tried it on a newer high end android phone and it worked correctly. Then I checked the graphics support for both phones (chrome://gpu) and it turns out One plus One's Chrome doesn't support WebGL2 (It did support WebGL1 though) but Chrome on the newer phone did so I think this is probably be the main cause of these issues, browsers not fully supporting WebGL2.
  • I'm using Game Maker IDE v.2.2.1.375 Runtime v2.2.1.291 (Latest public releases up to this post date AFAIK)
I used 3 shaders and I'll post the code for them next:

Passthrough shader. (Default shader that game maker writes for you when you create a new shader).
Fragment part:
Code:
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

void main()
{
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
}
Tint shader (Color Multiply) Fragment part:
Code:
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

uniform vec3 u_tint;

void main()
{
    vec4 c_original = v_vColour * texture2D(gm_BaseTexture,v_vTexcoord);
    c_original.xyz *= u_tint;
    gl_FragColor = c_original;
}
Color Replace shader Fragment part:
Code:
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

uniform vec3 u_color;
uniform float u_alpha;

void main()
{
    vec4 c_original = v_vColour * texture2D(gm_BaseTexture,v_vTexcoord);
    vec4 c_new = vec4(u_color.x,u_color.y,u_color.z,c_original.a * u_alpha); 
    gl_FragColor = c_new;
}
So here are the questions that are on my mind right now.

Are these known issues for shaders in HTML5?
I've been looking through the forum and there isn't much when it comes to shaders for HTML5 on Mobiles

Are there any workaround for these problems?
Besides having to add sprites painted with their shaded version of course. This would be a problem since I'm using animated sprites with shaders that handle multiple effects that can be turned on or off depending on the game state so, adding sprites for every single combination of effects would end up bloating the project size and that's something I can't afford. It would also represent a considerable amount of artwork time as well.

Why does the passthrough shader works on every case, but the other 2 simple shaders won't work?
This rustle my jimmies so much. If I had to guess I'd say it is something specific about the shader implementation. Assuming the issue is that browsers don't support WebGL2 but do support WebGL1, maybe my shaders (tint and color replace) are using some feature for WebGL2 not available in WebGL1? But they still compile? I'm lost

Is Game Maker using a WebGL1 or WebGL2 implementation for HTML5 builds?
Hoping a yoyo developer can share this info.

Well that's it. If anybody could shine some light on this I'd be infinitely grateful. Also please be encouraged to correct me on any incorrect assumptions, info or code shared here.

Have a nice day! :)
 
Last edited:

Rekenq

Member
Oh I forgot. Small side note.

If you look at the iPad tests, on the first image, it says that it is Safari mobile but the browser is actually Chrome. I'm not sure if this is a Game Maker's bug or maybe Chrome on iOS uses a Safari implementation under the hood or something like that?

Here's the code I use to check OS and Browser. Not pretty I know but it does the job :p

Code:
//OS/Browser Info
if(os_type == os_windows)
   os_string = "Windows";
else if(os_type == os_android)
   os_string = "Android";
else if(os_type == os_ios)
   os_string = "iOS";
else
   os_string = "Unknown";

if(os_browser == browser_not_a_browser)
   browser_string = "Not a browser";
else if(os_browser == browser_firefox)
   browser_string = "Firefox";
else if(os_browser == browser_chrome)
   browser_string = "Chrome";
else if(os_browser == browser_safari)
   browser_string = "Safari";
else if(os_browser == browser_safari_mobile)
   browser_string = "Safari Mobile";
else if(os_browser == browser_opera)
   browser_string = "Opera";
else if(os_browser == browser_ie || os_browser == browser_ie_mobile)
   browser_string = "Why?";
else if(os_browser == browser_edge)
   browser_string = "Edge";
else
   browser_string = "Unknown";

Edit:
I'm also sharing the project if anyone wants to take a look for themselves:
https://drive.google.com/file/d/1BbMRqEVM-ntIDyfFy4F_lgQ2zgt7Cwxj/view?usp=sharing
 
Last edited:

Rekenq

Member
That looks promising! I'll try the beta and see how it goes. Even if the beta doesn't magically solve this, using an array of floats like they mentioned in that bug report might be a good workaround. Thank you very much for the info! I'll let you know how this works out.
 

Rekenq

Member
@chmod777 you were absolutely right. The beta runtime v2.2.2.314 does indeed solves all of these shader issues. Even Opera runs the build now. I can't believe it, an amazing silver bullet! Thank you so much!
 
Top