代码运行网站: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. C#中定义类时关于CLSCompliant属性的声明

    今天在做code analysis时,遇到了这个提示 Warning 1 CA1014 : Microsoft.Design : Mark 'Demo.exe' with CLSCompliant(t ...

  2. IM跨平台技术学习(十二):万字长文详解QQ Linux端实时音视频背后的跨平台实践

    本文由QQ音视频团队贺坤分享原题"Linux QQ能打语音视频了!一文详解背后技术实现!",下文进行了排版和内容优化等. 1.引言 2024年6月6日,QQ For Linux 3 ...

  3. OpenMMLab AI实战营 第七课笔记

    OpenMMLab AI实战营 第七课笔记 目录 OpenMMLab AI实战营 第七课笔记 import os import numpy as np from PIL import Image im ...

  4. Helm适配华为云OBS实践分享,更方便地部署、管理复杂应用

    沃土云创开源开发者专项计划是华为给开源开发者提供专属激励资源,鼓励开发者积极参与开源 for Huawei适配,践行"让优秀开发者支持更优秀开发者"的理念. 此前我们介绍了Beam ...

  5. 2022 年万圣节 Github 彩蛋

    记录每年 Github 万圣节彩蛋,也记录有来项目成长历程. 2022 万圣节彩蛋 2021 万圣节彩蛋 2020 万圣节彩蛋

  6. biancheng-MongoDB教程

    目录http://c.biancheng.net/mongodb2/ 1NoSQL是什么2MongoDB是什么3Windows安装MongoDB4Linux安装MongoDB5MacOS安装Mongo ...

  7. Python语法使用

    由于之前学习过js,代码基本上是相同的,先看看和js有那些区别 项目 python javascript 适用版本 python3 es6,即ECMAScript 2015 运行环境 #!/usr/b ...

  8. Superset 筛选器理解

    免于被筛选器筛选,dashboard中,编辑,高级,"__time_range": {"scope": ["ROOT_ID"], " ...

  9. Node.js 中 mysql 事务的写法

    最近做一个公司内部的信息化平台,本着短平快,选择了 Nodejs + Express + Vue + mysql/mongodb 的技术路线. 该写法主要利用了递归,下面把事务的写法记录一下,做了简单 ...

  10. THUWC2025 游记

    Day -C 先进入金国大臣面积群,然后发现 xyf 又在行联考学生群故事. Day -1 早上赶飞机进京.飞机上启动钢丝.到达大兴机场之后坐火车前往北京西站,然后坐地铁到海淀黄庄.非常饿,但是决定先 ...