第７回　コンピュータグラフィクス演習（遠隔講義）
自由形状を作る

講義に関する質問について

この授業について質問がある場合は、hemmi@sun.ac.jp までメールで問い合わせてください。
その際、件名は 「コンピュータグラフィクス演習の講義について（７）」 としてください。

【注意】ブラウザは Internet Explorer を使っているか確認してください。
　

【エラーメッセージについて】

プログラムが複雑になってくるとエラーが出る場合があります。
その際は「エラーメッセージについて」を参照してください。
　

前回の授業では、テクスチャの使い方を学びました。

今回は、自由形状（基本図形以外のオブジェクト）を作る方法について学びます。

VRMLでは基本図形（プリミティブ）以外のオブジェクトとして、次の3種類が準備されています。

　・頂点を指定して図形を作る（IndexedFaceSet）
　・地形形状を作る（ElevationGrid）
　・押し出しにより形状を作る（Extrusion）
　

頂点を指定して図形を作る（IndexedFaceSet）

IndexedFaceSetを用いれば、頂点の3次元座標を指定し、それを結ぶことで図形を作ることができます。
例えば、3つの座標を指定し、その3点を結べば三角形が作れます。
４つの座標を指定し、その４点を結べば四角形が作れます。
多数の座標を指定し、面を複数作れば立体ができます。

IndexedFaceSetでは、頂点を指定する部分（point[ ]）と、頂点を結んで面を指定する部分（coordIndex[ ]）が必要です。
pointもcoordIndexも括弧は角括弧[ ]になるので注意してください。

【文法】基本的な文法は次のようになります。

geometry IndexedFaceSet{
  coord Coordinate{
    point[
　　0番目の頂点座標 X Y Z , 　　←　X Y Z 座標の値をスペースで区切り、Z座標の後ろに , を入れます。
　　1番目の頂点座標 X Y Z , 　
　　2番目の頂点座標 X Y Z ,　
　　　　　　・
　　　　　　・
　　　　　　・
    ]
  }
  coordIndex[ 
　　頂点の番号 , 頂点の番号 , 頂点の番号 , -1 　　←　頂点座標の番号をつないで面を作る。-1 で終了。
  ]
  solid FALSE        #裏面の表示設定（ここは触らないこと）
}　

【例】４つの頂点を指定して四角形を作る
point[ ]に頂点の3次元座標を順番に指定していきますが、頂点番号は0から始まるので注意！
coordIndex[ ]で面を指定する時に0番から指定する必要があります（頂点番号を反時計回りに並べます）。


#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{ }
  }
  geometry IndexedFaceSet{
    coord Coordinate{
      #頂点の座標を設定
      point[    
        3.0 0.0 0.0 ,    #0番目の頂点の3次元座標（最後はコンマを入れる）（最初に指定する頂点が０番になります）
        0.0 3.0 0.0 ,    #1番目の頂点の3次元座標（最後はコンマを入れる）
        -3.0 0.0 0.0 ,   #2番目の頂点の3次元座標（最後はコンマを入れる）
        0.0 -3.0 0.0 ,   #3番目の頂点の3次元座標（最後はコンマを入れる）
      ]
   }
    #頂点をつないで面を作る（反時計回りにつなぐ。順番が違うと上手く表示されない場合がある。）
    #この例では３つの頂点をつないで３角形を作っているが、頂点の数を増やして多角形を作ることもできる。
    coordIndex[ 
      0,1,2,3, -1 ,      #0,1,2番目の順につなぐ、-1は面の終りを表す
    ]
    solid FALSE         #裏面は非表示（ここは触らないこと）
  }
}



実行例

「頂点を指定して図形を作る」のさらに詳しい例はこちらを参考にしてください。

【問題１】
次の図形を作りなさい

星
 

地形形状（ElevationGrid）

地形形状を作りたいときはElevationGridを使います。
X-Z平面に定義する格子点の数（xDimension、zDimension）とその距離（xSpacing 、zSpacing）、格子点の高さ（height[ ]）を指定します。
heightの括弧は角括弧[ ]になるので注意してください。
　

【文法】基本的な文法は次のようになります。

geometry ElevationGrid{
  xDimension   x方向の格子点の数
  zDimension   z方向の格子点の数
  xSpacing     x方向の格子点間の距離
  zSpacing     z方向の格子点間の距離
  height[
    格子点の高さ（カンマで区切る）
  ]
}

