たけなか制作日誌

現在O3Dのスクリプトを着々と更新しております。

前回からの変更点
・シーンの切り替えがフェード処理で行われるようになりました。
・ヒットポイントが追加されました。
・COMプレイヤーが追加されました。けれど、壁にばかり
　突進してしまう駄目AIです(画像右上参照)。

これくらいかな。けど面倒なので今回はWeb上のものは
更新しておりません。
あまり、定期的にWebで公開すると向こうの会社から
差し止めがくるかもしれませんからね…苦笑。
そのかわりに日記に画像を載せておきます。

そういえば、つい最近ニュースで脅迫の容疑で逮捕された人が
「これは表現だから脅迫じゃない！」っていっていたけど、
ものづくりする立場の人から見ればすごく身勝手だなあと感じた。

表現をすることは他者を喜ばせることもあれば、悲しませることもあると思う。
形がある無しにせよ、自分が表現することで生み出したものを
自分が責任をとらないで誰が責任をとるんだと思いました。

言葉だけの表現者は自分で責任をとらなくていい、そんなことはないはずだ。

そう。僕もHTMLマ○オやら色々あやしいものを制作したり
しているわけですが、やはりそれなりの覚悟で制作してるのである苦笑。

O3Dスクリプトにさっそく丸影が入りました。
しかし、正確にいうとWeb上で表示できるようになりましたが、レンダー
ステートを使用せずに表示させているので半透明のソートができておりません。

まぁ表示できただけでも僕ぁ嬉しいですよ。

ちなみに解決方法は丸影のマテリアルと描画リストのソート指定を
パフォーマンスからZオーダーに変えただけなのですが。

パフォーマンスによるソートって何なのでしょう？
コストの高いオブジェクトから先に描画するとか、そういうこと？

今までパフォーマンスで表示させているとなぜかテクスチャが
表示されなかったのが、Zオーダーを使用することで、もれなく解決。
けれど、パーティクルと同じように木のＺ値と同じ距離にいると
半透明処理がなぜかアルファテストに切り替わってますね。

かといってレンダーステートを使用すると謎のエラーがでるし…。謎だ。

あ、それとどうやらO3Dはバウンディングボックス取得できるようです。
当たり判定できない駄目な奴だと思って…正直すまんかった。

O3Dのインストールの仕方についてよく分からない方のために
インストール手順をまとめることにしました。

①使用している環境を確認します。現在O3Dは
　OS:Windows XP SP2、Windows Vista SP1
　　　　Mac OS X 10.5以降のIntel Macなど。
　ブラウザ：Chrome(O3D推奨)、Firefox 2以降、
　　　　Internet Explorer7.0以降、Safari 3以降、Camino
　が動作対象のようです。僕の方ではWindowsXP SP2で
　InternetExploler7、Firefox3での動作を確認しました。
　ただしOpera9.5やSafari3はO3Dが動作しませんでした。プラグインを
　インストールしても何も変わりません。(最新Verは大丈夫かも…。)
　ちなみにLinuxやMacについては使用していないので何ともいえないです。。
　ビデオカードについては、最新のO3Dは非搭載であっても
　動作するようなので問題ないかと思います。
②上を踏まえた上でO3Dを使用しているページを開きます。
　ページの中のO3Dの画面上に"This Page requires the
　O3D plugin to be installed."と表示されていると思うので、
　その下にある"click here to download."という部分をクリックして
　O3Dプラグインのダウンロードページにとびます。
③クリックした先のページ右側にある"Download O3D"から
　ダウンロードが行えるのでO3Dプラグインをダウンロードします。
　また、ダウンロードすると自動的にO3Dプラグインをインストールしてくれます。
④O3Dプラグインのインストールが終了後、再びはじめの
　O3Dを使用しているページを開き直します。すると
　"O3DのActiveXコントロールの実行"を許可するかどうかブラウザが
　質問してきます。(Internet Explorerの場合ページの一番上に
　ポップアップで表示されます。)
⑤ActiveXコントロールを許可すればO3Dが表示できるよう
　になっていると思います。

