SpaceNavigatorって？

SpaceNavigatorはXYZの3軸に対して移動および回転を行うことが出来るインターフェースデバイスです。
今日PCで使われているインターフェースデバイス、例えばマウスを例に挙げれば、ほとんどのマウスはXYに対する移動にしか対応していません。また、回転にも対応していません。
SpaceNavigatorは「キャップ」と呼ばれる大きなボトルキャップのような部分を前後左右、そして上下に動かして移動を行うことが出来ます。上下に動かすという都合上、本体の台座は重くなっています。
また、キャップを傾けたり捻ったり等回転動作も行うことが出来ます。

と、まぁ文章では伝えにくいものなので、使用イメージなどの詳細については以下のサイトを参照してください。

SpaceNavigatorの紹介

Flashで使ってみよう

さて、面白いデバイスだという事はおわかりいただけたと思います。
というわけで、Flashで使うためのライブラリとサーバーを組んでみました。
まだ暫定公開ですが、SparkProjectにコミットしていますので、SpaceNavigatorをお持ちで、Windowsユーザー（理由は後述）の方はsvnでチェックアウトしてみてください。

チェックアウト用URLはこちら。
http://www.libspark.org/svn/as3/SpaceNavigator/

SpaceNavigatorライブラリ＆Socketサーバー

仕組みは基本的にGainerと同じです。
外部アプリケーションとしてSocketサーバーを立て、そのソケットサーバーからFlashへ値の受け渡しをしています。
SocketサーバーはPythonで組んでおり、SpaceNavigatorから提供されているDLLを利用して値を取得しています。先ほどチェックアウトをWindowsユーザーに限ったのはこれが原因です…が、どこぞの先生が1時間足らずでMac用を作ってくれました。

僕の作ったWindows版は現在暫定公開ということでUI無しの状態ですが、そのうちつけます。また、ローカルのポートを使用するためセキュリティサンドボックス侵害にもお気をつけください。

使い方

肝心の使い方ですが、上記のリポジトリにサンプルも添付しています。
ごくごく短いコードですので、見ればすぐにわかると思います。

商用にあたっての注意

さて、SpaceNavigatorはGainerと違いエンドユーザー向けにデザインされている製品であるため、商用としてブース等に設置しても見栄えよく使うことが出来ますが、ひとつだけ注意点があります。
もちろん今回公開したSpaceNavigatorライブラリは商用・非商用に関わらず使っていただけます。しかしSpaceNavigatorそのものには商用向け(SpaceNavigator SE)と非商用向け(SpaceNavigator PE)があります。もし商用という形でSpaceNavigatorを使用される場合はその点をご注意ください。

HDRについて

まずHDRとは、High Dynamic Rangeの略で写真技法の一種です。
写真技法といっても難しい事では無く、携帯電話のカメラ等で誰もがごく自然に行っている事の延長なので、安心して読み進めてみてください。

携帯電話のカメラなどで「明度調整」という機能があるのはご存知の事だと思います。
暗い部屋で撮影する時に少しでも明るく見えるよう明度を上げたり、屋外で撮影する際に白く飛んでしまわないよう明度を下げたりしますよね？あれです。

もうひとつ、ほとんどの携帯電話には「撮影後の明度調整」を行う機能があります。
撮影後の画像に簡単な加工を施す機能のひとつとして提供されているもので、暗く撮れてしまった写真を明るく加工したりしますよね？あれです。

さて、このように写真に対しては二つの「明度調整」があるわけですが、前者と後者には決定的な違いがあります。
それは後者があくまで「加工」であるのに対し、前者は「光の取り込み具合を調整している」という点です。この取り込み具合のことを「露出」と言います。

【露出調整と画像加工の違い】

例えば撮影された時点で白く飛んでいる写真をいくら加工しても、白飛びに隠されたディティールを取り戻す事は出来ません。
レベル補正で明度を下げていったとしても、白飛びした領域が灰色になっていくだけなのです。
もちろん上の画像のように、黒く暗転した部分からもディティールを見出すことは出来ません。
つまり通常の方法では、白く飛ばないよう露出を調整（※）して撮影するしか白飛びを解消する事はできないのです。
※:カメラで言えば、ISOやシャッタースピードや絞りで調整する部分です。

ビットマップの限界

画像を加工して白飛びを解消することが出来ない理由は、ビットマップには白以上や黒以下の値が存在しない事にあります。
ここでおさらいです。
ビットマップの1ピクセルは色成分として8ビット3チャンネル(RGB)、合計24ビットの情報を持っています。
そのうち白というのは、24ビットの最大値を意味します。反対に黒は最小値を意味します。

【ビットマップの限界】

さて、白が最大値ということは、それ以上の情報は保存できないということです。同じように、最小値である黒も、それ以下の情報を保存できません。
白以上や黒以下といってもピンと来ないかもしれませんが、これを色ではなく明るさとして捉えるとどうでしょう？
カメラで撮影された画像はあくまで露出を調整したものです。
例えば蛍光灯より太陽光の方が明るいのですから、蛍光灯が白く写っている画像を基準に考えると、その画像内での太陽光は最大値を超えているといえます。
つまり、24ビットのビットマップで表現できるのは現実の光量の一部を切り取って表示しているもの、ということになります。
これが1ピクセルあたり24ビットの情報しか無いビットマップの限界です。
そしてこの限界はOSやディスプレイの表示限界から来るもので、容易に突破することはできません。

