本文經過模仿抖音中幾種特效的實現，來說解 GLSL 的實際應用。html

前言

本文的靈感來自於《當一個 Android 開發玩抖音玩瘋了以後(二)》這篇文章。ios

這位博主在 Android 平臺上，經過本身的分析，嘗試還原了抖音上的幾種視頻特效。他是經過「部分 GLSL 代碼 + 部分 Java 代碼」的方式來實現的。git

讀完以後，在膜拜之餘，我產生了一個大膽的想法：我可不能夠在 iOS 上，只經過純 GLSL 的編寫，來實現相似的效果呢？github

很好的想法，不過，因爲抖音的特效是基於視頻的濾鏡，咱們在這以前只講到了關於圖片的渲染，若是立刻跳躍到視頻的部分，好像有點超綱了。markdown

因而，我又有了一個更大膽的想法：我可不能夠在 iOS 上，只經過純 GLSL 的編寫，在靜態的圖片上，實現相似的效果呢？ide

這樣的話，咱們就能夠把更多的注意力放在 GLSL 自己，而不是視頻的採集和輸出上面。函數

因而，就有了這篇文章。爲了無縫地過渡，我會沿用以前 GLSL 渲染的例子，只改變 Shader 部分的代碼，來嘗試還原那篇文章中實現的六種特效。oop

〇、動畫

你可能會問：抖音上的特效都是動態的，要怎麼把動態的效果，加到一個靜態的圖片上呢？動畫

問的好，因此第一步，咱們就要讓靜態的圖片動起來。ui

回想一下，咱們在 UIKit 中實現的動畫，無非就是把指令發送給 CoreAnimation，而後在屏幕刷新的時候，CoreAnimation 會去逐幀計算當前應該顯示的圖像。

這裏的重點是「逐幀計算」。在 OpenGL ES 中也是相似，咱們實現動畫的方式，就是本身去計算每一幀應該顯示的圖像，而後在屏幕刷新的時候，從新渲染。

這個「逐幀計算」的過程，咱們是放到 Shader 中進行的。而後咱們能夠經過一個表示時間的參數，在從新渲染的時候，傳入當前的時間，讓 Shader 計算出當前動畫的進度。至於從新渲染的時機，則是依靠 CADisplayLink 來實現的。

具體代碼大概像這樣：

self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeAction)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
複製代碼

- (void)timeAction {
    glUseProgram(self.program);
    glBindBuffer(GL_ARRAY_BUFFER, self.vertexBuffer);
    
    // 傳入時間
    CGFloat currentTime = self.displayLink.timestamp - self.startTimeInterval;
    GLuint time = glGetUniformLocation(self.program, "Time");
    glUniform1f(time, currentTime);

    // 清除畫布
    glClear(GL_COLOR_BUFFER_BIT);
    glClearColor(1, 1, 1, 1);
    
    // 重繪
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
    [self.context presentRenderbuffer:GL_RENDERBUFFER];
}
複製代碼

相應地，在 Shader 中有一個 uniform 修飾的 Time 參數：

uniform float Time;
複製代碼

這樣 Shader 就能夠經過 Time 來計算出當前應該顯示的圖像了。

1、縮放

一、最終效果

咱們要實現的第一種效果是「縮放」，看起來很簡單，能夠經過修改頂點座標和紋理座標的對應關係來實現。

這是一個很基礎的效果，在下面的其它特效中還會用到。修改座標的對應關係能夠經過修改頂點着色器，或者修改片斷着色器來實現。這裏先講修改頂點着色器的方式，在後面的特效中會再提一下修改片斷着色器的方式。

二、代碼實現

頂點着色器代碼：

attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;
    float maxAmplitude = 0.3;
    
    float time = mod(Time, duration);
    float amplitude = 1.0 + maxAmplitude * abs(sin(time * (PI / duration)));
    
    gl_Position = vec4(Position.x * amplitude, Position.y * amplitude, Position.zw);
    TextureCoordsVarying = TextureCoords;
}
複製代碼

