本記事は WebGL Advent Calendar 2017 の12月21日向けに投稿した記事です。 前書き こんにちは、猫です。 普段はWebGLを使ってイケイケなグラフィックを作ることを試みています。できません。 最近では、Datamosh・JPEG風エフェクト・Pixelsortなどのグリッチ表現をシェーダで実装して「これリアルタイムだぜーすごいだろー」と映像勢に自慢することにハマっています。 今回はその中でも一番説明が楽な納得できる結果が得られた、DCTを用いたJPEG風シェーダについて書いてみます。 見た目・デモ せっかくなので画像やWebCamで使えるようにしました。 (悲報: fms-cat.com、httpsじゃないからWebCam使えない) 概要 JPEGの圧縮に用いられている、YCbCr変換・DCT・量子化を行うことにより、JPEG風の画像劣化をエフェクトとしてリアル