首先智袭，我們觀察抖音的幻覺濾鏡变抽，可以看到有兩個過程組成础拨。主紋理以及上一幀紋理組成，主紋理經(jīng)過LUT顏色映射得到绍载。如果拍攝的視頻是靜態(tài)的诡宗，則由于上一幀和當前主紋理是圖像是一樣的，那樣整個畫面就重疊了击儡，此時是看不出幻覺效果的塔沃，只有LUT顏色映射之后的圖像效果。我們了解了整個過程的構建曙痘，接下來我們來看看如何實現(xiàn)：
1芳悲、拿上一幀與主圖像進行混合：
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputTexture; // 當前輸入紋理
uniform sampler2D inputTextureLast; // 上一次的紋理
// 分RGB通道混合，不同顏色通道混合值不一樣
const lowp vec3 blendValue = vec3(0.1, 0.3, 0.6);
void main() {
// 當前紋理顏色
vec4 currentColor = texture2D(inputTexture, textureCoordinate);
// 上一輪紋理顏色
vec4 lastColor = texture2D(inputTextureLast, textureCoordinate);
// 將兩者混合
gl_FragColor = vec4(mix(lastColor.rgb, currentColor.rgb, blend), currentColor.w);
}
備注：這里對RGB通道使用不同的值進行線性混合得到边坤，這里可以任意自己調(diào)整
2名扛、LUT映射函數(shù)
我們可以看到圖像是經(jīng)過濾鏡處理得到的，這個過程我們采用一個lut濾鏡進行處理茧痒，加載lut函數(shù)如下：
vec4 getLutColor(vec4 textureColor, sampler2D lookupTexture) {
mediump float blueColor = textureColor.b * 63.0;
mediump vec2 quad1;
quad1.y = floor(floor(blueColor) / 8.0);
quad1.x = floor(blueColor) - (quad1.y * 8.0);
mediump vec2 quad2;
quad2.y = floor(ceil(blueColor) / 8.0);
quad2.x = ceil(blueColor) - (quad2.y * 8.0);
highp vec2 texPos1;
texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
highp vec2 texPos2;
texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
lowp vec4 newColor1 = texture2D(lookupTexture, texPos1);
lowp vec4 newColor2 = texture2D(lookupTexture, texPos2);
lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
vec4 color = vec4(newColor.rgb, textureColor.w);
return color;
}
3肮韧、經(jīng)過顏色映射之后，我們得到最終的fragment shader，如下所示：
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputTexture; // 當前輸入紋理
uniform sampler2D inputTextureLast; // 上一次的紋理
uniform sampler2D lookupTable; // 顏色查找表紋理
// 分RGB通道混合弄企，不同顏色通道混合值不一樣
const lowp vec3 blendValue = vec3(0.1, 0.3, 0.6);
// 計算lut映射之后的顏色值
vec4 getLutColor(vec4 textureColor, sampler2D lookupTexture) {
mediump float blueColor = textureColor.b * 63.0;
mediump vec2 quad1;
quad1.y = floor(floor(blueColor) / 8.0);
quad1.x = floor(blueColor) - (quad1.y * 8.0);
mediump vec2 quad2;
quad2.y = floor(ceil(blueColor) / 8.0);
quad2.x = ceil(blueColor) - (quad2.y * 8.0);
highp vec2 texPos1;
texPos1.x = (quad1.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos1.y = (quad1.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
highp vec2 texPos2;
texPos2.x = (quad2.x * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.r);
texPos2.y = (quad2.y * 0.125) + 0.5/512.0 + ((0.125 - 1.0/512.0) * textureColor.g);
lowp vec4 newColor1 = texture2D(lookupTexture, texPos1);
lowp vec4 newColor2 = texture2D(lookupTexture, texPos2);
lowp vec4 newColor = mix(newColor1, newColor2, fract(blueColor));
vec4 color = vec4(newColor.rgb, textureColor.w);
return color;
}
void main() {
// 當前紋理顏色
vec4 currentColor = texture2D(inputTexture, textureCoordinate);
// 上一輪紋理顏色
vec4 lastColor = texture2D(inputTextureLast, textureCoordinate);
// lut映射的顏色值
vec4 lutColor = getLutColor(currentColor, lookupTable);
// 將lut映射之后的紋理與上一輪的紋理進行線性混合
gl_FragColor = vec4(mix(lastColor.rgb, lutColor.rgb, blendValue ), currentColor.a);
}
4超燃、綁定紋理。我們需要對紋理進行綁定拘领，操作如下：
@Override
public void onDrawFrameBegin() {
super.onDrawFrameBegin();
// 綁定上一次紋理
GLES30.glActiveTexture(GLES30.GL_TEXTURE1);
GLES30.glBindTexture(getTextureType(), mLastTexture);
GLES30.glUniform1i(mLastTextureHandle, 1);
// 綁定lut紋理
GLES30.glActiveTexture(GLES30.GL_TEXTURE2);
GLES30.glBindTexture(getTextureType(), mLookupTable);
GLES30.glUniform1i(mLastTextureHandle, 2);
}
/**
* 設置上一次紋理id
* @param lastTexture
*/
public void setLastTexture(int lastTexture) {
mLastTexture = lastTexture;
}
/**
* 設置lut紋理id
* @param lookupTableTexture
*/
public void setLookupTable(int lookupTableTexture) {
mLookupTable = lookupTableTexture;
}
