shiyuan2.jpg
這篇濾鏡效果的實(shí)現(xiàn)是在上一篇分屏濾鏡的基礎(chǔ)上來進(jìn)行實(shí)現(xiàn)的，同樣的前提是可以利用GLSL加載一張正常的圖片。
縮放濾鏡
縮放濾鏡實(shí)際上基本的原理是可以通過修改頂點(diǎn)坐標(biāo)和紋理坐標(biāo)的對應(yīng)關(guān)系來實(shí)現(xiàn)放大縮小效果。
這個(gè)放大縮小的實(shí)現(xiàn)其實(shí)可以在頂點(diǎn)著色器中實(shí)現(xiàn)，也可以在片元著色器中實(shí)現(xiàn)。（注意：在運(yùn)行時(shí)，著色器代碼中最好不要有中文）
頂點(diǎn)著色器代碼：
// 頂點(diǎn)坐標(biāo)
attribute vec4 Position;
// 紋理坐標(biāo)
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
// 時(shí)間(通過uniform傳入一個(gè)時(shí)間Time)
uniform float Time;
const float PI = 3.1415926;
void main (void) {
// 一次縮放效果時(shí)長
float duration = 0.4;
// 最大縮放幅度
float maxAmplitude = 0.3;
// 表示時(shí)間周期
float time = mod(Time, duration);
// 縮放幅度 [1.0,1.3]
float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
// 頂點(diǎn)坐標(biāo)x/y 分別乘以放大系數(shù)[1.0,1.3]
gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
// 紋理坐標(biāo)
TextureCoordsVarying = TextureCoords;
}
實(shí)現(xiàn)效果：
縮放.gif
出竅濾鏡
靈魂出竅濾鏡的原理: 是兩個(gè)層的疊加，并且上面的那層隨著時(shí)間的推移，會(huì)逐漸放大且不透明度逐漸降低。這里也?到了放大的效果（基于縮放的原理），我們這次用片元著?器來實(shí)現(xiàn)該效果。
片元著色器代碼：
precision highp float;
// 紋理采樣器
uniform sampler2D Texture;
// 紋理坐標(biāo)
varying vec2 TextureCoordsVarying;
// 時(shí)間(通過uniform傳入一個(gè)時(shí)間Time)
uniform float Time;
void main (void) {
// 一次靈魂出竅效果的時(shí)長 1.0
float duration = 1.0;
// 透明度上限
float maxAlpha = 0.5;
// 放大圖片上限
float maxScale = 1.8;
// 進(jìn)度值[0,1]
float progress = mod(Time, duration) / duration; // 0~1
// 透明度范圍[0,0.5]
float alpha = maxAlpha * (1.0 - progress);
// 縮放比例[1.0,1.8]
float scale = 1.0 + (maxScale - 1.0) * progress;
// 放大紋理坐標(biāo)
// 根據(jù)放大比例，得到放大紋理坐標(biāo) [0,0],[0,1],[1,1],[1,0]
float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
// 放大紋理坐標(biāo)
vec2 weakTextureCoords = vec2(weakX, weakY);
// 獲取對應(yīng)放大紋理坐標(biāo)下的紋素(顏色值rgba)
vec4 weakMask = texture2D(Texture, weakTextureCoords);
// 原始的紋理坐標(biāo)下的紋素(顏色值rgba)
vec4 mask = texture2D(Texture, TextureCoordsVarying);
// 顏色混合 默認(rèn)顏色混合方程式 = mask * (1.0-alpha) + weakMask * alpha;
gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}
實(shí)現(xiàn)效果：
靈魂出竅.gif
可以看到這這個(gè)效果中，下面的那一層根本就沒有變化，只是上面的一層做了放大，以此來造成視覺上的偏差。
抖動(dòng)濾鏡
抖動(dòng)的過程中也是基于縮放的原理，而且它的顏色值產(chǎn)生一定的偏差。
抖動(dòng)效果: 顏?偏移 + 微弱的放大效果
片元著色代碼：
precision highp float;
// 紋理
uniform sampler2D Texture;
// 紋理坐標(biāo)
varying vec2 TextureCoordsVarying;
// 時(shí)間(通過uniform傳入一個(gè)時(shí)間Time)
uniform float Time;
void main (void) {
// 一次抖動(dòng)濾鏡的時(shí)長
float duration = 1.0;
// 放大圖片上限
float maxScale = 1.2;
// 顏色偏移步長
float offset = 0.02;
// 進(jìn)度[0,1]
float progress = mod(Time, duration) / duration;
// 顏色偏移值范圍[0,0.02]
vec2 offsetCoords = vec2(offset, offset) * progress;
// 縮放范圍[1.0-1.2];
float scale = 1.0 + (maxScale - 1.0) * progress;
// 放大紋理坐標(biāo).
vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
// 獲取3組顏色rgb
// 原始顏色+offsetCoords
vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
// 原始顏色-offsetCoords
vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
// 原始顏色
vec4 mask = texture2D(Texture, ScaleTextureCoords);
// 從3組來獲取顏色:
// maskR.r,mask.g,maskB.b 注意這3種顏色取值可以打亂或者隨意發(fā)揮.只是效果會(huì)有不一樣.
// mask.a 獲取原圖的透明度
gl_FragColor = vec4(mask.r, maskR.g, maskB.b, mask.a);
}
實(shí)現(xiàn)效果：
抖動(dòng).gif
閃白濾鏡
閃白濾鏡的原理: 在上層添加?色圖層 ,?色圖層的透明度隨著時(shí)間的變化而變化。
片元著色器代碼：
precision highp float;
// 紋理采樣器
uniform sampler2D Texture;
// 紋理坐標(biāo)
varying vec2 TextureCoordsVarying;
// 時(shí)間(通過uniform傳入一個(gè)時(shí)間Time)
uniform float Time;
void main (void) {
// 一次閃白濾鏡的時(shí)長
float duration = 0.5;
// 表示時(shí)間周期[0.0,0.5]
float time = mod(Time, duration);
// 白色顏色遮罩層
vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
// 振幅: (0.0,1.0)
float amplitude = abs(sin(time * (PI / duration)));
// 紋理坐標(biāo)對應(yīng)的紋素(RGBA)
vec4 mask = texture2D(Texture, TextureCoordsVarying);
// 利用混合方程式; 白色圖層 + 原始紋理圖片顏色 來進(jìn)行混合
gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}
實(shí)現(xiàn)效果：
閃白.gif
毛刺濾鏡
?刺濾鏡的原理: 撕裂 + 微弱的顏?偏移。
片元著色器代碼:
precision highp float;
// 紋理
uniform sampler2D Texture;
// 紋理坐標(biāo)
varying vec2 TextureCoordsVarying;
// 時(shí)間(通過uniform傳入一個(gè)時(shí)間Time)
uniform float Time;
// 隨機(jī)數(shù)
float rand(float n) {
//fract(x),返回x的小數(shù)部分?jǐn)?shù)據(jù)
return fract(sin(n) * 43758.5453123);
}
void main (void) {
// 最大抖動(dòng)
float maxJitter = 0.06;
// 一次毛刺濾鏡的時(shí)長
float duration = 0.5;
// 紅色顏色偏移量
float colorROffset = 0.01;
//綠色顏色偏移量
float colorGOffset = -0.02;
// 藍(lán)色顏色偏移量
float colorBOffset = -0.035;
// 時(shí)間周期[0.0,1.0];
float time = mod(Time, duration * 2.0);
// 振幅:[0,1];
float amplitude = max(sin(time * (PI / duration)), 0.0);
// 像素隨機(jī)偏移[-1,1]
float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
// 是否要做偏移.
bool needOffset = abs(jitter) < maxJitter * amplitude;
// 獲取紋理X值.根據(jù)needOffset，來計(jì)算它X撕裂.
// needOffset = YES，撕裂較大;
// needOffset = NO，撕裂較小.
float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
// 撕裂后的紋理坐標(biāo)x,y
vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
// 顏色偏移3組顏色
// 根據(jù)撕裂后獲取的紋理顏色值
vec4 mask = texture2D(Texture, textureCoords);
// 撕裂后的紋理顏色偏移
vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));
vec4 maskG = texture2D(Texture, textureCoords + vec2(colorGOffset * amplitude, 0.0));
vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
// 顏色部分發(fā)生撕裂.
gl_FragColor = vec4(maskR.r, maskG.g, maskB.b, mask.a);
}
實(shí)現(xiàn)效果：
毛刺.gif
毛刺效果具體的思路是：我們讓每一行像素隨機(jī)偏移 -1 ~ 1 的距離(這里的 -1 ~ 1 是對于紋理坐標(biāo)來說的)，但是如果整個(gè) 畫面都偏移?較大的值，那我們可能都看不出原來圖像的樣子。所以，設(shè)定?個(gè)閾值，?于這個(gè)閾值才進(jìn)行偏移，超過這個(gè)閾值則乘上?個(gè)縮小系數(shù)。
則最終呈現(xiàn)的效果是:絕?部分的行都會(huì)進(jìn)行微小的偏移，只有少量的行會(huì)進(jìn)行較?偏移。
