CG

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

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

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

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

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

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

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

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

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

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

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

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

7.12 参考 :3D モデルデータの取得 Google Poly TurboSquid oly.google.com www.turbosquid.com Free3D Artist-3D.com free3d.com artist-3d.com 3DModelFree.com XOIO Air www.3dmodelfree.com 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