代码运行网站:http://editor.thebookofshaders.com/

// Author @CuriosityWang
// https://www.cnblogs.com/curiositywang #ifdef GL_ES
precision mediump float;
#endif float ColA = 0.028;
float RowA = 0.033; uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time; // length 控制右边开始的长度
float pctGenerateRow(vec2 st, float top, float length){
if(st.x < 1. - length){
return 1.;
}
float pct1 = step(top, st.y);
float pct2 = step(top - RowA, st.y);
float pct = pct2 - pct1;
return 1. - pct;
} float pctGenerateCol(vec2 st, float right, float length){
if(st.y < 1. - length){
return 1.;
}
float pct1 = step(right, st.x);
float pct2 = step(right - ColA, st.x);
float pct = pct2 - pct1;
return 1. - pct;
} vec3 generateRed(vec2 origin, vec2 st){
if(st.x < origin.x && st.y > origin.y ){
return vec3(165./255., 32./255., 35./255.);
}
return vec3(1.);
} vec3 generateBlue(vec2 origin, vec2 st){
if(st.x > origin.x && st.y < origin.y){
return vec3(1./255., 94./255., 153./255.);
}
return vec3(1.);
} vec3 generateYello(vec2 origin, vec2 st){
if(st.x > origin.x && st.y > origin.y){
return vec3(254./255., 195./255., 51./255.);
}
return vec3(1.);
} void main(){
vec2 st = gl_FragCoord.xy/u_resolution.xy;
vec3 color = vec3(247./255., 242./255., 224./255.); float pct1 = pctGenerateCol(st, 0.248, 1.0);
float pct2 = pctGenerateCol(st, 0.7, 1.0);
float pct3 = pctGenerateCol(st, 0.952, 1.0);
float pct_s = pctGenerateCol(st, 0.1, 0.336); float pct4 = pctGenerateRow(st, 0.684, 1.0);
float pct5 = pctGenerateRow(st, 0.860, 1.0);
float pct_row_s = pctGenerateRow(st, 0.092, 0.776); vec3 red = generateRed(vec2(0.240,0.660), st);
vec3 yellow = generateYello(vec2(0.950,0.650), st);
vec3 blue = generateBlue(vec2(0.680,0.070), st); // float pct = pct1; float pct = pct1 * pct2 * pct3 * pct4* pct5 * pct_s * pct_row_s;
color = vec3(pct) * color;
// color = mix(color, red, 1.);
color *= red * blue * yellow;
gl_FragColor = vec4(color,1.0);
}

Shader作画的更多相关文章

  1. OpenGL shader 中关于顶点坐标值的思考

    今天工作中需要做一个事情: 在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示. 思路很简单,在vertex shader内知道顶点坐标,进行计 ...

  2. CSharpGL(14)用geometry shader渲染模型的法线(normal)

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(14)用geometry shader渲染模型的法线(normal) +BIT祝威+悄悄在此留下版了个权的信息说: 2016-08-13 ...

  3. 【译】Unity3D Shader 新手教程(6/6) —— 更好的卡通Shader

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你想了解以下几件事,我建议你阅读以下这篇教程: 想知道如何写一个multipass的toon shade ...

  4. 【译】Unity3D Shader 新手教程(5/6) —— Bumped Diffuse Shader

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想学习片段着色器(Fragment Shader). 你想实现 ...

  5. 【译】Unity3D Shader 新手教程(4/6) —— 卡通shader(入门版)

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 暗黑系 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想了解更多有关表面着色器的细节知识. 你想实现一个入门 ...

  6. 【译】Unity3D Shader 新手教程(3/6) —— 更加真实的积雪

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 如果你满足以下条件,我建议你阅读这篇教程: 你想知道如何在表面着色器中进行混色(blend colour) 你想实 ...

  7. 【译】Unity3D Shader 新手教程(2/6) —— 积雪Shader

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 如果你是一个shader编程的新手,并且你想学到下面这些酷炫的技术,我觉得你可以看看这篇教程: 实现一个积雪效果的 ...

  8. 【译】Unity3D Shader 新手教程(1/6)

    本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D ...

  9. 多材质(Shader)实现

    最近在cocos creator上打算写个U3D中shader功能的插件(能在属性面板调整shader属性). 对其中一个功能有点疑惑,就是U3D中一个渲染物体上可以挂多个材质,后来查询了下,一个物体 ...

  10. unity的固定管线shader

    最近shader学习中,看的视频. 练习的固定管线的shader如下: ps.在unity5中半透明不好用,其他的还好 //不区分大小写 //这是固定管线的Shader Shader "Sh ...

随机推荐

  1. 内存吞金兽(Elasticsearch)的那些事儿 -- 架构&三高保证

    系列目录 内存吞金兽(Elasticsearch)的那些事儿 -- 认识一下 内存吞金兽(Elasticsearch)的那些事儿 -- 数据结构及巧妙算法 内存吞金兽(Elasticsearch)的那 ...

  2. Mac上安装mongoDB详细教程

    Mac OSX 平台安装 MongoDB MongoDB 提供了 OSX 平台上 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download ...

  3. 将Mybatis引入Spring Boot项目连接数据库操作

    将Mybatis引入Spring Boot项目连接数据库操作 一,首先,在pom.xml引入Mybatis插件 加入Maven依赖代码即可快速引入Mybatis 2.0.0: <!--Mybat ...

  4. ABC224

    ABC224 D 题目大意 有一个九个点的无向图棋盘,上面有八个棋子,一次操作能将一个棋子沿边移到空点上,问将每个棋子移到与它编号相同的点最少几步. 解题思路 考虑使用 BFS. 用 string 存 ...

  5. 自定义swagger扩展解析jsondoc

    需求规定 为了减少注释和swagger注解的重复定义, 通过规范注释, 让swagger可以通过javadoc来产生 替换@Api.@ApiOperation.@ApiModel.@ApiModelP ...

  6. 最大流的 Dinic 算法和 ISAP 算法

    上期回顾:https://www.cnblogs.com/ofnoname/p/18678895 之前我们已经介绍了最大流问题的基本定义.最大流最小割定理.增广路径与残量网络的构建方法,以及如何利用这 ...

  7. CPU的指令周期

    本文分享自天翼云开发者社区<CPU的指令周期>,作者:冯****怡 指令周期(Instruction Cycle) CPU中会有 存器.指令寄存器.控制器等多类单元.指令集,就是CPU中用 ...

  8. V-Control 开箱即用的.NET MAUI组件库发布了!

    之前写过挺多的MAUI Sample,其中有很多代码可以打包成组件,当组件完善到一定程度,我会把控件封装起来放到控件库中. 今天,在这个仓库建立一年零八个月后,我觉得可以考虑将其作为开源库发布. 有很 ...

  9. [车联网/计算机网络] Autosar 的 `ARXML` 配置数据库文件协议

    序: 缘起 ARXML 概述 : Autosar 的 ARXML 配置数据库文件协议 ARXML 文件 ARXML文件: AUTOSAR系统描述文件,后缀*.arxml 实质是一个XML文件,一般通过 ...

  10. 使用C#对Godot属性进行改写(其实是覆盖)

    本文地址:https://www.cnblogs.com/oberon-zjt0806/p/14568221.html 背景 我还真没想到C#这个鬼东西还能这么用-- 起初是想通过某种办法改写一下La ...