热门标签 | HotTags
当前位置:  开发笔记 > 人工智能 > 正文

OpenGLShader实例分析(8)彩色光圈效果

这篇文章主要为大家详细介绍了OpenGLShader实例分析第8篇,彩色光圈效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了OpenGL实现彩色光圈效果的具体代码,供大家参考,具体内容如下

研究了一个彩色光圈效果,感觉挺不错的,分享给大家,效果如下:

代码如下:

Shader "shadertoy/TotalNoob" { //https://www.shadertoy.com/view/XdlSDs
 Properties{
 iMouse ("Mouse Pos", Vector) = (100,100,0,0)
 iChannel0("iChannel0", 2D) = "white" {} 
 iChannelResolution0 ("iChannelResolution0", Vector) = (100,100,0,0)
 }
 
 CGINCLUDE 
 #include "UnityCG.cginc" 
 #pragma target 3.0 
 #pragma glsl
 
 #define vec2 float2
 #define vec3 float3
 #define vec4 float4
 #define mat2 float2x2
 #define iGlobalTime _Time.y
// #define mod fmod // mod = sign*fmod
 #define mix lerp
 #define atan atan2
 #define fract frac 
 #define texture2D tex2D
 // 屏幕的尺寸
 #define iResolution _ScreenParams
 // 屏幕中的坐标,以pixel为单位
 #define gl_FragCoord ((_iParam.srcPos.xy/_iParam.srcPos.w)*_ScreenParams.xy) 
 
 #define PI2 6.28318530718
 #define pi 3.14159265358979
 #define halfpi (pi * 0.5)
 #define oneoverpi (1.0 / pi)
 
 fixed4 iMouse;
 sampler2D iChannel0;
 fixed4 iChannelResolution0;
 
 struct v2f { 
 float4 pos : SV_POSITION; 
 float4 srcPos : TEXCOORD0; 
 }; 
 
 // precision highp float;
 v2f vert(appdata_base v){ 
 v2f o;
 o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
 o.srcPos = ComputeScreenPos(o.pos); 
 return o; 
 } 
 
 vec4 main(v2f _iParam);
 
 fixed4 frag(v2f _iParam) : COLOR0 { 
 return main(_iParam);
 } 
 
 vec4 main(v2f _iParam) {
 vec2 p = (2.0*gl_FragCoord.xy-iResolution.xy)/iResolution.y;
 float tau = 3.1415926535*2.0;
 float a = atan(p.x,p.y);
 float r = length(p)*0.75;
 vec2 uv = vec2(a/tau,r);
 
 //get the color
 float xCol = (uv.x - (iGlobalTime / 3.0)) * 3.0;
 xCol = sign(xCol)*fmod(xCol, 3.0);
 vec3 horColour = vec3(0.25, 0.25, 0.25);
 
 if (xCol <1.0) {
 horColour.r += 1.0 - xCol;
 horColour.g += xCol;
 } else if (xCol <2.0) {
 xCol -= 1.0;
 horColour.g += 1.0 - xCol;
 horColour.b += xCol;
 } else {
 xCol -= 2.0;
 horColour.b += 1.0 - xCol;
 horColour.r += xCol;
 }
 
 // draw color beam
 uv = (2.0 * uv) - 1.0;
 float beamWidth = (0.7+0.5*cos(uv.x*10.0*tau*0.15*clamp(floor(5.0 + 10.0*cos(iGlobalTime)), 0.0, 10.0))) * abs(1.0 / (30.0 * uv.y));
 vec3 horBeam = vec3(beamWidth,beamWidth,beamWidth);
 vec4 gl_FragColor = vec4((( horBeam)* horColour ), 1.0);
 
 return gl_FragColor;
 }
 
 ENDCG 
 SubShader { 
 Pass { 
 CGPROGRAM 
 #pragma vertex vert 
 #pragma fragment frag 
 #pragma fragmentoption ARB_precision_hint_fastest 
 ENDCG 
 } 
 } 
 FallBack Off 
}

代码分析

代码分两部分,颜色 * 光圈,如下图:

 *  = 

彩色的算法

代码如下:

vec2 p = (2.0*gl_FragCoord.xy-iResolution.xy)/iResolution.y;
float tau = 3.1415926535*2.0;
float a = atan(p.x,p.y);
float r = length(p)*0.75;
vec2 uv = vec2(a/tau,r);
 
//get the color
float xCol = (uv.x - (iGlobalTime / 3.0)) * 3.0;
xCol = mod(xCol, 3.0);
vec3 horColour = vec3(0.25, 0.25, 0.25);
 
if (xCol <1.0) {
 horColour.r += 1.0 - xCol;
 horColour.g += xCol;
} else if (xCol <2.0) {
 xCol -= 1.0;
 horColour.g += 1.0 - xCol;
 horColour.b += xCol;
} else {
 xCol -= 2.0;
 horColour.b += 1.0 - xCol;
 horColour.r += xCol;
}

这段代码是写在fragment shader中的,也就是说,每个像素点的渲染都会调用这段代码。

a) vec2 p = (2.0*gl_FragCoord.xy-iResolution.xy)/iResolution.y;

p表示把当前的坐标轴缩小到原来的1/2,原点移动到屏幕中间,并把x,y轴的坐标范围缩小到1左右的值(即p的y轴范围在-1到1之间,x轴的范围也在附近);

b)float a = atan(p.x, p.y);

