专栏首页sofu456shadertoy绘图

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<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://thebookofshaders.com/07/?lan=ch https://www.cnblogs.com/liez/p/6919329.html 内置函数:https://blog.csdn.net/hgl868/article/details/7876257

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ffmpeg

    sofu456
  • windows编译linux内核

    清华镜像:https://mirrors.tuna.tsinghua.edu.cn/

    sofu456
  • ffmpeg服务器传递视频

    sofu456
  • 分布式系统的概念都搞懂了吗?(上)

    进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。线程是进程的一个实体,是CPU调度和分派的基本单位,它...

    孙玄@奈学教育
  • 编辑器VSCode使用心得

    工欲善其事必先利其器,趁手的工具会使我们开发事半功倍。 市面上的编辑器我用过许多,

    陌上寒
  • SAP ABAP关键字语法图和ABAP代码自动生成工具Code Composer

    Jerry在做SAP CRM Fiori应用开发时,在学习JavaScript时,读过这本书:

    Jerry Wang
  • Smobiler 4.4 更新预告 Part 2(Smobiler能让你在Visual Studio上开发APP)

    Hello Everybody,在Smobiler 4.4中,也为大家带来了新增功能和插件(重点,敲黑板)。

    Amanda.li
  • Mysql 根据时间戳按年月日分组统计(做个收藏)

    本文由 小马哥 创作,采用 知识共享署名4.0 国际许可协议进行许可 本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名

    IT小马哥
  • 揭开MySQL“锁”的神秘面纱

    在实验环境MySQL5.6、存储引擎:InnoDB中,揭开“锁”的神秘面纱,捋一捋我对这几个概念的想法

    孙玄@奈学教育
  • 我的weex开发之路

    创建一个项目之前,首先需要选取合适的工具,目前使用比较广的两个weex脚手架有weexpack和weex-toolkit。

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券