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:
HTML5 in Safari on iOS:
(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).
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.
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:
HTML5 in Safari on iOS:
(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;
}
}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:
