進捗状況(2012/03) - FPSを作ってみる@wiki

(2012/03/31)

海

まだ途中．
HDRの途中でちょっと寄り道して海である．一応グラフィック関連だし迷走じゃないよね？
フレネル項かと思いきや，単に水面と視線の内積とってそれっぽく合成しただけ．
反射がちょっと赤っぽくなってるのはそのせいだろうか．後でちゃんとやるつもりだ．
遠景にフォグかけてないのと確かミップマップを使ってないのでぽつぽつとノイズが出ているとか
ああそうだ，太陽光源の反射もない．ないないない．

無限平面自体は昔からある（多分）しさして特殊な技術を使ってる訳じゃないから説明する様な事はないかなぁ
一応VertexTextureFetch使ってディスプレースメントなんぞもしているけどパラメタの調整が上手くいってないようだ・・

#追記1

フレネル反射とフォグを入れてみた．
前より大分マシではあるが・・・なんか3DCGソフト使いはじめで
とりあえずデフォルト設定で描画しました～的な独特の安っぽさが漂う．特に色がわざとらしい．
光源のスペキュラはまだ入れてないがそれでどうにかなるレベルでは，ちょっと．
空のキューブマップはミー散乱，レイリー散乱をやってる訳じゃもちろんなくて
Terragen2の初期設定で出力したものだから余計にそう思えるのかも．

もうちょっと改良したい（しないかもしれない）

それとゲームとして重大な問題があって，これは動的なシーンに対応していない．
つまり空と海の2枚のキューブマップ座標を変化させてるだけなのだ．
アフターバーナーのような超高速スクロールゲームでは無視してもなんとか誤魔化せちゃってる気がするが
大抵のゲームではそうも言ってらんないわけで．
リアルタイムにレンダリングしたテクスチャを使うしかない．
ここで引っかかるのが「どこまで正確に描写するか？」である．

正確性を期すならば海面の法線が刻々と変化する関係で全方位，キューブなら6回分必要．
しかもシャドウマップと違って質感から反射まで全部，更に海面下も6回・・まぁ却下ですな．
っていうか速度的に考えて通常シーン以外で描画を許容できるのは2,3回までだろう．
モデルの法線マップを全部ひっぺがして色だけでやるにしても，ね．

じゃあと次に思い浮かぶのは
うねらない水面の時と同じように視線を海面に対して反転させて一回描画すれば大体カバーできるから
うねった法線の関係で無理な分は誤魔化す方法．
ひねりも何もあったもんではないがこれで行こうかなと．

(2012/03/28)

God Ray

所謂GodRayエフェクト．自分が最初に見たのは初代HALOの時だったかなぁ
GPU Gems3に載ってる方法で実装してみたけど放射ブラーを使った物とあんまし変わらない，いや
もしかしたらブラーの方が滑らかかもしれない．パス数を取るか，テクスチャのサンプル数を取るか・・
スクリーンショットのは見栄えを重視で1ピクセルあたりサンプル数32と多くしてあるけど実際使うとしたら16とかかね．
動いてる分には荒さはわからないと思う．

(2012/03/27)

Radial Blur

所謂，放射ブラー．昔からありますな．爆発の時とか使えそうなのでサクッと実装してみた．

God Rayエフェクトを簡単に実現するならライト部分だけを描画したテクスチャに放射ブラーかけてシーンに合成すればいいんだけど
今回は別の手法にしようかなと．

(2012/03/26)

Depth of Field

DOF無し

DOF有り(1)

DOF有り(2)

Bene.　さぁ次行こうか．

(2012/03/26)

HSAOの出来損ない 2

大分マシにはなったが，もう一声欲しい所．

#追記1

ああ，あれか・・・ランダムベクトルテクスチャを0～1の範囲で格納してたのを-1～1へ戻してなかったっていうお粗末様だ．
結構良さげになってきた．全体的に影が薄いのでブラーかける時に一工夫いるかも．
まだHorizon componentだけしか実装してないから次はNormal componentだ・・

#追記2

一応Normal component．画が悪かったと思う．これじゃHorizonのエッジを濃くしただけにしか見えないかも．

で，足し合わせる．最後にブラーをかけて終わり．

#追記3

