pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

OpenGL Shader實例分析(8)彩色光圈效果

這篇文章主要為大家詳細介紹了OpenGL Shader實例分析第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的值去掉,最終的動畫如右下圖所示:

 ====》

把光圈和顏色整合起來就看到了和文章開頭的動畫一樣的效果了。

最后吧所有的效果整合起來,如下圖:

【彩色】 => 【彩色旋轉】 =》【彩色旋轉+動畫】 =》【彩色旋轉+動畫+光圈】

=》=》=》

本次分析到此結束,歡迎討論。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持html5模板網。

【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!

相關文檔推薦

這篇文章主要為大家詳細介紹了OpenGL Shader實例分析第7篇,實現雪花飄落效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要為大家詳細介紹了OpenGL Shader實例分析第4篇,實現閃光效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要介紹了OpenGL Shader實例分析第3篇,等待標識效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要為大家詳細介紹了OpenGL Shader實例分析第2篇,繪制心臟跳動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這篇文章主要為大家詳細介紹了OpenGL Shader實例分析第一篇,Wave效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
主站蜘蛛池模板: 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 喷砂机厂家_自动除锈抛丸机价格-成都泰盛吉自动化喷砂设备 | 包装机_厂家_价格-山东包装机有限公司 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 上海恒驭仪器有限公司-实验室平板硫化机-小型平板硫化机-全自动平板硫化机 | 北京普辉律师事务所官网_北京律师24小时免费咨询|法律咨询 | 上海公众号开发-公众号代运营公司-做公众号的公司企业服务商-咏熠软件 | NM-02立式吸污机_ZHCS-02软轴刷_二合一吸刷软轴刷-厦门地坤科技有限公司 | 玻璃钢格栅盖板|玻璃钢盖板|玻璃钢格栅板|树篦子-长沙川皖玻璃钢制品有限公司 | 电渗析,废酸回收,双极膜-山东天维膜技术有限公司 | 郑州律师咨询-郑州律师事务所_河南锦盾律师事务所 | 橡胶接头_橡胶软接头_套管伸缩器_管道伸缩器厂家-巩义市远大供水材料有限公司 | 橡胶弹簧|复合弹簧|橡胶球|振动筛配件-新乡市永鑫橡胶厂 | 中空玻璃生产线,玻璃加工设备,全自动封胶线,铝条折弯机,双组份打胶机,丁基胶/卧式/立式全自动涂布机,玻璃设备-山东昌盛数控设备有限公司 | 购买舔盐、舔砖、矿物质盐压块机,鱼饵、鱼饲料压块机--请到杜甫机械 | 北京乾茂兴业科技发展有限公司| 贝壳粉涂料-内墙腻子-外墙腻子-山东巨野七彩贝壳漆业中心 | 水篦子|雨篦子|镀锌格栅雨水篦子|不锈钢排水篦子|地下车库水箅子—安平县云航丝网制品厂 | 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 诗词大全-古诗名句 - 古诗词赏析 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 视觉检测设备_自动化检测设备_CCD视觉检测机_外观缺陷检测-瑞智光电 | 进口便携式天平,外校_十万分之一分析天平,奥豪斯工业台秤,V2000防水秤-重庆珂偌德科技有限公司(www.crdkj.com) | 99文库_实习生实用的范文资料文库站| 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 | 皮带式输送机械|链板式输送机|不锈钢输送机|网带输送机械设备——青岛鸿儒机械有限公司 | 两头忙,井下装载机,伸缩臂装载机,30装载机/铲车,50装载机/铲车厂家_价格-莱州巨浪机械有限公司 | 中控室大屏幕-上海亿基自动化控制系统工程有限公司 | CPSE安博会| 不锈钢搅拌罐_高速搅拌罐厂家-无锡市凡格德化工装备科技有限公司 | 贵州成人高考网_贵州成考网 | 耐磨陶瓷管道_除渣器厂家-淄博浩瀚陶瓷科技有限公司 | 自动气象站_农业气象站_超声波气象站_防爆气象站-山东万象环境科技有限公司 | 光环国际-新三板公司_股票代码:838504| 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | 地磅-电子地磅维修-电子吊秤-汽车衡-无人值守系统-公路治超-鹰牌衡器 | 德国EA可编程直流电源_电子负载,中国台湾固纬直流电源_交流电源-苏州展文电子科技有限公司 | 中高频感应加热设备|高频淬火设备|超音频感应加热电源|不锈钢管光亮退火机|真空管烤消设备 - 郑州蓝硕工业炉设备有限公司 | 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 软文发布平台 - 云软媒网络软文直编发布营销推广平台 | 沧州友城管业有限公司-内外涂塑钢管-大口径螺旋钢管-涂塑螺旋管-保温钢管生产厂家 |