MENU閉じる

HEXA BLOG

研究・開発

HEXA BLOGその他研究・開発2010.1.21

滑らかな軌跡

こんにちは。イワサキです。わーい(嬉しい顔)
今日は1月21日、「大寒」と呼ばれる時期です。暦上では太陽の黄経が300度の時で、寒さが最も厳しくなる頃を指すそうです。
北半球で世界的な規模で大寒波が各地を襲いましたが今週は大寒というわりには暖かいですね。
今日のお題は『滑らかな曲線補間付きでGPUで高速に描画してみよう』という方向でいってみようとおもいます。
GPUで高速なレスポンスを確認するために今回は”ペイントツール”を題材に実験してみます。
Adobe PhotoshopなどもGPU対応が進んできています。
まず、Windowsで一般的なペイントソフトを使った場合に気になるのは、”マウス軌跡が一様ではない”ということに気がつきます。
これはマウスをぐるぐる早く回すように描画した時によくわかります。
原因は加速度対応カーソルにあります。
コントロールパネルの「マウス」の「ポインタオプション」に「ポインタの精度を高める」というチェックボックスがあるのですが、
これをオフにすることで等速マウスカーソルになります。
等速にしておくとマウスセンサの動きがダイレクトに使用されますので意図通りの挙動になります。
今回はこの等速入力に対応するためにデバイスのRAW入力を使用しました。
RAWマウス入力とは?という方はGoogleにてご覧ください。より詳しい説明が見つかると思います。
これを経由することで上記のOS設定を変えることなく等速運動の「生データ」を取得することができます。
又、秒間1000回などレポートレートが高いゲーミングマウスでも取りこぼしなく拾うことができます。
今回は主に描画のお話といういことでRAW入力については割愛させていただきたいと思います。
もしリクエストがありましたら今後ご紹介したいと思います。
ペンで描いた時の軌跡は本来は滑らかなものですが、マウス入力された時点では移動量として整数化されます。
このときにはレポートレートの周期ごとに送られてきますが、小数点以下が欠落していることと、
周期が標準では125Hzで、ワイヤレスマウスでは50Hzの場合もあります。
カクカクになる原因はこのような部分で失われている情報があるから、と言えます。
今回は取得した軌跡を「スプライン曲線」で補間します。
ここでは通常のスプライン曲線ではなく、「Nonuniformスプライン」を利用します。
スプライン曲線では、通過する時間tと座標を指定することで、それを結ぶなめらかな補間曲線を描く曲線です。
このときに、時間と距離にムラがある場合には滑らかさと均等さを失います。
これをNonuniformスプラインで滑らかに生成しよう、というのが今回のお題です。
参考書籍は『Game Programming Gems 4 : 2.4 不均一スプライン (P166)』です。
Game Programming Gems 4 日本語版
2010-01-21-gems4.jpg
編者:Andrew Kirmse
監訳:川西 裕幸
翻訳:中本 浩
ISBN:4-939007-90-1
発行・発売: 株式会社ボーンデジタル

この中には3種類のNonuniformスプラインが紹介されています。
ひらめき丸み不均一スプライン(Rounded Nonuniform spline)
ひらめき平滑不均一スプライン(Smooth Nonuniform spline)
ひらめき時限不均一スプライン(Timed Nonuniform spline)
この中で手書き補間は平滑不均一スプラインが用途として適しています。
せっかくですので丸み不均一スプラインも実験してみました。
丸み不均一スプラインは指定した点を通過するのは通常のスプラインと同じです。
特徴は「補間点の移動速度がほぼ均一になるスプライン」で極端に折れ曲がらないスプラインになります。
記述では、レースゲームなどのコースの軌道補間などに適しているようです。
下の図が実際に丸み不均一スプラインを計算した結果になります。GPUでリアルタイムで描画しています。

2010-01-21-spilne.png

緑色の点が通過点、オレンジの丸が補間点になります。
オレンジの丸印が比較的等間隔に並んでいることがわかりますね。
すこし描画に工夫して一般的なGPUのMSAAとは異なる高品質なスムーシングのかかった描画にしています。
階調は256階調出ますので256xMSAA相当の高品質アンチエイリアシングになっています。
実際には256回サンプリングしているわけではなく、衝突判定で遮蔽量を計算しています。

2010-01-21-zoom.png

ルーペで拡大してみました。非常に滑らかで品質の高いアンチエイリアシングということがわかると思います。
ピクセルシェーダーでサンプリングしているのですが原理としては次のような仕組みになっています。

2010-01-21-line.png

このようにすると普通に矩形で描画するよりも滑らかな丸い角で、綺麗なアンチエイリアスをかけることができます。
シェーダーで処理していますのでポリゴン分割なども発生しませんので頂点が増えたりしないのもメリットになります。
この滑らかなボリュームライン描画と前述のNonuniformスプラインを組み合わせて簡易的なペイントツールを作成してみました。
GPUでアクセラレーションがかかりますので応答が高速です。
すべてをGPUに依存していますのでGPUが弱いと逆にレスポンスが低下する可能性もあります。
マウスの軌跡をスプラインで補間していますので、高速にマウスをぐるぐる動かしても滑らかな軌跡を得ることができます。ぴかぴか(新しい)

2010-01-21-draw1.png2010-01-21-draw2.png
左】一般的なペイントツール     【右】今回のデモの軌跡補間

このデモは以下からダウンロードすることができます。
今回はスプラインのデモとペイントのデモの2種類を同梱しています。
◎動作可能な環境
 <動作条件>
 WindowsXP以降、DirectX9.0c
 シェーダーモデル3.0以降
GeForce 6000シリーズ以降
Radeon HD1000シリーズ以降

特殊なレンダリング手法を用いていますのでドライバの不具合などで一部動作しない環境があるかもしれません。
なるべく最新のデバイスドライバで実行してください。
Download
HexaSpline.zip (約2.01MB)
【動作確認済ハードウェア】
nVIDIA GeForce9800GT
【操作方法】
■HexaSpline
カーソルを動かすと代表点の一つが操作可能です。
■HexaPaint
左クリック・・・オレンジでペイント
右クリック・・・黒でペイント
マウスホイール・・・ペン先の太さを変更


DirectX11でComputeShaderが実装され、CUDA, ATIStream, OpenCLなど、GPUを他の目的で活用しようとする流れが今後のトレンドになっていくと思います。
GPGPUのデモも今後紹介できればと思います。


ヘキサドライブでは自社内製ゲームエンジン「ヘキサエンジン」を開発しています。
いろいろな技術を取り込んでゲーム開発を力強く加速させてみませんか?
新卒・中途ともにご応募お待ちしています。
皆さんに会えることを心待ちにしています手(パー)ぴかぴか(新しい)ぴかぴか(新しい)ぴかぴか(新しい)

RECRUIT

大阪・東京共にスタッフを募集しています。
特にキャリア採用のプログラマー・アーティストに興味がある方は下のボタンをクリックしてください

RECRUIT SITE