Shaders Dissolve Shader: Windows vs HTLM5 issues

Discussion in 'Programming' started by VacantShade, May 14, 2019.

  1. VacantShade

    VacantShade Member

    Joined:
    Aug 8, 2016
    Posts:
    22
    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: May 14, 2019
  2. chmod777

    chmod777 Member

    Joined:
    Aug 26, 2016
    Posts:
    198
  3. VacantShade

    VacantShade Member

    Joined:
    Aug 8, 2016
    Posts:
    22
    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.
     
  4. Juju

    Juju Member

    Joined:
    Jun 20, 2016
    Posts:
    401
    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: May 20, 2019
    rIKmAN and VacantShade like this.
  5. VacantShade

    VacantShade Member

    Joined:
    Aug 8, 2016
    Posts:
    22
    Awesome! Thanks, this worked great!
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice