shadertoy绘图

vscode安装shadertoy插件

shaderoty.com使用片段着色器绘图的网站，上面每周都会有很牛的绘图算法公布

shader绘图

• 颜色控制

void main(){
    if(gl_FragCoord.x>100.0)  //可以使用iResolution，单位坐标（可以算出坐标原点在左下角）
        gl_FragColor = vec4(0,0,0,1);
    else
        gl_FragColor = vec4(1,0,0,1);
}

• 划直线

vec4 line(vec2 pos,vec2 p1,vec2 p2,float width){
    float k = (p1.y - p2.y)/(p1.x - p2.x);    
    float b = p1.y - k * p1.x;
    float t = distance(vec2(pos.x,k*pos.x+b),pos);    //带锯齿的算法，可以使用点到直线公式画出无锯齿的直线
    if(t

• 画矩形

void main(){
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    vec2 left = step(vec2(0.3),uv);    //step二维点，与或运算
    vec2 bottom = step(vec2(0.3),1.0-uv);
    gl_FragColor = vec4(vec3(left.x*left.y*bottom.x*bottom.y),1);
}

• 画圆

vec4 circle(vec2 pos,vec2 p1,float width){
    float t = distance(p1,pos);
    if(t

• 画三角

vec3 x(vec2 p1,vec2 p2)
{
    return vec3(0,0,p1.x*p2.y-p1.y*p2.x);
}
vec4 trangle(vec2 pos,vec2 p1,vec2 p2,vec2 p3)
{
    float x1 = x(p2-p1,pos-p1).z;
    float x2 = x(p3-p2,pos-p2).z;
    float x3 = x(p1-p3,pos-p3).z;
    if(x1*x3>.0&&x2*x3>.0)   //点在三角形内的同向原则
        return vec4(0,0,0,1);
    else
        return vec4(1,1,1,1);
}
void main(){
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    gl_FragColor = trangle(uv,vec2(.3),vec2(.1,.6),vec2(.6));
}

• 图像合并

void main(){
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    gl_FragColor = mix(trangle(uv,vec2(.3),vec2(.1,.6),vec2(.6)),line(uv,vec2(.1),vec2(.9),.01),0.5);   //mix线性插值
}

texture2D获取材质狗哥

参考

https://thebookofshaders.com/07/?lan=ch
https://www.cnblogs.com/liez/p/6919329.html
内置函数：https://blog.csdn.net/hgl868/article/details/7876257