Papervision3D で穴の中身だけレンダリングする


I got one question from UK. He says “I saw your New Year Greeting site. How did you make “the Hole” with FLARToolKit?”

Okay, There is nothing strange for the peoule just viewing it. But if you try to make the same thing like that, it’s a little difficult.

The cube that face normal is point to the internal, become like this:

2009010801-Cubichole1

All of the internal is revealed. It must be hidden in the area indicated as green.

2009010802-Cubichole2

Erase the green area (set alpha value to 0), the rest of the area is what you want. Use ColorMatrixFilter to erase the green area.

new ColorMatrixFilter([
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    1, -1, 1, 1, 0
])

The reason that I used green (0x00ff00) to indicate unnecessary area is to become transparent with this filter.

2009010803-Cubichole3

I did it!
Place the cube that position and size is same as the hole object to draw the green area. I uploaded live demo and source codes that includes all of these steps.

This technique is like chorma key and have some problems, the same as chroma key. It’s easy to find out the problem to change Stage Quality to HIGH in live demo. Some green edge remains. and other green object (green ball? green monster?) is also become transparent.

英国から質問 1 ついただきましたー。「年賀サイト見たんですけど FLARToolKit で穴あいたような表現ってどうやるんですか？」ですって。

そうねえ。見てるだけだとなんてことない普通の穴なんだけどいざ FLARToolKit (Papervision3D) でやろうとすると難しいっていうね。

何も考えずに穴の内側だからつって法線内向きの Cube を作るとこうなる↓

2009010801-Cubichole1

中が全部見えちゃってる。まあそらそうだ。隠すべきオブジェクトがない。どこを隠さないといけないかつーと↓の絵でいうグリーンの部分。

2009010802-Cubichole2

ここを消せば（アルファ値を 0 にすれば）見えるべき穴の中身だけが残るはず。んでどうやるかってーと↓こういう ColorMatrixFilter を使う。

new ColorMatrixFilter([
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    1, -1, 1, 1, 0
])

うえの絵で緑色 (0x00ff00) を使ったのは説明用っていうわけじゃなくってこのフィルタで抜くための色なのでした。このフィルタは 0x00ff00 に近い色ほどアルファ値が低くなるっていうやつ。んでこれを適用しするとこうなる。

2009010803-Cubichole3

できたー、穴の中身だけできたー。（あー背景色もっと暗いのにしとけばよかったみにくいなでもめんどいのでそのまま。）ん、消さないといけない部分の緑色ってのは ColorMaterial(0x00ff00) を設定した Cube の側面だけのやつをちょうど穴オブジェクトと同じ位置に同じサイズで置けばいい。つーわけでそのへんひととおり組んだ動くデモ＆ソース。

この方法はあれですねブルーバックで抜くやつみたいな、そんな感じね。んでブルーバックで抜くのと同じような問題がこれにもあって。デモで Stage Quality を HIGH にするとわかるんだけど、レンダリング時にアンチエイリアスをかけるとグリーンのエッジが残るのね。あとグリーン系のオブジェクトは透けるっていう。なのであの年賀サイトではまあデザイン上の理由の法がデカいんだけどグリーンは使ってない。

ってなところで寝る。英語版は明日書こう。