Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
SwiftでAnimation PNGを仕様から作成してみた
Search
Manabu Otsu
February 27, 2023
Programming
1
250
SwiftでAnimation PNGを仕様から作成してみた
Example
https://gist.github.com/mbotsu/817c96b9a31901ec392fc8ba1389902a
Manabu Otsu
February 27, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
2
2.1k
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
9
5.5k
Ruby製社内ツールのGo移行
bgpat
2
330
try! Swift Tokyo 初参加報告LT
hinakko2
0
180
Code Reviews
bkuhlmann
4
860
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
5
4.6k
元気予報
suu_mire0726
0
850
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
24
7.6k
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
7
4.1k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
160
Featured
See All Featured
Infographics Made Easy
chrislema
237
18k
Clear Off the Table
cherdarchuk
82
310k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Mobile First: as difficult as doing things right
swwweet
215
8.6k
Music & Morning Musume
bryan
40
5.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
12
1.5k
Side Projects
sachag
451
41k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
What's new in Ruby 2.0
geeforr
336
31k
Transcript
SwiftでAnimation PNGを 仕様から作成してみた インフォコム株式会社 技術企画室
目次 • 自己紹介 • 対象ユーザー • 開発に至る理由 ◦ 用途、問題点 ◦
Apple標準関数 • APNGを仕様から作成する ◦ PNGファイルフォーマット ◦ APNGファイルフォーマット ◦ コード分解 • まとめ
自己紹介 • 所属: インフォコム株式会社 技術企画室 • 最近はこんなことをしてます。 ◦ AMED採択プロジェクトでスマートフォンアプリの開発 ▪
https://www.infocom.co.jp/ja/news/news2022060801.html その他にも他社とのデータ分析の協力やその活用法の模索等をやっています。
プレゼンの対象となるユーザー • APNGを作成するApple標準関数に不満がある ◦ PNGのファイルサイズを減らしたい ▪ 24bit PNGを作りたい ▪ 圧縮したい
◦ 大きな(画素数やフレーム数の多い) Animation PNGを作りたい
開発に至る理由: どのような用途でAPNGを利用したいか • フレーム毎の分析データの可視化への利用(数百フレーム〜ある) • スプレッドシートの1行とフレームの1行を並べて比較したい
開発に至る理由: どのような問題から開発に至ったか 評価データ: 275フレーム x フルHDサイズ(1920x1080) x 50色のAnimation PNGを Appleの標準関数で作成すると端末のピーク時のメモリが
1GBになる
APNGを作成する為のApple標準関数 https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/ImageIOGuide/ikpg_dest/ikpg_dest.html
APNGを作成する為のApple標準関数 • 追加した画像をバッファする為、多くのメモリを消費する • 圧縮サイズの指定もできない 以上からApple標準関数でAPNGを作るのは悩ましい。 CGImageのTrueColorは32bitの 画像データに限定 URLを渡してもストリームで書 き込むわけではない
APNGを仕様から作成する
PNGファイルフォーマット PNGはファイルシグネチャーと3つのチャンクで構成 PNGであることを示す 16進数の固定値が入る
Animation PNG(APNG)ファイルフォーマット PNGの仕様に3つの補助チャンクを追加した PNG拡張 • acTL: Animation Control ◦ フレーム数、ループ数
• fcTL: Frame Control ◦ シーケンス番号を持っており、フレームの 前に付ける。0から始まる。 ▪ 画像のサイズ ▪ 画像のオフセット ▪ フレームレート(分子/分母) • fdAT: Frame Data ◦ IDATにシーケンス番号を付与した画像 データ フレーム数に応じ て繰り返す
実際のコード
今回作るAnimation PNGの要件定義 • True Color 24bit PNG • 画像は1フレーム1枚、オフセットは使わない •
フレームレートは固定
はじめに: Byte, Binary データへのエンコード PNGはバイナリデータで記述する必要がある UInt32(4byte)、UInt16(2byte)は10進数のUInt8(1byte)に置 き換えた後にバイナリコード (Data型)に変換している
24bitのPNGを作成する 今回はPNGを扱うライブラリとしてOpenCVを利用します。 サンプルコードでは3フレームの移動する円の書き出しです。
コード: 初期化 PNGであることを示す16進数の固定値 Animation Control フレーム数、ループ数を設定 Image Header 画像のサイズや色深度、カラータ イプ等のヘッダ情報を含む
8: 8bit、2: True Color Frame Control フレームレートの設定 ・delayNum, 分子: numerator ・delayDen, 分母: denominator
チャンクの作成 チャンクはパターン化できる 1. frameCountとloopCountを結合してChunkDataを作成 2. ChunkTypeとChunkDataを結合 3. ChankDataから求めたLengthと2と2から求めたCRCを結合 ① ②
③
コード: フレームへの画像の追加 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧
1. 引数: opencvで作成した画像 2. PNGに圧縮したバイナリデータを作成 3. signature(8)、IHDR(25)、IEND(12)を取り除いた IDATを作成 4. initで作成したfcTLにシーケンス番号を追加した チャンクを作成 5. 1フレーム目をストリームに出力 6. 1フレーム目以降をストリームに出力 7. IDATをブロックサイズ(8204)毎に分割 8. シーケンスを加算し、 fdATのチャンクを作成して ストリームに出力
opencv: imencodeの出力するPNG imencodeで出力すると、 IDATのChunkDataは8192byteのBlockSizeに分割して出力 3つに分割された場合、 3つ目には残りのデータ が入る
シーケンスナンバーの数え方 同じシーケンス番号を持つfcTLチャンクとfdATチャンクが 同居してはいけない
まとめ • SwiftでのAPNGの実装について話ました ◦ Apple標準関数では ▪ True Color 24bit Imageを作成できない
▪ 圧縮にも非対応 ▪ ストリーム出力にも非対応 ◦ 自作することで ▪ True Color 24bit に対応 ▪ 圧縮に対応 ▪ ストリーム出力にも対応 APNGは実装コード量も少なく、 ライブラリに困った時には自作もありではないでしょうか。
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
ご静聴ありがとうございました