shadertoy学习 第2课
坐标系统绘制与fwidth函数
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from -1 to 1)
vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);
vec3 col=vec3(0.);
if(abs(uv.y)<fwidth(uv.y)) //横坐标绘制，小于一个像素，就是红色
{
col.r=1.0;
}
if(abs(uv.x)<fwidth(uv.x)) //纵坐标绘制，小于一个像素，就是绿色
{
col.g=1.0;
}
// Output to screen
fragColor = vec4(col, 1.0);
}
二、画坐标格子
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from -1 to 1)
vec2 uv = 1.0*(2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);
vec3 col=vec3(0.);
if(abs(uv.y)<fwidth(uv.y)) //横坐标绘制，小于一个像素，就是红色
{
col.r=1.0;
}
if(abs(uv.x)<fwidth(uv.x)) //纵坐标绘制，小于一个像素，就是绿色
{
col.g=1.0;
}
vec2 cell = fract(uv);//取小数部分
// Output to screen
fragColor = vec4(cell, 0, 1.0);
}
三、完整坐标轴
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from -1 to 1)
vec2 uv = 3.0*(2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);
vec2 cell = fract(uv);//取小数部分
vec3 col=vec3(0.);
//网格绘制
if(abs(cell.y)<fwidth(uv.y)) //横坐标绘制，小于一个像素，就是红色
{
col.r=1.0;
}
if(abs(cell.x)<fwidth(uv.x)) //纵坐标绘制，小于一个像素，就是蓝色
{
col.b=1.0;
}
//x y 坐标轴绘制
if(abs(uv.y)<fwidth(uv.y)) //横坐标绘制
{
col=vec3(1,1,1);
}
if(abs(uv.x)<fwidth(uv.x)) //纵坐标绘制
{
col=vec3(1,1,1);
}
// Output to screen
fragColor = vec4(col, 1.0);
}
进一步，封装函数
//封装绘制网格函数
vec3 grid(vec2 uv)
{
vec2 cell = fract(uv);//取小数部分
vec3 col=vec3(0.);
//网格绘制
if(abs(cell.y)<fwidth(uv.y)) //横坐标绘制，小于一个像素，就是红色
{
col.r=1.0;
}
if(abs(cell.x)<fwidth(uv.x)) //纵坐标绘制，小于一个像素，就是蓝色
{
col.b=1.0;
}
//x y 坐标轴绘制
if(abs(uv.y)<fwidth(uv.y)) //横坐标绘制
{
col=vec3(1,1,1);
}
if(abs(uv.x)<fwidth(uv.x)) //纵坐标绘制
{
col=vec3(1,1,1);
}
return col;
}
//坐标归一化
vec2 fixUV(in vec2 uv, in float scale)
{
return scale*(2.0*uv-iResolution.xy)/min(iResolution.x,iResolution.y);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = fixUV(fragCoord, 3.0);
// Output to screen
fragColor = vec4(grid(uv), 1.0);
}
