当前位置:首页 > 其他解说 > 游戏新闻

Shader:螺旋花纹

分享到: ? ? ? ? ? ? ?

Shader:螺旋花纹

目标效果

目标效果

实现步骤

1.坐标系转换为极坐标系

螺旋花纹

? ? vec2 st=gl_FragCoord.xy/u_resolution.xy-vec2(.5);

? ? float angle=atan(st.y,st.x)+PI+u_time; // atan值域(-PI,PI),需要加上PI保证为正值

? ? float len=length(st);

2.周期显示

螺旋花纹是怎样画出来的

? ? float rate=1./32.;

? ? float value=fract((len-angle*rate)/rate/2./PI);

令len/(angle+2*k*PI)=rate得(len-angle*ratio)/(2*rate*PI)=k。用fract函数即可得到周期中对应位置。

3.彩色显示

螺旋花纹的制作

? ? vec3 value2rgb(float value){

? ? ? ? vec3 rgb=clamp(abs(mod(value*6.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);

? ? ? ? rgb=rgb*rgb*(3.-2.*rgb);

? ? ? ? return rgb;

欧式螺旋花纹

? ? }

将(0.-1.)的值映射成颜色(在hsv转rgb函数:https://thebookofshaders.com/06/?lan=ch上略加修改得到)。

最终代码

#ifdef GL_ES

precision mediump float;

螺旋纹样

#endif


uniform vec2 u_resolution;

uniform vec2 u_mouse;

佩斯利螺旋图案

uniform float u_time;


#define PI 3.141592653589793


花纹

vec3 value2rgb(float value){

? ? vec3 rgb=clamp(abs(mod(value*6.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);

? ? rgb=rgb*rgb*(3.-2.*rgb);

? ? return rgb;

佩里斯花纹

}


void main(){

? ? vec2 st=gl_FragCoord.xy/u_resolution.xy-vec2(.5);

扎染螺旋花纹

? ? float angle=atan(st.y,st.x)+PI+u_time;

? ? float len=length(st);


? ? float rate=1./32.;

? ? float value=fract((len-angle*rate)/rate/2./PI);

? ? gl_FragColor=vec4(value2rgb(value),1.);

}


解说吧微信公众号:yimasm
关注解说吧公众号,订阅更多奇闻趣事
分享到 ? ? ? ? ? ? ?