• Hey! Guest! The 37th GMC Jam will take place between May 28th, 12:00 UTC and June 1st, 12:00 UTC. Why not join in! Click here to find out more!

Shaders Dissolve Shader: Windows vs HTLM5 issues

VacantShade

Member
So I've been getting into shaders, and I've got a basic grasp of how they work.
Recently I implemented a dissolve shader from shadertoy, and it uses a custom "random" function to set the alpha of specific pixels to 0 as the value of a passed uniform changes. This all works great in Windows, as well as HTML5 from the IDE. However, when testing it in Safari on iOS, the result is odd. Here's a comparison:

Windows and HTML5 from IDE:
Animation 2.gif
HTML5 in Safari on iOS:
Animation 1.gif
(Pardon the bad quality, I had no way to screen capture other than video from my phone)

As you can see, the top one works as expected, with a smooth transition from fully visible to fully invisible.
However, the bottom one is never fully visible or invisible, and instead seems to be stuck somewhere in the middle. Also to note, there is an obvious "line pattern" developing on the lower version, whereas the top one stays pretty random.

My guess is that HTML5's issues with floating point number precision is the cause of this problem, and the shader's reliance on the "random" function, which involves said floating point numbers. Below is the shader code. Keep in mind the value "u_time" is passed a value in the range of (0.0 - 1.6).

Code:
//
// Simple passthrough fragment shader
//
varying vec2 v_vTexcoord;
varying vec4 v_vColour;

uniform float u_time;


float rand(vec2 co)
{
    return fract( sin( dot( co.xy , vec2(12.9898,78.233) ) ) * 43758.5453 );
}

void main()
{
   
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );

    if(sin(u_time) < rand(gl_FragCoord.xy))
    {
        gl_FragColor.a = 0.0;
    }
}
Again, I've worked with several shaders, and even built my own, but this custom "random" function is hard for me to wrap my mind around, so I'm guessing it could be the issue. I've tried writing different versions of the code for several hours but no success so far.

Anything seem obvious as to why HTML5 would have an issue? Any thoughts as to a solution?
Thanks in advance for your time!

This is in GMS2 version 2.2.2.413.
 
Last edited:

VacantShade

Member
I know there were issues with shaders on Mac / iOS in the previous GameMaker releases. See:
https://bugs.yoyogames.com/view.php?id=30392
https://bugs.yoyogames.com/view.php?id=30193

So the solution might just be to upgrade to 2.2.2.
Thanks for the quick reply!
I should have mentioned, this is in GMS2 version 2.2.2.413. I'll update the thread post to reflect that.
Also, the issue I'm having doesn't seem to affect all shaders, as I have a palette swap shader and a few others successfully implemented. So I'm pretty sure it is the way this shader is being handled that is the problem.
 

Juju

Member
As pointed out elsewhere by @Blokatt, this is very likely an issue with low precision floats. Slap the following at the top of your shader code and that should fix your issues:
Code:
precision highp float
 
Last edited:
Top