本案例的目的是理解如何用GLSL實現分屏（2/3/4/6/9）濾鏡
案例的效果圖如下
準備工作
自定義著色器
完成無分屏濾鏡的著色器代碼
- 頂點著色器
attribute vec4 Position;
attribute vec2 TextureCoords;
varying vec2 TextureCoordsVarying;
void main(){
gl_Position = Position;
TextureCoordsVarying = TextureCoords;
}
- 片元著色器
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main(){
vec4 mask = texture2D(Texture, TextureCoordsVarying);
gl_FragColor = vec4(mask.rgb, 1.0);
}
視圖控制器類
在實現分屏濾鏡之前，首先要呈現一個最原始的圖片，即無濾鏡效果的圖片，大致流程如下
主要分為3部分
- setupFilterBar函數:底部濾鏡滾動條
- filterInit函數：濾鏡處理初始化
- startFilterAnimation函數：濾鏡動畫
濾鏡動畫的入口有兩個：- viewDidLoad函數 --> filterInit函數 --> shader加載 & 編譯 & program使用 --> 調用startFilterAnimation函數
- 當切換底部FilterBar時 --> 選中某一個分屏效果 --> 對應一組shader文件 --> shader加載 & 編譯 & program使用 --> 調用startFilterAnimation函數
setupFilterBar函數
主要是添加自定義的濾鏡滾動條，利用collectionView實現底部自定義滾動視圖，這部分內容不多做說明，如果有疑問，可以參考文末完整demo
filterInit函數
主要是實現無分屏濾鏡效果時的圖片顯示，實現流程如下
根據圖示，分為以下幾部分
-
setupContext函數：設置上下文
image -
setupLayer函數：創建layer & 綁定渲染和幀緩存區
image -
setupVertexData函數：設置頂點數據 & 頂點緩存區
image -
setupTexture函數：圖片解壓縮 & 加載紋理
image 設置視口
-
setupNormalShaderProgram函數：設置默認著色器，即無分屏效果的著色器
image
以上幾部分的代碼，在之前的OpenGL ES案例中均有涉及，這里這不展開說明了，詳情可以參考文末完整代碼
分屏濾鏡實現
分屏濾鏡的實現主要還是分屏算法，而分屏算法主要是在片元著色器中main函數中完成的，所以切換不同分屏效果主要需要改動以下幾部分內容
新建一組shader文件，頂點著色器文件無任何變化，片元著色器文件的main函數中增加相應分屏算法的代碼
-
視圖控制器類中增加FilterBar的數據源數據，并增加其item的點擊事件，新增加載對應著色器文件的函數，類似于
setupNormalShaderProgram函數，只需要修改著色器文件的名稱即可image
下面分別說明下不同分屏效果的分屏算法的實現
二分屏
這里的二分屏是上下分別顯示圖片中間的一半，其算法如圖所示
當實現二分屏濾鏡時，圖片紋理坐標的x值是沒有任何變化的，主要是y值變化
- 當 y 在[0, 0.5]范圍時，屏幕的（0，0）坐標需要對應圖片的（0，0.25），所以y = y+0.25
- 當 y 在[0.5, 1]范圍時，屏幕的（0，0.5）坐標需要對應圖片的（0，0.25），所以y = y-0.25
片元著色器中main函數的分屏算法代碼如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
float y;
if (uv.y >= 0.0 && uv.y <= 0.5) {
y = uv.y + 0.25;
}else{
y = uv.y - 0.25;
}
gl_FragColor = texture2D(Texture, vec2(uv.x, y));
}
三分屏
三分屏的顯示是屏幕三等分，分別顯示圖片中部分三分之一圖片，其實現原理如下
當實現三分屏濾鏡時，圖片紋理坐標的x值是沒有任何變化的，主要是y值變化
- 當 y 在[0, 1/3]范圍時，屏幕的（0，0）坐標需要對應圖片的（0，1/3），所以y = y+1/3
- 當 y 在[1/3, 2/3]范圍時，屏幕的（0，1/3）坐標需要對應圖片的（0，1/3），所以y 不變
- 當 y 在[2/3, 1]范圍時，屏幕的（0，2/3）坐標需要對應圖片的（0，1/3），所以y = y-1/3
片元著色器中main函數的分屏算法代碼如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
if (uv.y < 1.0/3.0) {
uv.y = uv.y + 1.0/3.0;
}else if (uv.y > 2.0/3.0){
uv.y = uv.y - 1.0/3.0;
}
gl_FragColor = texture2D(Texture, uv);
}
四分屏
四分屏的顯示是屏幕四等分，分別顯示縮小的紋理圖片，其實現原理如下
紋理圖片與屏幕的映射既可以是一致的坐標，也可以映射到縮小的坐標，如上圖所示。
當實現四分屏時，紋理坐標x、y均需要變化，且屏幕坐標需要與紋理坐標一一映射，例如（x，y）取值（0.5，0.5）需要映射到紋理坐標（1，1）時，x、y均需要乘以2，即0.5 * 2 = 1，變化規則如下：
- 當 x 在[0, 0.5]范圍時，x = x*2
- 當 x在[0.5, 1]范圍時，x = (x-0.5)*2
- 當 y 在[0, 0.5]范圍時，y = y*2
- 當 y 在[0.5, 1]范圍時，y = (y-0.5)*2
片元著色器中main函數的分屏算法代碼如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
if (uv.x <= 0.5) {
uv.x = uv.x * 2.0;
}else{
uv.x = (uv.x - 0.5) * 2.0;
}
if (uv.y <= 0.5) {
uv.y = uv.y * 2.0;
}else{
uv.y = (uv.y - 0.5) * 2.0;
}
gl_FragColor = texture2D(Texture, uv);
}
六分屏
六分屏是二分屏的演變，其實現原理如下
當實現六分屏時，紋理坐標x、y均需要變化，其變化規則如下：
- 當 x 在[0, 1/3]范圍時，x = x+1/3
- 當 x 在[1/3, 2/3]范圍時，x 不變
- 當 x 在[2/3, 1]范圍時，x = x-1/3
- 當 y 在[0, 0.5]范圍時，y = y+0.25
- 當 y 在[0.5, 1]范圍時，y = y-0.24
片元著色器中main函數的分屏算法代碼如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
if (uv.x <= 1.0/3.0) {
uv.x = uv.x + 1.0/3.0;
}else if (uv.x >= 2.0/3.0){
uv.x = uv.x - 1.0/3.0;
}
if (uv.y <= 0.5) {
uv.y = uv.y + 0.25;
}else{
uv.y = uv.y - 0.25;
}
gl_FragColor = texture2D(Texture, uv);
}
九分屏
九分屏是4分屏的演變，其實現原理如下
當實現九分屏時，紋理坐標x、y均需要變化，其變化規則如下：
- 當 x 在[0, 1/3]范圍時，x = x*3
- 當 x 在[1/3, 2/3]范圍時，x = (x-1/3)*3
- 當 x 在[2/3, 1]范圍時，x = (x-2/3)*3
- 當 y 在[0, 1/3]范圍時，y= y*3
- 當 y 在[1/3, 2/3]范圍時，y = (y-1/3)*3
- 當 y在[2/3, 1]范圍時，y = (y-2/3)*3
片元著色器中main函數的分屏算法代碼如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
if (uv.x <= 1.0/3.0) {
uv.x = uv.x * 3.0;
}else if (uv.x >= 2.0/3.0){
uv.x = (uv.x - 2.0/3.0) * 3.0;
}else{
uv.x = (uv.x - 1.0/3.0)*3.0;
}
if (uv.y <= 1.0/3.0) {
uv.y = uv.y * 3.0;
}else if (uv.y >= 2.0/3.0){
uv.y = (uv.y - 2.0/3.0) * 3.0;
}else{
uv.y = (uv.y - 1.0/3.0)*3.0;
}
gl_FragColor = texture2D(Texture, uv);
}
