代码运行网站: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. 跟着源码学IM(十二):基于Netty打造一款高性能的IM即时通讯程序

    本文由竹子爱熊猫分享,原题"(十一)Netty实战篇:基于Netty框架打造一款高性能的IM即时通讯程序",本文有修订和改动. 1.引言 关于Netty网络框架的内容,前面已经讲了 ...

  2. Detectron2使用

    Detectron2使用 Detectron2安装 git clone https://github.com/facebookresearch/detectron2.git cd detectron2 ...

  3. PyScript 使用(1)

    今天按照官方文档进行pyscript的调用,发现paths下总是出现问题,于是调试了一下,问题解决了: # data.py import numpy as np def make_x_and_y(n) ...

  4. 万字图文:SaaS业务架构、价值流、业务能力、业务流程、业务对象、组织架构

    大家好,我是汤师爷~ 本文为读者提供一个SaaS业务架构的系统性框架,探讨业务架构分析的核心要素,帮助SaaS企业深入剖析目标客户的业务模式,全面理解他们的业务架构. 无论你是SaaS创业者.产品经理 ...

  5. Java底层知识面试题

    JVM内存结构class文件格式JVM不会理解我们写的Java源文件, 我们必须把Java源文件编译成class文件, 才能被JVM识别, 对于JVM而言,class文件相当于一个接口class文件是 ...

  6. Qt Quick 实现一个右下角弹出消息的组件

    目录 开发环境 简介 预览图 如何使用 代码 main.qml MessageView.qml Background.qml ScroolBar.qml MessageQueueView.qml 开发 ...

  7. Iceberg metrics导致的问题

    一.问题描述 在iceberg rewrite时报错:org.apache.iceberg.exceptions.ValidationException: Cannot commit, found n ...

  8. Luogu P9870 NOIp2023 双序列拓展 题解 [ 紫 ] [ 动态规划 ] [ 分治 ] [ adhoc ]

    双序列拓展:很妙的特殊性质类 dp 题,由部分分引导向正解. 题意简化 你可以把序列 \(X\) 和序列 \(Y\) 中的每一个数复制若干倍并接到这个数后面,问能否构造出一种方案,使得两个序列长度相等 ...

  9. 清华博士后的DeepSeek使用手册,104页,真的是太厉害了!(免费领取源文件)

    <DeepSeek从入门到精通2025>是由清华大学元宇宙文化实验室的余梦珑博士后及其团队撰写.文档的核心内容围绕DeepSeek的技术特点.应用场景.使用方法以及如何通过提示语设计提升A ...

  10. tomcat配置用户名密码

    1.配置tomcat-user.xml<role rolename="manager-gui"/><role rolename="manager-scr ...