WebGL glsl fragment 着色器实现的纹理动画: 雷达扫描效果
·
Demo:WebGL Vox Demo
截图:

顶点着色器glsl es2.0代码:
precision highp float;
attribute vec3 a_vtx_pos;
attribute vec2 a_vtx_uv;
varying highp vec2 v_texUV;
uniform mediump vec2 u_Stage_size;
uniform vec3 a_time;
varying vec3 v_time;
void main()
{
float px = 0.5 * u_Stage_size.x;
float py = 0.5 * u_Stage_size.y;
float kw = (2.0/u_Stage_size.x);
float kh = (2.0/u_Stage_size.y);
gl_Position = vec4((px + a_vtx_pos.x)* kw - 1.0, (py + a_vtx_pos.y) * kh - 1.0,0.0,1.0);
v_texUV = a_vtx_uv;
v_time = a_time;
}
片段着色器glsl es2.0代码:
precision highp float;
const float MATH_PI = 3.1415926;
const float MATH_2PI = 2.0 * MATH_PI;
const float MATH_1PER2PI = 0.5 * MATH_PI;
const float MATH_3PER2PI = 3.0 * MATH_PI * 0.5;
uniform sampler2D uSampler;
varying highp vec2 v_texUV;
varying vec3 v_time;
float getRadianByXY(float dx,float dy)
{
if(abs(dx) < 0.00001)
{
if(dy >= 0.0) return MATH_1PER2PI;
else return MATH_3PER2PI;
}
float rad = atan(dy/dx);
if(dx >= 0.0)
{
return rad;
}
rad = MATH_PI + rad;
return rad;
}
float getMinRadian(float a0, float a1)
{
a0 = mod(a0,MATH_2PI);
a1 = mod(a1,MATH_2PI);
if (a0 < a1)
{
a0 = MATH_2PI - a1 + a0;
if (a0 > MATH_PI) return a0 - MATH_2PI;
return a0;
}
else if (a0 > a1)
{
a1 = MATH_2PI - a0 + a1;
if (a1 > MATH_PI) return MATH_2PI - a1;
return -a1;
}
return 0.0;
}
void main()
{
float sRad = v_time.z;
vec2 center = vec2(0.5,0.5);
vec2 puv = vec2(v_texUV.x - center.x,v_texUV.y - center.y) * 2.0;
float currRad = getRadianByXY(puv.x,puv.y);
vec4 color = texture2D(uSampler, v_texUV).rgba;
vec4 scolor = color;
float len = 0.0;
float k = getMinRadian(currRad,sRad);
vec3 rgbK;
if(k > 0.0)
{
k = k/3.14;
k *= k;
len = length(puv);
if(k > 1.1)k = 1.1;
rgbK = vec3(1.0);
}
else
{
k = abs(k)/3.14;
k = pow(k,200.0);
if(k > 1.1)k = 1.1;
len = length(puv);
rgbK = vec3(1.0,0.0,1.0);
}
len = (1.0 - len);
color.rgb = color.rgb * len * k * rgbK.rgb + 0.2 * scolor.gbr * len;
gl_FragColor = color.rgba;
}
更多推荐



所有评论(0)