西安网络公司网站建设网站媒体推广方案

一.效果图

二.设计思路 

1.特征分析

• 中心点在屏幕正中心
• 亮度从中间到四周逐渐变暗
• 正中间的光源有一定的大小属性，超过边缘后才开始渐变

2.重点思路 

 找到一种衰减方案，衰减速度符合光线衰减规律的那种

3.方案

3.1方案一（反函数）

 y = k / x 曲线（k是常数）

y = 1 / x 曲线

曲线有几个特点，

• 当x处于[0,k]时，y的值都大于1，
• 斜率（不考虑正负）逐渐变小

当 x处于[0,k]时因为y的值都大于1，可以把它当做颜色值，因为颜色的值区间是[0,1]当大于1时会当做1处理，适合用于光源处的渲染，当x大于k时值小于1且不断变小，可以用于颜色的逐渐减淡效果

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{vec3 c;float l;// 把坐标规范化为[0,1]vec2 uv, p = fragCoord/iResolution.xy;uv=p;   // 把坐标范围变为[-.5, .5]p-=.5;// p的x坐标考虑屏幕宽高比p.x *= iResolution.x/iResolution.y;// 距离场：p到原点的距离。距离作为颜色返回l = length(p);// 采用一个循环为颜色的rgb赋值for(int i=0;i<3;i++) {c[i] =0.05/l;}fragColor = vec4(c,0.5);
}

3.2方案二（指数衰减 ）

y = 

y = exp(x) 曲线

这个曲线一般选取在x小于0的情况下 ，刚开始比较平缓，然后衰减速度不断加大，对应当屏幕中点离中心点越远衰减的就越快。

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{vec3 c;float l;// 把坐标规范化为[0,1]vec2 uv, p = fragCoord/iResolution.xy;uv=p;   // 把坐标范围变为[-.5, .5]p-=.5;// p的x坐标考虑屏幕宽高比p.x *= iResolution.x/iResolution.y;// 距离场：p到原点的距离。距离作为颜色返回l = length(p);// 光源大小参数const float LIGHT_SIZE = 0.05;float decay1 = exp(-l * 5.0) + smoothstep(LIGHT_SIZE , LIGHT_SIZE - 0.02, l);// 采用一个循环为颜色赋值for(int i=0;i<3;i++) {c[i] = decay1;}fragColor = vec4(c,iTime);
}