shadertoy学习 第一课

一、坐标归一化

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);
}