WebGL 1.0
 OpenGL ES 2.0
 Google Chrome 12.0.742.100
 Canvas 3d JS Library 2.2

■WebGLで[ Canvas 3d JS Library ]を使ってみる
  [ サンプルページ ]
サンプルページの表示には1分以上かかります
Prev Top Next
関連ページ:WebGL 1.0 はじめました

今回は3Dモデリングツールを使用して作成したファイルを使用してレンダリングを行います。 で、どのフォーマットを使用するかですが、 Learning WebGLでは JSONを使用した サンプルソースを紹介しています。
ですが、JSONフォーマットは3Dモデリングツール上ではマイナーなというより普通使わないフォーマットなので却下です。

で色々探したところCOLLADAフォーマットが使えるようになるjavascriptライブラリがみつかりました。 Canvas 3d JS Libraryです。 チュートリアルを見たところラクチンで使えそうなので、今回はこれを使ってみます。

WebGLのコーディングは何とかなりそうです。次はモデリング作業です。 ここから超はまりだします(笑)。備忘録目的でもあるのでやったことを書いていきます。


自分は Lightwave3D を使い慣れていたのでまずは Lightwave3D でモデリングすることを考えました。 Lightwave3D は最新版のバージョン10が体験版でダウンロードできるようになったので、ダウンロードします。 でインストール後、モデラーを起動します。すると なにこれと思いつつ、ひとまず気にしないで箱を作ってみる。しかし
バグってんのかと思いつつ、とりあえず ATI Radeon HD 5700 のドライバを再インストールを試みる。 しかし
おいおいどうなってんだと思いつつ、ネットで調べると同じ症状がヒット!!。 それによると SQL Server といえば Visual Studio 2010 のインストール時に勝手にインストールされたなあと思いつつ、ひとまずアンインストール。 プロジェクトを開くとエラーメッセージが表示されるようになったが、コンパイルはできるのでとりあえずこの問題は

どうにか Lightwave3D 10 が使えるようになったので、FBX SDK のサンプル作成時に作ったF14メッシュをインポートしてCOLLADAフォーマットでエクスポートする。

どっかバグってんのかと思いつつ、WebGLのソースを見直すが問題なし。とりあえずエクスポートしたdaeファイルをテキストで開いてみる。 なんと Lightwave 側でなんか設定があったのかと思い、再度エクスポートしてみるが、 ファイルの出力先のパス指定のみで設定項目なんか何もない。
試しにFBXでエクスポートしてみるがこの場合は法線ベクトルが出力されている。 だよなあ普通法線ベクトルも出力されるよなあ。とりあえず Lightwave3D では COLLADA フォーマットでは正しくエクスポートできないと結論付けて 別のエクスポーターを使うことを検討してみる。

3ds MAX は30日無料期間を過ぎているのでだめ。Metasequoia は COLLADA に対応していない。 残るはインターフェースがとっつきにくい Blender 。 インターフェースがだめでもインポートしてエクスポートするくらいなら問題ないだろうということで Blender を使うことにする。 両方で互換性があると思われるフォーマットを探して、最終的にという結論に達した。
WebGLで表示したところ、平行光源が有効になり、とりあえずOK。

せっかくなので、もうちょっとかっこよくしようかと思ってメッシュを色々修正していく。 しばらく修正していくと、突然 ふざけんな!!と怒りつつ壊れたファイルを破棄して再度修正していく。 今度は定期的にバックアップを取って、 Blender でインポートできることをチェックしつつ慎重に作業を進めることにする。

ってな感じで Lightwave3D にひたすら振り回されましたが、どうにか修正することができました。 まあ Lightwave3D を久しぶりに使ったということもあって、使い方忘れているところもあり、そういう意味でもはまったんですけどね。

ただ今回の件で 。 もちろん高価な 3ds MAX とか使えるのであればもちろんそちらを使ったほうがいいですが。 慣れるまで大変だろうけど、自分も Blender 使ってみようっと。


さてぐち備忘録はこれくらいにして、今回のサンプルソースについて解説していきます。 Canvas 3d JS Library の使い方については特に説明することはないです。ライティングは固定機能パイプライン的なコーディングになっているしね。
ただし一点だけ注意があります。FC2サービスではアップできるファイルの拡張子に制限があるためdaeファイルはアップできません。 なので拡張子をtxtに変更しています。これは完全に製作者側の都合ですが、自分でサンプルを作成するときはdaeに変更したほうがいいでしょう。

あとF14が表示されるまでにかかるかもしれません。気長にお待ちくださいませ。


最後に対応するブラウザは、Google Chrome のみです。以上!!


web拍手 by FC2

Prev Top Next

inserted by FC2 system