2008年度　イントロダクトリセミナー（システム環境情報学研究室）第１日目

２００８年度　システム情報科学特別演習（イントロダクトリセミナー）

サイバーフィールド実習
実世界の３次元モデル構築　第１日目

担当：システム環境情報学研究室　小野里　雅彦
最終改訂：２００８年４月１２日

３次元世界の表現の基礎

３次元の世界をコンピュータ内に構築する場合に，考えなくてはならないことは，

もの（対象）の配置をどのように表現するか？【配置】
もの（対象）の形をどのように表現するか？【形状】
もの（対象）の色や質感などをどのように表現するか？【外観】
仮想世界を観察する視点（カメラ）をどのように設定するか？【視点】
仮想世界を照らす照明をどのように設定するか？【照明】
仮想世界の運動や変形，性質の時間変化をどのように実装するか？【変化】

などがあります．それぞれが重要な内容ですが，この演習では配置と形状を主な取り扱いの対象とします．

●　３次元空間内の対象の配置　●

３次元空間内での対象の配置を扱う上で基礎となる考え方は，以下のように整理されます．

仮想世界の基準を現す基準（世界）座標系と，各対象物などに固定された対象（局所）座標系を考えまる．
２つの座標系の配置の関係は，座標変換行列によって与えられます．３次元空間では４行４列の同次変換行列で与えられる．１６の要素の内，独立なパラメータは位置のパラメータ３，姿勢のパラメータ３の合計６です．
座標系は座標変換行列を介して，数珠繋ぎにつないでいくことができます．たとえば，座標系[A]と座標系[B]との間は同次変換行列T1，座標系[B]と座標系[C]との間は同次変換行列T2で関係が付けられているとき，[A]←T1-[B]←T2-[C]のように座標系[A]と座標系[C]とは結びつけられ，それらの間の座標変換行列は，T1とT2を合成した（行列の積を作成した）T1T2となります．すなわち，[A]←T1T2-[C]となります．
座標系は一般に基準座標系を根元とした木構造を形成します．
この木構造の末端(葉)には，形状が定義された対象物や視点が定義されたカメラ，光源の性質が定義された照明（ライト）が付きます．

●　３次元形状の表現　●

３次元形状の定義を行う方法は沢山の方法があります．それについては，金井理先生の講義（ディジタル形状設計，システム情報設計学特論）で学習している（あるいはこれから学習する）と思いますので，省略します．この演習では，

形状を基本立体の集合として定義する
形状を小さな平面分の集まりからなる表面で定義する

という２つについて扱います．

基本立体としては，通常，直方体（立方体を含む），円柱，円錐，多角柱，多角錐，球，トーラス，正多面体などがあります．これらの基本立体はそれぞれに寸法を決めるパラメータが定義されます．例えば直方体では縦・横・高さの３つ，円柱では底面の半径と高さの２つ，球では半径の１つ，といった具合です．こうしたパラメータを指定して生成した形状を空間内の適切な位置に配置します．

３次元ＣＡＤなどの形状モデラでは，こうした基本立体の間の集合演算（和，積，差）などを行うことができて複雑な形状を作成することができますが，表示のみを対象としたソフトウェアでは，基本的には立体の重ね合わせのみを行います．

基本立体で表現できない形状に関しては，次の面の集まりで表現することができます．ここでは面は辺が線分で構成される多角形(polygon)とします．多角形はそれを構成する頂点の並びで表現できますので，多角形の表現は頂点の座標や，頂点の番号を順に記述することが行われます．コンピュータグラフィックスの世界では，頂点の順番の向きは面の表側からみたときの反時計回り(CCW)が使用されることが多いことは覚えておいた方がよいでしょう．

X3Dについて

WWW上で３次元のグラフィックスを表現するための言語として，まずVRML1.0が1994年に制定されました． VRMLとはVirtual Reality Modeling Languageの略です．その後，動きを含んだ動作を取り入れたVRML2.0は1998年にISOによってVRML97として国際標準規約に制定されました．その後，複雑になったVRMLの規約を整理して，XMLに基づいた言語して X3D(Web 3D)へと発展してきました．

