{"componentChunkName":"component---src-templates-post-js","path":"/2024/11/11/apngの構造を理解する/","result":{"data":{"wordpressPost":{"id":"3b0d985b-cca3-5a3e-96cb-7acda1407dbe","title":"APNGの構造を理解する","excerpt":"

1. はじめに 私はピクセルアートが好きでよくwebサイトに使ったりしています。 web上で使用する場合、できるだけサイズが小さく扱いやすいファイル形式が良いという理由でPNG（Portable Network Grap […]

\n","slug":"apng%e3%81%ae%e6%a7%8b%e9%80%a0%e3%82%92%e7%90%86%e8%a7%a3%e3%81%99%e3%82%8b","dateObject":"2024-11-11T02:28:34.000Z","date":"November 11, 2024","categories":[{"name":"Uncategorized","slug":"uncategorized"}],"tags":[{"name":"Typescript","slug":"typescript"}],"author":{"name":"otonari","slug":"otonari"},"featured_media":{"media_details":{"sizes":{"large":null,"medium_large":{"source_url":"https://i0.wp.com/engineering-wp.mobalab.net/wp-content/uploads/2024/11/53ce4ff188d1cb72b3ebe263265f39f8.png?fit=768%2C578&ssl=1","height":578,"width":768}}},"source_url":"https://engineering-wp.mobalab.net/wp-content/uploads/2024/11/53ce4ff188d1cb72b3ebe263265f39f8.png"},"wordpress_id":3313}},"pageContext":{"id":"3b0d985b-cca3-5a3e-96cb-7acda1407dbe","nextPath":"/2024/11/05/vanilla-js-shooter-game/","nextTitle":"Vanilla JavaScriptでシューティングゲームを作成してみた。","prevPath":"/2024/11/15/upgrade-to-rails-8-0/","prevTitle":"Rails 8.0 が出たのでアップグレードした","tableOfContentsData":[{"id":"1. はじめに","tag":"2","text":"1. はじめに","active":false},{"id":"2. PNGの構造を理解する","tag":"2","text":"2. PNGの構造を理解する","active":false},{"id":"PNGのシグネチャ","tag":"3","text":"PNGのシグネチャ","active":false},{"id":"Critical chunks","tag":"3","text":"Critical chunks","active":false},{"id":"Ancillary chunks","tag":"3","text":"Ancillary chunks","active":false},{"id":"3. APNGの違い","tag":"2","text":"3. APNGの違い","active":false},{"id":"4. PNGからAPNGへの変換プログラムの実装","tag":"2","text":"4. PNGからAPNGへの変換プログラムの実装","active":false},{"id":"4.1.バイナリの取得","tag":"3","text":"4.1.バイナリの取得","active":false},{"id":"4.2.チャンクを加工して組み立て","tag":"3","text":"4.2.チャンクを加工して組み立て","active":false},{"id":"4.3.表示","tag":"3","text":"4.3.表示","active":false},{"id":"5. まとめ","tag":"2","text":"5. まとめ","active":false},{"id":"6. 参考","tag":"2","text":"6. 参考","active":false}],"replacedContent":"\n

1. はじめに

\n\n\n\n

私はピクセルアートが好きでよくwebサイトに使ったりしています。

\n\n\n\n

web上で使用する場合、できるだけサイズが小さく扱いやすいファイル形式が良いという理由でPNG（Portable Network Graphics）を主に使用しています。

\n\n\n\n

PNGには派生した形式のAPNG（Animated PNG）というものがあり、GIFのような動きのある画像として表示できます。

\n\n\n\n

ピクセルアートを動かすのにも便利です。

\n\n\n\n

ここではapngを表示できないようだったので下の画像はwebpです

\n\n\n\n
\"\"
\n\n\n\n
\n

使用画像:https://assetstore.unity.com/packages/2d/characters/pixel-adventure-1-155360#content

\n
\n\n\n\n

今まで何気なく利用していましたが、PNGとAPNGはどのような構造になっているのか気になったので調べてみることにしました。

\n\n\n\n

2. PNGの構造を理解する

\n\n\n\n

APNGを理解する前に、まずPNGの基本構造を押さえておく必要があります。PNGファイルは、シグネチャとチャンクから構成されています。

\n\n\n\n
\n \n \n \n \n \n \n PNG SignatureIHDR ChunkAncillary chunksIDAT ChunksIEND Chunk
\n\n\n\n

PNGのシグネチャ

\n\n\n\n

PNGファイルは、以下の8バイトのシグネチャで始まります。

\n\n\n\n
// 16進数\n89 50 4E 47 0D 0A 1A 0A
\n\n\n\n

これは固定値でPNGファイルであることを示しています。

\n\n\n\n

Critical chunks

\n\n\n\n

PNGファイルは、複数のチャンクで構成されています。主要なチャンクには以下があります。

\n\n\n\n

PLTEチャンクはカラータイプが3の時は設置が必須、他は常に必須です。

\n\n\n\n
    \n
  1. IHDR（Image Header）：画像の基本情報（幅、高さ、ビット深度など）
    2. \n\n\n\n
  2. PLTE（Palette）: カラーパレット定義
    3. \n\n\n\n
  3. IDAT（Image Data）：実際の画像データ
    4. \n\n\n\n
  4. IEND（Image End）：PNGデータの終端を示す
    5. \n
\n\n\n\n

Ancillary chunks

\n\n\n\n

任意で配置できるイメージへの付加情報を保持するためのチャンクです。

\n\n\n\n

単にテキストを保持したり、タイムスタンプを保持したり様々なチャンクがあります。

\n\n\n\n

後述するAPNGとして動作させるために必要なチャンクもこの補助チャンクです。

\n\n\n\n

3. APNGの違い

\n\n\n\n

APNGは、PNGの構造を拡張したものです。主な追加チャンクは以下の通りです：

\n\n\n\n
    \n
  1. acTL（Animation Control）：アニメーションの制御情報
    2. \n\n\n\n
  2. fcTL（Frame Control）：各フレームの制御情報
    3. \n\n\n\n
  3. fdAT（Frame Data）：2フレーム目以降の画像データ
    4. \n
\n\n\n\n
\n \n \n \n \n \n \n PNG SignatureIHDR ChunkAncillary chunksIDAT ChunksIEND ChunkfcTL ChunkfdAt ChunkfcTL Chunk1 fr2 frn fracTL Chunk
\n\n\n\n

これらのチャンクを適切に配置することで、複数の画像をアニメーションとして表示できます。

\n\n\n\n

IDATの前にfcTLを配置するかは任意で、配置しなかった場合はアニメーションに含まれません。

\n\n\n\n

因みにAPNGの表示に対応しない環境ではIDATの画像データが表示され、通常のPNGとして振る舞います。

\n\n\n\n

4. PNGからAPNGへの変換プログラムの実装

\n\n\n\n

いろいろ調べましたが実際に触ってみた方が理解が深まりそうなので、今回は複数のPNGファイルを一つのAPNGに変換するプログラムを作ってみたいと思います。

\n\n\n\n

ブラウザで動くことを確認したかったのでSolidJS（TypeScript）で書いています。

\n\n\n\n

4.1.バイナリの取得

\n\n\n\n

まずは画像をバイナリデータに変換します。

\n\n\n\n

fetchやinputで取得したPNGをUnit8Arrayでバイナリとして一時保存します。

\n\n\n\n

以下SolidJSのinputで取得する例

\n\n\n\n
const [files, setFiles] = createSignal<Uint8Array[]>([]);\n\nconst handleInput = async (event: Event) => {\n  const files = (event.target as HTMLInputElement).files;\n  if (!files) return;\n\n  const images = Array.from(files).map((file) => {\n    const reader = new FileReader();\n    reader.readAsArrayBuffer(file);\n    return new Promise<Uint8Array>((resolve) => {\n      reader.onload = () => {\n        resolve(new Uint8Array(reader.result as ArrayBuffer));\n      };\n    });\n  });\n\n  setFiles(await Promise.all(images));\n};\n\nreturn (\n  <input\n    type=\"file\"\n    accept=\"image/png\"\n    multiple\n    oninput={handleInput}\n  />\n)
\n\n\n\n

ここで取得したバイナリを少し覗いてみましょう。

\n\n\n\n
const hexString = Array.from(files()[0], (byte) =>\n\tbyte.toString(16).padStart(2, \"0\"),\n).join(\" \");\nconsole.log(hexString);
\n\n\n\n
\"\"
\n\n\n\n

先頭8バイトが89 50 4E 47 0D 0A 1A 0Aとなっており、PNGのシグネチャと一致することが分かります。

\n\n\n\n

4.2.チャンクを加工して組み立て

\n\n\n\n

PNGシグネチャと一枚目のIDATチャンク以前のチャンクをコピーします。

\n\n\n\n
const PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);\n\nconst chunks: Uint8Array[] = [PNG_SIGNATURE];\nconst firstImage = images[0];\nconst firstImageChunks = extractAllChunks(firstImage);\n\nfor (const chunk of firstImageChunks) {\n  if (chunk.type === \"IDAT\") {\n    break;\n  }\n  chunks.push(createChunk(chunk.type, chunk.data));\n}
\n\n\n\n

extractAllChunksは以下のように画像のチャンクを抜き出して配列で返しています。

\n\n\n\n
const extractAllChunks = (pngData: Uint8Array): PNGChunk[] => {\n  const chunks: PNGChunk[] = [];\n  let offset = 8;\n\n  while (offset < pngData.length) {\n    const chunkLength = new DataView(pngData.buffer, offset).getUint32(0);\n    const chunkType = new TextDecoder().decode(\n      pngData.slice(offset + 4, offset + 8)\n    );\n    const chunkData = pngData.slice(offset + 8, offset + 8 + chunkLength);\n\n    chunks.push({ type: chunkType, data: chunkData });\n\n    offset += chunkLength + 12;\n\n    if (chunkType === \"IEND\") {\n      break;\n    }\n  }\n\n  return chunks;\n};
\n\n\n\n

acTLチャンクを作成して追加します。

\n\n\n\n

今回は無限ループに設定しています。

\n\n\n\n
chunks.push(createActlChunk(images.length));\n\nconst createActlChunk = (numFrames: number): Uint8Array => {\n  const data = new Uint8Array(8);\n  const view = new DataView(data.buffer);\n  view.setUint32(0, numFrames);\n  view.setUint32(4, 0); // Number of times to loop (0 = infinite)\n  return createChunk(\"acTL\", data);\n};
\n\n\n\n

一枚目のIDATチャンクはそのまま、二枚目以降はfdATチャンクとしてシーケンス番号を付与しコピペします。

\n\n\n\n
\nlet sequenceNumber = 0;\n\nfor (let i = 0; i < images.length; i++) {\n  chunks.push(createFctlChunk(sequenceNumber++, width, height, delay));\n\n  const imageChunks = extractAllChunks(images[i]);\n  const idatChunks = imageChunks\n    .filter((chunk) => chunk.type === \"IDAT\")\n    .map((chunk) => chunk.data);\n\n  if (i === 0) {\n    for (const idatData of idatChunks) {\n      chunks.push(createChunk(\"IDAT\", idatData));\n    }\n  } else {\n    chunks.push(...createFdatChunks(idatChunks, sequenceNumber));\n    sequenceNumber += idatChunks.length;\n  }\n}
\n\n\n\n

createFctlChunkでは一旦フレームの表示時間のみ指定できるようにしています。

\n\n\n\n
const createFctlChunk = (\n  sequenceNumber: number,\n  width: number,\n  height: number,\n  delay: number\n): Uint8Array => {\n  const data = new Uint8Array(26);\n  const view = new DataView(data.buffer);\n  view.setUint32(0, sequenceNumber);\n  view.setUint32(4, width);\n  view.setUint32(8, height);\n  view.setUint32(12, 0); // x offset\n  view.setUint32(16, 0); // y offset\n  view.setUint16(20, delay); // delay numerator\n  view.setUint16(22, 1000); // delay denominator\n  view.setUint8(24, 0); // dispose op\n  view.setUint8(25, 0); // blend op\n  return createChunk(\"fcTL\", data);\n};
\n\n\n\n

createFdatChunksはIDATチャンクにシーケンス番号を追加しているだけです。

\n\n\n\n
const createFdatChunks = (\n  idatChunks: Uint8Array[],\n  startSequenceNumber: number\n): Uint8Array[] => {\n  return idatChunks.map((idatChunk, index) => {\n    const fdatData = new Uint8Array(idatChunk.length + 4);\n    new DataView(fdatData.buffer).setUint32(0, startSequenceNumber + index);\n    fdatData.set(idatChunk, 4);\n    return createChunk(\"fdAT\", fdatData);\n  });\n};
\n\n\n\n

最後にIENDを追加して結合します。

\n\n\n\n
chunks.push(createChunk(\"IEND\", new Uint8Array(0)));\n\nconst newPngData = concatenateUint8Arrays(chunks);
\n\n\n\n

因みに長くなりそうなので省きましたが、ちょこちょこ登場するcreateChunk関数が一番複雑になっており、チャンクの組み立てや各チャンクのタイプとデータからCRCを計算・付与を行っています。

\n\n\n\n

4.3.表示

\n\n\n\n

ここまで来ればあとは表示するだけです。

\n\n\n\n

Unit8Array→Blob→urlと変換していき、imgに渡します。

\n\n\n\n
const [url, setUrl] = createSignal(\"\");\n\nconst blob = new Blob([newPngData], { type: \"image/png\" })\nconst generatedUrl = URL.createObjectURL(blob);\nsetUrl(generatedUrl);\n\nreturn (\n\t<Show when={url()}>\n    {(url) => (\n      <img src={url()} />\n    )}\n  </Show>\n)
\n\n\n\n

表示できました。

\n\n\n\n

以下のURLから実際に触れます。

\n\n\n\n

https://apng-generater.vercel.app

\n\n\n\n
\"\"
\n\n\n\n

sample imagesボタンを押すと用意されたPNG画像（32x32px/12枚）を読み込んでAPNGに変換し、表示します。

\n\n\n\n

お持ちの画像があればそれを変換することも可能です（多分）

\n\n\n\n

サンプル画像が小さいのもあるとは思いますが、かなり高速に変換してくれて嬉しいです。

\n\n\n\n

5. まとめ

\n\n\n\n

PNGとAPNGの構造について少し理解できた気がします。

\n\n\n\n

TypeScriptでバイナリを触ったことがなかったのですが、思ったよりも扱いやすくて驚きました。

\n\n\n\n

また今回は単純にIDATをコピペしただけなので、最適化の余地は十分にあると考えています。

\n\n\n\n

良い最適化が実装できそうならまた記事にするかもしれません。

\n\n\n\n

6. 参考

\n\n\n\n

https://www.w3.org/TR/png-3/#5DataRep

\n\n\n\n

https://wiki.mozilla.org/APNG_Specification

\n\n\n\n

https://ja.wikipedia.org/wiki/巡回冗長検査

\n\n\n\n

\n"}},"staticQueryHashes":["156639431","195851561","2295443436","3007017043"]}