※それでもO3Dが表示されない場合
　O3DはDirectXを使用して動作しているので、DirectX9の
　ランタイムが必要となります。　(DirectX10以降をインストール
　されている方はおそらく問題ないかと思います。)
　WindowsXP以降のOSの場合、DirectX9は標準インストールされて
　いるので上の手順を行うだけでO3Dを表示できるはずなのですが、
　もしDirectX9をインストールしていない場合は以下のページから
　DirectX9のランタイムをインストールして下さい。　http://www.microsoft.com/downloads/details.aspx?familyid=2da43d38-db71-4c1b-bc6a-9b6652cd92a3&displaylang=ja
　※O3Dのプラグインがわずか5MBなのに対しDirectX9の
　ランタイムは約90MBもあるので、インストールする際は注意しましょう。

それでもO3Dが表示できない場合は…
お手数ですが、使用しているOS、ブラウザ、ビデオカードの種類とバージョンを
記入の上WEBCLAPやこの日記のメッセージ等でご報告ください。
また、上の説明よりも詳細な説明は以下のページに書かれています(英文)
http://code.google.com/p/o3d/wiki/FAQs
それと、"O3Dのサンプルはちゃんと表示できるのにここのページだけ
見れないぞ！"っていう場合は、僕のスクリプトの方がメンテナンス中の
可能性があります。その場合はすみませんが、しばらく待ってください苦笑。

O3Dのスクリプトにスプライトの表示を導入させてみました。
本当は丸影も導入済みなのですが。。どうもサイトにアップしてみると
createDrawPass()の部分でエラーが起きてしまうようなので
サイトで公開しているものは丸影を実装させておりません。

試しにO3D付属の丸影サンプルをサイトにアップしてみたけど
やはり同じようなエラーが発生。
.htaccessとか、その手のエラーなのかなぁ。
JSファイルとShaderファイルしか使ってないから違うような気もするし。。
ブラウザエラーなのかというと、オフラインで使用できてるしなぁ。難しい。

最近はもっぱらO3D更新日記みたいになっております。

今回は背景に木を追加してみたのと、毎回操作説明を書くのが
面倒だったので、HTMLに記述してスクリプトはJSファイルにまとめることにしました。
けど実際にやってみると、JSファイルにする方法が
よく分からず、なかなか面倒だったのです。

とりあえずそのままスクリプトをコピペしてJSファイルを作ってみると。
なんとO3Dの初期化命令部分でエラーが発生！
なんでかなぁと長時間考えた末、O3Dの命令群が
自作スクリプトのJSファイルに読み込めていないということまでは
分かったのですが、今ひとつ解決方法が分からなかったので、
自作JSファイルのほうに、document.write();を追加して
強制的にO3DのJSファイルを読み込ませました。
本当はO3D命令である、o3djs.require();を使えば
インクルードできるはずなんですけどね。。
まぁ、とりあえず現状は問題ないようなので。いっか。

あ、ちなみにスクリプトのHTMLはWEBCLAPと統合させたので、
トップページの"SEND MESSAGE"からでもいけます。

ようやくO3Dスクリプトを更新しました。今回は色々と修正を加えております。

修正点はというと、
・モーションが再生されるようになりました。移動すると歩きます。
　モーションはまだ途中までしかキーを打ってないのでしょっぱいですね。
・地面を作成して少し見栄えがよくなりました。
　地面とキャラは当たり判定を行うようにしています。
・FPSが表示されるようになりました。

今まで通り、A,S,D,Wで移動、Spaceキーでジャンプです。
一部、生垣が重なっている部分でZファイティングを起こして
おりますが、どうぞお気になさらずプレイして下さい。

今回、当たり判定の処理を作成するのにすごく時間がかかってしまいました。
O3Dはどうも標準で当たり判定を導入していない様子だったので
自分で無い知恵しぼってルーチン考えましたよ。
まぁ、仕組みは単純なブロックエリアによる当たり判定です。
なので細かい当たり判定はできません。
というか、そこまで複雑な処理はやりません苦笑。

