mieki256's diary

DXRubyを使って、2Dで一本道を生成するのはソレっぽくできたので、今度は Processing を使って3Dで一本道を生成してみたり。環境は Windows10 x64 + Processing 3.0.2。

_sketch_roadmake1 (Processing.js版)

ソース : _sketch_roadmake1.pde
使用画像 : _road_tex.png
Windows版の実行バイナリも含めた一式 : _sketch_roadmake1_20160317.zip (72.4MB)

License は CC0 / PublicDomain ってことで。

気になる点をメモ。

• そのままではテクスチャが歪むかなと思ったけど、意外と気にならない結果に。横に長いポリゴンを置いてるせいかもしれない。
• Processing.js (JavaScript) で動かすと、テクスチャがボケボケになる。なんでや。ブラウザによって見え方が違うのかと思って、Firefox、GoogleChrome で試してみたけど、やっぱりボケボケ。Java版で動かすとクッキリしてるのだけどなあ…。謎。
• 高さも変化するようにしてみたけど、ところどころガクガクしちゃってる。一応、イージングを使って多少は緩和してみたつもりだったのだけど、効果が出てないような。自分の書いたソースにバグがあるのかもしれず。それとも、スプライン補間等を使わないとダメかな。
• 道路片の裏が見えてる時は非表示にしたい。ポリゴンの法線ベクトルと視線ベクトルの内積で、とかやるんだっけ？ どうだったかな。
• translate() と rotate?() で動かせないかと試したけれど上手くいかず、結局 camera() を設定して動かしてしまった。

さておき、道路脇の地面、ビルボードの樹木、背景等を入れれば、もう少しそれっぽくなりそうかなと。そのためには、道路のポリゴンだけではなく、地面やビルボードのポリゴン座標もデータとして持たせないと。データの持ち方・作り方を変更しないといかんなと。

ググっていたら、Processing なら透視変換行列を加工してビルボードができるけど、Processing.js では行列を取り出す命令が実装されてないから無理、という話を見かけた。なかなか厳しい。

◎ Processingのスクリーンショットについて。 :

Processingで何かしらを書いてる際、テクスチャ画像ファイルを別途読み込ませて使っているのがなんだかアレだなと思えてきて。せっかくProcessing を使ってるのだから、ここはテクスチャ画像まで生成できたらグッドだろう、そうなればソースだけ置いとくだけで済むよな、と。

てなわけで、道路テクスチャを生成できないか試していたのだけど、シームレス画像にするところで悩んでしまったり。普段 _GIMPでシームレス画像は作ってる けど、どういう処理をすればシームレス画像になるんだろう…。

ググってみたけど、出てくるのは画像処理ソフトを使ったシームレス画像の作り方ばかり。プログラムで生成するやり方については、ほとんど情報がなく。あるとしても、画像を解析して特徴を云々、的な研究室でやってそうな難しい論文だったり。

GIMPのソレは、縦横半分ずつずらしてることは分るけど、そこからどういう合成をしてるのかちょっとよくわからないな…。