OpenGL shader 實現(xiàn)“百葉窗”特效

動態(tài)圖

代碼及詳解：

代碼很簡單，讓我們直接來看代碼和注釋

varying?vec2?texcoord;

//?uniform?float?iGlobalTime;
//?uniform?vec2?iResolution;

#define?PI?3.1415926f
#define?PIx2?2.*PI
#define?PI_HALF?PI/2.

#iChannel0?"file://./yeah_0.jpg"
#iChannel1?"file://./yeah.jpg"

void?main()
{
????vec2?uv?=?gl_FragCoord.xy?/?iResolution.xy;
????float?sinDegree?=?sin(PI_HALF?*?iTime);?///
????float?sinDegreeOffset?=?sinDegree?*?.1;??

????vec4?firstColor?=?texture2D(iChannel0,?uv);
????vec4?secondColor?=?texture2D(iChannel1,?uv);

????gl_FragColor?=?firstColor;

????///?@note?繪制多條?“線”
????float?alpha?=?0.,?beta?=?0.,?gamma?=?0.;
????for?(float?offset?=?0.0?;?offset?2.2;?offset?+=?0.2)
????{
????????///?@note?y?方向上平移?offset?得到新的線條,?公式?y?=?-x?+?offset;
????????float?tmp?=?-uv.x?+?offset;?

????????///?@note?在兩條線之間（隨時間開合）的區(qū)間
????????if?(uv.y?>?(tmp?-?sinDegreeOffset)?&&?uv.y?????????{
????????????gl_FragColor?=?secondColor;
????????}
????}
}

核心設(shè)計思想為

其中 y = -x + offset 的函數(shù)圖如下所示

接著通過調(diào)節(jié) sinDegreeOffset 控制兩條線之間所夾的區(qū)域進行 “開閉”

原文鏈接: https://juejin.cn/post/7059024333565329444

作者：ShaderJoy