今天組合幾個先前介紹過的部分：

• Fragment Shader 畫圓
• 遮罩、Uniform
• PixiJS 濾鏡

實作： PixiJS 圓形淡入效果

1- 在 Shadertoy 裡畫圓：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv = fragCoord/iResolution.xy;
    uv -= 0.5;
    uv.x *= iResolution.x / iResolution.y;

    bool uDebugMode = false;
    float uRadius = 0.5;
    float uSmooth = 0.1;
    float d = length(uv);
    
    float c = smoothstep(uRadius, uRadius-uSmooth, d);
    
    fragColor = vec4(vec3(c), 1.0);
}

2- Debug 模式：

雖然非必要，但我想做 Debug 模式 (也方便說明)
當 uDebugMode 是 true 的時候，右邊遮罩為全白

在 Shadertoy 裡的實作：

其中有三個變數會透過 JavaScript 傳入：

• bool uDebugMode = false; // Debug 用
• float uRadius = 0.5; // 遮罩半徑
• float uSmooth = 0.1; // 遮罩柔邊半徑

float c = smoothstep(uRadius, uRadius-uSmooth, d);　// 剛剛的畫圈

float mask = 0.;
if( debugMode == true){
  if(uv.x >= 0. ){
    mask = 1.;
  }else{
    mask = c;
  }
}else{
  mask = c;
}  

• 定義 float mask 的遮罩(類似 Photoshop 裡的 遮色片 的概念)：
  由於遮罩只需要 黑白 一個色版，使用 float 就可

Debug 模式時右半邊全白，左邊為原本的圓形：

if(uv.x >= 0. ){
  mask = 1.;
}else{
  mask = c;
}

uv.x 的位置已調整過，uv.x >= 0. 就是畫面右半邊的意思

註： Shader 裡判斷 等於 是 ==，不是 ===

遮罩

圖片與遮罩：
與先前相同，在 iChannel0 選了圖片後，
輸出時使用圖片 乘 遮罩，運算出最後的結果

vec4 texture_pic = texture(iChannel0, uv);
fragColor = vec4(texture_pic) * mask;

回到 PixiJS：

Debug 使用以前介紹過的 dat.GUI
介紹文：使用 dat.GUI 工具除錯

var gui = new dat.GUI();
effectController = {
  DebugMode: uDebugMode,
  Smooth: uSmooth
};
gui.add( effectController, 'DebugMode' ).onChange( modeChange );
gui.add( effectController, 'Smooth', 0, 1, 0.01 ).onChange( smoothChange );
function modeChange(){
  uDebugMode = effectController.DebugMode;
  //...
};
function smoothChange(){
  uSmooth = effectController.Smooth;
  //...
};

將有變化的 uDebugMode 與 uSmooth 再帶進 Fragment Shader 裡，
就能控制 Debug 模式的 開/關 、柔邊遮罩的半徑了

背景變化：

另一個透過 JavaScript 帶給 Fragment Shader 的值是 uRadius

TweenMax.to(this, 4,{tweenValue:1, repeat:-1, ease:Strong.easeOut, onUpdate:function(){
		uRadius = this.target.tweenValue;
	},onRepeat:function(){
		// change BG
	}
});

動畫本身使用 TweenMax 控制背景變換
淡入動態使用 TweenMax 更新 uRadius 並帶入 Fragment Shader

畫面上同時有兩個背景:
一個是舊的背景
一個是淡入的背景
舊背景一直在下方，當 TweenMax Repeat 時，
原本淡入的新背景會變成舊背景，另一個新背景在上層淡入出現
濾鏡只需套在 新背景 上即可

如果不是 WebGL 的情況，
要做到類似模糊遮罩的效果，運算上可能會叫吃較能

在 PixiJS 裡，調整 uv 的方式有點麻煩，
PixiJS v4 與 v5 裡的寫法也不太相同，本篇沒列到細節