2025.10.31

Github:

https://github.com/sakkom/portfolio-kuhu/tree/main/app/kuhu/mosaic

EffectComposerでピクセル化シェーダー


    precision mediump float;

    uniform sampler2D tDiffuse;
    uniform vec2 uResolution;
    uniform float uPixelSize;

    in vec2 vUv;

    vec2 mosaic(vec2 pixelCoord, float uPixelSize) {
      vec2 index = floor(pixelCoord / uPixelSize);
      vec2 coord = index * uPixelSize;
      return coord;
    }

    void main() {
      vec2 uv = vUv;
      vec2 mosaicCoord = mosaic(uv * uResolution, uPixelSize);
      uv = mosaicCoord / uResolution;
      gl_FragColor  = texture2D(tDiffuse, uv);
    }
  

PostProcessingでモザイク処理をした。具体的な数値を代入して理解に努めた。
10*10のピクセル座標を想定しuPixelSizeを5すると、0 <= x < 5 で0, 5 <= x < 10で1になる。 たとえば(5, 10)のときは(1, 2)になる。乗算してピクセル座標に変換するのはその区間の色を取得するためである。たとえば(5, 10), (6, 10)は元の画像の(1, 10)の色を参照。
最後にピクセル座標でピクセル化したものをuv座標に変換しレンダリング。