Shader作画
代码运行网站: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作画的更多相关文章
- OpenGL shader 中关于顶点坐标值的思考
今天工作中需要做一个事情: 在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示. 思路很简单,在vertex shader内知道顶点坐标,进行计 ...
- CSharpGL(14)用geometry shader渲染模型的法线(normal)
+BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(14)用geometry shader渲染模型的法线(normal) +BIT祝威+悄悄在此留下版了个权的信息说: 2016-08-13 ...
- 【译】Unity3D Shader 新手教程(6/6) —— 更好的卡通Shader
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你想了解以下几件事,我建议你阅读以下这篇教程: 想知道如何写一个multipass的toon shade ...
- 【译】Unity3D Shader 新手教程(5/6) —— Bumped Diffuse Shader
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想学习片段着色器(Fragment Shader). 你想实现 ...
- 【译】Unity3D Shader 新手教程(4/6) —— 卡通shader(入门版)
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 暗黑系 动机 如果你满足以下条件,我建议你阅读这篇教程: 你想了解更多有关表面着色器的细节知识. 你想实现一个入门 ...
- 【译】Unity3D Shader 新手教程(3/6) —— 更加真实的积雪
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 如果你满足以下条件,我建议你阅读这篇教程: 你想知道如何在表面着色器中进行混色(blend colour) 你想实 ...
- 【译】Unity3D Shader 新手教程(2/6) —— 积雪Shader
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 如果你是一个shader编程的新手,并且你想学到下面这些酷炫的技术,我觉得你可以看看这篇教程: 实现一个积雪效果的 ...
- 【译】Unity3D Shader 新手教程(1/6)
本文为翻译,附上原文链接. 转载请注明出处--polobymulberry-博客园. 刚开始接触Unity3D Shader编程时,你会发现有关shader的文档相当散,这也造成初学者对Unity3D ...
- 多材质(Shader)实现
最近在cocos creator上打算写个U3D中shader功能的插件(能在属性面板调整shader属性). 对其中一个功能有点疑惑,就是U3D中一个渲染物体上可以挂多个材质,后来查询了下,一个物体 ...
- unity的固定管线shader
最近shader学习中,看的视频. 练习的固定管线的shader如下: ps.在unity5中半透明不好用,其他的还好 //不区分大小写 //这是固定管线的Shader Shader "Sh ...
随机推荐
- Mac terminal proxy
cat >> ~/.bash_profile << EOF function proxy_on() { export http_proxy=http://127.0.0.1:7 ...
- Family of Solution Sets
欢迎投歌词!评论告诉我歌曲链接和词就好啦-大概四五天一更? Solution Set - "卷起击碎定论的漩涡" \(\to\) <夏虫> Solution Set ...
- WPF中webview2鼠标移动窗体
WPF里webview2会一直处于其他控件最上层,是个历史遗留问题. 为了能在webview2里鼠标移动让窗体跟着移动位置代码如下: async Task InitializeAsync() { Ap ...
- 为什么使用ROS的remap标签不起作用?
1. remap的作用 remap可以让ROS节点订阅发布的topic名字更换为另外一个名字.例如 <remap from="/old_topic" to="/ne ...
- SSL 和 TLS
转载:链接1 链接2 TLS和SSL SSL(Secure Sockets Layer)安全套接层协议 TLS(Transport Layer Security)传输层安全性协议 最新版本的TLS ...
- LangChain基础篇 (01)
LangChain 是什么 Langchain 是一个开源框架,它允许开发人员将大型语言模型与外部的计算和数据源结合起来,是一个通过组合模块和能力抽象来扩展 LLM 的助手 为什么需要 LangCha ...
- HT-014 Div3 扫雷 题解 [ 绿 ] [ 二维差分 ]
分析 观察到是曼哈顿距离 \(\le r\) 的范围可以扫到,联想到如下图形: 左边是 \(r=1\) 可以扫到的范围,右边是 \(r=2\) 可以扫到的范围. 于是,我们只要对这样的图形在 \(10 ...
- Vue3 基础概念与环境搭建
前言 首先需要提醒大家的是,Vue2 已经在2023年停止维护,为了能更好地适应前端开发的发展趋势以及获得更好的性能和功能,我们将从这篇文章开始进入Vue3的阶段.如果对Vue2有想了解的小伙伴可以自 ...
- Thymeleaf 嵌套循环
<label th:each="role:${roles}" class="check-box"> <input th:each=" ...
- Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
前言 今天大姚给大家分享一个 .NET 强大.免费.开源的交互式图表库:Plotly.NET. 项目介绍 Plotly.NET 一个为 .NET 打造的强大.免费.开源的交互式图表库,支持 C# 和 ...