WEB+DB PRESS plusシリーズ2Dグラフィックスのしくみ
――図解でよくわかる画像処理技術のセオリー

[表紙]2Dグラフィックスのしくみ ――図解でよくわかる画像処理技術のセオリー

紙版発売
電子版発売

A5判/256ページ

定価2,508円(本体2,280円+税10%)

ISBN 978-4-7741-7558-4

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

スマホやタブレットのグラフィカルインターフェースから,ゲームの各種アニメーションに至るまで,グラフィックス技術の存在感は,高まる一方です。

そのような今,「デジタル画像処理の理論を知る」ことは,紙や筆/ペン先のような「画材の特性を知る」ことに近い,と著者は言います。
表現手段の構造や性質を掴むことは有用ではないでしょうか。

本書では,基本となる2Dグラフィックスをテーマに,デジタル画像処理の基礎知識と技法をやさしく解説。
人気急上昇中のペイントツールの開発陣が,楽しい図解を豊富に盛り込み,基礎の基礎から,わかりやすく解き明かします。

複雑な画像も,たった1つの「点」から。

ラスト1ピクセルまで綺麗に仕上げたい,画質をキープしつつ高速に処理したい,2Dの実力を最大限に引き出したい,広く,これから各種2Dグラフィックスに携わる方々へ,今,必要な基本が見えてくる1冊です。

こんな方におすすめ

  • これから2DCG,グラフィックスを学びたい初学者の方々全般
  • 画質を保ち,高速処理する技術について知っておきたい開発者の方
  • 最後の1ピクセルまで綺麗に仕上げる描画技術に興味をお持ちのイラストレーターの方,漫画家の方
  • ペイントツールを扱う先生方,講師の方

本書の構成

本書は,2Dグラフィックスのしくみ,画像処理の原理について詳しく知りたい方向けの技術解説書です。デジタルイラストが趣味の方から,グラフィックス処理に興味のあるプログラマの方まで,広く楽しみながら読み進められるように豊富な図解を盛り込み,予備知識をほとんど必要としない平易な解説が特徴です。本書の構成は以下のとおりです。

第0章画像処理の技術を学ぶことについて ——道具を知る
まず,画像処理の知識をつけることにより得られるメリットについて解説します。コンピュータ上で,画像がどのように処理されているのか,少しでも想像ができるようになることで,画質の向上,作業環境の安定性向上に繋げることができます。
第1章基本のしくみ ——コンピュータで絵を描くために
デジタル画像は「メモリ上の数値データ」に過ぎません。プログラム(画像処理のソフトウェアなど)が,どのようにメモリを画像として扱っているのか,ハードウェアによって画像処理にどのような影響があるのかを解説します。また,簡単なプログラミング言語の解説も行っています。
第2章図形描画 ——ピクセル徹底攻略
すべての基本となる「画像に点(ピクセル)を打つ」「画像から点を取得する」操作。そして,矩形や円,多角形や曲線などの図形がどのように描かれているのか解説しています。
第3章画像処理 ——画質は良く,コンピュータの処理負荷は低く
すでに存在する画像に対し,転送/変形/フィルタリング処理を行う方法について取り上げます。不透明度をきちんと計算することの重要性や,計算を減らし高速に処理を行う方法について考えていきます。
第4章ペイントツールのしくみ ——画像データをどう持つか,画像データをどう表示するか
最後に,レイヤーやクリッピング処理,カラーマネジメントなどの,ペイントツール固有の技術について触れています。第2章や第3章よりは軽い内容で,読み物としても楽しめる章となっています。

本書に関するお知らせ

本書に関連する記事を公開しております。

この書籍に関連する記事があります!

本書について
本書は,2Dグラフィックス,すなわち2DCG(デジタル画像)がコンピュータ上でどのように生み出されているのかを解説したものです。
知っておきたい! 2Dグラフィックスの厳選キーワード[画像フォーマット編]
スマートフォンでもパソコンでも,はたまた街や電車の各種ビジュアルでも,イラスト,マンガ,写真をはじめとしたさまざまな「デジタル画像」(Digital image)に接する機会が日々増えてきました。