ブラーは一様にかけるんじゃなくて深度値を利用してエッジや距離を考慮しながらやらないと駄目な気がした．

でもひとまず完了と言うことで次行っちゃうか．

(2012/03/25)

HSAOの出来損ない

いや，ブラーかけてなくてノイズ混じりなのは良いんだが・・
なんか違う．特に画面中央が不自然に暗くなってしまうのが気になる(続く)

(2012/03/23)

Omnidirectional-ShadowMap 再訪

これ自体は前にやったからなんて事ないんだが，今回はDeferredShadingによる実装．
数年前は影が滑らかになるし負荷もそれ程上がらないしで万能，それこそ涙が出る手法であった「Variance ShadowMap」だが
今だったらそこらのインディでもみんな普通に使ってるかな．

さて，散々webで寄り道してるとはいえかなり時間がかかった．というのも当初
全方位を2枚のテクスチャでカバー出来るDualParaboloid変換でやろうとしていたのだ．

詳しい人なら一発で気付くだろう．非線形変換だとForwardShadingでは上手くいくものの
DeferredShadingではG-Bufferから元の頂点位置を取得する手段が無いので正確に深度テクスチャを参照するのは無理，
ズレを無視しようものなら影がはみ出したり変形したりで実用にはほど遠く・・
で，どうしようかと考えた挙げ句に結局キューブマップに落ち着いた訳だがここで「単にキューブマップじゃ芸がないし，何より重いよな」
という事でVirtual Shadow Depth Cube Texturesに手を出してみた次第．

簡単に説明すると従来6つの面それぞれを1枚ずつサーフェス（キューブテクスチャの1面）に書き出していたのを
全部並べて通常のテクスチャ1枚に納める手法である．
これなら描画自体は6回だけど描画先をスイッチする回数が最初の1回で済むし
テクスチャに対してブラーをかけたい場合も一辺にできるよねという寸法．
どのくらい高速化が図れるかは比較する気力が無いので他の人や論文に譲るがまぁそんな感じだ．
画像はとりあえず一枚だけ．

あと何枚かShotGalleryに画像を置いておく．

面の継ぎ目が隣と混ざってしまう等，諸処の問題には全く対処してないが面倒なので次へ進む．
次はトップページに書いてある通りHSAO．物体のくぼみを暗くしてそれっぽく誤魔化すアレだ（続く）

(2012/03/19)

サムネイル自動生成

普段PHP書いてる人には常識かもしれないけどスクリーンショットライブラリにサムネイル自動生成機能を付けた．
逆に言えば前まで無かったから自前でツール使って用意するか，もしくはサムネイル無し（＝元ファイルを縮小表示）しかなかった．
そんな面倒臭いの誰も使わないだろう．自分だって嫌だ．HTMLで画像をつらつら並べた方がマシだ．
という訳でPHPのGDライブラリを用いてサブフォルダへ縮小画像を保存するように改造した．
相変わらずアクセスの度にファイル列挙してるけど，これで少しは使えるようになったか？

ゲームの方は・・
DeferredShadingの実装過程で描画周りを大幅に改修してたら
仕様が錯綜してゲームどころじゃなくなってる．
D3Dデバイスなんて最初，マルチスレッド前提でちゃんとロックしてからアクセスだったのに
途中からロックしてたりしてなかったりで訳がわからん有様．
(それでも今の所マルチスレッドで動かす箇所が限定的だから動いてる)
そもそもマルチスレッドでリソース共有の必要性があるのか？Luaとかシングルスレッドだぞ？などと．

描画デモを録画したら作り直しの方向で．
次で5代目か・・まともにゲームが動くのは何代目になるやら

(2012/03/14)

サンプルページがまだだが

だけどアップした。
半ばヤケで書いたREADMEの英語が間違っていたりとか多分あると思うけどここいらで区切りをつけないとまたズルズル行ってしまうので・・
日本語のも置いてあるから結局何が言いたかったかは、少なくとも日本人には分かってもらえるはずだ。

URLを紹介しておこう。

https://github.com/degarashi

