CG

Grahics with Processig 219-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 3D モデルデータの利用 3D モデル表示 PShae 型 P3DではOBJデータが利用可能 (2DのPShaeは第 3 回資料参照 ) モデルの読み込み m = loadshae(" ファイル名 ") 2D 同様,setu() 内で準備する モデルの表示 shae(m) shae(m,, y, z) モデルの幾何変換 モデルデータ内における変換 m.traslate( ) m.scale( ) m.rotate{x,y,z( ) PShae のメソッド 描画色の設定 m.setfill( 色 or 真偽値 ) m.setstroke( 色 or 真偽値 ) 例 ) ofill() に相当することは, m.setfill(false) とする 入れ子モデルの取得 モデルの中に階層的にモデルが入っていることがある it = m.getchildcout() PShae c = m.getchild(i) 頂点座標の取得 その階層の頂点を順に取得 it = m.getvertecout() PVector v = m.getverte(i) PVector 型は,y,z 座標を持つ 8

7.8 3D モデルデータの表示例 // 準備 : beethove.zi をダウンロードし, // 中身の 3 ファイルを data フォルダに入れる PShae model; void setu() { size(4, 4, P3D); model = loadshae("beethove.obj"); // テクスチャを無効化にして色をつける例 //model.setteture(ull); //model.setfill(true); //model.setfill(color(255,, )); void draw() { backgroud(,, 128); lights(); traslate(width/2, height/2, ); rotatex(pi); rotatey(radias(framecout)); scale(2); // 通常のモデル表示 shae(model); // 頂点のみを表示する例 //stroke(255); strokeweight(.1); //shaeaspoits(model); // 頂点情報を取り出して点群で描画する例 void shaeaspoits(pshae sh) { it = sh.getvertecout(); for (it i = ; i < ; i++) { PVector v = sh.getverte(i); oit(v., v.y, v.z); = sh.getchildcout(); for (it i = ; i < ; i++) shaeaspoits(sh.getchild(i)); 9

7.9 演習課題 課題 問 1) 正八面体を描画するプログラムを作成しなさい 8 枚の正三角形を描画する (begishaeでtriangles) (-a,,) 回転させて裏側も確認しよう他の図形を 追加 してもよい (,,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 参考 : 点群による球の描画 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(); lights(); ersective(); traslate(width/2, height/2); // 表面画像の対応点から色を抽出 it u = (lg + 18) * g.width / 36; it v = (-lat + 9) * g.height / 18; stroke(g.iels[u + v * g.width]); 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(); 11

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

7.11 参考 :3D モデルデータの取得 Google Poly oly.google.com Free3D free3d.com 3DModelFree.com www.3dmodelfree.com TurboSquid www.turbosquid.com Artist-3D.com artist-3d.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 3D Warehouse 3dwarehouse.sketchu.com OBJ 出力できるプラグイン sketchu-oigiri.jimdo.com/sketchu-lugis/su2objmtl/ 13