這裏的 duration 表示一次縮放週期的時長，mod(Time, duration) 表示將傳入的時間轉換到一個週期內，即 time 的範圍是 0 ~ 0.6，amplitude 表示振幅，引入 PI 的目的是爲了使用 sin 函數，將 amplitude 的範圍控制在 1.0 ~ 1.3 之間，並隨着時間變化。

這裏放大的關鍵在於 vec4(Position.x * amplitude, Position.y * amplitude, Position.zw) ，咱們將頂點座標的 x 和 y 分別乘上一個放大係數，在紋理座標不變的狀況下，就達到了拉伸的效果。

2、靈魂出竅

一、最終效果

「靈魂出竅」看上去是兩個層的疊加，而且上面的那層隨着時間的推移，會逐漸放大且不透明度逐漸下降。這裏也用到了放大的效果，咱們此次用片斷着色器來實現。

二、代碼實現

片斷着色器代碼：

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
    float duration = 0.7;
    float maxAlpha = 0.4;
    float maxScale = 1.8;
    
    float progress = mod(Time, duration) / duration; // 0~1
    float alpha = maxAlpha * (1.0 - progress);
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    float weakX = 0.5 + (TextureCoordsVarying.x - 0.5) / scale;
    float weakY = 0.5 + (TextureCoordsVarying.y - 0.5) / scale;
    vec2 weakTextureCoords = vec2(weakX, weakY);
    
    vec4 weakMask = texture2D(Texture, weakTextureCoords);
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    gl_FragColor = mask * (1.0 - alpha) + weakMask * alpha;
}
複製代碼

首先是放大的效果。關鍵點在於 weakX 和 weakY 的計算，好比 0.5 + (TextureCoordsVarying.x - 0.5) / scale 這一句的意思是，將頂點座標對應的紋理座標的 x 值到紋理中點的距離，縮小必定的比例。此次咱們是改變了紋理座標，而保持頂點座標不變，一樣達到了拉伸的效果。

而後是兩層疊加的效果。經過上面的計算，咱們獲得了兩個紋理顏色值 weakMask 和 mask， weakMask 是在 mask 的基礎上作了放大處理。

咱們將兩個顏色值進行疊加須要用到一個公式：最終色 = 基色 * a% + 混合色 * (1 - a%) ，這個公式來自混合模式中的正常模式。

這個公式代表了一個不透明的層和一個半透明的層進行疊加，重疊部分的最終顏色值。所以，上面疊加的最終結果是 mask * (1.0 - alpha) + weakMask * alpha 。

3、抖動

一、最終效果

「抖動」是很經典的抖音的顏色偏移效果，其實這個效果實現起來還挺簡單的。另外，除了顏色偏移，能夠看到還有微弱的放大效果。

二、代碼實現

片斷着色器代碼：

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

void main (void) {
    float duration = 0.7;
    float maxScale = 1.1;
    float offset = 0.02;
    
    float progress = mod(Time, duration) / duration; // 0~1
    vec2 offsetCoords = vec2(offset, offset) * progress;
    float scale = 1.0 + (maxScale - 1.0) * progress;
    
    vec2 ScaleTextureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    vec4 maskR = texture2D(Texture, ScaleTextureCoords + offsetCoords);
    vec4 maskB = texture2D(Texture, ScaleTextureCoords - offsetCoords);
    vec4 mask = texture2D(Texture, ScaleTextureCoords);
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}
複製代碼

這裏的放大和上面相似，咱們主要看一下顏色偏移。顏色偏移是對三個顏色通道進行分離，而且給紅色通道和藍色通道添加了不一樣的位置偏移，代碼很容易看懂。

4、閃白

一、最終效果

「閃白」其實看起來一點兒也不酷炫，並且看久了還容易被閃瞎。這個效果實現起來也十分簡單，無非就是疊加一個白色層，而後白色層的透明度隨着時間不斷地變化。

二、代碼實現

片斷着色器代碼：

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