目次

  • 本書について
  • 本書の構成
  • 本書で必要となる前提知識
  • 基本用語の整理
  • 目次

第0章 画像処理の技術を学ぶことについて ――道具を知る

0.01 グラフィックスツールやコンピュータのしくみを知る価値 ――データの品質向上,安定した作業環境,技法の習得

  • [利点1]データのクオリティが上がる ――1ピクセルも無駄にしない
  • [利点2]処理の負荷を下げ,安定した作業環境を得られる
  • [利点3]技法を習得しやすくなる

第1章 基本のしくみ ――コンピュータで絵を描くために

1.01 2Dグラフィックスツール,いろいろ ――ツールの広がりと特徴

  • (1)画像編集ツール ――おもに画像を編集するために作られたアプリケーション
  • (2)ドローツールとDTPツール ――印刷物やデザインのためのアプリケーション
  • (3)ペイントツール ――手書きのイラストや漫画を制作するアプリケーション
  • イラストを描くツールを取り巻く状況

1.02 画像が表示されるしくみ ――パソコン,スマートフォンのグラフィックス機構

  • 今どきの複雑なグラフィックス機構(グラフィックスアーキテクチャ)
  • APIを介してグラフィックス処理は行われる
  • グラフィックス処理の抽象化が行われる理由
  • スマートフォン時代の画像解像度

1.03 ビット(bit)やバイト(byte) ――情報量を表す単位について

  • ビット(bit)と2進数
  • バイト(byte)
  • ファイルサイズの目安
  • Column データ転送量の単位

1.04 画像,ピクセル,不透明度とは何か ――画像はピクセルで構成されている

  • ピクセル入門
  • ARGBと不透明度 ――ピクセルと言えば「ARGB」

1.05 コンピュータ上で画像を表現する ――画像はメモリ上のピクセル情報

  • 計算はメモリを介して行われる
  • メモリを確保(使えるように)する方法
  • 不要なメモリは解放する ――不要なメモリ領域はOSに返却する

1.06 メモリとHDD/SSDの関係 ――メモリは潤沢に搭載したほうが良い理由

  • メインメモリの容量は少ない
  • スワップアウトとスワップイン

1.07 ビットマップとベクターについて ――画像表現における2つの基本形式

  • ビットマップ形式
  • ベクター形式
  • ベクター形式のメリット
  • ラスタライズ

1.08 ペンタブレットの性能 ――選ぶときの比較ポイントとは?

  • On荷重
  • 座標の精度,座標の歪みの有無
  • 筆圧レベル
  • 盤面の材質,ペン先の材質
  • WintabとTablet PC API,ドライバ

1.09 さまざまな画像フォーマット ――専用画像フォーマットの強み

  • 画像フォーマットとファイルヘッダ
  • 画像ファイルの中身
  • 画像フォーマットの大まかな違い
  • ツールごとの独自機能の保存 ――専用画像フォーマットを指定する
  • BMP形式
  • GIF形式
  • PNG形式
  • JPEG形式(JPG形式)
  • PSD形式
  • TIFF形式
  • EPS形式
  • SVG形式
  • [重要]専用画像フォーマットについて

1.10 画像解像度とdpi ――「物理サイズ指定のないdpi値は飾りです」

  • 画像解像度とdpi
  • 物理サイズによる指定
  • Column 手ぶれ補正のしくみ

1.11 Hello,World! ――ここだけは知っておきたいC言語プログラミング

  • プログラムの基本
  • 計算処理
  • 関数
  • 分岐処理
  • 繰り返し処理
  • 構造体

1.12 「バグった」「落ちた」時に何が起きているのか ――よくある問題と,その原因と対策

  • [例1]メモリが足りない
  • [例2]無限ループ
  • [例3]ゼロ除算
  • [例4]アクセス違反
  • [例5]ディスク容量が足りない

第2章 図形描画 ――ピクセル徹底攻略

