This frag shader is supposed to draw a slowly expanding smoke ring - getColor() does the work. On my tablet this works right but on both my test phones I get a smoke ring at first and then it flashes over the whole screen. It’s like the distance caculation goes wrong over a certain value. Any ideas?
`
precision mediump float;
varying float v_TimeRatio;
uniform vec4 u_Wave0;
uniform vec4 u_Wave1;
uniform vec4 u_Wave2;
uniform vec4 u_Wave3;
uniform sampler2D u_Texture;
uniform float u_Width;
uniform float u_Height;
varying vec4 v_Color;
const vec4 newColor = vec4(0.1, 0.2, 0.6, 1.0);
const vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
float getColor(in vec4 wave, in vec4 texData) {
float smoke = (1.0 + texData.b) / 2.0;
float distance = smoke * distance(gl_FragCoord.xy, wave.xy);
return abs(distance - (wave.z / 2.0));
}
void main()
{
vec2 coord = vec2(1.0 - gl_FragCoord.y / u_Height, 1.0 - gl_FragCoord.x / u_Width);
vec4 texData = texture2D(u_Texture, coord);
float w = getColor(u_Wave0, texData);
w = clamp(w, 0.0, 25.0);
w = 0.66 + (25.0 - w) / 75.0;
float f = w * (0.5 + texData.b * max((1.0 - (texData.r / 1.3)), step(v_TimeRatio * texData.r, coord.x))) / 1.5;
vec4 timebar = mix(v_Color, vec4(1.0, 1.0, 1.0, 1.0), min(step(v_TimeRatio, coord.x) , texData.r) / 2.0);
gl_FragColor = timebar * vec4(f, f, f, 1.0);
}
`