FPS表示は標準のものを使用しています。なにやらHPみたいな感じです。。
どうやらFPSバーの場所とかサイズとか変更できない様子。
さっそくFPSがどれくらい出るのか調べてみましたが、
思ったほど数字がでないんですよね。。
自分の環境だと平均25FPSくらいでした。
キャラが隠れると一気に60FPSに飛ぶんだけどなぁ。

ていっても他のWeb3Dより断然早いし、単純に自分の
スペックが弱いだけなのかもしれません。

あ、よければ遊んだ人は環境と表示されたFPSを教えてもらえるとうれしいです。

ようやく新しいO3Dスクリプトを更新です。
ジャンプモーションを追加しました。それとオブジェクトは
前の女の子キャラクターに差し替えています。
A,W,S,Dで移動。Spaceキーでジャンプします。
ちなみにまだモーション読み込み部分のスクリプトを書いていないので、
キャラクターは銅像のように静止しております笑。

そういえば、どこかのサイトでLWからだとColladaを正常に吐き出せないと
書かれていたので、はじめは少し心配だったのですが。。
大丈夫でしたよ！今までLWのアニメーション出力駄目すぎる…と
思ってましたが、Collada出力だけはちゃんといけるようです。

けどそこにたどり着くまでに色々と失敗を繰り返したので、
LWからO3Dを出力する際の注意点を少しばかりまとめようと思います。

・マルチUVには対応していないので、UVマップの指定は1つだけにする。
・法線エレメントはLWでは出力してくれません。なので
　シェーディングさせたい場合は他のソフトにもっていってから
　Colladaに出力するか、テキストを開いて法線要素を
　追加して法線マップを使用することで解決できる…はず。
・ウェイトマップだけを使用しないとウェイトが崩れます。
　ボーンプロパティで設定しましょう。
・今のところO3DTGZはBMP・JPGをサポートしていません。
　PNGを使いましょう。これに気づくまで、しばらく詰んでました苦笑。
　サンプルを見る限りDDSも使えるようですが、テキストで
　拡張子を変更しただけだと、何故か上手く変換できませんでした。
・LWのメートル実寸だとO3D上ですごくサイズが大きいです。
　エクスポート時にスケーリングに0.1倍くらいを指定しましょう。

とりあえずこれくらいだったかな。
あとはついでにDirectXの出力も久しぶりに試してみたのですが。
以前PolyTransを使用しても上手くいかないと書きましたが、間違いでした。
正常に出力できました。単純にデモ版だと5ポリおきに
ポリゴンが削られるだけだったみたいです。
後、DirectXに出力する際は別々のマテリアル同士を
繋げてしまうと、モーション再生時に頂点が爆発してしまうみたいです。
XSIでポリゴンクラスタを使用するとエラー終了したのと同じ理由かな。
O3Dでも同じなのかもしれませんが、まだ試していないので分かりません。
とりあえずマテリアル同士は離すのが無難なようです。

色々勉強になったなぁ。とりあえずファイルの入出力が
3Dの一番の鬼門だということが身に染みて分かりました。

それと、最近はO3Dが他のWeb3Dと同じように人知れず
消えていかないように普及させていきたいと思ってます。
このページにたまたまたどり着いたあなた！O3Dやろうぜ！

さっそくタグにO3Dを追加しました。

今回はO3Dのサンプルがごちゃごちゃしてて分かりにくかったので、
一度メモをとって分かりやすくしてみました。以下メモ。
※メモの途中で面倒臭くなって、適当なこと書いてますが気にしないでください。

2d:2D画像(スプライト)として設置
animated-scene:スキンメッシュアニメーション
animation:プリミティブのSRTアニメーション
archive-textures:フォームボタンで画像を取得
billboards:ビルボードの利用
bitmap-draw-image:BMPの読み込み
canvas:文字の出力や矩形描画
canvas-fonts:フォントを指定して文字を出力
canvas-texturedraw:クリックした部分に画像を出力
checkers:ボードゲームのサンプル
convolution:ガウスブラーによるポストエフェクト
Culling:カリングの利用
customcamera:フォームテキストからカメラ位置を変更
debugging:debug.jsライブラリの利用。内容はIK？
displayfps:クライアントディスプレイにfpsを表示
error-texture:フォームでテクスチャをHide/Unhide？
fullscreen:フルスクリーンモードの利用
generate-texture:スクリプト上でテクスチャ生成
hellocube:プリミティブを回転。「こんにちはキューブ。」
hellocube-colors:プリミティブの色をフォームから変更
hellocube-textures:プリミティブのテクスチャをフォームから変更
helloworld:おなじみのポッドモデルを読み込む。｢こんにちは世界｣
hud-2d-overlay:スプライトをオーバーレイ表示
instance-override:インスタンスをオーバーライドして複製
instancing:上のスクリプトをおなじみポッドでやっちゃった版
juggler:スプライトをジャグリング移動させるサンプル
julia:ジュリア集合のフラクタクル生成。ジュリア可愛いよジュリア。
multiple-clients:クライアントビューを複数分割
multiple-view:クライアントビューを複数分割(異なるシーン)
old-school-shadows:丸影の描画。Old School…だと！？
particles:パーティクルの利用
phongshading:Phongシェーディングの利用
picking:オブジェクトのピック部分の位置･向きを取得
Primitives:さまざまなプリミティブたち
procedural-texture:プロシージャルテクスチャの作成
render-mode:ドラッグで背景色変更。あまり目によろしくないサンプル。
render-targets:レンダーターゲットでテクスチャ生成
rotatemodel:キー入力でポッドを回転
scatter-chart:オブジェクトを頂点レンダリング。マウスでカメラ制御
shader-test:ディフューズ、バンプ、トゥーン等のシェーダの利用
shadow-map:シャドウマップの利用
simple:simpleライブラリの利用。個人的には逆にわかりづらい。
simpletexture:テクスチャの表示
skinning:スキニングの利用
sobel:Sobel Edge Detection Shaderというシェーダのサンプル
stencil_example:ステンシルマスクを利用した複数レンダリング
texturesamplers:テクスチャプロジェクションの利用
tutorial-primitive:プリミティブの取得
vertex-shader:頂点シェーダの利用
vertex-shader-animation:頂点シェーダの利用2
yuv2rgb:YUV画像をRGBにコンバート
zsorting:半透明オブジェクトのZソート描画

ほんと、すごい量のサンプルです。。
正直E3Dと同等か下手をするとそれ以上のものが作れそうな気がします。

O3Dのプログラムを少し更新。
カメラが遅延追跡するようになったのと、オブジェクトを読み込めるようになりました。
A,W,S,Dキーで南瓜を移動できます。
(移動しない場合は画面を一度クリックしてください)

オブジェクトは結構前に作成した南瓜を読み込ませてます。
なぜかシェーディングされてないですが。読み込んだだけだから、仕方ないね。。

それとなんだか最近、なんでもかんでも日記のタグに"制作"を
使用してる気がしてきたので、そろそろタグを細かく分類しようかなと思います。

最近はなつかしのゲームのあの子を作ってました。
テクスチャはまだまだ途中。。うーんどうしたものか。

話が変わりますが。
最近になって個人的にWeb3D熱が熱いです。
まぁずっと前からWeb3Dに興味があったんですが、
日に当たるWeb3Dの規格がでてこなかったんですよね。。
けどここ数日になって、ようやく｢こいつはいいかもしれない｣というものを見つけました。

その名もO3D。

今までWeb3Dは独自エンジンだったり、Flashを使ったりといったものが
主流でしたが。。ここにきてなんと！Javascriptですよ奥さん！
そうそう、このお手軽感ですよ。大切なのは。

ちなみに作ってみたサンプルはこちら(要プラグイン)。
Cubeがくるくる回転するといったシンプルプログラムです。
そういえばE3Dやりたてのときも似たようなプログラム作ったっけ。なつかしい。

プラグインをインストールしなければならないのは他のWeb3Dと変わりませんが、
何といってもGPUで直接動作するので結構軽いです。
似たようなので、WebGLにも期待してるけど今のところ本命はこっちですね。