緑内障エフェクトの仕組み

2つのSVGマスクで「どこをどれだけぼかすか」「どこを暗くするか」を定義し、WebGLで合成する。

黒 = 効果が強い
白 = 効果なし(正常視野)
ぼかし強度マップ 黒い部分ほどガウスぼかしが強くかかる。欠損マスクより範囲が約25%広い(ぼかしは欠損の外側にもにじむため)。
視野欠損マップ 黒い部分がそのまま暗い影としてピクセルに重畳される。左上(鼻側)が最も深く、中心視野は保たれる。
WebGL 合成パイプライン
  1. 元画像から6段階のガウスぼかしピラミッドを生成
  2. ぼかし強度マップの黒さに応じて、ピラミッドのどの段階を使うか決定
  3. 視野欠損マップの黒さに応じて、ピクセルを暗くする
  4. severity スライダーで全体の強度をスケール