1 / 42

CG の基本構成①

CG の基本構成①. コンピュータグラフィックス映像制作 講義資料 [ 編集 ] 池戸研究室. Exercise 2. 2D 図形の描画. Exercise 2-1. Graphics クラスにあるメソッドを使って 　　　　　　シンプルな図形を描いてみよう 色を変えて図形を描いてみよう. Graphics クラスの描画メソッド (part.1). drawLine(x1, y1, x2, y2). drawRect(x, y, w, h). (x1,y1) から (x2,y2) へ直線を描く.

waseem
Download Presentation

CG の基本構成①

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CGの基本構成① コンピュータグラフィックス映像制作 講義資料 [編集]池戸研究室

  2. Exercise 2 2D図形の描画

  3. Exercise 2-1 • Graphicsクラスにあるメソッドを使って 　　　　　　シンプルな図形を描いてみよう • 色を変えて図形を描いてみよう

  4. Graphicsクラスの描画メソッド(part.1) drawLine(x1, y1, x2, y2) drawRect(x, y, w, h) • (x1,y1) から (x2,y2) へ直線を描く • (x,y) を左上として、w×h の大きさの長方形を描く

  5. Graphicsクラスの描画メソッド(part.2) drawOval(x, y, w, h) fillRect(x, y, w, h) • (x,y) を左上として、w×h の大きさの長方形に内接する楕円を描く • (x,y) を左上として、w×h の大きさの長方形を塗りつぶす

  6. Graphicsクラスの描画メソッド(part.3) fillOval(x, y, w, h) drawArc(x, y, w, h, a1, a2) • (x,y) を左上として、w×h の大きさの長方形に内接する楕円を塗りつぶす • 楕円の a1 度を始点とし a2 度の大きさだけの弧を描く

  7. Graphicsクラスの描画メソッド(part.4) fillArc(x, y, w, h, a1, a2) int[] x={ 100,50,120,150 };int[] y={ 50,100,110,80 };drawPolygon(x,y,4); • 楕円の a1 度を始点とし a2 度の大きさだけの弧を塗りつぶす • 多角形を描く。多角形の座標は配列を使って左のように指定する。

  8. Graphicsクラスの描画メソッド(part.5) int[] x={ 100, 50, 120, 150 };int[] y={ 50, 100, 110, 80 };fillPolygon( x, y, 4); • 多角形を塗りつぶす。多角形の座標は配列を使って左のように指定する。

  9. 色を変えてみよう(part.1) • 以下の下線部分を書き換えると… g.setColor(Color.black); g.setColor(Color.blue); 他にも red, yellow, orange, green…

  10. ここで余談･･･ • ディスプレイでの色の表現は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)

  11. 色を変えてみよう(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)); このようにして、色々な色で塗りつぶしてみよう！

  12. Exercise 2-2 • 円描画メソッドを自作しよう • 描かれている多角形の角数を 　　　　　　　　　　徐々に増やしてみよう • drawLineメソッドを自分で作ってみよう

  13. 円描画メソッドを自作しよう • 円を描画するには、まず円の中心点・半径・角度のきざみを定義する。 • 中心点(200, 200) • 半径 100 • 角度きざみ 8 • 三角関数を使い座標を求める • cosθを使ってx座標 • sinθを使ってy座標 (ex, ey) 90度 (200, 200) 45度 100 (sx, sy) 得られたx, y座標を始点(sx, sy)、終点(ex, ey)として両点をdrawLineメソッドを使って結ぶ。

  14. 描かれている多角形の角数を徐々に増やしてみよう描かれている多角形の角数を徐々に増やしてみよう 16角 24角 32角 • 曲線は細かい直線が集まったものだとわかる • つまり、円も非常に細かい多角形である

  15. drawLineメソッドを自分で作ってみよう • 2点を結ぶ直線を描くには？ • 2点間の直線の傾きを求める • 上記の式から、傾きとはxの変化量に対するyの変化量 　　　　　↓ • xが1変化したときのyの増加量 • 始点に対してxが変化するごとに傾きを加算していく

  16. また余談･･･ パソコンの画面を虫眼鏡で覗くと… 非常に細かい格子状になっている

  17. つづき なので、一見キレイに見える直線も拡大すると… つまり、直線も画面上では点の集まりだとわかる！ このことを直線描画の考えに取り入れてみよう！

  18. 直線描画 • 2点をP1(1, 1) , P2(3, 5)としたとき • 傾き=(5-1/3-1)=2 • xが+1でyは+2変化 • xが+2(+1*2)で yは+4(+2*2)変化 つまり… この式でxが１づつ変化するごとにyを計算する。 P2(3, 5) +2 +4 P1(1, 1) +2 +1 +1 +2

  19. Exercise 2-3 • 図形の回転を、原点中心ではなく 　　　　図形の中心で回転するように修正しよう • スクロールバーを利用して 図形を平行移動させよう • スクロールバーを利用して 図形を拡大縮小させよう

  20. 図形の回転を修正しよう 　　　現在　　　　　　　　　　　修正後　 図形を画面の中心ではなく 　　　　　　　　　原点中心に配置し回転してみよう

  21. 図形を平行移動・拡大縮小してみよう • 平行移動 • スクロールバーが-256～+256まで変化するので、その値を3頂点それぞれに加えれば良い。 • 拡大縮小 • スクロールバーが0～+2.0まで変化するので、その値を3頂点それぞれに乗算すれば良い。

  22. Exercise 2-4 • 塗りつぶしを実装しよう • 最小値・最大値を記憶・更新しよう • 最小値と最大値の間を補間しよう • 色をグラデーションにしてみよう

  23. 塗りつぶしを実装しよう • 塗りつぶしの手順 • 図形内のピクセルをすべて補間する必要がある • 図形の左辺(最小値)と右辺(最大値)の値を記憶(更新) • 左右の値から、間を補間する

  24. 最小値・最大値を記憶・更新しよう Example 1 drawLineで辺を1点づつ打ったように 3角形の3辺を1点づつ記憶領域に確保していく Example 2 右辺を 最大値として記憶 右辺を 最大値として記憶 左辺を 最小値として記憶 左辺を 最小値として記憶

  25. 最小値と最大値の間を補間しよう • 先ほど記憶した左右の記憶領域を線形に補間していく 順に左右の値を 1点づつ補間していく

  26. 色を変えてみよう(グラデーション) • 先ほど説明したように、複雑な色は三原色を0～255の範囲で組み合わせて作れる！ • 三原色の諧調を徐々に変えることによって、グラデーションの表現が可能！ • 頂点にx, y座標だけでなく • RGBの値も持たせてその値を • 補間して、グラデーションを • 実現しよう。

  27. Exercise 2-5 • 図形にテクスチャを貼ってみよう

  28. 図形にテクスチャを貼ってみよう • x, y座標の他に頂点に新たにテクスチャ用の座標u, vを定義します。 • その定義したu, v座標をx, y座標に対応させ、その頂点の色をテクスチャから得ることによって、頂点色が決まります。 対応させる

  29. Exercise 3 3D図形の描画

  30. Exercise 3-1 • x, y座標の他にz座標(奥行き)を追加して 2D図形から3D図形に変えてみよう • 今までのz軸回転にx, y軸回転を追加して 3次元の座標変換をしてみよう

  31. 2D図形から3D図形に変えてみよう • 奥行きを追加すると、一見2Dに見える図形も… 回転 ただの四角形に見えるが･･･ 本当は奥行きを持った立方体である

  32. 3次元の座標変換をしてみよう • z軸回転だけだと、3Dの図形かわからない Z軸回転 3軸回転 3Dの図形だとわかる

  33. Exercise 3-2 • 今描いた3D図形は現実世界と異なる部分がある 　　　　　　　　　それはどの部分が考えてみよう

  34. 3D図形と現実世界との違い • 2つの絵は同じような図形(直方体)を正面から見た図です 現実世界ではパースという、同じ大きさの物でも、視点から遠いほど小さくなる視覚効果がある。 • 違いは一目瞭然ですね

  35. Exercise 3-3 • 3Dの図形も2Dの図形で行ったように 塗りつぶしてみよう • 3Dの図形における、 塗りつぶしの問題を解決しよう

  36. 塗りつぶしの問題を解決しよう 修正前 奥行きが考慮されていないために、前後関係がおかしくなってしまう。 • 以下のような、おかしい塗りつぶしになってしまう。

  37. 塗りつぶしの問題を解決しよう 修正後 図形のピクセルを描く毎に、zの値を記憶し、その記憶されているzと前後関係を判定することによって、図形が適切な前後関係となる。 • 適切な塗りつぶしになった！

  38. Exercise 3-4 • テクスチャ座標を定義し 　　　　　　　テクスチャを張り付けてみよう • 3Dの図形における、 テクスチャ貼り付けの問題点を考察しよう

  39. テクスチャ貼り付けの問題点 • 下の2枚の画像の違いがわかるかな？ パースペクティブコレクトという技法を使っている こちらは、テクスチャが歪んでいるのがわかります。 一方こちらは、キレイにテクスチャが貼られているのがわかります。

  40. Exercise 3-5 • 光源ベクトルと法線ベクトルの内積を用いて 　　図形のポリゴンごとに照明効果を加えてみよう • 光源ベクトルと法線ベクトルの内積を用いて 　　図形の頂点ごとに照明効果を加えてみよう

  41. 図形に照明効果を与えよう • 塗りつぶしやテクスチャだけでは、3Dの図形であることが識別しづらい。 • 図形に立体感を出すために、図形に陰影をつける。これにより、図形に立体感が増す。

  42. N Ip L 図形に陰影をつけよう • 面には法線ベクトルという、面に対して垂直なベクトルが存在する。このベクトルと光源ベクトル(光の向き)の内積を計算することによって、陰影をつけることができる。

More Related