CGの基本構成①
コンピュータグラフィックス映像制作
講義資料
[編集]池戸研究室
2D図形の描画
Exercise 2-1
• Graphicsクラスにあるメソッドを使って
シンプルな図形を描いてみよう
• 色を変えて図形を描いてみよう
Graphicsクラスの描画メソッド(part.1)
drawLine(x1, y1, x2, y2)
• (x1,y1) から (x2,y2) へ直線を描く
drawRect(x, y, w, h)
•
(x,y) を左上として、w×h の大きさ
の長方形を描く
Graphicsクラスの描画メソッド(part.2)
drawOval(x, y, w, h)
• (x,y) を左上として、w×h の大き
さの長方形に内接する楕円を描く
fillRect(x, y, w, h)
•
(x,y) を左上として、w×h の大きさ
の長方形を塗りつぶす
Graphicsクラスの描画メソッド(part.3)
fillOval(x, y, w, h)
• (x,y) を左上として、w×h の大き
さの長方形に内接する楕円を塗り
つぶす
drawArc(x, y, w, h, a1, a2)
•
楕円の a1 度を始点とし a2 度の大
きさだけの弧を描く
Graphicsクラスの描画メソッド(part.4)
fillArc(x, y, w, h, a1, a2)
• 楕円の a1 度を始点とし a2 度の大
きさだけの弧を塗りつぶす
int[] x={ 100,50,120,150 };
int[] y={ 50,100,110,80 };
drawPolygon(x,y,4);
•
多角形を描く。多角形の座標は配
列を使って左のように指定する。
Graphicsクラスの描画メソッド(part.5)
int[] x={ 100, 50, 120, 150 };
int[] y={ 50, 100, 110, 80 };
fillPolygon( x, y, 4);
•
多角形を塗りつぶす。多角形の座
標は配列を使って左のように指定
する。
色を変えてみよう(part.1)
• 以下の下線部分を書き換えると…
g.setColor(Color.black);
g.setColor(Color.blue);
他にも
red, yellow, orange, green…
ここで余談・・・
• ディスプレイでの色の表現はRGBカラーモデルと
いう表現方法を使っている。
RGBカラーモデルとは赤(Red)、緑(Green)、青
(Blue)の三つの原色を混ぜて幅広い色を再現するも
のある。
現在のほとんどのディスプレイが24 bit color(True
Color)つまり、赤・緑・青それぞれ8bit(0~255)
これを利用して...
例えば…
黒(0, 0, 0) 白(255, 255, 255) 赤(255, 0, 0)
緑(0, 255, 0) 青(0, 0, 255) 黄(255, 255, 0)
色を変えてみよう(part.2)
• Javaで様々な色を出す場合は以下のメソッドを
使う。
黒
g.setColor(new Color(0, 0, 0));
赤
g.setColor(new Color(255, 0, 0));
緑
g.setColor(new Color(0, 255, 0));
青
g.setColor(new Color(0, 0, 255));
このようにして、色々な色で
塗りつぶしてみよう!
Exercise 2-2
• 円描画メソッドを自作しよう
• 描かれている多角形の角数を
徐々に増やしてみよう
• drawLineメソッドを自分で作ってみよう
円描画メソッドを自作しよう
• 円を描画するには、まず円の中心点・半径・角
度のきざみを定義する。
▫ 中心点(200, 200)
▫ 半径 100
▫ 角度きざみ 8
• 三角関数を使い座標を求める
(ex, ey)
90度
(200, 200)
45度
100
▫ cosθを使ってx座標
▫ sinθを使ってy座標
得られたx, y座標を始点(sx, sy)、終点(ex, ey)として両
点をdrawLineメソッドを使って結ぶ。
(sx, sy)
描かれている多角形の角数を
徐々に増やしてみよう
16角
24角
32角
• 曲線は細かい直線が集まったものだとわかる
• つまり、円も非常に細かい多角形である
drawLineメソッドを自分で作ってみよう
• 2点を結ぶ直線を描くには?
▫ 2点間の直線の傾きを求める
傾き 
yの増加量 y 2  y1

xの増加量 x 2  x1
 上記の式から、傾きとはxの変化量に対するyの変化量
↓
 xが1変化したときのyの増加量
▫ 始点に対してxが変化するごとに傾きを加算していく
また余談・・・
パソコンの画面を虫眼鏡で覗くと…
非常に細かい格子状になっている
つづき
なので、一見キレイに見える直線も拡大すると…
つまり、直線も画面上では点の集まりだとわかる!
このことを直線描画の考えに取り入れてみよう!
直線描画
• 2点をP1(1, 1) , P2(3, 5)としたとき
▫ 傾き=(5-1/3-1)=2
P2(3, 5)
▫ xが+1でyは+2変化
+2
▫ xが+2(+1*2)で
yは+4(+2*2)変化
P1(1, 1)
+4
+2
+1
つまり…
yの変化量
yの値 
* ( xの値  xの始点)  yの始点
xの変化量
+1
+2
この式でxが1づつ変化するごとにyを計算する。
Exercise 2-3
• 図形の回転を、原点中心ではなく
図形の中心で回転するように修正しよう
• スクロールバーを利用して
図形を平行移動させよう
• スクロールバーを利用して
図形を拡大縮小させよう
図形の回転を修正しよう
現在
修正後
図形を画面の中心ではなく
原点中心に配置し回転してみよう
図形を平行移動・拡大縮小してみよう
• 平行移動
▫ スクロールバーが-256~+256まで変化するので、
その値を3頂点それぞれに加えれば良い。
• 拡大縮小
▫ スクロールバーが0~+2.0まで変化するので、そ
の値を3頂点それぞれに乗算すれば良い。
Exercise 2-4
• 塗りつぶしを実装しよう
 最小値・最大値を記憶・更新しよう
 最小値と最大値の間を補間しよう