X3Dで定義された世界をウェブブラウザで見るためには，専用のプラグインが必要です．今回の演習で使用しているノートＰＣには

Flux Player 2.1: Media Machines社URL http://www.mediamachines.com/downloads.php

がインストールされています．これにより通常のIEでx3d（ならびにVRMLのwrl）の拡張子のついたファイルを３次元としてブラウジングすることができます．

X3Dを体験する最もシンプルなプログラムを作成してみましょう． Windowsのメモ帳などのエディタを使って次を内容を含むファイルを作成してみましょう．ファイル名はCone1.x3dです．

<?xml version = '1.0' encoding = 'EUC-JP'?>
<!DOCTYPE X3D PUBLIC 'ISO//Web3D//DTD X3D 3.0//EN'
 'http://www.web3d.org/specifications/x3d-3.0.dtd'>
<X3D profile = 'Interchange' version = '3.0'>
<!-- Program Cone1.x3d: White Cone -->
  <head> </head>
   <Scene>
    <Shape>
      <Cone />
    </Shape>
  </Scene>
</X3D>

画面に三角錐（コーン）が表示されたと思います．（Cone1.x3d）ファイルの中で実質的に対象を定義しているのは，< Cone / >の部分のみです． X3Dの中で予め容易されている規定値(default）の底面形と高さで表示されています．ただ，色も何もついていないので，次のような定義をしたファイルCone2.x3d を作成してみます．ここでは，円錐の底面の半径と高さを指定し，さらに Appearanceで見た目の色を指定しています．

<?xml version = '1.0' encoding = 'EUC-JP'?>
<!DOCTYPE X3D PUBLIC 'ISO//Web3D//DTD X3D 3.0//EN'
 'http://www.web3d.org/specifications/x3d-3.0.dtd'>
<X3D profile = 'Interchange' version = '3.0'>
<!-- Program Cone1.x3d: White Cone -->
  <head> </head>
   <Scene>
    <Shape>
      <Cone bottomRadius = '3.0' height = '4.0'/>
      <Appearance>
	<Material diffuseColor = '0.0 1.0 0.0' />
      </Appearance>
    </Shape>
  </Scene>
</X3D>

これで色が付きました．パラメータを色々と変えて形状と色がどのように変化するかを確かめて見てください．（Cone2.x3d）

Flux Viewの中で，立体を回転させたり，拡大したりすることができます． Flux Viewの中で?を選択すると，操作マニュアルが表示されます．それを参考に操作をしてみてください．また，円錐以外の形状も順に試してみましょう．

      < Box size = '2.0 3.0 1.0'/>
      < Sphere radius = '2.0'/>
      < Cylinder radius = '2.0' height = '3.0'/>

さて，ここまでの内容では，複数の立体を並べて表示することができません．そこで，２つの立体の表示する場所と姿勢を指定できるように拡張します．

<?xml version = '1.0' encoding = 'EUC-JP'?>
<!DOCTYPE X3D PUBLIC 'ISO//Web3D//DTD X3D 3.0//EN'
 'http://www.web3d.org/specifications/x3d-3.0.dtd'>
<X3D profile = 'Interchange' version = '3.0'>
<!-- Program Cone1.x3d: White Cone -->
  <head> </head>
   <Scene>
     <Transform translation = '-2.0 0.0 0.0'
               rotation = '0.0 0.0 1.0 1.0'>
       <Shape>
         <Cone bottomRadius = '1.0' height = '2.0'/>
         <Appearance>
	   <Material diffuseColor = '0.0 1.0 0.0' />
         </Appearance>
       </Shape>
     </Transform>
     <Transform translation = '1.0 0.0 0.0'
               rotation = '1.0 1.0 0.0 1.0'>
       <Shape>
         <Box size = '1.0 1.0 1.0'/>
         <Appearance>
	   <Material diffuseColor = '0.6 0.1 0.8' ' transparency = '0.5'/>
         </Appearance>
       </Shape>
     </Transform>
  </Scene>
</X3D>

これで傾いた２つの立体（円錐と立方体）が表示されたと思います．（TwoObj.x3d）　　

Transformで囲われた内部に対する座標変換がtranslationとrotationのパラメータとして指定されています．rotationのはじめの３つは回転軸の x,y,z成分，４つめの数字はラジアンで指定される回転角です．

また，examineのモードで立体全体を回転させて，立方体が半透明になっていることを確認してください．これは，Materialの中でtransparencyを指定したことでおこりました．0.0が不透明，1.0が完全な透明です．

X3D演習の終わりにもう少し複雑な例をあげておきましょう．

<?xml version = '1.0' encoding = 'EUC-JP'?>
<!DOCTYPE X3D PUBLIC 'ISO//Web3D//DTD X3D 3.0//EN'
 'http://www.web3d.org/specifications/x3d-3.0.dtd'>
<X3D profile = 'Interchange' version = '3.0'>
<!-- Program Cone1.x3d: White Cone -->
  <head> </head>
   <Scene>
     <Transform translation = '0.0 -1.0 0.0'
                rotation = '1.0 0.0 0.0 -1.0'>
       <Shape>
         <IndexedFaceSet 
               	colorPerVertex = 'FALSE'
		coordIndex =
		'0 3 2 1 -1
                 0 1 4 -1
                 0 4 3 -1
                 1 2 4 -1
                 2 3 4 -1'>
            <Coordinate point =
	       '0.0 0.0 0.0
	        1.0 0.0 0.0
                1.0 1.5 0.0
                0.0 1.5 0.0
                0.0 0.0 2.5'/>
	    <Color color =
		'0.5 0.5 0.5
		 1.0 0.0 0.0
		 0.0 1.0 0.0
		 0.0 0.0 1.0
		 1.0 1.0 1.0'/>
	</IndexedFaceSet>
       </Shape>
     </Transform>
  </Scene>
</X3D>

ここでは多面体を頂点番号の並びで定義しています．また，各面に対する色もRGBの指定で行っているのがわかると思います．

<?xml version = '1.0' encoding = 'EUC-JP'?>
<!DOCTYPE X3D PUBLIC 'ISO//Web3D//DTD X3D 3.0//EN'
 'http://www.web3d.org/specifications/x3d-3.0.dtd'>
<X3D profile = 'Interchange' version = '3.0'>
<!-- Program Cone1.x3d: White Cone -->
  <head> </head>
   <Scene>
     <Transform translation = '0.0 -1.0 0.0'
                rotation = '0.0 1.0 0.0 -0.5'>
       <Shape>
         <Appearance>
           <Material diffuseColor = '0.6 0.9 0.8' />
         </Appearance>
         <Extrusion crossSection =
            '1.0 0.0, 
             0.75 0.75, 
             0.0 1.0, 
            -0.5 0.0, 
             0.0 -0.5, 
             1.0 0.0'
		spine ='0.0 0.0 0.0, 
                        0.0 0.1 1.0, 
                        0.0 0.4 2.0, 
                        0.0 0.9 3.0' />
       </Shape>
     </Transform>
  </Scene>
</X3D>

こちらは掃引体です．crossSectionで設定された断面をspinで定義された軌跡で掃引して立体を作っています．

演習担当:
　　　　　小野里　雅彦まで．
onosato@ssi.ist.hokudai.ac.jp　　情報科学研究科棟5-14　内線6435

サイバーフィールド実習 実世界の３次元モデル構築 第１日目

３次元世界の表現の基礎

● ３次元空間内の対象の配置 ●

● ３次元形状の表現 ●

X3Dについて

サイバーフィールド実習
実世界の３次元モデル構築　第１日目

●　３次元空間内の対象の配置　●

●　３次元形状の表現　●