a表示p点绕原点的角度,范围为[-π,π];所以uv.x = a/tau的范围为[-1/2, 1/2];

float xCol = (uv.x - (iGlobalTime / 3.0)) * 3.0; xCol=mod(xCol, 3)的范围为 [0,3]

c) xCol经过上面处理,其范围为[0,3]; 现在把这个范围平均分成3份,每一份做一个颜色的混合:

[0,1]:Red和Green混合;[1,2]:Green和Blue混合;[2,3]:Blue和Red混合。

光圈的算法

a)画光圈

式子:abs(1.0 / (30.0*uv.y)) 

知识:在shader中,如果color的值为负数,则认为是0,不显示该颜色。

uv变量中uv.y表示点到原点的距离,值的范围为 [0, ]

a-1) uv = (2.0 * uv) - 1.0;  先把uv缩小到原来的1/2,然后向外移动1单位。uv.y的值为[-1/2, ];由于负值color不被显示,如下图A:

a-2) 1.0/(30.0* uv.y); 缩小到原来的1/30,并做个倒数,如下图B

a-3) abs(1.0/(30.0* uv.y)); 然后做个绝对值,如下图C

=》=》

画光圈的算法和《【OpenGL】Shader实例分析(一)-Wave》中画线的算法很类似。

b)光圈动画 

式子:(0.7+0.5*cos(uv.x*10.0*tau*0.15*clamp(floor(5.0 + 10.0*cos(iGlobalTime)), 0.0, 10.0)))

为了方便,把上面的式子分解如下:

式1:float tt = 5.0 + 10.0*cos(iGlobalTime); 
式2:float param = clamp(floor(tt), 0.0, 10.0);
式3:float beamWidth = (0.7+0.5*cos(uv.x*pi*param));

我们把beamWidth作为颜色输出;

先理解式3,如果当param为0,、1、2、3、10时,分别参考下图: 

 =》  =》=》 =》

式2的作用,把tt的值做一个包装,使其为0到10之间的整数

式1的作用,起周期作用,值域为[-5,15]; 其值如左下图所示; 又由于式2做了clamp,把大于10和小于0的值去掉,最终的动画如右下图所示:

 ====》

把光圈和颜色整合起来就看到了和文章开头的动画一样的效果了。

最后吧所有的效果整合起来,如下图:

【彩色】 => 【彩色旋转】 =》【彩色旋转+动画】 =》【彩色旋转+动画+光圈】

=》=》=》

本次分析到此结束,欢迎讨论。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • JavaScript设计模式之策略模式(Strategy Pattern)的优势及应用
    本文介绍了JavaScript设计模式之策略模式(Strategy Pattern)的定义和优势,策略模式可以避免代码中的多重判断条件,体现了开放-封闭原则。同时,策略模式的应用可以使系统的算法重复利用,避免复制粘贴。然而,策略模式也会增加策略类的数量,违反最少知识原则,需要了解各种策略类才能更好地应用于业务中。本文还以员工年终奖的计算为例,说明了策略模式的应用场景和实现方式。 ... [详细]
  • Linuxchmod目录权限命令图文详解在Linux文件系统模型中,每个文件都有一组9个权限位用来控制谁能够读写和执行该文件的内容。对于目录来说,执行位的作用是控制能否进入或者通过 ... [详细]
  • 近年来,大数据成为互联网世界的新宠儿,被列入阿里巴巴、谷歌等公司的战略规划中,也在政府报告中频繁提及。据《大数据人才报告》显示,目前全国大数据人才仅46万,未来3-5年将出现高达150万的人才缺口。根据领英报告,数据剖析人才供应指数最低,且跳槽速度最快。中国商业结合会数据剖析专业委员会统计显示,未来中国基础性数据剖析人才缺口将高达1400万。目前BAT企业中,60%以上的招聘职位都是针对大数据人才的。 ... [详细]
  • Android中高级面试必知必会,积累总结
    本文介绍了Android中高级面试的必知必会内容,并总结了相关经验。文章指出,如今的Android市场对开发人员的要求更高,需要更专业的人才。同时,文章还给出了针对Android岗位的职责和要求,并提供了简历突出的建议。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]
  • qt学习(六)数据库注册用户的实现方法
    本文介绍了在qt学习中实现数据库注册用户的方法,包括登录按钮按下后出现注册页面、账号可用性判断、密码格式判断、邮箱格式判断等步骤。具体实现过程包括UI设计、数据库的创建和各个模块调用数据内容。 ... [详细]
  • “你永远都不知道明天和‘公司的意外’哪个先来。”疫情期间,这是我们最战战兢兢的心情。但是显然,有些人体会不了。这份行业数据,让笔者“柠檬” ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 无线认证设置故障排除方法及注意事项
    本文介绍了解决无线认证设置故障的方法和注意事项,包括检查无线路由器工作状态、关闭手机休眠状态下的网络设置、重启路由器、更改认证类型、恢复出厂设置和手机网络设置等。通过这些方法,可以解决无线认证设置可能出现的问题,确保无线网络正常连接和上网。同时,还提供了一些注意事项,以便用户在进行无线认证设置时能够正确操作。 ... [详细]
  • 本文介绍了游戏开发中的人工智能技术,包括定性行为和非定性行为的分类。定性行为是指特定且可预测的行为,而非定性行为则具有一定程度的不确定性。其中,追逐算法是定性行为的具体实例。 ... [详细]
author-avatar
jizi456
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有