Feng - 2023年8月
type: channel
link: http://fengyitong.name/index.php/2023/08/
description: 半山腰的风采
items: WEBGL中使用shader实现旋转的圆环

WEBGL中使用shader实现旋转的圆环
type: item
date: 2023-08-13T18:50:24+08:00
description: 1.实现圆环绘制// fragmentshader void main() { float radius = 0.5; vec2 st = gl_PointCoord.xy; float dist = distance(st,vec2(0.5,0.5)); float alpha = smoothstep(radius-0.12,radius,dist) - smoothstep(radius-0.1,radius,dist); gl_FragColor = vec4( 1.0,0.0,0.0, alpha); }2.让圆环存在一个1/4的缺口(具体大小可以自己调整)// fragmentshader #define PI 3.14159265359 void main() { float radius = 0.5; vec2 st = gl_PointCoord.xy; float dist = distance(st,vec2(0.5,0.5)); float alpha = smoothstep(radius-0.12,radius,dist) - smoothstep(radius-0.1,radius,dist); float theta = mod( atan(st.y - 0.5,st.x - 0.5) + PI , PI*2.0); float a = step( PI/2.0, theta ); gl_FragColor = vec4( 1.0,0.0,0.0, alpha*a); }完整html的demo: Document