void main (void) {
    float duration = 0.6;
    
    float time = mod(Time, duration);
    
    vec4 whiteMask = vec4(1.0, 1.0, 1.0, 1.0);
    float amplitude = abs(sin(time * (PI / duration)));
    
    vec4 mask = texture2D(Texture, TextureCoordsVarying);
    
    gl_FragColor = mask * (1.0 - amplitude) + whiteMask * amplitude;
}
複製代碼

在上面「靈魂出竅」的例子中，咱們已經知道了如何實現兩個層的疊加。這裏咱們只須要建立一個白色的層 whiteMask，而後根據當前的透明度來計算最終的顏色值便可。

5、毛刺

一、最終效果

終於有了一個稍微複雜一點的效果，「毛刺」看上去是「撕裂 + 微弱的顏色偏移」。顏色偏移咱們在上面已經實現，這裏主要是講解撕裂的效果。

具體的思路是，咱們讓每一行像素隨機偏移 -1 ~ 1 的距離（這裏的 -1 ~ 1 是對於紋理座標來講的），可是若是整個畫面都偏移比較大的值，那咱們可能都看不出原來圖像的樣子。因此咱們的邏輯是，設定一個閾值，小於這個閾值才進行偏移，超過這個閾值則乘上一個縮小系數。

則最終呈現的效果是：絕大部分的行都會進行微小的偏移，只有少許的行會進行較大偏移。

二、代碼實現

片斷着色器代碼：

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;

float rand(float n) {
    return fract(sin(n) * 43758.5453123);
}

void main (void) {
    float maxJitter = 0.06;
    float duration = 0.3;
    float colorROffset = 0.01;
    float colorBOffset = -0.025;
    
    float time = mod(Time, duration * 2.0);
    float amplitude = max(sin(time * (PI / duration)), 0.0);
    
    float jitter = rand(TextureCoordsVarying.y) * 2.0 - 1.0; // -1~1
    bool needOffset = abs(jitter) < maxJitter * amplitude;
    
    float textureX = TextureCoordsVarying.x + (needOffset ? jitter : (jitter * amplitude * 0.006));
    vec2 textureCoords = vec2(textureX, TextureCoordsVarying.y);
    
    vec4 mask = texture2D(Texture, textureCoords);
    vec4 maskR = texture2D(Texture, textureCoords + vec2(colorROffset * amplitude, 0.0));
    vec4 maskB = texture2D(Texture, textureCoords + vec2(colorBOffset * amplitude, 0.0));
    
    gl_FragColor = vec4(maskR.r, mask.g, maskB.b, mask.a);
}
複製代碼

上面提到的像素隨機偏移須要用到隨機數，惋惜 GLSL 裏並無內置的隨機函數，因此咱們須要本身實現一個。

這個 float rand(float n) 的實現看上去很神奇，它實際上是來自這裏，江湖人稱「噪聲函數」。

它實際上是一個僞隨機函數，本質上是一個 Hash 函數。但在這裏咱們能夠把它當成隨機函數來使用，它的返回值範圍是 0 ~ 1。若是你對這個函數想了解更多的話能夠看這裏。

6、幻覺

一、最終效果

「幻覺」這個效果有點一言難盡，由於其實看上去並非很像。原來的效果是基於視頻上一幀的結果去合成，靜態的圖片很難模擬出這種狀況。無論怎麼說，既然已經盡力，不像就不像吧，下面講一下個人實現思路。

能夠看出這個效果是殘影和顏色偏移的疊加。

殘影的效果還好，在移動的過程當中，每通過一段時間間隔，根據當前的位置去建立一個新層，而且新層的不透明度隨着時間逐漸減弱。因而在一個移動週期內，能夠看到不少透明度不一樣的層疊加在一塊兒，從而造成殘影的效果。

而後是這個顏色偏移。咱們能夠看到，物體移動的過程是藍色在前面，紅色在後面。因此整個過程能夠理解成：在移動的過程當中，每間隔一段時間，遺失了一部分成色通道的值在原來的位置，而且這部分成色通道的值，隨着時間偏移，會逐漸恢復。

