3Dはテキストエディタで描ける! VRMLってご存知ですか?

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 3Dはテキストエディタで描ける! VRMLってご存知ですか?

3Dはテキストエディタで描ける! VRMLってご存知ですか?

3Dはテキストエディタで描ける! VRMLってご存知ですか?

こんにちは、アウラの三輪です。

前回の記事で、3Dお絵かきソフトを楽しむ、もとい活用する方法をご紹介しました。
書きながらフと「3Dといえば、アレがあったな」と思い出したことがあるので、ものすごく久々に触ってみました。

今回はちょっとマニアックな内容ですが、よろしければお付き合いください。

アレの名は「VRML」

VRMLとは、Virtual Reality Modeling Languageの略。Web上で3D画像を構築するためのマークアップ言語です。
テキスト形式で保存したファイルをブラウザで開くと、仮想空間や3D画像を表示できます。アニメーションの作成も可能。

いろいろ出来る優秀な言語ですが、仕様が複雑過ぎたために普及せず、現在は後継のX3Dの方がメジャーだそうです(←これは今回の記事を書く時に調べて知りました)

仕様が複雑とはいうものの、簡単な図を描いてみるぐらいなら、そんなに難しいことはありません。

用意するものは、
・ブラウザ
・表示用プラグイン
・テキストエディタ
です。

プラグイン導入

今回は、VRMLのプラグインで一番メジャーと思われる「Cortona」をインストールします。
PC用のブラウザとしては、Internet Explorerにのみ対応しています(Google Chrome用もあったようですが、開発が終了していました)
他には、iOS版があります。

公式サイトから、ご自身の環境に合ったプラグインをダウンロードします。
私の環境では「64bit」をチョイス。

ダウンロードしたファイルをダブルクリックして「Next」をクリックします。

「I accept~」にチェックを入れて「Next」。

「DirectX Renderer」にチェックを入れて「Next」。

「Install」をクリックすると、インストールが始まります。

終了画面で「View a sample VRML scene in Cortona3D Viewer」にチェックが入った
状態で「Finish」をクリックすると、ブラウザが起動してテスト画像が表示されます。

ここで、標準のブラウザがInternet Explorer以外だと、ファイル(拡張子:wrl)のファイルをダウンロードしようとします。
その場合は、一旦キャンセルしてInternet Explorerを起動し、URL欄に下記を入力してEnterキーを押してください。

C:\Program Files (x86)\Common Files\ParallelGraphics\Cortona\Help\life.wrl

「このWebページはスクリプトやActiveXコントロールを実行しないよう制限されています」
と表示された場合は、「ブロックされているコンテンツを許可」をクリックしてください。

図形が表示されていたら、プラグインの導入は成功です!

しかくを描いてみる

では、早速何か描いてみることにします。
手始めに、超簡単な図形から試してみます。

1行目は、「VRMLの文法はバージョン2.0を、文字コードはutf8を使用します」という宣言です。
この後に、1つ以上のShapeノードが含まれている必要があります。ノードというのはVRMLの基本単位で、この{}の中に書いた内容が表示されます。
表示させたい形状は「geometry」に続けて記述します。今回は「Box」なので、立法体ですね。

続いて、ファイルを保存します。場所はどこでもOK。拡張子は、「.wrl」としてください。
今回はデスクトップにVRMLフォルダを作成し、そこに「test01.wrl」という名前で保存しました。

続いて、保存したファイルを右クリックし、「プログラムから開く」を選択。
一覧にInternet Explorerが表示されている場合は、クリックしてください。
表示されていない時は、「既定のプログラムの選択」からInternet Explorerを指定してください。
ここでWRLファイルのInternet Explorerへの関連付けをしておくと、次回からはダブルクリックで開くようになります。

どうですか? 真っ白な四角が表示されましたでしょうか?
たった4行で、3D画像が表示できてしまいました。

これ本当に3D?

表示されているのは、ただの真っ白な四角。騙されているんじゃないかとのお疑いはもっともです。

なので試しに、画面下、右から3つ目の「調査」アイコン(目玉みたいなアイコン)をクリックし、画面の上でマウスをグリグリ動かしてみてください。

真っ白なので分かりづらいですが、平面の四角ではなく立方体であることがご覧いただけるかと思います。
動かし過ぎて画像を見失ったり、元の位置に戻したい時は、左から2つ目「復元」をクリックすると表示位置がリセットされます。

真っ白じゃ物足りない

なるほど、立方体であろうことは確認できたものの、ただの白では味気ないうえに3Dである実感も薄い。というわけで、色を付けてみます。

色を付けたり質感を変えたりしたい場合は「appearance」を指定します。

「diffuseColor」では、光の3原色(RGB、値は0~1)で指定できます。今回は、R(赤)を1+G(緑)を1で黄色にしてみました。
では、上書き保存して再読み込みを。

黄色に色が変わっています!
やはり色がついて明暗があった方が、立方体だとはっきり分かって良いですね。
パン&ズーム機能もあるので、動かしてみると奥行きがあるのもお分かりいただけると思います。

組み合わせ次第でいろいろな図形が作れる

プラグイン導入直後に表示された、複雑&アニメーション付きの画像を作るのは大変ですが、さまざまな図形を組み合わせ、サイズや表示位置、色を変えるだけでも、いろいろな画像が作れます。

図形や背景にテクスチャを設定することも出来るので、こんなことも。
(不自然さは見逃してください)

ペイント3Dのような手軽さはありませんし、かけた手間の割に使いどころが少ないというオマケ付きですが、テキストだけで3DCGが作れてしまうって結構感動します。
実は、「VRML 地図」などのワードで検索すると、VRMLで作成された立体地図が今でも公開されていたりします。

興味が湧いた方は、ぜひオリジナル3D画像を作ってみてください!

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!