2.01 画像に点を打つ ――すべてはここから。点を打てれば,何でも表現できる

  • メモリを一度に確保する,ライン単位に確保する
  • メモリを確保すると,先頭のアドレスを取得できる
  • 先頭アドレスからの相対位置を計算する
  • 関数として定義する

2.02 矩形(長方形)を描画する ――一番シンプルな図形の描き方

  • 矩形の描画方法を考える
  • プログラムで考える矩形描画 ――for文の活躍
  • [補足]横方向か,縦方向か ――キャッシュ機構をうまく使って高速処理

2.03 ピクセル形式と色深度 ――今,必要なのは,どのピクセル形式か

  • RGBカラー(24 bit)
  • RGBカラー(16 bit)
  • ARGBカラー ――本書の標準的なピクセル形式
  • インデックスカラーとは? ――パレットを参照するピクセル形式の総称
  • 16 bitカラー(16 bit/チャンネル)
  • グレースケール
  • 8 bit(不透明度のみ)
  • ハイダイナミックレンジとは? ――OpenEXR形式,Radiance形式
  • マルチスペクトル
  • YCbCr

2.04 半透明を表現する ――アルファブレンディングのしくみ

  • 透明度と不透明度
  • 合成色の求め方
  • 半透明の計算式(RGBの場合)

2.05 画像と画像を合成する ――コラージュのように

  • 画像合成の考え方
  • カラーキー転送
  • アルファ値を考慮して転送する

2.06 点をつなげて直線を描く ――斜めの線は難しい

  • 座標指定
  • 点を打つ,から考える
  • 斜めの線を引く方法

2.07 アンチエイリアシング処理した直線を引く ――不透明度を駆使して滑らかな線を引く

  • まずはプログラムから
  • 先ほどのプログラムの問題と,その対策
  • アンチエイリアシング処理を行う

2.08 円を描画する ――スーパーサンプリングで綺麗に描く

  • 円を描く考え方
  • 円を描くプログラム ――とりあえずガタガタでも良い
  • スーパーサンプリングとサブピクセル ――綺麗な円へ

2.09 三角形の描画(1)(外積を使う方法) ――三角形の内側か,外側か

  • 外積を作る
  • 外積の方向を利用する
  • Column 内積はあるの?

2.10 三角形の描画(2)(交点を求める方法) ――左右の辺の間を塗りつぶす

  • 辺と辺の間を塗りつぶして三角形を描く
  • 左右端の被覆率を求める

2.11 曲線を引く ――ベジェ曲線はどう描かれているのか

  • 曲線の描き方
  • [補足]パラメータとは?
  • 直線の補間
  • 曲線の補間(ベジェ曲線)

2.12 多角形を描画する ――これを描画できれば,何でも描画できる

  • 曲線の内側を塗りつぶす→多角形を塗りつぶす
  • スキャンするラインの交差をカウントする

2.13 グラデーションを描く ――指定した2点間を補間して色を塗る

  • グラデーションの描画
  • 円形グラデーションの計算方法
  • 線形グラデーションの計算方法

第3章 画像処理 ――画質は良く,コンピュータの処理負荷は低く

3.01 画像を拡大/縮小する ――拡大も縮小も,考え方は変わらない

  • 拡大/縮小は描画範囲から考える
  • 元画像の座標を計算する
  • 拡大/縮小のプログラム
  • Column 画像拡大アルゴリズムwaifu2x

3.02 画像を綺麗に拡大/縮小する ――ピクセルの格子を厳密に考える

  • 縮小処理でジャギジャギになる理由
  • 平均色を取り入れる
  • 被覆率を考慮して縮小する ――半端なピクセルは,半端な影響力がある

3.03 ミップマップという考え方 ――縮小処理の負荷を下げたい

  • ミップマップ
  • ミップマップの利点
  • ミップマップの品質について ――問題点もある
  • リップマップ

