一、坐标归一化
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Output to screen
fragColor = vec4(uv,0.,1.0);
}
从左往右红色增加
从下往上绿色增加
二、坐标归一化,画矢量距离
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from -1 to 1)
vec2 uv = (fragCoord/iResolution.xy-vec2(0.5))*2.0;
float c = length(uv);//计算矢量长度
// Output to screen
fragColor = vec4(vec3(c),1.0);
}
坐标变换为-1到1,算出矢量长度,就可以画出矢量距离,越黑越接近0
三、画圆
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from -1 to 1)
vec2 uv = (fragCoord/iResolution.xy-vec2(0.5))*2.0;
float c=0.;//默认黑色
float r=0.3;//圆的半径
if( length(uv) < r )//矢量长度小于半径,就为白色
c=1.;
// Output to screen
fragColor = vec4(vec3(c),1.0);
}
四、画正圆
为啥前面不圆呢?思考一下
虽然都是0到1,但是长的一边增长慢,短的增长快
可以这样修改,长短边都除以同一个比例
vec2 uv = (fragCoord-0.5*iResolution.xy)/iResolution.xx*2.0;
或者这样
vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;
或者这样
vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);//取x和y的最小值作为比例
效果是一样的
完整源码如下:
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from -1 to 1)
vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;
// vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);//取x和y的最小值作为比例
float c=0.;//默认黑色
float r=0.3;//圆的半径
if( length(uv) < r )//矢量长度小于半径,就为白色
c=1.;
// Output to screen
fragColor = vec4(vec3(c),1.0);
}