CG

Size: px

Start display at page:

Download "CG"

みりあはなだて
4 years ago
Views:

1 Grahics with Processig DCG とモデリングの基礎 htt://vilab.org 塩澤秀和 1

2 7.1 3D 図形の描画 3D 基本設定 size( 幅, 高さ, P3D) ウィンドウを3D 用で開く lights() 標準の照明を設定 draw() のなかで最初に書く ersective() 透視投影に設定 ( 第 9 回 ) 3 次元座標系 ( 無指定時 ) 原点 (,, ) Processig では z 軸は手前方向 -z 奥行き 3D 基本形状 bo( 辺の長さ ) bo( 幅, 高さ, 奥行き ) 原点に立方体 / 直方体を描画 shere( 半径 ) 原点に球を描画通常は ostroke() で描く y ウィンドウ ( 窓 ) (width, height, ) 2

3 7.2 * 座標系のとり方 (.32) 左手系視点座標系 CGゲーム DirectX y 右手系 CG 理論数学工学分野 OeGL y z 奥手前 z 左手系 Processig 手前 z 右手系建築座標系 z y 奥 y 3

4 7.3 3D での位置設定 3D での位置設定座標変換を駆使せよ 3DCG では, 幾何変換で図形を配置する考え方が必須!! boもshereもそのときの描画座標系の原点付近に図形を描く原点と拡大率を常に意識! 行列スタックの操作 ushmatri() システム変換行列 ( 論理座標系 ) を一時的に退避する使い方は,2 次元と同じ omatri() 最近保存した論理座標系を戻す ush と o は必ず対にすること 3 次元幾何変換 traslate(t, ty, tz) 座標系の平行移動最初に (width/2, height/2, ) に原点をもってくると分かりやすい scale(s, sy, sz) 座標系の拡大縮小原点を中心に全体が拡大 rotatex(θ) 軸まわりの回転 rotatey(θy) y 軸まわりの回転 rotatez(θz) z 軸まわりの回転 rotatez 2 次元の rotate(θz) と同じ z 4 rotatex rotatey y

5 7.4 3D 描画の例 void setu() { // P3D モードでウィンドウを開く size(4, 4, P3D); oloo(); void draw() { backgroud(); // 標準の照明 lights(); // 透視投影 ersective(); // 原点を移動 traslate(width/2, height/2, ); ostroke(); fill(255, 2, 2); // 原点に半径 1 の球を描画 shere(1); // 回転する立方体 float rot =.; void setu() { size(4, 4, P3D); void draw() { backgroud(7); lights(); ersective(); traslate(width/2, height/2, ); ushmatri(); rotatey(radias(rot++)); stroke(255,, ); fill(255, 255, ); bo(1); omatri(); 5

6 7.5 * モデリングの基礎モデリングモデリングとは (.33) 3D オブジェクト ( 物体 ) の形状を数値データの集合で表すこと形状モデル (.6) ワイヤーフレームモデル線の集合で物体を表現するサーフェスモデル物体の表面 ( だけ ) を表す通常はポリゴン ( 多角形 ) の集合ソリッドモデル物体の内外を示す情報もあり, 中身が詰まっているモデルポイントクラウド ( 点群 ) 点 (+ 色 ) の集合によるデータ簡単なモデリングポリゴンの描画ポリゴン olygo = 多角形物体表面のポリゴンを描画する (begishae~edshae) 例 ) 三角柱幅 =2(-1 1), 原点に重心, 高さ =2(-1 y 1) O z 真下から見た図 6

7 7.6 ポリゴンの描画例 rism( プリズム ) は角柱という意味 // 三角柱を表示する void setu() { size(4, 4, P3D); void draw() { backgroud(); lights(); ersective(); traslate(width/2, height/2); ushmatri(); rotatex(radias(framecout)/2); rotatey(radias(framecout)); // ofill() ならワイヤーフレーム表示 fill(255, 255, ); stroke(1, 255, 1); // 底面の幅と高さを指定して描画 rism3(6, 12); omatri(); void rism3(float w, float h) { w /= 2; h /= 2; float g = sqrt(3) / 3. * w; // 側面の 3 枚の長方形 begishae(quads); verte(w, -h, -g); verte(w, h, -g); verte(, h, g*2); verte(, -h, g*2); verte(, -h, g*2); verte(, h, g*2); verte(-w, h, -g); verte(-w, -h, -g); verte(-w, -h, -g); verte(-w, h, -g); verte(w, h, -g); verte(w, -h, -g); edshae(); // 底面と上面の三角形 begishae(triangles); verte(w, -h, -g); verte(, -h, g*2); verte(-w, -h, -g); verte(w, h, -g); verte(, h, g*2); verte(-w, h, -g); edshae(); 7

8 7.7 点群による描画例 PImage img; // 球の表面画像 void setu() { size(6, 6, P3D); img = loadimage("earth.jg"); img.loadpiels(); // 点群による球面の描画例 void oitshere(float r, it d, PImage g) { strokeweight(d * 4); // 緯度 (lat) と経度 (lg) による 2 重ループ for (it lat = 9 - d; lat > -9; lat -= d) { float a = radias(lat); it e = (it)(d / cos(a)); // 緯度で間隔調整 for (it lg = -18; lg < 18; lg += e) { void draw() { // 表面画像の対応点から色を抽出 backgroud(); it u = (lg + 18) * g.width / 36; lights(); ersective(); it v = (-lat + 9) * g.height / 18; stroke(g.iels[u + v * g.width]); traslate(width/2, height/2); ushmatri(); // 緯度経度から球面の3D 座標を計算 rotatex(radias(framecout)/2); float b = radias(lg); oit(r * cos(a) * cos(b), r * si(a), rotatey(radias(framecout)); r * cos(a) * si(b)); oitshere(2, 2, img); omatri(); 8