HDRフォーマット

上記の限界によって、例えば以下のような問題が発生します。

1. 極端に明暗の分かれているシーンでは暗い箇所を明瞭にすると明るい箇所が白飛びし、明るい箇所を明瞭にすると暗い箇所が黒く潰れてしまう。
2. 暗闇に目が慣れていく、トンネルを抜けて眩しさに慣れていく、といった露出の遷移を演出できない。（レベル補正をアニメーションする事で似た演出はできますが、違和感が出てしまいます）

ではこれらをクリアするためにはどうすればいいのでしょう？
そこで出てくるのが今回紹介するHDR(拡張子.hdr)です。HDRは1チャンネルあたり32ビットもの情報を保存する事が出来る画像形式です。
もちろん、OSやディスプレイが8ビット/チャンネルにしか対応していない状況で、32ビットをそのまま画面に表示することは出来ません。ですから、カメラの絞りのような形で32ビット中の一部領域を切り取り、8ビット内に収めて出力する必要があります。
結局切り取るんじゃ上記問題は解消できないのでは？と思うかもしれませんが、
この切り取り範囲を画像の一部で変更したり、アニメーションさせたりすることで、上記の問題(1,2)をクリアすることができます。いわば一枚の画像でありながら再撮影が可能なのです。

生成方法

HDR画像の生成方法は主に以下の二つです。

1. 同じアングルで露出の違ういくつかの写真を撮影し、それを元にHDR画像作成ツールでHDR画像に変換する。
   参考ページ：designwalker様
2. 3DCGツールでレンダリングする際、.hdrの書き出しを行う。

もちろん自分で生成するだけでなく、HDR画像は素材配布サイトからも手に入れる事ができます。作りたいイメージにぴったりの画像があれば利用してみるのも良いでしょう。
HDR 素材：Google検索

HDRクラス

さて、画像形式とはいえ、HDRはFlashではサポートされていません。
しかしHDRクラスを用いる事で、HDR画像(.hdr)を簡単にFlashで使用することができます。

サンプル上部のバーを動かすごとに露出が変更されていくのがわかると思います。

ダウンロード

ダウンロードはこちらからどうぞ。
1ファイルで完結しているので迷わず使えると思います。
また、テスト用サンプルとして上記Flashで使用したhdrファイル(sample.hdr)を同梱しています。

使い方

使い方は非常に簡単です。以下のソースをご覧ください。

var hdr:HDR = new HDR(bytearray);
hdr.minIllumination = 0x0;
hdr.maxIllumination = 0xFF;
hdr.render();
new Bitmap(hdr);


基本的にはこの5行だけでHDR画像を表示することが出来ます。
HDRクラスはBitmapDataクラスを継承しているため、別途Bitmapクラス等を使用して描画ツリーに配置する必要があります。
HDRクラスのコンストラクタには埋め込みやURLLoader等で取得したhdrファイルのByteArrayを渡します。(斜体部分)
HDRフォーマットは仕様上アルファが存在しないため、HDRクラスでもアルファを適用することはできません。（何か考えときます）

HDRクラスのプロパティには以下が用意されています。

• minIllumination
  絞りの下限を取得･設定します。
  後述のMIN_ILLUMINATION～MAX_ILLUMINATIONの間で設定します。
  さらに後述のminRangeプロパティが変更されると、この値も変更されます。
• maxIllumination
  絞りの上限を取得･設定します。
  後述のMIN_ILLUMINATION～MAX_ILLUMINATIONの間で設定します。
  さらに後述のmaxRangeプロパティが変更されると、この値も変更されます。
• MIN_ILLUMINATION
  HDR画像内で定義されている輝度の下限を表す定数です。
  ほとんどの場合、0が返ります。
• MAX_ILLUMINATION
  HDR画像内で定義されている輝度の上限を表す定数です。
  下限と違い、上限はファイルにより異なる事がほとんどです。
• minRange
  先述のminIlluminationプロパティを0～1の範囲で取得･設定できるプロパティです。
  minIlluminationプロパティが変更されると、この値も変更されます。
• maxRange
  先述のmaxIlluminationプロパティを0～1の範囲で取得･設定できるプロパティです。
  maxIlluminationプロパティが変更されると、この値も変更されます。

上記プロパティを使って露出調整を設定した後、renderメソッドを実行することでBitmapDataが更新されます。

ヒント

このHDRクラスはrenderメソッドを実行する事で自身を更新します。
ところが更新にはある程度の時間が必要なため、滑らかなアニメーションをさせる用途には向いていません。
回避策としてはHDRクラスから使用する露出の範囲に相当するBitmapDataを何枚かキャッシュし、加法ブレンドで合成し、アルファ濃度で制御する等が考えられます。

デザインで悩みに悩んだ末、とりあえずこのような見た目に。
デザイン案だけで30パターン近く作成したのは良い経験になった。
このデザインもまだまだbetaといったところなので、恐らく今後変わっていきます。

コメントを受け付けるか否かで随分悩んだけど、ひとまずコメント欄は無しに。

今後ともよろしくお願いします。