2011.5.25 obj2SceneJS が SceneJS 0.8.0.0 に対応しました。

SceneJS は Lindsay Kay さんが中心となって開発している、 WebGL を用いて 3D CG を手軽に表示するためのフレームワークです。 より詳しく知りたい方はこちらのページ： scenejs.orgをご覧になって下さい。 本ページでは、SceneJS のちょっとした説明と SceneJS の為の変換ソフト（Windows 用のコンバータソフト）について述べます。

• まず、自分の環境で Web3D が動作することを確認します(step 1)。


• 次に製作環境を準備します。 必要なものはコンバータソフトに同梱されているので、 ダウンロードして適当な場所に展開するだけです(step 2)。


• Wavefront .obj 形式のファイルを用意します。 マテリアル情報のファイルである .mtl ファイルも用意しておきます(step 3)。
• .obj ファイルと .mtl ファイルをコンバータソフトにて変換して .js ファイルを 生成します。その .js ファイルをしかるべき場所に配置して、終了(step 4)。

以下、順を追って説明していきます。 まず step 1 ですが、あなたの使用しているブラウザが WebGL に対応しているかどうか 確認します。我々のオススメは Firefox4 です。 コンバータソフトの開発では Firefox4 でのみチェックを行っていますので、 他のブラウザでは正しく表示できない場合があるかもしれません。 ここを クリックして上にあるような熊の CG が表示されるかどうか確認してください。 マウスをドラッグしてオブジェクトを回転できれば成功です。 あなたのブラウザは WebGL に対応してます。 もしオブジェクトが表示されない場合は、おそらくあなたの使っているブラウザが WebGL に対応していないか、WebGL の機能がオフになっているかだと思います。 WebGL が使えるブラウザを入手してください。 わからない場合は Firefox4 をインストールして、それを使用するのがオススメです。 Firefox4 は、こちら http://mozilla.jp/firefox からダウンロードすることができます。

Firefox4 でも環境によっては WebGL が有効にならない場合があります。 そのような場合は URL 欄に about:config と入力して Enter を押します。 注意を促すダイアログが出ますので、それをよく読んでボタンをクリックします。 非常に多くの設定が表示されますが、そのページの下の方にある webgl.force-enabled という 部分をダブルクリックして、true になるようにします。


もし、Firefox4 でも WebGL のコンテンツが見れない方は、この設定を行った状態で 再度試してみて下さい。 次の step 2 ですが、ここ をクリックして .obj から SceneJS （用の .js ファイル）への コンバータソフト(obj2SceneJS_20110525.zip)を ダウンロードして下さい（SceneJS および glmatrix のファイルも 同梱されてます）。

ダウンロードした .zip ファイルを展開すると、samplePage というフォルダがあります。 このフォルダの index.html をブラウザで表示してみて下さい。 3D モデルが表示され、マウスで操作できれば正常です。
step 3 ですが、ここでは .obj ファイルとマテリアル情報ファイルの .mtl ファイルを 用意します。 静岡理工科大学の授業ではモデリングソフトとして Metasequoia を用いているので、 メタセコイアからの出力について説明します。

メタセコイアでのモデリング作業での注意点は、後述する .obj ファイルと テクスチャとして使用している画像ファイルとが同じフォルダに格納されるように してください。 念のため、.mqo ファイルも同じフォルダに入れておいた方が良いかもしれません。

制限事項
現在のコンバータ（バージョン 20110525）には以下のような制限があります。



実際に .obj ファイルで出力する場合は、 メタセコイア上で「別名で保存」を選択し、Wavefront obj 形式を選択します。 ファイル名を入力して「保存」ボタンをクリックすると、次のようなダイアログが開きます。

メタセコイアから出力する場合に重要なことは左下にある「左右を反転する」という チェックボックスにチェックを入れることです。

