前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >shadertoy绘图

shadertoy绘图

作者头像
sofu456
发布2020-08-13 15:21:48
7720
发布2020-08-13 15:21:48
举报
文章被收录于专栏:sofu456sofu456sofu456

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<width)
        return vec4(0,0,0,1);
    else
        return vec4(1,1,1,1);
}
void main(){
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    gl_FragColor = line(uv,vec2(.1),vec2(.9),.01);
}
在这里插入图片描述
在这里插入图片描述
  • 画矩形
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<width)
        return vec4(0,0,0,1);
    else
        return vec4(1,1,1,1);
}
void main(){
    vec2 uv = gl_FragCoord.xy/iResolution.xy;
    gl_FragColor = circle(uv,vec2(.5),.1);
}
在这里插入图片描述
在这里插入图片描述
  • 画三角
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);
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200811155629665.png
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200811155629665.png

参考

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vscode安装shadertoy插件
  • shader绘图
  • 参考
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档