【GLSL】モザイク除去装置を作りたい

/*
* シェーダーに渡すデータ
*/
const uniforms = {
  uResolution: {value: [0, 0]}, // ウィンドウの幅と高さ
  uMouse: {value: [0, 0]}, // マウス座標
  uTexture0: {value: null} // テクスチャ
};

/*
* 初期化
*/
function init(fov, aspRatio) {

  // オフスクリーンレンダリングには欠かせないレンダーターゲットを作ります
  renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);

  // レンダラーを作ります
  webGLRenderer = new THREE.WebGLRenderer();
  webGLRenderer.setSize(window.innerWidth, window.innerHeight);  
  document.getElementById("screen").appendChild(webGLRenderer.domElement);

  // =======================
  // ベースとなるシーンの設定
  // =======================
  scene = new THREE.Scene();  
  camera = new THREE.PerspectiveCamera(fov, aspRatio, 1, 10000);

  // ベースとなるシーンには板ポリ１枚だけしかありません
  // シェーダーを使うのでShaderMaterialを使います
  const geo = new THREE.PlaneGeometry(2, 2); // 板ポリをウィンドウぴったりにするために２×２
  const mat = new THREE.ShaderMaterial({
    uniforms: uniforms, // シェーダーに渡すデータ
    vertexShader: document.getElementById('vs').textContent, // 頂点シェーダー
    fragmentShader: document.getElementById('fs').textContent, // フラグメントシェーダー
    glslVersion: THREE.GLSL3,
    side: THREE.DoubleSide
  });
  const plane = new THREE.Mesh(geo, mat);
  scene.add(plane);

  // =========================================
  // オフスクリーン(メモリ)に描き込むシーンの設定
  // =========================================
  offScene = new THREE.Scene(fov, aspRatio);
  offCamera = new THREE.PerspectiveCamera(fov, aspRatio, 1, 10000);
  offCamera.position.set(0, 0, 5);
  
  // あらかじめ読み込んでおいた3Dモデル(original)から女の子(五十嵐景子)を作ります
  keiko = original.clone();
  keiko.position.set(0, 0, 0);
  offScene.add(keiko);

  // ライトを２種類作ります
  const ambientLight = new THREE.AmbientLight(0xaaaaaa);
  offScene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
  directionalLight.position.set(-1, 2, 2);
  offScene.add(directionalLight);

  // =====================
  // イベントリスナーの設定
  // =====================
  window.addEventListener("resize", resizeWindow);
  window.addEventListener("mousemove", mouseMove);

  // ====
  // 描画
  // ====
  renderScene();
}

/*
* マウス座標を取得(-1~1で正規化)
*/
function mouseMove(e) {
  mx = (e.offsetX * 2 - window.innerWidth) / Math.min(window.innerWidth, window.innerHeight);
  my = -(e.offsetY * 2 - window.innerHeight) / Math.min(window.innerWidth, window.innerHeight);
}

/*
* 描画
*/
function renderScene() {

  requestAnimationFrame(renderScene);

  // ===========================
  // 五十嵐景子をくるくる回します
  // ===========================
  count++;
  rad = utils.getRad(count % 360);
  keiko.rotation.set(rad, rad, rad);
  
  // ==================================
  // オフスクリーン(メモリ)に描き込みます
  // ==================================
  webGLRenderer.setRenderTarget(renderTarget); // レンダラーにレンダーターゲットをセットします
  webGLRenderer.setClearColor(0xf5f542); // 背景色
  webGLRenderer.render(offScene, offCamera); // オフスクリーン用のシーンとカメラをセットしてメモリに描き込みます

  // ================================
  // シェーダーに渡すデータを更新します
  // ================================
  uniforms.uResolution.value = [window.innerWidth, window.innerHeight]; // ウィンドウの幅と高さ
  uniforms.uMouse.value = [mx, my]; // マウス座標
  uniforms.uTexture0.value = renderTarget.texture; // オフスクリーンに描き込んだものをテクスチャとしてシェーダーに渡します

  // =========================
  // ベースシーンを描き込みます
  // =========================
  webGLRenderer.setRenderTarget(null); // レンダーターゲットを解除します
  webGLRenderer.setClearColor(0x000000); // 背景色(今回は無くてもいい)
  webGLRenderer.render(scene, camera); // ベース用のシーンとカメラをセットしてディスプレイ(canvas)に描き込みます
}

<!-- 頂点シェーダー -->
<script id="vs" type="x-shader/x-vertex">
  precision mediump float;

  out vec2 vUv;

  void main(void) {
    vUv = uv; // フラグメントシェーダーにテクスチャ座標を渡す
    gl_Position = vec4(position, 1.0); // 座標変換しない
  }
</script>

<!-- フラグメントシェーダー -->
<script id="fs" type="x-shader/x-fragment">
  precision mediump float;

  uniform vec2 uResolution; // ウィンドウの幅と高さ
  uniform vec2 uMouse; // マウス座標
  uniform sampler2D uTexture0; // オフスクリーン(メモリ)に描き込んだテクスチャ
  in vec2 vUv; // テクスチャ座標
  out vec4 fragColor; // 最終的なピクセルの色

  void main(void) {

    // 色をつけるピクセルの座標を正規化(-1~1)します
    vec2 p = (gl_FragCoord.xy * 2.0 - uResolution) / min(uResolution.x, uResolution.y);

    // モザイク係数を作ります
    float mosaic = (1.0 - step(0.3, length(p - uMouse))) * max(uResolution.x, uResolution.y) + 50.0;

    // モザイク係数を使ってテクスチャ座標を変換します(ここでモザイク加工をしています)
    vec2 uv = floor(vUv * mosaic) / mosaic;

    // テクスチャから色を取り出してピクセルの色とします
    fragColor = texture(uTexture0, uv);
    
  }
</script>

// モザイク係数をテクスチャ座標を変換します(ここでモザイク加工をしています)
vec2 uv = floor(vUv * mosaic) / mosaic;

vec2 uv = floor(vUv * 40.0) / 40.0;

vec2 uv = floor(vUv * 100.0) / 100.0;

vec2 uv = floor(vUv * 40.0) / 40.0;

// モザイク係数を作ります
float mosaic = (1.0 - step(0.3, length(p - uMouse))) * max(uResolution.x, uResolution.y) + 50.0;

float mosaic;
if (length(p - uMouse) >= 0.3) {
  mosaic = 50.0;
} else {
  mosaic = max(uResolution.x, uResolution.y);
}