課程介紹
本節介紹如何改變改變片元著色器內的坐標位置參數，從而讓渲染的內容動起來或者達到一些特殊的效果。
實現講解
本節課的核心原理是修改采樣的紋理坐標。
這是之前課程中的紋理坐標圖，紋理默認傳入的讀取范圍是(0,0)到(1,1)的范圍內讀取顏色值。
如果對讀取的位置進行調整修改，那么就可以做出各種各樣的效果。比如縮放動畫，讓讀取的范圍改成(-1, -1)到(2, 2)。
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);
}
另外一個是限定紋理的采樣范圍：
if (offsetTexCoord.x >= 0.0 && offsetTexCoord.x <= 1.0 &&
offsetTexCoord.y >= 0.0 && offsetTexCoord.y <= 1.0) {}
這樣子就可以控制超過了(0, 0)到(1, 1)范圍的就不繪制。否則位移濾鏡就會出現下面的效果：
之所以會這樣子的效果，是因為紋理采樣的環繞方式問題。這里補充下《紋理繪制》章節沒有講解到的這個知識點。
上圖展示了超過(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())
}
}
縮放濾鏡和平移濾鏡的思路差不多，也需要限制紋理采樣的范圍。那么講解下縮放的計算。
再貼一次紋理坐標圖：
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)
}
}
這個效果可能你會困惑這個濾鏡這么丑，有什么用？嗯，是需要換個素材來解釋下會比較好。這時候，需要來個小公舉~
而通過使用部分克隆濾鏡，就可以得到兩個帥氣的小公舉。
周杰倫看到這個效果，都會說：“哎喲，不錯哦！”
回歸正題，講解這個濾鏡的邏輯：
效果實現
需求：當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內跑，沒有提供打日志的地方，所以，如果想要調試效果，可以通過自己改變畫面的內容來驗證自己的思路。比如符合某個條件，畫面都是某個固定顏色。
- 如果GLSL編譯不通過，是有日志的：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.
這個表示了第14行百分號%使用錯誤，導致了編譯有問題。嗯，取余還是用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
其他
- 本系列課程目錄詳見 簡書 - Android OpenGL ES教程規劃
- 參考資料見Android OpenGL ES學習資料所列舉的博客、資料。
?GitHub工程?
本系列課程所有相關代碼請參考我的GitHub項目?GLStudio?，喜歡的請給個小星星。??
