OpenGL Shader實現簡單轉場效果詳解
轉場介紹
轉場效果常出現再視頻剪輯當中，用于銜接兩段視頻片段切換的過渡效果。轉場常常在兩個場景切換中去使用達到酷炫特效的作用。
那么如何在glsl中去實現轉場效果？其實轉場效果可以理解成兩個紋理對象切換的過程。首先提前條件需要兩個紋理對象，然后在這兩個紋理對象上去實現紋理和紋理之間的切換。
漸變轉場
通過mix函數混合兩個紋理圖像，使用time在[0,1]之間不停變化來控制第二個圖片紋理混合的強弱變化從而實現漸變效果。
#define time iTime
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec4 texture1 = texture(iChannel1,uv);
vec4 texture2 = texture(iChannel2,uv);
float progress = abs(sin(time));
gl_FragColor = mix(texture1,texture2,progress);
}切換轉場
切換動畫和漸變動畫同樣是使用mix函數來實現效果的。同時結合step函數來判斷當前的progress值是否大于uv.x來控制當前繪制紋理是第一個還是第二個從而實現紋理卷簾位移效果。這里是采用了mix和step兩個函數相結合來實現動畫效果，同樣的采用if-else也能夠達到相同目的但是之前有提到過在glsl中最好優(yōu)先考慮使用內置函數來實現效果，減少使用if-else判斷語句。
x軸切換
#define time iTime
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec4 texture1 = texture(iChannel1,uv);
vec4 texture2 = texture(iChannel2,uv);
float progress = abs(sin(time));
gl_FragColor = mix(texture1,texture2,step(uv.x,progress));
}
y軸切換
#define time iTime
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec4 texture1 = texture(iChannel1,uv);
vec4 texture2 = texture(iChannel2,uv);
float progress = abs(sin(time));
gl_FragColor = mix(texture1,texture2,step(uv.y,progress));
}
對角線切換
對角線切換實現同樣也是mix和step函數相結合，利用對角線對齊特性x-y=0的特點，當progress值到達0則切換到第二個紋理圖像。
#define time iTime
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec4 texture1 = texture(iChannel1,uv);
vec4 texture2 = texture(iChannel2,uv);
float progress = sin(time);
gl_FragColor = mix(texture1,texture2,step(uv.x - uv.y, - progress));
}
位移轉場
切換轉場效果是底部紋理位置不動，上層紋理做覆蓋來實現的。位移轉場是兩個紋理對象不重疊，像是類似輪播圖的效果，實現效果是同時向著一個方向移動。位移動畫對整體紋理做偏移處理，通過progress的值來分配第一個紋理和第二個紋理的占比。
x軸位移
#define time iTime
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec2 newUv = uv;
float progress = abs(sin(time));
vec4 texture3;
newUv.x -= progress;
if(uv.x >= progress){
texture3 = texture(iChannel1,newUv);
}else{
texture3 = texture(iChannel2,newUv);
}
gl_FragColor = texture3;
}
y軸位移
#define time iTime
void main() {
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec2 newUv = uv;
float progress = abs(sin(time));
vec4 texture3;
newUv.y -= progress;
if(uv.y >= progress){
texture3 = texture(iChannel1,newUv);
}else{
texture3 = texture(iChannel2,newUv);
}
gl_FragColor = texture3;
}
到此這篇關于OpenGL Shader實現簡單轉場效果詳解的文章就介紹到這了,更多相關OpenGL Shader轉場效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Android UI仿QQ好友列表分組懸浮效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了Android滑動事件沖突，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了Android 調用WCF實例詳解的相關資料,這里提供了實例代碼及實現效果圖，需要的朋友可以參考下2016-11-11
Android基于zxing的二維碼（網格）掃描 仿支付寶網格掃描
這篇文章主要為大家詳細介紹了Android基于zxing的二維碼網格掃描，仿支付寶網格掃描，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了Android實現頁面跳轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了性能分析工具Systrace的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本篇文章主要介紹了Android 列表形式的切換的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例
這篇文章主要介紹了Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實例,這兩個子控件一般被用作添加標題,在實際效果上并不是那么好控制,使用的時候需要謹慎,需要的朋友可以參考下2016-06-06
本篇文章主要介紹了Android自定義滾動選擇器實例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了android 屏幕橫豎切換詳解的相關資料,需要的朋友可以參考下2016-11-11