SwiftでAnimation PNGを仕様から作成してみた

Example
https://gist.github.com/mbotsu/817c96b9a31901ec392fc8ba1389902a

Transcript

1. SwiftでAnimation PNGを 仕様から作成してみた インフォコム株式会社 技術企画室
2. 目次 • 自己紹介 • 対象ユーザー • 開発に至る理由 ◦ 用途、問題点 ◦ Apple標準関数 • APNGを仕様から作成する ◦ PNGファイルフォーマット ◦ APNGファイルフォーマット ◦ コード分解 • まとめ
3. 自己紹介 • 所属: インフォコム株式会社 技術企画室 • 最近はこんなことをしてます。 ◦ AMED採択プロジェクトでスマートフォンアプリの開発 ▪ https://www.infocom.co.jp/ja/news/news2022060801.html その他にも他社とのデータ分析の協力やその活用法の模索等をやっています。
4. プレゼンの対象となるユーザー • APNGを作成するApple標準関数に不満がある ◦ PNGのファイルサイズを減らしたい ▪ 24bit PNGを作りたい ▪ 圧縮したい ◦ 大きな（画素数やフレーム数の多い） Animation PNGを作りたい
5. 開発に至る理由: どのような用途でAPNGを利用したいか • フレーム毎の分析データの可視化への利用（数百フレーム〜ある） • スプレッドシートの１行とフレームの１行を並べて比較したい
6. 開発に至る理由: どのような問題から開発に至ったか 評価データ: 275フレーム x フルHDサイズ(1920x1080) x 50色のAnimation PNGを Appleの標準関数で作成すると端末のピーク時のメモリが 1GBになる
7. APNGを作成する為のApple標準関数 https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/ImageIOGuide/ikpg_dest/ikpg_dest.html
8. APNGを作成する為のApple標準関数 • 追加した画像をバッファする為、多くのメモリを消費する • 圧縮サイズの指定もできない 以上からApple標準関数でAPNGを作るのは悩ましい。 CGImageのTrueColorは32bitの 画像データに限定 URLを渡してもストリームで書 き込むわけではない
9. APNGを仕様から作成する
10. PNGファイルフォーマット PNGはファイルシグネチャーと3つのチャンクで構成 PNGであることを示す 16進数の固定値が入る
11. Animation PNG(APNG)ファイルフォーマット PNGの仕様に3つの補助チャンクを追加した PNG拡張 • acTL: Animation Control ◦ フレーム数、ループ数 • fcTL: Frame Control ◦ シーケンス番号を持っており、フレームの 前に付ける。0から始まる。 ▪ 画像のサイズ ▪ 画像のオフセット ▪ フレームレート(分子/分母) • fdAT: Frame Data ◦ IDATにシーケンス番号を付与した画像 データ フレーム数に応じ て繰り返す
12. 実際のコード
13. 今回作るAnimation PNGの要件定義 • True Color 24bit PNG • 画像は1フレーム1枚、オフセットは使わない • フレームレートは固定
14. はじめに: Byte, Binary データへのエンコード PNGはバイナリデータで記述する必要がある UInt32(4byte)、UInt16(2byte)は10進数のUInt8(1byte)に置 き換えた後にバイナリコード (Data型)に変換している
15. 24bitのPNGを作成する 今回はPNGを扱うライブラリとしてOpenCVを利用します。 サンプルコードでは3フレームの移動する円の書き出しです。
16. コード: 初期化 PNGであることを示す16進数の固定値 Animation Control フレーム数、ループ数を設定 Image Header 画像のサイズや色深度、カラータ イプ等のヘッダ情報を含む 8: 8bit、2: True Color Frame Control フレームレートの設定 ・delayNum, 分子: numerator ・delayDen, 分母: denominator
17. チャンクの作成 チャンクはパターン化できる 1. frameCountとloopCountを結合してChunkDataを作成 2. ChunkTypeとChunkDataを結合 3. ChankDataから求めたLengthと２と２から求めたCRCを結合 ① ② ③
18. コード: フレームへの画像の追加 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ 1. 引数: opencvで作成した画像 2. PNGに圧縮したバイナリデータを作成 3. signature(8)、IHDR(25)、IEND(12)を取り除いた IDATを作成 4. initで作成したfcTLにシーケンス番号を追加した チャンクを作成 5. 1フレーム目をストリームに出力 6. 1フレーム目以降をストリームに出力 7. IDATをブロックサイズ(8204)毎に分割 8. シーケンスを加算し、 fdATのチャンクを作成して ストリームに出力
19. opencv: imencodeの出力するPNG imencodeで出力すると、 IDATのChunkDataは8192byteのBlockSizeに分割して出力 3つに分割された場合、 3つ目には残りのデータ が入る
20. シーケンスナンバーの数え方 同じシーケンス番号を持つfcTLチャンクとfdATチャンクが 同居してはいけない
21. まとめ • SwiftでのAPNGの実装について話ました ◦ Apple標準関数では ▪ True Color 24bit Imageを作成できない ▪ 圧縮にも非対応 ▪ ストリーム出力にも非対応 ◦ 自作することで ▪ True Color 24bit に対応 ▪ 圧縮に対応 ▪ ストリーム出力にも対応 APNGは実装コード量も少なく、 ライブラリに困った時には自作もありではないでしょうか。
22. References • PNGファイルフォーマット ◦ https://www.setsuki.com/hsp/ext/png.htm • APNGの構造とRubyでの読み書き ◦ https://nacl-ltd.github.io/2016/12/08/apng-and-ruby.html 今回のコードはこちらで公開しています https://gist.github.com/mbotsu/817c96b9a31901ec392fc8ba1389902a
23. ご静聴ありがとうございました