強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Blenderで出力したデータを使ってWebGLで簡単に3Dモデルを表示する(その2)

WebGL使ってみたいけど自分でBlenderを使ってカッコ良いモデルの作成は出来ないよぉ。という人はフリーの3Dモデルを使ってみるのはどうでしょうか?

例えばこちらの OpenGameArt.org ではゲームの為の各種素材がフリーで提供されています。

OpenGameArt.org | Free, legal art for open source game projects
http://opengameart.org/

こちらの3Dモデルなどは配布されているファイルがBlender形式で、ライセンスはGNU GPL 2.0となっています。

spikey (Supertux3D) | OpenGameArt.org
http://opengameart.org/content/spikey-supertux3d

今回はこのモデルをWebGLで表示してみる手順を解説します。

取り敢えずはファイルをDLしてBlenderに表示します。

次にTabキーを押して「Edit Mode」に切り替えます。

ctrl+shift+T でポリゴンを全て三角形ポリゴンに変換します。

変換後はこんな感じです。

テクスチャ用の画像ファイルの書き出し

次にテクスチャをファイルに書き出します。

Blederファイルに含まれる画像ファイルの取得方法、中々見つかりませんでしが何とか方法が見つかりました。「UV/Image Editor」ウィンドウに切り替えてメニューの「Image」から可能でした。

「Image」の「Save As...」を選択。

ファイル名を img.jpg にして保存します。

※今回はJPEGファイルだったのでここで直接 img.jpg にしていますが他のファイル形式だった場合はファイル名を変更せずに保存し、後で画像編集アプリなどでJPEGファイルに変換し、 img.jpg で保存して下さい。

WebGL用のデータに出力

ウィンドウの表示を「Texture Paint」に切り替えWebGL用のデータをエクスポートします。

前回と同様、ここからテンプレートをDLします。

DLし、解凍したらそのフォルダへ img.jpg ファイルを上書きし、エクスポートしたjsファイルの spikey.js を移動します。

次に index.html ファイルの編集です。

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

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

と変更し、

  var modelData = BlenderExport.Cube;

を以下の様に変更します。

  var modelData = BlenderExport.spikey;

さて、表示してみましょう。

あれ?何か変ですね。テクスチャ画像の反転を忘れてましたね。

反転させてからもう一度。

今度はバッチリですね。ちょっとキャラクターが上の方に居ますがその辺りはBlender側で修正して下さい。

ちょっとここのプレビュー画像と見た目が違う気がしますね。

spikey (Supertux3D) | OpenGameArt.org
http://opengameart.org/content/spikey-supertux3d

Blenderで確認するとこのモデルは複数のテクスチャを使ってるみたいですね。今回のテンプレートでは1枚のテクスチャしか対応していない為、見た目が異なってしまったみたいです。

すみません、取り敢えず今のところはその辺りも気を付けて使用するモデルをチョイスして下さい。

こんな感じで多少、制限はありますが他の方が作られた作品も簡単にWebGL上に表示が可能です。みなさんも色々表示してみては如何でしょか?

なお、WebGL向けに変換する時は前回も上げましたが以下の点を気を付けて下さい。

  • ウィンドウを「Texture Paint」に切り替えてからエクスポートしたか。jsファイルで tex の文字を検索して無い場合はこの原因の可能性が高いです。
  • テクスチャ用の画像は上下反転したか。
  • 頂点数が極端に多く無いか。100万頂点数など極端に多い場合は減らしてみたら改善されないか試して見て下さい。

今回、準備したテンプレートでは「テクスチャ必須」で「テクスチャに使用可能な画像ファイルの数は1つ」という制限がある。

関連エントリー

Blenderで出力したデータを使ってWebGLで簡単に3Dモデルを表示する(その1) - 強火で進め
http://d.hatena.ne.jp/nakamura001/20101114/1289755084