9 7.8 モデルデータの利用 3D モデル表示 PShae 型 P3D では OBJ データが利用可能 (2D の PShae は第 3 回資料参照 ) 読み込みと表示 loadshae(" ファイル名 ") shae( 図形 ) shae( 図形,, y, z) その他の操作 PShae のメソッドで拡大, 回転, 頂点の座標法線ベクトル色の編集, 図形の追加などができる scale, rotate, getverte 等 OBJ Loader (ver.1 でも対応 ) htts://code.google.com/ /saitoobjloader/ // 準備 : beethove.zi をダウンロードし, // 中身の 3 ファイルを data フォルダに入れる PShae model; void setu() { size(4, 4, P3D); model = loadshae("beethove.obj"); model.scale(2); void draw() { backgroud(,, 1); lights(); ushmatri(); traslate(width/2, height/2, ); rotatex(pi); rotatey(radias(framecout)); shae(model); omatri(); 9

10 7.9 演習課題課題問 1) 正八面体を描画するプログラムを作成しなさい (-a,,) 8 枚の正三角形を描画する (begishae で TRIANGLES) 回転させて裏側も確認しよう他の図形を追加してもよい (,,a) (,-a,) (,a,) (,,-a) (a,,) é3. A = ê ê êë.5 écos 45 C = ê ê si 45 êë ù ú ú 1úû - si 45 cos 45 問 2) 前回の復習 ù ú ú 1úû 2 次元幾何変換 A~C について以下の問いに答え,A4 用紙で提出しなさい 1. 合成変換行列 AB を計算しなさい é1 B = ê ê êë 4ù 2 ú ú 1 úû 2. 変換 AB の後に座標 (2, 6) に点を打つと, 画面のどこに表示されるか? 3. 合成変換行列 BA を計算し,AB との意味の違いを説明しなさい 4. 行列 C に対応する Processig の命令を示しなさい ( 定数 PI を用いてもよい ) 5. 合成変換行列 C 2 =CC を計算し, どのような変換か説明しなさい 1 1

11 7.1 参考 :3DCG ソフトウェア紹介 MagicaVoel おすすめ ehtracy.github.io Miecraft のようにボクセル ( 立方体 ) でモデリングメタセコイア日本製で資料が豊富, 無料版あり Art of Illusio 基本機能をサポート,Java 製 SketchU Make 建物人工物のモデリングに向く Bleder 高機能でフリー & オープンソース Maya / 3ds Ma など Autodesk 社のプロ向け製品学生は無償で利用可能 Scultris iologic.com/scultris/ 粘土彫刻のようにモデリング Vue Pioeer 自然景観生成 ( 非商用フリー版 ) DAZStudio 人体ポーズ & アニメーション作成ブラウザソフトウェア stehaegiier.com/scultgl/ 11

12 7.11 参考 :Art of Illusio Art of Illusio 概要 ArtOfIllusio???-Widows.ee 基本機能をサポート ( モデリング, レンダリング, アニメーション ) Java& フリー & オープンソース使い方の参考 ( 日本語 ) yuzu.qee.j/artofillusio/docs /AoIMaual29_J2/layout.html ei- ~masahiko/moi.cgi/aoi Processig との連携 OBJ 形式でエクスポート shae 関数で描画可能な限りポリゴン数を減らす使い方のポイント基本描画左のツールボタンから選択図形の配置, 移動, 回転など [ シーン ] [ レンダー ] でレイトレーシングのCGも生成できる色とテクスチャ単色 : タイプ [Uiform] 画像 : タイプ [Image Maed] OBJ 形式での出力 [ ファイル ] [ データ書き出し ] [Wavefrot(.obj)] [ テクスチャを mtl で書き出し ] OBJ 出力での注意点 AoI の発光色 (Ke) は,OBJ では環境反射色 (Ka) に変換される 12

13 7.12 参考 :3D モデルデータの取得 Google Poly TurboSquid oly.google.com Free3D Artist-3D.com free3d.com artist-3d.com 3DModelFree.com XOIO Air oio-air.de Uityアセットストア assetstore.uity.com/search?q=3d&q=models&q=rice: OBJ 出力 assetstore.uity.com/ackages/tools/utilities/scee-obj-eorter-2225 SketchU Make 3dwarehouse.sketchu.com OBJ 出力できるプラグイン sketchu-oigiri.jimdo.com/sketchu-lugis/su2objmtl/ 13

CG

Grahics with Processig 219-7 3DCG とモデリングの基礎 htt://vilab.org 塩澤秀和 1 7.1 3D 図形の描画 3D 基本設定 size( 幅, 高さ, P3D) ウィンドウを3D 用で開く lights() 標準の照明を設定 draw() のなかで最初に書く ersective() 透視投影に設定 ( 第 9 回 ) 3 次元座標系 ( 無指定時 )