情報デザイン概論/2020/1130

第10回 コンピュータグラフィクス

情報デザイン概論/2020｜地域共創学部｜2020.11.30｜遠隔
情報共有シート｜特設サイト

AGENDA

• 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
  　情報共有シート
  情報共有シートは、遠隔授業時の質疑応答シートを兼ねています。
• コンピュータグラフィクスについての講義を視聴して下さい。
• 受講生情報共有のための特設サイトにコメントの記載をお願いします。
  　特設サイト（受講生一覧）
  
  

以下、動画をご覧下さい。記事に沿って解説しています。

本日のメニュー

• はじめに
  • 今回分のコメント雛形 の準備
• 概要
• 2Dラスターグラフィックス
  • データの具体例
  • 主なデータ形式
  • ソフトウエア紹介
• 2Dベクターグラフィックス
  • 図形データの具体例
  • 主なデータ形式
  • ソフトウエア紹介
• 3DCG
  • 3DCG の制作工程
  • 主なデータ形式
  • ソフトウエア紹介
• 手続き記述型のCG（プログラムによるイメージ生成）
  • 概要
  • ソフトウエア
• 特設サイトへの書き込み
  • コンピュータグラフィクス

はじめに

遠隔授業の回です。受講生のみなさんには、本日のテーマに関するコメントを求めます。講義の視聴する前に、特設サイトに、以下の雛形をコピーして、今回のテーマ用の「節」を作って下さい。

今回分のコメント雛形 の準備

以下のグレーの部分を、そのままコピーして、特設サイトのあなたのページにペーストして下さい。

==コンピュータグラフィクス｜2020.11.30==
===CGと実写の違い===
* ◯◯◯◯◯◯、◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯。
* ◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯、◯◯◯◯◯◯。
<br>
===CGアプリの紹介===
* https://www.example.com
* https://www.example2.com
<br>

概要

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>

• 参考：Vector Graphics のデータ arrow.svg
  Illustratorのファイル＞開く　で開けます。
  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
  
  

ソフトウエア紹介

• Blender：https://ja.wikipedia.org/wiki/Blender　（OpenSource）

• 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
  
  
  
  

特設サイトへの書き込み

コンピュータグラフィクス

• CGと実写の違い
  CGと実写の違いについて、みなさんが感じていることを自由に語って下さい。
• CGアプリの紹介
  コンピュータによる画像の生成・処理を行うアプリについて、みなさんが「面白い！」と感じているアプリを、その解説記事とともに紹介して下さい。
  
  
  
  

第10回目は、以上をもって終了とします。
第11回は、対面授業となります。教室の方へご出席下さい。