*
VRML Studies
*
VRML 勉強中
VRML のちょっとしたテクニック，アイデアや作品等。
（動作確認：blaxxun Contact 5.1，Cortona VRML Client 3.1，Cosmo Player 2.1.1）
虹色に流れるテキストです。５通り程作ってみました。
- PROTO 内で定義した TimeSensor ノードを順次スタートさせる。
VRML ソース（4KB）
虹色変化には，ColorInterpolator ではなく，PositionInterpolator を使っています。
- createVrmlFromString() メソッドで文字を順次作る。
VRML ソース（3KB）
- 文字列のテクスチャを貼ったオブジェクトの color フィールドをコントロールする。
VRML（4KB） ソース（2KB）
（注：Cosmo Player では，color フィールドをアニメートすると，メモリーを使い尽くして行くことが度々あります。）
以下，上記「3.」では， Cosmo Player でメモリー関係の不具合が起こることがあるので，他の方法を考えてみます。
- 上記「1.」と同じ方法。
VRML（6KB） ソース（5KB）
ちなみに，１つの文字列テクスチャ画像を texCoord フィールドで一文字ずつに分割して使っています。
- 文字を透明で抜き，後側に虹色の PixelTexture を貼ったプレートを置く。
VRML（4KB） ソース（2KB）
（スクリプトによる PixelTexture 作成は，けけんけんさんの「VRML実験室：計算によるテクスチャー作成」を参考にしました。）
変形後，逆転して元に戻すためのアイデアです。
TimeSensor ノードの fraction_changed は 0.0 から 1.0 に変化します。普通はそれを CoordinateInterpolator ノードに set_fraction すると変形が行われます。
もし fraction_changed が 1.0 から 0.0 に変化するようにしたらどうなるでしょう？ そう，変形したのが元に戻ってきます。
VRML ソース（3KB）
（クリックする度「変形/元に戻る」を繰り返します。）
円柱を Cylinder ノードで作るとカクカクです。Cosmo Player だと 16角柱ですね。
VRML ソース（1KB）
レンダリング負荷を減らすために仕方がないとはいえ，滑らかな円柱が欲しいこともあります。そこで，角数が多い角柱をスクリプトで作ってみます。求めた値を Extrusion ノードの crossSection フィールドに set してできあがりです。一応 64角柱にし，creaseAngle に 2π/64ラジアンを繰り上げた値を入れてます。
VRML ソース（1KB）
三角柱，五角柱等々色々作ってみましょう(^^)
上記の「カクカクしてない円柱」を発展させ，今度は円を作ってみます。
先ずは，Cylinder ノードで作った円です。Cosmo Player で16角形です。
VRML ソース（1KB）
「カクカクしてない円柱」では Extrusion ノードを使いましたが，ここでは IndexedFaceSet ノードで作ってみます。Extrusion ノードで行ったときと異なり，coordIndex をスクリプトで作る必要があります。
VRML ソース（1KB）
これは 256角形です(^^;
「Juno's World」のJunoさんに影響されて多面体を作ってみました。
多面体とは言っても，２つの角錐を張り合わせただけですが…
…では芸がないので，底面の角数は可変☆
上記の「カクカクしてない円」をアレンジしたものです。
VRML ソース（4KB）
テクスチャの On/Off，または貼り替えの方法を考えてみます。（箱をクリックするとテクスチャが On/Off します。）
- 先ずは，単純に，クリックする度 ImageTexture ノードの url フィールドを書き換えるようにしてみます。
VRML ソース（1KB）
これでも可能なのですが，Cosmo Player には Cache がないので，テクスチャを貼る度に URL を辿ってテクスチャを再読み込みしてしまいますね。
- そこで，テクスチャ付きとそうでない箱を２つ作っておいて，Switch ノードで切り替えてみます。
VRML ソース（1KB）
貼る対象が単純なときはこれでも良いですね。
- しかし，貼る対象が沢山あったり複雑な形状である場合，また数種類のテクスチャを貼り替えるようなとき，「2」の方法ではソースが長くなってしまいます。そこで，あらかじめテクスチャを読み込ませた ImageTexture ノードとテクスチャ無しの ImageTexture ノードとを切り替えるようにしてみます。
VRML ソース（1KB）
これで随分ソースが短くなりそうです。
- 「1」と「3」を組み合わせると，「開いたときにはテクスチャの読み込み無し→テクスチャを読み込んで貼る→テクスチャ無し→既に読み込んだテクスチャを貼る」といったこともできます。
VRML ソース（1KB）
☆このテクニックは Inline ノードにも使えますね。
ElevationGrid ノードは地形を作るときに便利ですが，その height フィールドに入れる値は画像から得ることもできます。以下にその方法を記します。
- グレースケールの画像を用意します。ここでは 21x21 ピクセルの画像にしました。画像の明るい部分が山，暗い部分が谷となります。
(小さいので4倍に拡大表示しています。)
注意： (横ピクセル数-1) x (縦ピクセル数-1) x 2 が完成時のポリゴン数になります。21x21 の場合で 800 ポリゴンです。
- 画像を PGM (Portable Graymap) 形式で保存します。PGM のエンコード形式には Binary と Ascii がありますが， Ascii で保存します。（私は PGM 出力には "IrfanView32" を使っています。）
- 保存したPGMファイルをテキストエディタで開きます。内容は，PGM Ascii を示す "P2"，横ピクセル数，縦ピクセル数，最大値を示す "255"，及びピクセル毎の値となっています。
- ピクセル毎の値を全て ElevationGrid の height フィールドに記入します。xDimension フィールドと zDimension フィールドのそれぞれに元の画像の横幅と高さを記入します。
VRML ソース（3KB）
- テクスチャを貼り，滑らかにするための creaseAngle を設定して出来上がりです。
VRML（8KB） ソース（4KB）
おまけで空と水域も加えました。
VRML での文字を表示する方法を色々試してみました。
- VRML 2.0 では Text ノードで日本語を表示できます。
ファイルを UTF-8 形式の文字コードで作り，また，VRMLブラウザが対応していることが条件です。日本語の場合は language フィールドに "ja" を設定します。
UTF-8 で保存できないテキストエディタであれば，普通に保存した後，文字コード変換ソフトを使います。
文字コード変換ソフトには，Windows であれば，「Charset Converter」はどうでしょう。
VRML ソース（1KB）（string フィールドに "こんにちは" を UTF-8 で入れてます。）
Cortona VRML Client と WorldView で可能なのを Windows 98 で確認しています。
Cortona + Windows 95 では不可という情報をいただきました。
Cosmo Player 2 の場合，Windows NT 4.0 では正しく表示されるそうです。Windows 2000 でも多分大丈夫なのでしょう。
Cosmo Player 2＋Windows 95/98 では不可です。Cosmo Player 2＋Mac でも不可能らしいです。
blaxxun Contact は未対応です。
- モデリングソフトでテキストを3Dデータにすることもできます。
「LaFonte」という 3Dテキスト専用のシェアウェアがあるので，試しに使ってみました。
VRML（gzip圧縮 7KB）
- テクスチャ画像を貼ることで行うこともできます。少々ギザギザしますが，これもいい感じです。
VRML（3KB） ソース（1KB）
- ElevationGrid ノードを使うのもなかなか面白いです。
作成方法は上記「画像から作る地形」とほぼ同じです。テキストエディタ等で文字をタイプし，それをキャプチャした画像から作ります。
上の画像から作ってみます。「画像から作る地形」ではグレースケールの画像を使ったのですが，今回は白黒二値の画像なので，PGM でなく PBM (Portable Bitmap) 形式に出力して height フィールドの値を得ます。（PBM のエンコード形式には Binary と Ascii がありますが， Ascii で保存します。PBM のフォーマットは，PBM Ascii を示す "P1"，横ピクセル数，縦ピクセル数，及びピクセル毎の値となっています。ピクセル毎の値は "0" が白，"1" が黒を表します。）
VRML ソース（3KB）
ElevationGrid ですが，黒い板を置くことで文字だけ浮かび上がるようにしてあります。
- こういう懐かしい手段もあったりします。（Mac版 Cosmo Player 不可。でも，ソースは見てください(^^;）
VRML ソース（1KB）
鏡に映したオブジェの作例です。
IndexedFaceSet や Extrusion ノードで作った形状は，数行のスクリプトで鏡像の座標を求めることができます。左右対称ならｘ座標の正負の符号を反転すれば良い訳です。鏡像の方は ccw フィールドを FALSE に設定します。
VRML ソース（2KB）
この例では rotation も左右対称になるようにしています。
VRML プラグイン "Cortona VRML client" では "DropSensor" ノードが拡張されています。
このノードの使い勝手をテストしてみました。（"Cortona VRML client" をインストールしてる方のみどうぞ。）
テクスチャやサウンドデータは，外部ファイルにするのが一般的ですが，同一ファイルに埋め込むこともできます。
PNG 画像の例 ： VRML ソース（6KB）
画像等データは base64 形式に変換したものを使い，url フィールドには "data:MIMEタイプ;base64,変換されたデータ" と記入します。
base64 変換は，専用のソフトを使うのも便利ですが，以下に手軽な方法を記します。メールソフトの base64 変換機能を使います。
- メール（本文や宛先等は全て未記入）に変換したいファイルを添付する。
- そのメールを保存する。
- 保存したメールファイルをテキストエディタで開く。
- 暗号になっている部分をコピーする。
- 残念ながら，MIDI シークエンスファイルは不可能のようです。
- blaxxun Contact は，base64 未対応です。
- Cortona VRML Client では，画像のみ可能です。