課程介紹
本節(jié)介紹如何改變改變片元著色器內(nèi)的坐標(biāo)位置參數(shù)，從而讓渲染的內(nèi)容動(dòng)起來或者達(dá)到一些特殊的效果搁进。
實(shí)現(xiàn)講解
本節(jié)課的核心原理是修改采樣的紋理坐標(biāo)顺又。
這是之前課程中的紋理坐標(biāo)圖泣崩，紋理默認(rèn)傳入的讀取范圍是(0,0)到(1,1)的范圍內(nèi)讀取顏色值少梁。
如果對(duì)讀取的位置進(jìn)行調(diào)整修改，那么就可以做出各種各樣的效果矫付。比如縮放動(dòng)畫凯沪，讓讀取的范圍改成(-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)
}
}
這個(gè)濾鏡的核心有兩個(gè)部分,一個(gè)是對(duì)紋理坐標(biāo)的改變：
vec2 translate(vec2 srcCoord, float x, float y) {
return vec2(srcCoord.x + x, srcCoord.y + y);
}
另外一個(gè)是限定紋理的采樣范圍：
if (offsetTexCoord.x >= 0.0 && offsetTexCoord.x <= 1.0 &&
offsetTexCoord.y >= 0.0 && offsetTexCoord.y <= 1.0) {}
這樣子就可以控制超過了(0, 0)到(1, 1)范圍的就不繪制买优。否則位移濾鏡就會(huì)出現(xiàn)下面的效果：
之所以會(huì)這樣子的效果妨马，是因?yàn)榧y理采樣的環(huán)繞方式問題樟遣。這里補(bǔ)充下《紋理繪制》章節(jié)沒有講解到的這個(gè)知識(shí)點(diǎn)。
上圖展示了超過(0, 0)到(1, 1)范圍時(shí)身笤，設(shè)置不同環(huán)繞方式的效果豹悬。在默認(rèn)情況下，系統(tǒng)會(huì)采用GL_REPEAT模式液荸。
如果我們想要位移濾鏡運(yùn)動(dòng)只有1只皮卡丘瞻佛，那么可以設(shè)置GL_CLAMP_TO_BORDER模式。
但是呢娇钱！
這個(gè)模式伤柄，在Android OpenGL ES 2.0版本是沒有的，只有等到了Android 24版本文搂，也就是7.0版本适刀，Android OpenGL ES 3.2的版本才引入的，詳情可以參考API文檔煤蹭。
講了一圈回來笔喉，要實(shí)現(xiàn)這個(gè)屬性的效果，只能我們自行判斷紋理坐標(biāo)采樣范圍的來控制繪制實(shí)現(xiàn)硝皂。
不過常挚，若有更好的實(shí)現(xiàn)方式，請(qǐng)告訴我稽物。
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())
}
}
縮放濾鏡和平移濾鏡的思路差不多奄毡，也需要限制紋理采樣的范圍。那么講解下縮放的計(jì)算贝或。
再貼一次紋理坐標(biāo)圖：
vec2 scale(vec2 srcCoord, float x, float y) {
return vec2((srcCoord.x - 0.5) / x + 0.5, (srcCoord.y - 0.5) / y + 0.5);
}
代碼中吼过，參數(shù)srcCoord是原本的紋理坐標(biāo)，也就是(0, 0)到(1, 1)范圍內(nèi)取值咪奖。參數(shù)x盗忱、y分別是兩個(gè)方向的縮放比例。所以赡艰，要讓圖片變小成原來的二分之一售淡，那么就需要讓紋理的采樣范圍變大為原來的2倍斤葱。(對(duì)于這句話理解很重要慷垮，如果想不通的，可以回顧下第七節(jié)課關(guān)于紋理坐標(biāo)和頂點(diǎn)坐標(biāo)的映射關(guān)系)
由于這個(gè)縮放的中心點(diǎn)在圖的中心揍堕，是0.5料身，所以可以先計(jì)算當(dāng)前片元距離中心點(diǎn)的距離，然后再進(jìn)行拉伸指定的倍數(shù)衩茸，也就是(srcCoord.x - 0.5) / x的意義芹血，最后再加上0.5，就是這個(gè)片元縮放后，距離中心點(diǎn)的距離幔烛。
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)
}
}
這個(gè)濾鏡的實(shí)現(xiàn)啃擦，是利用了紋理采樣的環(huán)繞方式實(shí)現(xiàn)，如效果圖中饿悬，將采樣的范圍改為(0, 0)到(3, 3)令蛉。
需要補(bǔ)充的是向量的計(jì)算方式的知識(shí)：
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)
}
}
這個(gè)效果可能你會(huì)困惑這個(gè)濾鏡這么丑，有什么用狡恬？嗯珠叔，是需要換個(gè)素材來解釋下會(huì)比較好。這時(shí)候弟劲，需要來個(gè)小公舉~
而通過使用部分克隆濾鏡祷安，就可以得到兩個(gè)帥氣的小公舉。
周杰倫看到這個(gè)效果兔乞，都會(huì)說：“哎喲汇鞭，不錯(cuò)哦！”
回歸正題庸追，講解這個(gè)濾鏡的邏輯：
效果實(shí)現(xiàn)
需求：當(dāng)X方向上需要克隆N個(gè)圖片虱咧，那么在原圖中心取原圖大小的N分之一，粘貼復(fù)制锚国。
計(jì)算：上圖克隆2份的效果腕巡，那么需要在原圖中心的裁處中心區(qū)域，原圖大小為1920*1440血筑，也就是需要裁出960×1440的區(qū)域绘沉。那么是從哪里開始裁才是中心點(diǎn)呢？應(yīng)該是(1920 - 960) / 2 = 480的位置作為x方向上的起始點(diǎn)豺总。
同理车伞，需要裁N份，需要的參數(shù)如下：
- 顯示區(qū)域大杏髟：DisplayWidth = Width / N;
- 裁剪的起始點(diǎn)：startX = (Width - DisplayWidth) / 2;
GLSL分析
在片段著色器中的另玖，關(guān)鍵的代碼如下：
float width = 1.0 / cloneCount;
float startX = (1.0 - width) / 2.0;
coordX = mod(v_TexCoord.x, width) + startX;
在上面我們已經(jīng)分析過前面兩行的計(jì)算原理，那么第三行表伦，需要先介紹mod這個(gè)方法谦去，是取余的作用，在GLSL中不可以使用Kotlin蹦哼、Java中的百分號(hào)%來代表取余的意思鳄哭，需要用mod這個(gè)方法。
mod(v_TexCoord.x, width)計(jì)算出了當(dāng)前每個(gè)片段的坐標(biāo)點(diǎn)纲熏，在重復(fù)的片段中的坐標(biāo)妆丘，再加上startX就可以將原始坐標(biāo)轉(zhuǎn)換出克隆片段的坐標(biāo)锄俄。(示意圖就不放上來了，解釋到這里勺拣，讀者可自己畫一下圖就明白這整個(gè)濾鏡的計(jì)算方式了)
GLSL日志
講解到這里奶赠，讀者應(yīng)該多多少少寫了一些GLSL代碼了，不過在過程中可能會(huì)遇到一些Bug药有，不明白怎么哪里就黑屏了车柠，什么東西都沒展示，所以這里講解下如何看日志塑猖。
- 自己打Log竹祷，是不可能的！這個(gè)搜索過羊苟，直接Debug的方式是沒有的塑陵，因?yàn)镚LSL在GPU內(nèi)跑，沒有提供打日志的地方蜡励，所以令花，如果想要調(diào)試效果，可以通過自己改變畫面的內(nèi)容來驗(yàn)證自己的思路凉倚。比如符合某個(gè)條件兼都，畫面都是某個(gè)固定顏色。
- 如果GLSL編譯不通過稽寒，是有日志的：Adreno|GLConsumer扮碧，在Logcat上加上這個(gè)Tag就可以看到一些編譯信息。
編譯錯(cuò)誤示范：
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.
這個(gè)表示了第14行百分號(hào)%使用錯(cuò)誤杏糙，導(dǎo)致了編譯有問題慎王。嗯，取余還是用mod吧宏侍。
更多GLSL的方法赖淤，請(qǐng)看-GLSL 中文手冊(cè)。
編譯正確示范：
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
其他
- 本系列課程目錄詳見 簡(jiǎn)書 - Android OpenGL ES教程規(guī)劃
- 參考資料見Android OpenGL ES學(xué)習(xí)資料所列舉的博客谅河、資料咱旱。
?GitHub工程?
本系列課程所有相關(guān)代碼請(qǐng)參考我的GitHub項(xiàng)目?GLStudio?，喜歡的請(qǐng)給個(gè)小星星绷耍。??
