CNNまるでわからん，jojonkiです．CNNを扱う上でReceptive field（受容野）を正しく認識することは，CNNを設計するにあたって非常に重要です（ということを最近認識しました）．モデルの表現力が足りない，そんなときReceptive fieldを確認してみるのもよいでしょう．
ただ多段のCNNで組まれたプログラムを見てもReceptive fieldが直感的にわかるには私には経験不足，ということで可視化するツールをWebアプリをGithub pagesで作ってみました．
１次元CNNのカーネル，ストライド，パディング，ディレーションを指定して可視化できます．最後段のレイヤーの注目データ（赤色のブロック）から最初の入力データに矢印をたどっている色を塗っている領域がReceptive fieldです．Receptive fieldを大きくするためには，カーネルサイズを大きくしても良いですが，計算量が増えるのでストライドやディレーションを挟むことで非常に大きなReceptive fieldを得ることができます．
// コードも公開しているので何かバグを発見した方はissueでご連絡いただけると嬉しいです．
作るにあたって参考にしたページ（興味のある人向け）
Receptive fieldの理解には視覚的な理解が大事だと思うのですが，あまり視覚的に説明してくれるサイトは多くありません（だってビジュアル作るの面倒ですもんね）．ただ下記のサイトはReceptive fieldを自分の設計したCNNに応じて可視化してくれます．私が作ったページでも大いに参考にさせていただきました．Receptive fieldの計算だけならこのページだけで良いのですが，CNN越しのビジュアルイメージも欲しかったので今回のものを作りました．
Receptive Field Calculator, Fomoro AI
そもそもCNNや先程でてきた用語がよくわかない？という方はこちらのCNNの解説が参考になると思います．アニメーションもあり素敵です．
github.com
Receptive fieldの勉強に関しては，Googleエンジニアの方のブログで勉強にしました．こちらもよく引用されています．
もとの系列データのサイズに合わせて可視化することでReceptive fieldがわかりやすくなっています．Receptive fieldの計算式に関しては覚えるものではないので，手元で図を書きながら納得感を持って導けるとよいです．式の導出イメージは人によって違うと思うので自分なりの解釈で良いと思います．またこのブログはディレーションを考慮していないのですが，Receptive field計算式の第２項（前レイヤーのReceptive field両側に対する計算）にディレーションを乗算すれば実現できます（jojonkiの該当コード）．
medium.com
下記はReceptive fieldの話ではないのですが，Checkerboard Artifactsという問題を可視化しているページです．カーネルやストライドを変えることでこの現象が発生する様子を可視化できるツールで非常に素晴らしいです．
distill.pub
