R
Rekenq
Guest
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)
Android Browsers (Phone: One Plus One / Android: Marshmallow) (Chrome/Firefox/Opera)
iPad (5h generation / iOS 12) (Chrome/Safari)
Notes:
Passthrough shader. (Default shader that game maker writes for you when you create a new shader).
Fragment part:
Tint shader (Color Multiply) Fragment part:
Color Replace shader Fragment part:
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!
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)
Android Browsers (Phone: One Plus One / Android: Marshmallow) (Chrome/Firefox/Opera)
iPad (5h generation / iOS 12) (Chrome/Safari)
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)
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 );
}
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;
}
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;
}
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 by a moderator: