たけなか制作日誌

ようやく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キーで南瓜を移動できます。
(移動しない場合は画面を一度クリックしてください)

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

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

オンラインでJavaScriptファイルを圧縮してくれるとても便利なサイト→■

試しにやってみると半分近く圧縮できました。すごい！

けど、圧縮すると後から自分で編集するのがすごく厄介な上
ちゃんとしたコードになってるかどうなのか不明だったりするので
バックアップはとっておきましょう。

昨日あたりからAjaxについて調べてました。
具体的な経緯はニコニコ動画を崩壊させるアレがはじまりなんですけどね。

JavaScriptでページを動的に書き換えられるらしいということで、
色々と興味をもってしまいました。
まぁ、調べてたのはどんなライブラリがあるのか位ですけど。

で、ちまたで流行ってるLightBoxを僕のサイトにも設置してみようと思い、
色々とやってみたのですが、どうもうまくいかない。
以下にちょっとリスト書いておきます。

・LightBox ： フルみっくす(表示されてるflash全般？)が隠れる
ウィンドウサイズを変更すると、黒バックがうまく前面に表示されないことがある
・LightBox＋ ： 同上
・LightView ： フルみっくすが隠れる
・LightWindow ： ウィンドウサイズを変更すると、
黒バックがうまく前面に表示されないことがある
・BlackBox ： なぜか設置すらできませんでした
…調べるのに2日もかかってしまいました。

表示がおかしくならないBlackBoxを設置したかったんだけど、
どうもやり方が分からなかったので、とりあえず無難な
LightViewを設置してみました。

今まで、Galleryを見るとき、バックするとまたトップを
リロードしなくちゃいけなかったんだけど、
その負荷がなくなった分すっきり見やすくなったかなと思います。
けど、このLightView、全部で200kあるから少し重たいんだよね。

どんどん重くなるトップ、気が向いたらAjaxでコンテンツを分割しようかな。

昨日は体の調子が優れなかったので、制作を一時休憩。

休憩っていっても、ロックマン９の動画をみてたり、
JavaScriptの勉強したりしてたんですけどね。

とほほさんのサイトで分かったことなんですが、
Operaで長押しが効かなかったのって、イベントの取得方法を
onkeydownとonkeyupの2種類しか使っていなかったのが原因のようです。
長押し状態はonkeypressで判定できるので、
試しにこのイベントハンドラを使うと、無事に動作させることが出来ました。

それじゃあ、なぜIEやFireFoxではonkeydownのみで
長押しに対応していたのかってことになるんですけど。
Operaが悪かったというより、それ以外のブラウザの動作が
曖昧ってことなのかなあ。

HTMLマリオがIE以外のブラウザにも対応するようになりました！

これをやるのに丸２日かかってしまいました。
終わりのほうになると、ふと”何で自分こんなしょうもないこと
してるんだろ”とか考えはじめるようになりましたが、
とりあえず一時完成ということで一安心。

おかげで卒業制作が進んでいないから、いい加減進めようかな。
まだマリオでやりたい機能が残ってますが、それは後回しにしたいと思います。

アクセスカウンタ機能をつけてみました。

色々調べて分かったのですが、JavaScriptは
クッキーを読み込んで、その人が何回アクセスしたのか
調べることはできるけど、ブラウザ側のディスクアクセスは
できないので、カウンターデータが保存できないのだそうです。

要するにCGIを使わないと無理だということだったので、
無難にCGIを利用して設置することにしました。

で、実際どこに設置されてるかというと、
分かりにくいですがMARIOの得点の部分です。

まぁ、僕はアクセスカウンタはあまり好きではないので、
”えっ？これがそう？”ってくらい地味なほうがよかったりします。

それと、僕はIEを使ってますが、IEの場合
画像が最後まで読み込まれずにウィンドウ左下に
三角の警告マークが出る場合があって、その場合は
マリオが動いてくれません。
何回かリロードすると直りますが。

ページサイズが重たいのかもしれません。

現在、息抜きに色々とのびのびしてます。

ウェブページ上で、面白いことをやろうとJavaScriptを勉強して
いるのですが、まだまだ難しいです。

それと以前日記に書いたE3Dのミップマップは、どうも
うまく機能していないようです。

写真はミップマップテスト用に使ってたもの。
２年前の写真ですが笑。