たけなか制作日誌

トップページのリンク色のスタイルを少し変更してみて気がついたことですが。最新の
FirefoxやSafari等のMozilla系ブラウザではA:visitedのスタイルは一部のスタイル
変更ができないように制限されている様です。何やらセキュリティに問題があるとか。

そのせいなのか、FirefoxやSafariだけLightViewと併用したリンク色のスタイルが
変更されないという問題が発生。。まぁ色が反映されないだけなので、レイアウトが
崩れるような問題と違ってそこまで大きな問題でも無いのですが、なんだか良い方法が
ないのものか。少し考えどころです。

追記：
…と思ったら他のブラウザでもLightViewと併用部分は同様の現象になってました。
前からそうだったっけ？最近はサイトの移転もあって色々と記憶がごっちゃになってる
感じがします。偽情報流してすみませんでした；

まだまだ分からないことが沢山あるものの、全体的なフレームワークがようやくみえて
きました。そして今日はパーティクル。いつもより多くまわっております笑。

そういえば、WebGLに使われているCanvasについて調べてみるとIEさんではサポート
されていないのです。一応、親切心からかGoogle様がExplorerCanvas.jsという
ものを開発されてますが、このjsコードの中身をみてみるとDOMとVMLによって
Canvasを擬似的に描画しているもので。それだけだと画像のピクセルを取得したり
出来ない訳なのです。

さらに肝心のIE側はver8以降Canvasをサポートしていくのかと思いきや、「私はSVGで
行く！」なんて急に言い出す始末です。IE以外のブラウザでは概ねCanvasに移行予定
ですが。IEのシェアを考えると仕様の統一は当分有り得なさそうな感じです。

結局のところWebGLもCanvasを使っている以上、普及させようと思うとそれなりに
時間がかかりそうな様子なので、Web3Dはまだ当分Flashの時代なのかな、なんて
推察してみました。なんだかWebはまさにブラウザによる戦国時代ですね笑。

先日、WebGLってどんなものなんだろうと思って色々触っていて「これだったら
Flash３Dの方が汎用的だし、速度だったらO3Dの方がいいなあ」なんて思って
みていたのですが。そもそも今までFlash3Dを自分で触ったことがなかったので
自分でとりあえずFlash3Dをはじめてみることにしました。

とりあえずシンプルなサンプルとしてプレーンオブジェクトにテクスチャを貼り付け
してみました。Flashが利用できれば表示されているはずですが、、多分大丈夫でしょう。
Flash3DはFlashが利用できれば気軽に見られるし、こうして日記やブログ等にも
貼り付けたりして遊べるのがいいですね。

ようやくお引越しがひと段落つきそうな感じなので、また制作日誌を
再開しようと思います。といってもここ一週間はお引越し作業で
ほとんど制作が進んでいませんでしたので。。今回は少し
お引越しに関する話をしようかと思います。

当初はお引越しなんてすぐ終わるだろうなと思っていましたが、
これが甘かったでした。実際のところ、サーバーによって色々と
広告の表示方式やCGIの有無等、細かいところで違ってくるので
サーバーによって一部のCGIが使えなくなったり、表示がおかしく
なったりしてしまう訳です。

その問題を数日かけてようやく解決したかと思えば、今度は
新しく変更した部分のタグやら命令がブラウザ環境に拠っては
実装が異なっていたり。。環境依存の埋め合わせ作業に、実は
今現在進行形で苦戦している最中なのです。Javascriptを
やったことがあるかたならブラウザの環境依存の複雑さが身に染みて
分かっているのでしょうが、今回身をもって思い知らされました。

しかしながら、お引越ししてデメリットばかりだったわけでは無いです。
今回サイト移転に伴い、この日誌のRSSが利用できるようになりました！
それに色々とWebコーディングに関する知識も身につきました。
機会があれば、お引越し中に思いついたものをいくつか作って
いきたいなと考えたりしています。

今回はHLSLでよく使用すると思われる(？)計算式をまとめてみることにしました。
一部以前紹介した式と同じものがありますが、まとめ編ということでご勘弁を苦笑。

・xを1.0以上の場合は0.0にループ丸めしたいとき
　x = frac(x);

・x(>0)のa以下の範囲をb倍する
　x *= b * step(a,x);
・x(>0)のa以下の範囲を滑らかにb倍する
　x *= b * saturate(a-x)/a;

・x(>0)のa以上の範囲をb倍する
　x *= b * step(x,a);
・x(>0)のa以上の範囲を滑らかにb倍する
　x *= b * saturate(x-a)/(1-a);

・ブールbによる値切り替えb ? z=c : z=dをしたいとき
　z = b*c + (1-b)*d;
・ブール演算(等価)a == b ? z=1 : z=0をしたいとき
　z = step(a,b) * step(-a,-b);

・x(RGBA)をモノクロにする
　x = dot(float4(0.299f,0.587f,0.114f,0.0f),x);
・xをaでスクリーン加算する
　x = x + a - x * a;
・xをaでオーバーレイ合成する
　float Switch = round(a);
　x = x * a*2 * (1-Switch)
　+ (1 - (1-x) * (1-a)*2 ) * Switch;