もちろん、「マテリアルファイル(MTLファイル）」にもチェックをしておきましょう。

左上の「拡大率」も非常に重要です。 というのはコンバータのサンプルページの設定では、原点を中心として 大体 X,Y,Z 軸の -1 から +1 の範囲のものを表示するように視野が設定してあります。 「拡大率」を設定して、ご自身が作成されたモデルデータのサイズを どの程度拡大縮小すれば良いのかを確認した上でこの値を設定してください。

.obj ファイルと .mtl ファイルが生成できたらいよいよ SceneJS 用に変換します。 コンバータソフトは bin フォルダの obj2SceneJS.exe というプログラムです。 このプログラムを起動すると、次のようなウィンドウが現れます。

この input obj file path と書かれた部分に変換元の .obj ファイルへのパスを入力し、 下の output js file path の所に出力する .js ファイルへのパスを入力します。 そして Convert ボタンをクリックすれば、変換が開始されます。 変換が無事終了すると、Done というメッセージボックスが表示されます。

てっとり早く自分のモデルを表示する場合は、出力先を samplePage フォルダにして、 適当な名前で出力します。たとえば myGreatModel.js 等とします。
変換が終了したらテクスチャとして使用している画像ファイルも全て samplePage フォルダに コピーしておきます。
そして samplePage の index.html の下から５行目にある、

<script type="text/javascript" src="sistBear.js"></script>

の sistBear.js の部分を先ほど出力したファイル名にします。 例えば、myGreatModel.js ならば、こんな感じになります：

<script type="text/javascript" src="myGreatModel.js"></script>

そして index.html ファイルを上書き保存した後、ブラウザでこの index.html ファイルを 表示してみると、あなたの 3D CG モデルがブラウザの中で表示されているハズです。 うまく表示されない場合は、テクスチャとして使用している画像ファイルが同じフォルダに あるかどうかを確認してください。

.obj ファイルと .mtl ファイルより SceneJS のシーングラフファイル (JSON 形式) を生成するコンバータです。 Windows 用です。 実行形式(.exe) およびソースコードに加え SceneJS および glmatrix を同梱しています。

ダウンロード：
最新版はこちら： obj2SceneJS_20110525.zip SceneJS 0.8.0.0 対応版
旧バージョン (SceneJS 0.7.9.0 対応版）はこちら： obj2SceneJS_20110511.zip

ライセンス形態： MIT ライセンス
(SceneJS および glmatrix のライセンスについては それぞれのプロジェクトページを参照してください）。

VisualStudio C# Express 2010 でビルドできます。

マテリアル名やテクスチャファイルへのパスや .obj ファイル、.mtl ファイルの 名前には空白を含まない英数字を使用するようにして下さい。 上手く変換できな場合があります。 (see 制限事項)

準備中。

本ページは、本学（静岡理工科大学）総合情報学部の２年生を対象に行われている 「特別プログラム」内の Web3D 関連の講義の為に作られました。

当初は GLGE を使用する方向で考えていたのですが、GLGE の場合、 おそらく非同期通信(ajax)の為だと思いますが、作成したファイルを web サーバ上に 置き、http 経由でアクセスする必要がありました。 もしかするとこの認識は適切ではないかもしれませんが、 少なくともサンプルファイルを表示させようと思った時、当方の環境では、 web サーバ経由でなければ上手く表示することができませんでした。

実習においては web サーバの準備もさることながら、 作業用 PC のローカルなファイルに保存し、それを直接読み込んで表示できるような 環境が望ましいと感じています。 ローカルな環境のみで完結できれば自宅でも自習することができます。 もちろん Windows で IIS を立ち上げ、それを用いる事もできますが、 コンテンツ作成を主眼に置いている段階では IIS の設定にまつわる話は できれば避けたいと思っています。

そんな時に見つけたのがこの SceneJS でした。 SceneJS は web サーバも要らず、ローカルにある .html ファイルを読み込ませても 普通に 3D オブジェクトが表示されます。 もちろん web サーバ上に転送して、そのファイルにアクセスしても問題なく 表示されます。

シーングラフを操作するような複雑なコードは書いていないので 全てを理解しているわけではありませんが、WebGL によるコンテンツ作成の 入口としては手軽で良いのではないかと思っています。

SceneJS - http://scenejs.org/
glmatrix - http://code.google.com/p/glmatrix/
metasequoia - http://www.metaseq.net/metaseq/
メタセコイアの教科書 - 「新メタセコイアからはじめよう！」（出版社の書籍案内ページ）