【SHADER】Shader实例学习1:UI noise halo

Shader实例学习1:UI noise halo

  • 简介
    • 源码注释
    • 关键步骤
    • 总结

简介

又换方向做图形相关的工作了,门槛确实有一点,数学、图形什么的都要学,算轨迹用到力学什么的也是基本操作。大力出奇迹,跟着shadertoy里的众多大神学起来。本篇学习内容来自于:

UI noise halo

源码注释

// noise from https://www.shadertoy.com/view/4sc3z2
vec3 hash33(vec3 p3)
{
	p3 = fract(p3 * vec3(.1031,.11369,.13787));
    p3 += dot(p3, p3.yxz+19.19);
    return -1.0 + 2.0 * fract(vec3(p3.x+p3.y, p3.x+p3.z, p3.y+p3.z)*p3.zyx);
}
// 随机数
float snoise3(vec3 p)
{
    const float K1 = 0.333333333;
    const float K2 = 0.166666667;
    
    vec3 i = floor(p + (p.x + p.y + p.z) * K1);
    vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
    
    vec3 e = step(vec3(0.0), d0 - d0.yzx);
	vec3 i1 = e * (1.0 - e.zxy);
	vec3 i2 = 1.0 - e.zxy * (1.0 - e);
    
    vec3 d1 = d0 - (i1 - K2);
    vec3 d2 = d0 - (i2 - K1);
    vec3 d3 = d0 - 0.5;
    
    vec4 h = max(0.6 - vec4(dot(d0, d0), dot(d1, d1), dot(d2, d2), dot(d3, d3)), 0.0);
    vec4 n = h * h * h * h * vec4(dot(d0, hash33(i)), dot(d1, hash33(i + i1)), dot(d2, hash33(i + i2)), dot(d3, hash33(i + 1.0)));
    
    return dot(vec4(31.316), n);
}

vec4 extractAlpha(vec3 colorIn)
{
    vec4 colorOut;
    float maxValue = min(max(max(colorIn.r, colorIn.g), colorIn.b), 1.0);
    if (maxValue > 1e-5)
    {
        colorOut.rgb = colorIn.rgb * (1.0 / maxValue);
        colorOut.a = maxValue;
    }
    else
    {
        colorOut = vec4(0.0);
    }
    return colorOut;
}

#define BG_COLOR (vec3(sin(iTime)*0.5+0.5) * 0.0 + vec3(0.0))
#define time iTime
const vec3 color1 = vec3(0.611765, 0.262745, 0.996078);
const vec3 color2 = vec3(0.298039, 0.760784, 0.913725);
const vec3 color3 = vec3(0.062745, 0.078431, 0.600000);
const float innerRadius = 0.6;
const float noiseScale = 0.65;

float light1(float intensity, float attenuation, float dist)
{
    return intensity / (1.0 + dist * attenuation);
}
float light2(float intensity, float attenuation, float dist)
{
    return intensity / (1.0 + dist * dist * attenuation);
}

void draw( out vec4 _FragColor, in vec2 vUv )
{
    vec2 uv = vUv;
    float ang = atan(uv.y, uv.x);
    float len = length(uv);
    float v0, v1, v2, v3, cl;
    float r0, d0, n0;
    float r, d;
    
    // ring
    // 生成随机数
    n0 = snoise3( vec3(uv * noiseScale, time * 0.5) ) * 0.5 + 0.5;
    // 动态变化的圆半径,呈现呼吸感,这个是灵魂
    r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
    // 与圆边界的距离. r0==len时为0
    d0 = distance(uv, r0 / len * uv);
    // 光线(颜色)随距离(距离圆边界)变化
    v0 = light1(1.0, 10.0, d0);
    // 裁掉 r0*1.05 距离外的颜色
    v0 *= smoothstep(r0 * 1.05, r0, len);
    // 颜色混合参数,根据时间变化
    cl = cos(ang + time * 2.0) * 0.5 + 0.5;
    
    // high light
    // 控制高亮光线顺时针变化
    float a = time * -1.0;
    // 当前高亮位置的坐标
    vec2 pos = vec2(cos(a), sin(a)) * r0;
    // 与高亮位置的距离
    d = distance(uv, pos);
    // 光线衰减,环形
    v1 = light2(1.5, 5.0, d);
    // 光线衰减,距离边界。(沿边界快速衰减)
    v1 *= light1(1.0, 50.0 , d0);
    
    // back decay
    // 实心圆
    v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
    
    // hole
    // 圆环
    v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
    
    // color
    //vec3 c = mix(color1, color2, cl);
    // 根据时间变化的颜色值
    vec3 col = mix(color1, color2, cl);
    // 随距离与color3颜色混合
    col = mix(color3, col, v0);
    // 高亮,交集圆环
    col = (col + v1) * v2 * v3 ;
    //col.rgb = clamp(col.rgb, 0.0, 1.0);
    

    // 调整颜色,同时将原色中rgb中最大的值作为alpha,后续作为颜色融合的参数.
    // 经过试验:没有这一步以及后面的颜色混合,效果也跟最终效果差不多,从前面的代码逻辑也可以看出
    // 如果有这一步,因为extractAlpha函数内部对rgb做了放大,反而后面必须跟mix,相当于是个逆操作
    _FragColor = extractAlpha(col);
}

