快捷導(dǎo)航

OpenGL Shader實(shí)例分析（8）彩色光圈效果

更新時(shí)間：2019年02月28日 08:34:29 作者：stalendp

這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實(shí)例分析第8篇，彩色光圈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了OpenGL實(shí)現(xiàn)彩色光圈效果的具體代碼，供大家參考，具體內(nèi)容如下

研究了一個(gè)彩色光圈效果，感覺挺不錯(cuò)的，分享給大家，效果如下：

代碼如下：

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
 // 屏幕中的坐標(biāo)，以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中的，也就是說(shuō)，每個(gè)像素點(diǎn)的渲染都會(huì)調(diào)用這段代碼。

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

p表示把當(dāng)前的坐標(biāo)軸縮小到原來(lái)的1/2，原點(diǎn)移動(dòng)到屏幕中間，并把x,y軸的坐標(biāo)范圍縮小到1左右的值（即p的y軸范圍在-1到1之間，x軸的范圍也在附近）；

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

a表示p點(diǎn)繞原點(diǎn)的角度，范圍為[-π，π]；所以u(píng)v.x = a/tau的范圍為[-1/2, 1/2]；

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

c) xCol經(jīng)過(guò)上面處理，其范圍為[0,3]; 現(xiàn)在把這個(gè)范圍平均分成3份，每一份做一個(gè)顏色的混合：

[0,1]：Red和Green混合；[1,2]：Green和Blue混合；[2,3]：Blue和Red混合。

光圈的算法

a）畫光圈

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

知識(shí)：在shader中，如果color的值為負(fù)數(shù)，則認(rèn)為是0，不顯示該顏色。