通過(guò)webgl的渲染方式，實(shí)現(xiàn)在二維地圖上顯示圓形掃描線，本文分享一下其中關(guān)鍵的shader代碼。

vertex shader

代碼如下：//掃描線屏幕像素坐標(biāo)

? ? ??? attribute?vec4?a_position;?

? ? ? //屏幕分辨率

????????uniform?vec2?u_resolution;?

? ? ??//中心點(diǎn)坐標(biāo)

????????uniform?vec2?u_center;

????????varying?vec2?v_pos;?

????????varying?vec2?v_center;

????????void?main()?{?

???????????vec2?zeroToOne?=?a_position.xy?/?u_resolution;??

???????????vec2?clipSpace?=?(zeroToOne?*?2.0?-?1.0)*?vec2(1,?-1);?

???????????gl_Position?=?vec4(clipSpace,?0,?1);

???????????v_pos?=?a_position.xy;

???????????v_center?=?u_center;

????????}

fragment shader

代碼如下：

? ? ? ?precision?mediump?float;?

????????float?M_PI=3.1415926535897932384626433832795;

? ? ? ?//時(shí)間變化參數(shù)

????????uniform?float?u_time;?

????????varying?vec2?v_pos;?

????????varying?vec2?v_center;

????????float?SMOOTH(float?r,?float?R)?{

????????????return??1.0-smoothstep(R-1.0,R+1.0,?r);

????????}

????????float?movingLine(vec2?uv,?vec2?center,?float?radius)

????????{

????????????//根據(jù)時(shí)間變換線的角度

????????????float?theta0?=?90.0?*?u_time;

????????????vec2?d?=?uv?-?center;

????????????float?r?=?sqrt(?dot(?d,?d?)?);

????????????if(r<radius)

????????????{?

????????????????vec2?p?=?radius*vec2(cos(theta0*M_PI/180.0),

????????????????????????????????????-sin(theta0*M_PI/180.0));

????????????????float?l?=?length(?d?-?p*clamp(?dot(d,p)/dot(p,p),?0.0,?1.0)?);

????????????????d?=?normalize(d);?

????????????????float?theta?=?mod(180.0*atan(d.y,d.x)/M_PI+theta0,360.0);

????????????????float?gradient?=?clamp(1.0-theta/45.0,0.0,1.0);

????????????????return?SMOOTH(l,1.0)+0.5*gradient;

????????????}

????????????else?return?0.0;

????????}

????????float?circle(vec2?uv,?vec2?center,?float?radius,?float?width)

????????{

???????????float?r?=?length(uv?-?center);

? return?SMOOTH(r-width/2.0,radius)-SMOOTH(r+width/2.0,radius);

????????}

????????void?main()?{

??????????float?_radius?=?distance(v_pos,v_center);

? ? ? ? ?//半徑根據(jù)外邊的參數(shù)設(shè)定，這里默認(rèn)寫了200像素的半徑

?????????????float?deltinfo?=?movingLine(v_pos,v_center,200.0);

?????????????gl_FragColor?=?vec4(1.0,?0.0,?0.5,?0.75)*deltinfo+vec4(1.0,?0.0,?0.1,?0.75)*circle(v_pos,v_center,198.0,2.0);??

????????}

效果如下：