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