タイトルの通りまだ動作サンプル兼ここの過去のスクショを表示するページを構築できてない
（正確には画像のバックアップなど取って無かったのでwikiからダウンロードしている）
ちなみに今見るとそこいらで拾ったであろうドラえもんやらの仮画像が表示される。
コメント以外は移植した。

詳しくは左のメニューから飛んでもらうか http://www40.atpages.jp/~slice/scgallery/ をクリック

(2012/03/12)

進捗(web編)

web編ばかりで申し訳ないがゲーム（というか描画デモ）の方もちゃんと進めてるから安心して欲しい．
ちなみにDeferred Shadingに取り組んでいる．詳しくはググってください．

自作スクリーンショットギャラリが割と動く状態になったのでどうせならという事で
githubに公開しようと思い立った．まぁ，オープンソースは一種の憧れでもある．
それに伴いgitの練習とコメントの英文化が必須だろう．<= これが2～3日前

で，現在．
試しにリポジトリを作ったりしてgitの基本操作は大体分かったしコメントもえせ英語なら，これもなんとかなった（した）．

ライセンス周辺は大したプログラムでもなし適当でいいかなと思ったが
やっぱり自分が大なり小なり労力を費やしたソースを他人が1行いじってそれを自分のだと主張されても悲しい物があるんで
ちゃんとした何かライセンスを付与する．
GPL, LGPL, MPL・・色々あるけどここはアイコン表示のわかりやすさを優先してCC(クリエイティブコモンズ）を選択．

後はファイルを綺麗に纏め，READMEを書く位か．しかし・・・一体何を書いたら良いやら．
ともあれ今日か明日中に公開できると思う．

(2012/03/09)

進捗(web編)

アコーディオン型メニューは微妙だと書いておいてさり気なく左側のメニューがそうなってるとか。
不定期日記の項目が長すぎるからどうにかしたかった。(jQueryのお陰でサクッと)
このwikiってhtmlタグを自由に入れられる仕様じゃないからあんまり凝ったページにはできなそうだ。
関係ないけどlinux版firefoxの動作が妙に重くてアニメーションがカクカクしている・・

で、スクリーンショットギャラリー。いい加減もう完成しただろうと思いきや、まだであった。
原因はいつもの「折角だからあれもこれも」である。
例えばこんなの

• 画像は非同期に取得したい

　　　画像を全部読み込み終わるまで待たされるのは嫌
　　　(完)

• サーバに画像置くだけでギャラリーに反映させたい

　　　更にフォルダでグループ別に分けたい
　　　(PHPでファイル列挙してるから負荷高そう。キャッシュしないと・・)

• コメントをオーバレイさせたい

　　　コメントはテキストで記述？
　　　コメント無しも許容
　　　(画像切り替えたときの数秒間だけコメント出すのがまだ)

• 等倍、拡大表示の切り替え

　　　単に自分が等倍表示好きなだけ
　　　（未完）

• ローディングはそれを示すアニメーションを出したい

　　　いわゆる、くるくる表示
　　　(完。まあアニメgifだけだし)

ざっとこんなもんである。
ああ、沢山あるね手間だねで済めばまったく問題ない訳だが例によって勘違いが炸裂

非同期に画像を取得の所では、てっきりAjax使うのかと早合点して
なぜかわざわざ画像ファイルのバイナリをとってきてbase64に変換、img要素のsrcに流し込んでみたり
無駄な努力で半日つぶすとかよくある話。（実際はimg要素のsrcを書き換えるだけで良い）
他にも要素配置のブラウザ間差異などで苦しむ。

少し言い訳をさせてもらうと
今まで自分にとってコンピュータに何か処理をさせるというのは1から10まで手順を指定して始めて実現できる物だった。
アニメーションをさせたければ絵を毎数分用意して、ファイル名はこうで、フォーマットはこれ、何枚あって、タイミングはこうで、位置は・・といった風だ。
でもwebの世界では根本的に違う。おおよそやりたい機能は揃っていて、殆どブラウザがよきに計らってくれる。
ファイルパスを入力すれば画像が表示されるしアニメgifなら勝手にアニメーションもする。
さっきの「左側のメニュー」だってこちらがやる事といえば要素を出したり消したりだけで
配置換えは自動なんて、最初知ったときは「えええ？」でしたよ。
早い話がギャップを感じたという事。