今日はとっても鼻水がでる一日でした。ずるずる。

今までなぜか背景をHLSLで描画すると途端にFPSが下がって
しまっていたので、しかたなく固定機能パイプラインで描画して
いたのですが、ふとFXファイル内を見てみるとミップフィルタが
OFFになっていることに気がつき、設定後再び背景をHLSL
描画で試してみると無事FPSが落ちることなく描画できました。
どうやらHLSLによる速度低下ではなく大容量のテクスチャへの
アクセスによる速度低下だったみたいですね。

それで今日は背景のシェーダ周りと、新しくポストエフェクトに
向けてのマルチターゲットレンダリングの導入を行っていたんですが、
肝心のマルチターゲットが何故かなかなかうまくいきません。。

調べてみると、複数設定したレンダーターゲットのサイズやフォーマット、
サンプリング数は同じでなければならないらしく、設定してみても
なんだか微妙に違う。で、ちょっと気がついたことがあったので
アルファテストのAlphaREFの値を上げてみるとなぜかうまく
描画されました。…うーん、何故？？アルファは全然弄っていない
のですが、一体全体どこから来たのやら。。謎です。

少し時間がかかりましたが、背景に頂点カラーを実装してみました。

今までテクスチャのみによる色づけだけだったのが、今回の実装で
同じテクスチャの部分でも頂点によって色が変えられるように
なったので、なんだかバリエーションが広がった感じ！

ちなみに実装方法は乗算だけではなく、明るい部分は明るく
暗い部分は暗くといった、いわゆるオーバーレイ風味になるように
設計しています(ただ、背景は固定機能パイプライン描画なので
正確なオーバーレイ描画は実装できないのですが)。プログラムは
割とすんなり組めたのですが、ところがどっこい3Dソフト内で
頂点カラーを設定する際には乗算表示しか対応していないので、
一旦フォトショップでオーバーレイ処理後の色を確かめた後に
その色を3Dソフト内で数値入力するといった面倒な処理をすることに
なってしまいました苦笑。

特殊なことをやろうとすると色々と作業が細々としてしまい、大変です。

背景を固定機能パイプラインでモノクロにしてみました。
本来ピクセルシェーダを使えば、ものすごく簡単に実装できるん
ですけどね。。GPUが「もう無理もう無理！絶対無理！！」と
悲鳴を上げてしまうわけです…；そこで仕方なく固定機能で
描画してみることにしました。

Vista以降のPCとGPUならば固定機能パイプラインなんて
シェーダでエミュレーションされるので関係無いんですが、
色々な環境でも動作することを視野に入れるとXP以前の環境も
考えないといけないですからね。という自身もXPな訳で苦笑。
それにしても、ピクセルシェーダで実装したときと比べて色が
随分と飛んでしまっています。キャラクタも試しに固定機能で
モノクロにしてみましたが、、見事にディテールがふっ飛んだ！

そういえば、固定機能でモノクロシェーダをやってみてようやく
気がつきましたが。DDSとPNGでは半透明時の色部分の扱いが
違うみたいですね。まだ今ひとつ分かりませんが、おそらくPNGは
透過色を白として扱い、DDSは透過色を隣接不透明部分の
色として扱う、ということでいいのかな？

動くキャラ同士の衝突判定を実装してみました！

動くキャラと動かないキャラ・壁との衝突判定はあまり深く考えずに
実装できたのですが(といっても壁沿い移動は難しかった…苦笑)。
動くキャラ同士の場合だと”お互いの動きを考慮に入れた後、
衝突判定を行い、その結果を元に壁沿い移動して、またその
壁沿い後の座標で他のキャラと衝突していないか”…などなど。
途端にロジックが難しくなることが分かりました。これ、本当に
正確な衝突判定を行おうとした場合、下手すると衝突判定が
無限大に続いてしまうので、物理演算なんかでよく設定される
”ステップ数”っていうのはこの1フレーム当たりの衝突判定回数を
制限しているんだろうなと思いました。

そういえば、今回の処理でCPU負荷が結構かかってしまったかなと
思いましたが、まだ最大で50％程しか使用していませんでした。
GPUは思いきりこき使ってますが苦笑。余力が残っているのは嬉しいな。

新しく影表示を追加してみました。

本当はステンシルシャドウ等の影生成をやりたかったのですが、スペック上の都合で丸影で
実装しました苦笑。まあこれはこれで、ただ板状の影を置く手法ではなくピクセルシェーダを
使って丸影を生成していたりと割と工夫していたりします。デカールによるCPU生成の実装も
考えましたが。。大変そうだったので保留にしました笑。どんな技術でも物は使いようですね。

そういえば、今回はYouTubeの方にも音楽つきで投稿したのですがこちらはなぜかコマ落ちしてます。うむ、よく分かりません。。エンコードの勉強とか少しした方がいいのかもしれない。