• 色をグラデーションにしてみよう
塗りつぶしを実装しよう
• 塗りつぶしの手順
▫ 図形内のピクセルをすべて補間する必要がある
1. 図形の左辺(最小値)と右辺(最大値)の値を記憶(更新)
2. 左右の値から、間を補間する
最小値・最大値を記憶・更新しよう
• drawLineで辺を1点づつ打ったように
3角形の3辺を1点づつ記憶領域に確保していく
Example 1
Example 2
右辺を
最大値として記憶
右辺を
最大値として記憶
左辺を
最小値として記憶
左辺を
最小値として記憶
最小値と最大値の間を補間しよう
• 先ほど記憶した左右の記憶領域を線形に補間していく
順に左右の値を
1点づつ補間していく
色を変えてみよう(グラデーション)
• 先ほど説明したように、複雑な色は三原色を0~255の
範囲で組み合わせて作れる!
• 三原色の諧調を徐々に変えることによって、グラデー
ションの表現が可能!
• 頂点にx, y座標だけでなく
RGBの値も持たせてその値を
補間して、グラデーションを
実現しよう。
Exercise 2-5
• 図形にテクスチャを貼ってみよう
図形にテクスチャを貼ってみよう
• x, y座標の他に頂点に新たにテクスチャ用の座標u, vを
定義します。
• その定義したu, v座標をx, y座標に対応させ、その頂点
の色をテクスチャから得ることによって、頂点色が決
まります。
対応させる
3D図形の描画
Exercise 3-1
• x, y座標の他にz座標(奥行き)を追加して
2D図形から3D図形に変えてみよう
• 今までのz軸回転にx, y軸回転を追加して
3次元の座標変換をしてみよう
2D図形から3D図形に変えてみよう
• 奥行きを追加すると、一見2Dに見える図形も…
回転
ただの四角形に見えるが・・・
本当は奥行きを持った立方体である
3次元の座標変換をしてみよう
• z軸回転だけだと、3Dの図形かわからない
Z軸回転
3軸回転
3Dの図形だとわかる
Exercise 3-2
• 今描いた3D図形は現実世界と異なる部分がある
それはどの部分が考えてみよう
3D図形と現実世界との違い
• 2つの絵は同じような図形(直方体)を正面から見
た図です
• 違いは一目瞭然ですね
現実世界ではパースという、同じ大
きさの物でも、視点から遠いほど小
さくなる視覚効果がある。
Exercise 3-3
• 3Dの図形も2Dの図形で行ったように
塗りつぶしてみよう
• 3Dの図形における、
塗りつぶしの問題を解決しよう
塗りつぶしの問題を解決しよう
修正前
• 以下のような、おかしい塗り
つぶしになってしまう。
奥行きが考慮されていな
いために、前後関係がお
かしくなってしまう。
塗りつぶしの問題を解決しよう
修正後
図形のピクセルを描く毎
に、zの値を記憶し、そ
の記憶されているzと前
後関係を判定することに
よって、図形が適切な前
後関係となる。
• 適切な塗りつぶしになった!
Exercise 3-4
• テクスチャ座標を定義し
テクスチャを張り付けてみよう
• 3Dの図形における、
テクスチャ貼り付けの問題点を考察しよう
テクスチャ貼り付けの問題点
• 下の2枚の画像の違いがわかるかな?
こちらは、テクスチャが歪
んでいるのがわかります。
パースペクティブ
コレクトという技
法を使っている
一方こちらは、キレイにテ
クスチャが貼られているの
がわかります。
Exercise 3-5
• 光源ベクトルと法線ベクトルの内積を用いて
図形のポリゴンごとに照明効果を加えてみよう
• 光源ベクトルと法線ベクトルの内積を用いて
図形の頂点ごとに照明効果を加えてみよう
図形に照明効果を与えよう
 塗りつぶしやテクスチャだけでは、3Dの図形
であることが識別しづらい。
 図形に立体感を出すために、図形に陰影をつ
ける。これにより、図形に立体感が増す。
図形に陰影をつけよう
 面には法線ベクトルという、面に対して垂直
なベクトルが存在する。このベクトルと光源ベ
クトル(光の向き)の内積を計算することによっ
て、陰影をつけることができる。
N
Ip
L
光の拡散  N  L
ダウンロード

CG - 池戸研究室2007