第13回 Computer Graphics
情報デザイン概論/2022｜2022.12.19
事務連絡
- 今回の授業は、オンデマンド形式で行います。
- ページの最後で出席確認を兼ねたフォームへの回答を求めています。
- レポート提出をお忘れなく。以下のページに要件を記載しています。
＞ 情報デザイン概論/2022/1121
CONTENTS
はじめに
CG（コンピュータ・グラフィックス）は、大きく２つ、「形状記述」によるものと「手続き記述」によるものとに分類できます。
前者は「頭で思い描いた形を、マウス等を用いて対話形式で作り上げる」というタイプのもので、ペイント系ツール、ドロー系ツール、3DCGツールなどによるCGがそれにあたります。
一方後者は「手順(計算規則)を記述して、コンピュータに自動的に形を生成させる」というタイプのもので、これは、あまり馴染みがないかもしれませんが、例えば、Photoshopのフィルターの雲模様など、乱数によってパターンを自動生成するプロセスなどに 相当します。
- 2Dペイント系グラフィックス（ラスターグラフィックス）
- 2Dドロー系グラフィックス（ベクターグラフィックス）
- 3次元コンピュータグラフィックス
- 手続き記述型のCG
2Dラスターグラフィックス
一枚の絵を、小さな点（画素）が縦横に並ぶものとして扱う画像データを、ラスター画像と言います。Photoshopなどのフォトレタッチ、ペイント系ソフトが扱っているのはこのラスターデータで、各点の色の値を入力データとして、様々な画像処理を行うことができます。
ラスター画像は各画素ごとに、R(0-255) 、G(0-255)、 B(0-255)の３つの数値データ（各１バイトの情報量）を持つのが一般的で、縦横の画素数が多くなるほど全体の情報量が大きくなります。例えば、横640pixel縦 480pixelのRGBモードの画像は、640ｘ480ｘ3 = 921,600B つまり約１MBの情報量を持ちます。
JPEG GIF BMP PSDといった拡張子を持つデータはこの形式のものです。
データの具体例
JPEG画像や、Photoshop形式の画像はバイナリーファイル(２進表記)ですが、例えば、汎用のPPM(Portable Pixmap)形式ではテキストファイルとして書くことができます。以下は、右の3X2pixelの画像のPPMデータです。
P3 ← RGBフルカラー PPM形式 3 2 ← 横３pixel 縦２pixel 255 ← 最大値 255 0 0 ← １画素目の色（赤） 0 255 0 ← ２画素目の色（緑） 0 0 255 255 255 0 255 0 255 0 255 255
主なデータ形式
JPEG [.jpg] (Joint Photographic Experts Group)
PNG [.png] (Portable Network Graphics)
GIF [.gif] (Compuserve Graphics Interchange Format)
WebP[.webp] Googleによる次世代画像フォーマット
TIFF [.tif] (Tagged-Image File Format)
PS/EPS [.eps] (PostScript) *
PDF [.pdf] (Portable Document Format) *
RAW [.raw] 「生の」という意味。色データが単純に並ぶ、最もシンプルな形
PPM [.ppm] (Portable PixMap)
PSD [.psd] (Adobe Photoshop)
BMP [.bmp .dib] (Windows Bitmap)
ソフトウエア紹介
- The GIMP：https://ja.wikipedia.org/wiki/GIMP （OpenSource）
- Adobe Photoshop
2Dベクターグラフィックス
一枚の絵を、線図形や面図形の集合として考えるようなデータ形式を、ベクターデータと言います。Illustratorが扱っているのはこのベクターデータで、幾何学的な形状の自動生成や、図形単位での移動・回転・拡大縮小をはじめとする様々な変換操作が可能です。
図形単位に、頂点座標・結線・色属性などのデータを持つため、図形の数が多く複雑になるほど情報量は大きくなりますが、ラスター画像とは異なり、全体サイズの拡大や縮小で情報量が変わることはありません。
CADのデータ（DXF）やIllustratorのファイル（AI）、フォントのデータなどもこの形式です。尚、W3C標準のベクターデータはSVG（Scalable Vector Graphics）という形式のものです。
図形データの具体例
右図のような図形を SVG形式で書くと、以下のようなコードになります。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
width="300" height="300" viewBox="0 0 480 360" >
<g id="g3">
<polygon points="115.374,0 173.129,0 80.823,92.298
276.921,92.298 276.921,138.437 80.823,138.437
173.129,230.732 115.374,230.732 0,115.379 115.374,0" />
</g>
</svg>
arrow.svg主なデータ形式
SVG [.svg] (Scalable Vector Graphics : XML)
EPS [.eps] (Encapsulated PostScript) *
PDF [.pdf] (Portable Document Format) *
AI [.ai] (Adobe Illustrator)
[*]マークのものにはベクター・ラスターが共存します。
ソフトウエア紹介
- Inkscape：https://ja.wikipedia.org/wiki/Inkscape （OpenSource）
- Draw io：https://app.diagrams.net/
- Adobe Illustrator
3DCG
3DCGとは、幅・高さ・奥行き(x,y,z)という３つの軸を持つ仮想の空間上に、仮想の被写体・照明・カメ ラを配置して、計算によってカメラから見えるイメージを作り出す技術です。現在では様々な3DCGツールがあり、３次元空間図形に関する数学的な知識がなくとも直感的なインターフェイスでシーンの生成が可能です。3DCGのツールは数多くありますが、現場によって使用するものは様々で、場合によっては、その映画制作のためだけにオリジナルのソフトが開発されて、それが使用されるということも希ではありません。
3DCG の制作工程
- プリプロダクション
- 映像素材作成
- 3Dスキャン
- アセット制作（モデリング / UV展開 /テクスチャリング / リギング等）
- アセット配置（レイアウト）
- アニメーション
- 画像化（ライティング/レンダリング）
- 画像合成及び調整（コンポジット / カラーグレーディング）
- ポストプロダクション
主なデータ形式
- DXF [.dxf] (AutoCad)
- 3DS [.3ds] (3D Studio MAX)
- Blender [.blend] (Blender)
- LWO [.lwo] (Lightwave)
- VRML [.wrl] (VRML)
- OBJ [.obj] (wavefrontOBJ)
- X3D [.x3d] (X3D)
- XSI [.xsi] Softimage
ソフトウエア紹介
- 3dsMax：https://ja.wikipedia.org/wiki/3ds_Max
- Cinema 4D：https://ja.wikipedia.org/wiki/CINEMA_4D
- LightWave：https://ja.wikipedia.org/wiki/LightWave
- Maya：https://ja.wikipedia.org/wiki/Maya
- MODO：httpss://ja.wikipedia.org/wiki/Modo
- Shade：http://ja.wikipedia.org/wiki/Shade
手続き記述型のCG（プログラムによるイメージ生成）
概要
こちらのページをご覧下さい。＞ GenerativeArt
ソフトウエア
- Processing：http://ja.wikipedia.org/wiki/Processing
- 参考ページ１：Processing
- 参考ページ２：p5.js、p5.js/Sample
注）p5.js は、Processing の JavaScript版で、Web上でグラフィックスを表現できるようにしたものです。
出席（受講）確認・コメント
以下のフォームから学籍番号、氏名、またコメントをお願いします。
回答をもって出席とします。質問には、後日の授業で回答します。
https://forms.gle/Y9vq8PEsrZjTSXfz9