3.04 フィルタリング,サンプリング ――座標の小数部を使って品質アップ

  • ピクセルのサンプリング
  • フィルタリング
  • ニアレストネイバー
  • バイリニア補間,バイリニアフィルタリング
  • バイキュービック補間

3.05 画像を回転させる ――画像処理のエッセンスが詰まっている

  • 画像の回転転送
  • 座標を回転させる
  • タイル状に並べる
  • 処理を最適化する

3.06 画像の変形 ――画像を変形して貼り付けたい

  • 変形処理も,基本は多角形の描画と同じ
  • 交点の座標を計算する
  • 変形させると歪む問題

3.07 レベル補正とガンマ補正 ――画像処理では欠かせないカラーフィルタ

  • レベル補正と,ヒストグラム
  • レベル補正とは何か
  • ルックアップテーブル ――事前に計算して,計算を簡略化
  • ガンマ補正

3.08 モザイクフィルタ ――不透明度を考慮する重要性

  • モザイク処理は簡単
  • モザイク処理の実装
  • 不透明度の扱い
  • 不透明度を考慮して平均色を求める
  • 不透明度を考慮したモザイク処理
  • Column Qt(キュート)でCGプログラミング

3.09 ぼかしフィルタ ――周辺の平均色を求める,負荷の高い処理

  • ぼかし処理,いろいろ ――モザイク処理との違い
  • 周辺15×15pxをぼかしてみる
  • X方向にぼかし,Y方向にぼかす
  • ガウスぼかし ―― 偏りのある分布を利用する
  • ガウス分布の特徴
  • ガウスぼかしのコード

3.10 バケツ塗りつぶし ――閉じた領域を塗りつぶす

  • 始点の指定 ――左右探索
  • シードフィル
  • シードが多くなり過ぎたら?

第4章 ペイントツールのしくみ ――画像データをどう持つか,画像データをどう表示するか

4.01 ペイントツールの大まかなしくみ ――レイヤー,キャンバス,描画と画面表示

  • ペイントツール設計の3つのポイント
  • レイヤーとキャンバスについて
  • キャンバスの内容を表示する
  • レイヤーへの図形描画から表示まで

4.02 画像は必要な分だけ確保されている

  • 不透明な部分だけメモリを確保する
  • ライン単位に画像を確保する方法 ――画像確保の単位(1)
  • タイル単位で画像を確保する方法 ――画像確保の単位(2)

4.03 レイヤーの合成 ――レイヤーとは何か,キャンバスとは何か

  • コンピュータで絵を描く手順
  • レイヤーに分けて作業する
  • キャンバスの背景色 ――透明な背景は,市松模様で表示される
  • 合成モード(ブレンドモード)について
  • 通常
  • 乗算
  • 加算/発光
  • スクリーン
  • オーバーレイ
  • Column 合成モードの互換性

4.04 クリッピングとフォルダー ――下のレイヤーの不透明な部分だけに上のレイヤーを合成する

  • クリッピング処理の実現
  • レイヤーフォルダーと通過モード

4.05 計算を繰り返せば劣化する ――デジタル処理ならではの劣化

  • 計算精度の問題 ――8 bit精度の限界
  • サンプリングとフィルタリングの問題

4.06 RGB/CMYKとICCプロファイル ――異なるデバイス間で,色を再現する

  • デバイス依存の色情報
  • ICCプロファイルとは?
  • ICCプロファイルを使って運用する
  • 画素,表色系,色空間
  • ICCプロファイルがあれば何でもOK? ――印刷所推奨のもので作業すべき
  • Column データ圧縮 ――ファイルサイズを小さくしたい
  • あとがき,著者について,[参考]本書内図版の制作環境データ

著者プロフィール

FireAlpaca開発チーム(ファイアアルパカかいはつチーム)

2011年11月,Windows/Mac 両対応のペイントツール FireAlpaca をリリース。2015年,㈱MediBangより公開されたMediBang Paint Pro(Windows/Mac用),MediBang Paint Tablet(Android/iOS用)にペイントエンジンを提供。
公式サイト:http://firealpaca.com/
Twitter:@firealpaca