二、代碼實現

片斷着色器代碼：

precision highp float;

uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;

uniform float Time;

const float PI = 3.1415926;
const float duration = 2.0;

vec4 getMask(float time, vec2 textureCoords, float padding) {
    vec2 translation = vec2(sin(time * (PI * 2.0 / duration)),
                            cos(time * (PI * 2.0 / duration)));
    vec2 translationTextureCoords = textureCoords + padding * translation;
    vec4 mask = texture2D(Texture, translationTextureCoords);
    
    return mask;
}

float maskAlphaProgress(float currentTime, float hideTime, float startTime) {
    float time = mod(duration + currentTime - startTime, duration);
    return min(time, hideTime);
}

void main (void) {
    float time = mod(Time, duration);
    
    float scale = 1.2;
    float padding = 0.5 * (1.0 - 1.0 / scale);
    vec2 textureCoords = vec2(0.5, 0.5) + (TextureCoordsVarying - vec2(0.5, 0.5)) / scale;
    
    float hideTime = 0.9;
    float timeGap = 0.2;
    
    float maxAlphaR = 0.5; // max R
    float maxAlphaG = 0.05; // max G
    float maxAlphaB = 0.05; // max B
    
    vec4 mask = getMask(time, textureCoords, padding);
    float alphaR = 1.0; // R
    float alphaG = 1.0; // G
    float alphaB = 1.0; // B
    
    vec4 resultMask = vec4(0, 0, 0, 0);
    
    for (float f = 0.0; f < duration; f += timeGap) {
        float tmpTime = f;
        vec4 tmpMask = getMask(tmpTime, textureCoords, padding);
        float tmpAlphaR = maxAlphaR - maxAlphaR * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaG = maxAlphaG - maxAlphaG * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
        float tmpAlphaB = maxAlphaB - maxAlphaB * maskAlphaProgress(time, hideTime, tmpTime) / hideTime;
     
        resultMask += vec4(tmpMask.r * tmpAlphaR,
                           tmpMask.g * tmpAlphaG,
                           tmpMask.b * tmpAlphaB,
                           1.0);
        alphaR -= tmpAlphaR;
        alphaG -= tmpAlphaG;
        alphaB -= tmpAlphaB;
    }
    resultMask += vec4(mask.r * alphaR, mask.g * alphaG, mask.b * alphaB, 1.0);

    gl_FragColor = resultMask;
}
複製代碼

從代碼的行數能夠看出，這個效果應該是裏面最複雜的。爲了實現殘影，咱們先讓圖片隨時間作圓周運動。

vec4 getMask(float time, vec2 textureCoords, float padding) 這個函數能夠計算出，在某個時刻圖片的具體位置。經過它咱們能夠每通過一段時間，去生成一個新的層。

float maskAlphaProgress(float currentTime, float hideTime, float startTime) 這個函數能夠計算出，某個時刻建立的層，在當前時刻的透明度。

maxAlphaR 、 maxAlphaG 、 maxAlphaB 分別指定了新層初始的三個顏色通道的透明度。由於最終的效果是殘留紅色，因此主要保留了紅色通道的值。

而後是疊加，和兩層疊加的狀況相似，這裏經過 for 循環來累加每一層的每一個通道乘上自身的透明度的值，算出最終的顏色值 resultMask 。

注：在 iOS 的模擬器上，只能用 CPU 來模擬 GPU 的功能。因此在模擬器上運行上面的代碼時，可能會十分卡頓。尤爲是最後這個效果，因爲計算量太大，親測模擬器顯示不出來。所以若是要跑代碼，最好使用真機運行。

源碼

請到 GitHub 上查看完整代碼。

參考

當一個 Android 開發玩抖音玩瘋了以後(二)

獲取更佳的閱讀體驗，請訪問原文地址【Lyman's Blog】在 iOS 中使用 GLSL 實現抖音特效