// 入口函数
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 变换到[-1,1]范围的坐标系。(注意除的是界面x y轴短的那根轴)
    vec2 uv = (fragCoord*2.-iResolution.xy)/iResolution.y;
    
    vec4 col;
    draw(col, uv);

    vec3 bg = BG_COLOR;
	// 这里用到一个小技巧,使用col.a作为颜色融合的参数
	// 颜色融合,否则背景、前景界限明显
    fragColor.rgb = mix(bg, col.rgb, col.a); //normal blend
}

关键步骤

从上面的代码逻辑看,一个动态变化的光晕,有几个关键步骤:
1 动态变化的半径,细微变化。
2 动态变化的颜色,通过简单的颜色融合就能取得不错的效果。
3 逆时针或者顺时针变化的高亮区域。
4 沿圆边界或高亮区衰减的颜色。

总结

本篇shader代码整洁,很适合我这种初学者学习入门。从代码结构很容易看出关键的实现思路,里面也有些技巧,值得反复学习,比如沿边界衰减的方式、不同的衰减方法、高亮色的计算、以及圆环的实现方式等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/582890.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

内外网隔离后 内网文件如何导出?

将内外网进行网络隔离后,内网文件如何导出?怎样确保安全的前提下,不影响业务的正常开展?这时候企业就需要采取安全且合规的方法来确保数据的安全性和防止未授权访问。 企业会采用的传统流程是:当文件由内网导出至外部时…

javaWeb项目-校园志愿者管理系统功能介绍

项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架:ssm、Springboot 前端:Vue、ElementUI 关键技术:springboot、SSM、vue、MYSQL、MAVEN 数据库工具:Navicat、SQLyog 1、SpringBoot框架 …

书生·浦语 大模型(学习笔记-8)Lagent AgentLego 智能体应用搭建

目录 一、智能体出现的原因 二、智能体的定义 三、智能体的组成 四、Lagent 五、AgentLego 六、实战一(Lagent) 环境配置及安装 安装依赖 准备 Tutorial Lagent Web Demo AgentLego 使用 图片推理(结果): …

Linux下启动jenkins报错问题解决

jenkins端口报错 java.io.IOException: Failed to start Jettyat winstone.Launcher.<init>(Launcher.java:209)at winstone.Launcher.main(Launcher.java:496)at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)at java.base/jdk.int…

数据仓库实验二:关联规则挖掘实验

目录 一、实验目的二、实验内容和要求三、实验步骤1、创建数据库和表2、挖掘关联规则&#xff08;1&#xff09;新建一个 Analysis Services 项目 Sales&#xff08;2&#xff09;建立数据源视图&#xff08;3&#xff09;建立挖掘结构 Sales.dmm&#xff08;4&#xff09;部署…

(学习日记)2024.05.09:UCOSIII第六十三节:常用的结构体(os.h文件)第二部分

之前的章节都是针对某个或某些知识点进行的专项讲解&#xff0c;重点在功能和代码解释。 回到最初开始学μC/OS-III系统时&#xff0c;当时就定下了一个目标&#xff0c;不仅要读懂&#xff0c;还要读透&#xff0c;改造成更适合中国宝宝体质的使用方式。在学完野火的教程后&a…

Docker有哪些常见命令?什么是Docker数据卷?

喜欢就点击上方关注我们吧&#xff01; 哈喽&#xff0c;大家好呀&#xff01;这里是码农后端。上一篇我们介绍了Docker的安装以及腾讯云镜像加速源的配置。本篇将带你学习Docker的常见命令、数据卷及自定义镜像等相关知识。 1、什么是镜像与容器&#xff1f; 利用Docker安装应…

HarmonyOS编程实践系列:第一节 - 创建健康App欢迎页

系列文章目录 &#xff08;零&#xff09;鸿蒙HarmonyOS入门&#xff1a;如何配置环境&#xff0c;输出“Hello World“ &#xff08;一&#xff09;鸿蒙HarmonyOS开发基础 &#xff08;二&#xff09;鸿蒙HarmonyOS主力开发语言ArkTS-基本语法 &#xff08;三&#xff09;鸿蒙…

