VRMLを使ってみよう(導入〜1オブジェクト試作まで)

VRML導入の経緯

お仕事の都合で、なるべくさくっと「3Dオブジェクトが指定通りに動く」ような表示をしなければならなくなった。

OpenGL使えばできるのは知ってるけど環境整えるの面倒だな……と思ったところで、以前大学院の先輩がVRMLを自分のwebページに貼っていたのを思い出す。

ということで試してみたので忘備録として。

VRMLってなんだっけ

今更書くのもなんなので、わかりやすかったサイトをリンク。
VRML(法政大学)
VRML実習マニュアル(pdf)
VRMLプログラムの基本例題(pdf, 東海大学)
VRMLサンプルページ(静岡大学三浦研究室)
バーチャルリアリティ(pdf, 和歌山大学)
ライブラリ解説
VRMLbyHAND
VRML索引(浜松大学長粼ゼミ)

VRML自体はもうずいぶん昔からの技術で、X3Dという新しい言語も策定されているので、そっちを使えばいいのに……という声が聞こえてきそうだが、web上に落ちている日本語の説明文の潤沢さから今回はVRMLにした。なにせ今回のコンセプトは「なるべくさくっと」なのでね。 *1

VRMLの実行環境をインストール

どれにしようか(1)

ビューワやプラグインは色々出ているので何にしたらいいのか迷うところ。
参考にしたサイトはここ。

http://slashdot.jp/journal/322716/Linux-%E3%81%AA-Firefox-%E3%81%A7%E3%82%82-VRML-%E8%A6%8B%E3%81%9F%E3%81%84

http://cic.nist.gov/vrml/vbdetect.html

とりあえずFreeWRLをインストール

まずはFreeWRLを試してみた。

英語サイト:http://freewrl.sourceforge.net/
日本語サイト:http://sourceforge.jp/projects/sfnet_freewrl/

日本語サイトからWindows用のインストーラをダウンロード・インストールした。

FreeWRL起動のしかた

http://www.k.hosei.ac.jp/~sawa/lecture/vrml_nt/index.html
のサンプルを表示させようとするも、firefoxプラグインとしては動作しない。
仕方がないのでサンプルファイルをダウンロードして、直接起動。

FreeWRL操作のしかた
  • 左ドラッグ:図形(空間?)の回転
  • 右ドラッグ:下でズームイン、上でズームアウト
どれにしようか(2)

プラグインとして動くものもいずれはインストールしたいところ。
Windows 7上で、Firefoxで動くプラグインはないものか… (保留)

サンプル見ながら試行錯誤

オブジェクトを置くだけだったらなんか簡単そうな予感。
今回はjointを持たないオブジェクトを複数、空間中にばらばらっと表示すればよいので、joint周りもあまり面倒くさくない。
問題は、これを時系列的に動かすところだよなー。

使ってみよう

意外なる落とし穴

サンプルに従い

#VRML V2.0 utf8

という書き出しでファイルを作ったのだが、

deciphering loaded file, unknown file type encountered.

とか表示されてうまく動かない。
ダウンロードしたファイルをみたらsjisだったので、試しにShift-JISで保存したらうまく動くという。
utf8じゃないじゃん……

座標原点の表示

とりあえずboxを3つ使って、座標原点を表示できるwrlを作成。
本当は矢印とかxyzって文字とか加えたいけど、それはまぁおいおい。

#VRML V2.0 utf8
#座標原点  filename=coord.wrl

Transform {
   translation 0 0 0
   children[
      Transform {
         translation 0.5 0 0
         children[
            Shape {
               appearance Appearance{
                  material Material{ diffuseColor 1 0 0 }
               }
               geometry Box{ size 1 0.1 0.1 }
            }
         ]
      }
      Transform {
         translation 0 0.5 0
         children[
            Shape {
               appearance Appearance{
                  material Material{ diffuseColor 0 1 0 }
               }
               geometry Box{ size 0.1 1 0.1 }
            }
         ]
      }
      Transform {
         translation 0 0 0.5
         children[
            Shape {
               appearance Appearance{
                  material Material{ diffuseColor 0 0 1 }
               }
               geometry Box{ size 0.1 0.1 1 }
            }
         ]
      }
   ]
}
オブジェクトを表示して、時間軸に沿って移動・回転させてみる
  • TimeSensorで「世界の時間管理人」を作る
  • OrientationInterpolator, PositionInterpolatorで「時間に対する角度・位置の指定(適宜補間)」
  • そうやって求めた値をオブジェクトの位置・角度の指定として与える、というROUTEで繰り返し

Interpolatorには色変えも存在するらしい。
回転の順番が良くわからないので要調査。

#VRML V2.0 utf8
#オブジェクトが移動する例

DEF RUde Transform {
   children [
      Transform {
         translation 0 0 0
         children[
            Shape {
               appearance Appearance {
                  material Material { diffuseColor 1 0 0 }
               }
               geometry Sphere { radius 0.1 }
            }
         ]
      }
      Transform {
         translation 0 5.1 0
         children[
            Shape {
               appearance Appearance {
                  material Material { diffuseColor 0.7 0.5 0 }
               }
               geometry Cylinder { height 10 radius 3 }
            }
         ]
      }
   ]
}

DEF Gtime TimeSensor { cycleInterval 1.0 loop TRUE }
DEF Grotation OrientationInterpolator {
   key [ 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1.0 ]
   keyValue [ 1 0 0 0, 
               1 0 0 1,
               1 0 0 2,
               1 0 0 3,
               1 0 0 4,
               1 0 0 5,
               1 0 0 6,
               1 0 0 7,
               1 0 0 8,
               1 0 0 9,
               1 0 0 10 ]
}
DEF Gposition PositionInterpolator {
   key [ 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1.0 ]
   keyValue [ 0 1 0 , 
               0 2 0 ,
               0 3 0 ,
               0 4 0 ,
               0 5 0 ,
               0 6 0 ,
               0 7 0 ,
               0 8 0 ,
               0 9 0 ,
               0 10 0 ,
               0 11 0  ]
}

ROUTE Gtime.fraction_changed TO Grotation.set_fraction
ROUTE Gtime.fraction_changed TO Gposition.set_fraction
ROUTE Grotation.value_changed TO RUde.rotation
ROUTE Gposition.value_changed TO RUde.translation

とりあえず今日のところはここまで。
次回は人体1人分を通しで作りたいところ。

その他、便利な・ためになるリンク集

JavaScriptと連動もできるらしい(2013/2/4追記)

VRMLに予め規定した動作しかできないのかなーと思いきや、JavaScriptと連動もできるらしい。もちろんX3Dにも同様の機能がある模様。
VRML with JavaScript Tutorial ( VRML + JavaScript チュートリアル )
ただし今回は「なるべくさく(ry」なので、まずは使わずに進んでみる。*2

VRMLのローポリゴンテキスト(文字列表示が軽くなるらしい)

LowpolyText3D PROTO

*1:いずれX3Dも勉強できたらいいなとは思っていますが

*2:こちらもいずれ使ってみたいなとは思っていますが