【例】格子点に高さを割り当てて地形図を作る
格子数は１０×１０、格子点間の距離は０．５。
height[ ]に格子点の高さを列挙します。
　
　
#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{}
  }
  geometry ElevationGrid{       #地形形状の表示
    xDimension 10       #x方向の格子点の数
    zDimension 10       #z方向の格子点の数
    xSpacing 0.5        #x方向の格子点間の距離
    zSpacing 0.5        #z方向の格子点間の距離
    #格子点の高さを設定（１０×１０）
    height[
      0.5, 0.5, 0.4, 0.4, 0.5, 0.6, 0.4, 0.4, 0.5, 0.2,
      0.5, 0.5, 0.3, 0.4, 0.4, 0.5, 0.4, 0.4, 0.4, 0.2,
      0.4, 0.4, 0.3, 0.2, 0.2, 0.2, 0.4, 0.4, 0.3, 0.2,
      0.4, 0.3, 0.2, 0.2, 0.2, 0.2, 0.2, 0.3, 0.3, 0.2,
      0.2, 0.2, 0.2, 0.0, 0.0, 0.0, 0.0, 0.1, 0.1, 0.1,
      0.2, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1,
      0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1,
      0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1, -0.1, -0.2, -0.3,
      -0.1, -0.1, -0.2, -0.2, -0.3, -0.4, -0.5, -0.5, -0.5, -0.5,
      -0.2, -0.4, -0.4, -0.4, -0.5, -0.3, -0.5, -0.5, -0.5, -0.5
    ]
  }
}

実行例

地形にテクスチャを貼り込むときは

appearance Appearance{
  texture ImageTexture{
     url "yama_pic.jpg"
  }
}

のようにすれば良い。テクスチャファイルはVRMLファイルと同じフォルダに入れます。

実行例

【テクスチャサンプル】
yama_pic.jpg

　　

【問題２】例題の地形図に、頂点を指定して作った平面（水色）を重ねて湖を表現しなさい。

実行例

押し出し（Extrusion）

押し出しとは、底面の図形を定義し、それを押し出して（そのまま引き延ばして）立体を作る方法のことをいいます。

【文法】基本的な文法は次のようになります。

Extrusion{
    crossSection[
       断面図形（ｘｚ平面（上から見た平面）の座標を指定する。必ず始点まで戻す）
     ]
     spine[
       押し出す軸
     ]
     orientation[
       回転軸と回転角度
     ]
     scale[
       断面の倍率
     ]
  }

【例】１辺の長さが１の正方形を上方に伸ばして直方体を作る。
crossSection[ ]に底面の形を定義する（ここでは、長さ１の正方形を定義しています）。
spine[ ]に底面の図形を伸ばす方向を指定する。
この例では、原点から真っすぐ上に３伸ばしています（（0.0 0.0 0.0）から（0.0 3.0 0.0）に伸ばす）。
crossSectionもspineも括弧は角括弧[ ]になるので注意してください。


#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{ diffuseColor 0.0 1.0 0.0 }
  }
  geometry Extrusion{
    #原点を中心とした長さ１の正方形（ｘｚ平面の座標で指定）。５点（終点は始点を指定）指定する必要がある！
    crossSection[
       0.5 0.5, 0.5 -0.5, -0.5 -0.5, -0.5 0.5, 0.5 0.5
     ]
     #上方に伸ばす
     spine[
       0.0 0.0 0.0,   #この座標から
       0.0 3.0 0.0    #この座標に伸ばす
     ]
  }
}

実行例

「押し出し」のさらに詳しい例はこちらを参考にしてください。　

【問題３】
次の図形を作りなさい（星形の底面を作って真っすぐ上に引き伸ばします）
　星

第７回の講義はここまでで終了です

１０：３０までに、ここまでの課題（問題【１】から問題【３】まで）が終わったかどうかを返信してください。
返信は、LiveCampusの「授業連絡」から行ってください。
返信内容は、「終わった」または「終わらなかった」のいずれかとしてください。

【返信期限】　

2020年6月1日（月）　１0：3０
　　

【返信方法】

LiveCampusの「授業連絡」から「返信」で行ってください。
　

【返信内容】

「終わった」または「終わらなかった」のいずれかで答えてください。

　
　
以上