Web3的可持续性:构建环境友好的去中心化系统

引言 随着全球对可持续发展和环境问题的日益关注&#xff0c;Web3技术作为一种新型的互联网模式&#xff0c;也开始受到社区和开发者的关注。但很少有人关注到Web3对环境可持续性的潜在影响。本文将探讨Web3如何构建一个环境友好的去中心化系统&#xff0c;以及这如何促进一个…

Python_AI库 Pandas的时间序列操作详解

Python_AI库 Pandas的时间序列操作详解 本文默认读者具备以下技能&#xff1a; 熟悉python基础知识&#xff0c;vscode或其它编辑工具 了解pandas,matplotlib的基础操作 具备自主扩展学习能力 在数据分析和处理中&#xff0c;时间序列数据是一类常见且重要的数据类型。大量的…

瓦片编辑器成功移植到小熊猫C++ 2.25.1版本,解决_findnext移植问题

移植之后出现绿色屏幕闪退 查了版本回滚直到不闪退&#xff0c;发现是在读取自定义文件上出问题 然后在找读取自定义文件函数&#xff0c;发现是读取图片部分出问题 然后就卡住了 调试半天&#xff0c;不是数据溢出&#xff0c;于是就看 函数_findnext,网上搜 ———_findn…

Nutch库入门指南:利用Java编写采集程序,快速抓取北京车展重点车型

概述 在2024年北京车展上&#xff0c;电动汽车成为全球关注的焦点之一。这一事件不仅吸引了全球汽车制造商的目光&#xff0c;也突显了中国市场在电动汽车领域的领先地位。117台全球首发车的亮相&#xff0c;其中包括30台跨国公司的全球首发车和41台概念车&#xff0c;彰显了中…

协程——uthread学习

协程——uthread学习 uthread说明细节 uthread代码 ucontext-人人都可以实现的简单协程库 github地址 vscode c调试环境搭建 程序员应如何理解协程 在此记录一下协程的基本概念&#xff0c;后续再考虑实现手写的协程。 uthread说明 一个简单的C用户级线程&#xff08;协程&am…

解决Could not locate zlibwapi.dll. Please make sure it is in your library path问题

nvidia官网已经下架了zlibwapi.dll的下载链接&#xff0c;可以按照下面方法。 1、在windows目录C:\Program Files\Microsoft Office\root\Office16\ODBC Drivers\Salesforce\lib下找到zlibwapi.dll文件 (如果下载不到可通过百度云) 链接&#xff1a;https://pan.baidu.com/s…

宝塔面板自定义设置告警通知webhook接口推送内容

前提 为了能够使用宝塔面板的自定义推送webhook对接到自己的推送系统&#xff0c;特意修改面板代码来支持自定义的推送系统。 环境 宝塔&#xff1a;Linux面板8.1.0 效果 步骤 主要修改文件路径如下 /www/server/panel/class/msg/web_hook_msg.py 源文件地址 完整文件链…

如何解决Edge浏览器显示“你的组织浏览器已托管”,导致无法正常打开网页问题?

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

[ACTF2020 新生赛]BackupFile 1 [极客大挑战 2019]BuyFlag 1 [护网杯 2018]easy_tornado 1

目录 [ACTF2020 新生赛]BackupFile 1 1.打开页面&#xff0c;叫我们去找源文件 2.想到用disearch扫描&#xff0c;发现源文件index.php.bak 3.访问这个文件&#xff0c;下载一个文件&#xff0c;用记事本打开 4.翻译php代码 5.构造payload url/?key123&#xff0c;得到fl…

《与 Apollo 共创生态:我和 Apollo 7周年大会的心路历程》

目录 前言7周年大会开放协同写在最后 前言 Apollo开放平台的企业生态计划是一个激动人心的举措&#xff0c;它展现了Apollo团队长期以来的努力和成就。通过与全球开发者和合作伙伴的紧密合作&#xff0c;Apollo开放平台已经成为一个创新和技术交流的重要平台。企业生态计划的推…

LeetCode 104.二叉树的最大深度

题目描述 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,…

优化大型语言模型交互:提升查询和提示效果的26条原则

推荐下arxiv挂的一个提示词教程&#xff1a; https://github.com/VILA-Lab/ATLAS https://arxiv.org/abs/2312.16171 它提出了一套26条指导原则&#xff0c;改善和优化与大型语言模型&#xff08;LLMs&#xff09;的交互过程。通过这些原则&#xff0c;旨在简化对LLMs的查询和…