位置濾鏡介紹
本節介紹如何改變改變片元着色器內的座標位置參數，從而讓渲染的內容動起來或者達到一些特殊的效果。git
位置濾鏡效果
github
實現講解
本節課的核心原理是修改採樣的紋理座標。這是以前課程中的紋理座標圖，紋理默認傳入的讀取範圍是 (0,0) 到 (1,1) 的範圍內讀取顏色值。web
ST紋理座標微信
若是對讀取的位置進行調整修改，那麼就能夠作出各類各樣的效果。好比縮放動畫，讓讀取的範圍改爲 (-1, -1) 到 (2, 2)。app
1. 位移濾鏡
/**
* 位移濾鏡
*
* @author Benhero
* @date 2019-1-17
*/
class TranslateFilter(context: Context) : BaseFilter(context, VERTEX_SHADER, FRAGMENT_SHADER) {
companion object {
const val FRAGMENT_SHADER = """
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_TextureUnit;
uniform float xV;
uniform float yV;
vec2 translate(vec2 srcCoord, float x, float y) {
return vec2(srcCoord.x + x, srcCoord.y + y);
}
void main() {
vec2 offsetTexCoord = translate(v_TexCoord, xV, yV);
if (offsetTexCoord.x >= 0.0 && offsetTexCoord.x <= 1.0 &&
offsetTexCoord.y >= 0.0 && offsetTexCoord.y <= 1.0) {
gl_FragColor = texture2D(u_TextureUnit, offsetTexCoord);
}
}
"""
}
private var xLocation: Int = 0
private var yLocation: Int = 0
private var startTime: Long = 0
override fun onCreated() {
super.onCreated()
startTime = System.currentTimeMillis()
xLocation = getUniform("xV")
yLocation = getUniform("yV")
}
override fun onDraw() {
super.onDraw()
val intensity = Math.sin((System.currentTimeMillis() - startTime) / 1000.0) * 0.5
GLES20.glUniform1f(xLocation, intensity.toFloat())
GLES20.glUniform1f(yLocation, 0.0f)
}
}
這個濾鏡的核心有兩個部分,一個是對紋理座標的改變：編輯器
vec2 translate(vec2 srcCoord, float x, float y) {
return vec2(srcCoord.x + x, srcCoord.y + y);
}
另一個是限定紋理的採樣範圍：ide
if (offsetTexCoord.x >= 0.0 && offsetTexCoord.x <= 1.0 &&
offsetTexCoord.y >= 0.0 && offsetTexCoord.y <= 1.0) {}
這樣子就能夠控制超過了 (0, 0) 到( 1, 1) 範圍的就不繪製。不然位移濾鏡就會出現下面的效果：學習
位移動畫-無限制flex
之因此會這樣子的效果，是由於紋理採樣的環繞方式問題。這裏補充下《紋理繪製》章節沒有講解到的這個知識點。動畫
紋理環繞方式 - 圖源自LearnOpenGLCN
上圖展現了超過 (0, 0) 到 (1, 1) 範圍時，設置不一樣環繞方式的效果。在默認狀況下，系統會採用 GL_REPEAT 模式。
若是咱們想要位移濾鏡運動只有1只皮卡丘，那麼能夠設置 GL_CLAMP_TO_BORDER 模式。
可是呢！
這個模式，在 Android OpenGL ES 2.0 版本是沒有的，只有等到了 Android 24 版本，也就是 7.0 版本，Android OpenGL ES 3.2 的版本才引入的，詳情能夠參考API文檔。
講了一圈回來，要實現這個屬性的效果，只能咱們自行判斷紋理座標採樣範圍的來控制繪製實現。
不過，如有更好的實現方式，請告訴我。
2. 縮放濾鏡
/**
* 縮放濾鏡
*
* @author Benhero
* @date 2019-1-16
*/
class ScaleFilter(context: Context) : BaseFilter(context, VERTEX_SHADER, FRAGMENT_SHADER) {
companion object {
const val FRAGMENT_SHADER = """
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_TextureUnit;
uniform float intensity;
vec2 scale(vec2 srcCoord, float x, float y) {
return vec2((srcCoord.x - 0.5) / x + 0.5, (srcCoord.y - 0.5) / y + 0.5);
}
void main() {
vec2 offsetTexCoord = scale(v_TexCoord, intensity, intensity);
if (offsetTexCoord.x >= 0.0 && offsetTexCoord.x <= 1.0 &&
offsetTexCoord.y >= 0.0 && offsetTexCoord.y <= 1.0) {
gl_FragColor = texture2D(u_TextureUnit, offsetTexCoord);
}
}
"""
}
private var intensityLocation: Int = 0
private var startTime: Long = 0
override fun onCreated() {
super.onCreated()
startTime = System.currentTimeMillis()
intensityLocation = getUniform("intensity")
}
override fun onDraw() {
super.onDraw()
val intensity = Math.abs(Math.sin((System.currentTimeMillis() - startTime) / 1000.0)) + 0.5
GLES20.glUniform1f(intensityLocation, intensity.toFloat())
}
}
縮放濾鏡和平移濾鏡的思路差很少，也須要限制紋理採樣的範圍。那麼講解下縮放的計算。再貼一次紋理座標圖：
ST紋理座標
vec2 scale(vec2 srcCoord, float x, float y) {
return vec2((srcCoord.x - 0.5) / x + 0.5, (srcCoord.y - 0.5) / y + 0.5);
}
代碼中，參數 srcCoord 是本來的紋理座標，也就是 (0, 0) 到 (1, 1) 範圍內取值。參數x、y 分別是兩個方向的縮放比例。
因此，要讓圖片變小成原來的二分之一，那麼就須要讓紋理的採樣範圍變大爲原來的2倍。
因爲這個縮放的中心點在圖的中心，是 0.5 ，因此能夠先計算當前片元距離中心點的距離，而後再進行拉伸指定的倍數，也就是 (srcCoord.x - 0.5) / x 的意義，最後再加上0.5，就是這個片元縮放後，距離中心點的距離。
3. 徹底克隆濾鏡
/**
* 徹底分身克隆濾鏡
*
* @author Benhero
* @date 2019/1/18
*/
class CloneFullFilter(context: Context) : BaseFilter(context, VERTEX_SHADER, FRAGMENT_SHADER) {
companion object {
const val FRAGMENT_SHADER = """
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_TextureUnit;
uniform float cloneCount;
void main() {
gl_FragColor = texture2D(u_TextureUnit, v_TexCoord * cloneCount);
}
"""
}
override fun onCreated() {
super.onCreated()
GLES20.glUniform1f(getUniform("cloneCount"), 3.0f)
}
}
徹底克隆濾鏡
這個濾鏡的實現，是利用了紋理採樣的環繞方式實現，如效果圖中，將採樣的範圍改成(0, 0)到(3, 3)。
須要補充的是向量的計算方式的知識：
vec2(x, y) * z = vec(x * z, y * z);
4. 部分克隆濾鏡
/**
* 部分克隆濾鏡
*
* @author Benhero
* @date 2019/1/18
*/
class ClonePartFilter(context: Context) : BaseFilter(context, VERTEX_SHADER,
TextResourceReader.readTextFileFromResource(context, R.raw.filter_test)) {
companion object {
const val FRAGMENT_SHADER = """
precision mediump float;
varying vec2 v_TexCoord;
uniform sampler2D u_TextureUnit;
uniform float isVertical;
uniform float isHorizontal;
uniform float cloneCount;
void main() {
vec4 source = texture2D(u_TextureUnit, v_TexCoord);
float coordX = v_TexCoord.x;
float coordY = v_TexCoord.y;
if (isVertical == 1.0) {
float width = 1.0 / cloneCount;
float startX = (1.0 - width) / 2.0;
coordX = mod(v_TexCoord.x, width) + startX;
}
if (isHorizontal == 1.0) {
float height = 1.0 / cloneCount;
float startY = (1.0 - height) / 2.0;
coordY = mod(v_TexCoord.y, height) + startY;
}
gl_FragColor = texture2D(u_TextureUnit, vec2(coordX, coordY));
}
"""
}
override fun onCreated() {
super.onCreated()
GLES20.glUniform1f(getUniform("isVertical"), 1.0f)
GLES20.glUniform1f(getUniform("isHorizontal"), 1.0f)
GLES20.glUniform1f(getUniform("cloneCount"), 3.0f)
}
}
部分克隆濾鏡
這個效果可能你會困惑這個濾鏡這麼醜，有什麼用？嗯，是須要換個素材來解釋下會比較好。這時候，須要來個小公舉~
Jay
而經過使用部分克隆濾鏡，就能夠獲得兩個帥氣的小公舉。
部分克隆濾鏡-Jay
周杰倫看到這個效果，都會說：「哎喲，不錯哦！」
迴歸正題，講解這個濾鏡的邏輯：
需求：當X方向上須要克隆N個圖片，那麼在原圖中心取原圖大小的 N 分之一，粘貼複製。
計算：上圖克隆 2 份的效果，那麼須要在原圖中心的裁處中心區域，原圖大小爲 1920*1440 ，也就是須要裁出 960×1440 的區域。
那麼是從哪裏開始裁纔是中心點呢？應該是 (1920 - 960) / 2 = 480 的位置做爲x方向上的起始點。
同理，須要裁 N 份，須要的參數以下：
顯示區域大小：DisplayWidth = Width / N;
裁剪的起始點：startX = (Width - DisplayWidth) / 2;
GLSL 分析
在片斷着色器中的，關鍵的代碼以下：
float width = 1.0 / cloneCount;
float startX = (1.0 - width) / 2.0;
coordX = mod(v_TexCoord.x, width) + startX;
在上面咱們已經分析過前面兩行的計算原理，那麼第三行，須要先介紹 mod 這個方法，是取餘的做用，在 GLSL 中不可使用 Kotlin、Java 中的百分號 % 來表明取餘的意思，須要用 mod 這個方法。
mod(v_TexCoord.x, width) 計算出了當前每一個片斷的座標點，在重複的片斷中的座標，再加上 startX 就能夠將原始座標轉換出克隆片斷的座標。
GLSL 日誌
講解到這裏，讀者應該多多少少寫了一些 GLSL 代碼了，不過在過程當中可能會遇到一些Bug，不明白怎麼哪裏就黑屏了，什麼東西都沒展現，因此這裏講解下如何看日誌。
本身打 Log，是不可能的！這個搜索過，直接 Debug 的方式是沒有的，由於GLSL 在 GPU 內跑，沒有提供打日誌的地方，因此，若是想要調試效果，能夠經過本身改變畫面的內容來驗證本身的思路。好比符合某個條件，畫面都是某個固定顏色。
若是 GLS 編譯不經過，是有日誌的：Adreno|GLConsumer，在 Logcat 上加上這個 Tag 就能夠看到一些編譯信息。
編譯錯誤示範：
2019-01-19 15:07:43.979 20637-20672/com.benhero.glstudio I/Adreno: ERROR: 0:14: '%' : supported in pack/unpack shaders only
ERROR: 0:14: '%' : wrong operand types no operation '%' exists that takes a left-hand operand of type 'float' and a right operand of type 'float' (or there is no acceptable conversion)
ERROR: 2 compilation errors. No code generated.
這個表示了第1 4 行百分號 % 使用錯誤，致使了編譯有問題。嗯，取餘仍是用mod吧。
更多GLSL的方法，請看-GLSL 中文手冊。
編譯正確示範：
2019-01-19 15:21:15.817 21155-21187/? I/Adreno: QUALCOMM build : 8e3df98, Ie4790512f3
Build Date : 04/11/18
OpenGL ES Shader Compiler Version: EV031.22.00.01
Local Branch :
Remote Branch : quic/gfx-adreno.lnx.1.0.r36-rel
Remote Branch : NONE
Reconstruct Branch : NOTHING
GitHub工程
https://github.com/benhero/GLStudio
做者：Benhero
連接：https://www.jianshu.com/p/87ccc9bfa362
-- END --
進技術交流羣，掃碼添加個人微信：Byte-Flow
獲取視頻教程和源碼
推薦：
FFmpeg + OpenGL ES 實現 3D 全景播放器
FFmpeg + OpenGLES 實現視頻解碼播放和視頻濾鏡
以爲不錯，點個在看唄~
本文分享自微信公衆號 - 字節流動（google_developer）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。