代码运行网站: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. [转]使用Unity进行3D开发的思路和主要技术优势

    此处直接附上别人撰写好的博文,分享给各位读者. 原文链接:Unity3D手游开发实践--<腾讯桌球:客户端总结>.

  2. 开源即时通讯IM框架MobileIMSDK的H5端开发快速入门

    ► 相关链接: ① MobileIMSDK-H5端的详细介绍 ② MobileIMSDK-H5端的开发手册new(* 精编PDF版) 一.技术准备 您是否已对Web端即时通讯技术有所了解? 1)新手入 ...

  3. Verilog3_组合逻辑电路

    组合逻辑电路设计方法 使用assign语句: 描述简单的组合逻辑电路 使用always块: 描述复杂的组合逻辑电路 要点: 只在一个always模块中对某一变量进行赋值: 将所有敏感变量列在敏感变量列 ...

  4. Windows bat批处理文件结束某个程序进程,删除文件夹

    Windows bat批处理文件结束某个程序进程,删除文件夹 bat文件内容: @echo off setlocal :: 要结束的应用程序进程名 set "PROCESS_NAME=助手. ...

  5. JavaWeb的一些理解

    WEB概述 WEB是什么 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上的资源分类 Internet上供外界访问的Web资源分为: 静态 ...

  6. 项目PMP之七项目成本管理

    项目PMP之七--项目成本管理   一.定义:在预算内管理成本:预测项目成本 核心理念:重点关注项目活动的成本:同时决策的影响.相关方的不同时间不同方法的测算 趋势:挣值进度(ES)逻辑:敏捷的方式则 ...

  7. MongoDB:【索引类型】单字段索引、复合索引、其他索引

    查询性能分析:

  8. 使用SpongeExt快捷完成CudaSPONGE结合PySAGES的增强采样

    技术背景 在前面的一些文章中,我们介绍过关于CudaSPONGE的安装和基础使用方法,CudaSPONGE提供的Python接口,PySAGES增强采样软件的基本使用方法,还有一篇关于CudaSPON ...

  9. GD32F103C8T6看门狗

    GD32F10x看门狗 两个看门狗设备(独立看门狗IWDG和窗口看门狗WWDG)可用来检测和解决由软件错误引起的故障: 当计数器达到给定的超时值时,触发一个中断(仅适用于窗口型看门狗)或产生系统复位. ...

  10. 考拉 T_Q_X 的博客搬运(搬运)

    博客搬迁现场直播 各位观众们大家好,欢迎来到新闻透视 今天为您直播某菜鸡oier tqx 的博客搬迁现场. Q:请问tqx,您为什么要将博客从CSDN搬迁到博客园呢? tqx:懂得都懂,不懂的我也不多 ...