fc2ブログ

Javaゲーム制作記

いろいろ作ってます  

3D水面 with Processing

Processingで、無理矢理に環境マッピングを実装してみました。
スフィアマップなのでUV座標は、

U=N.x / 2 + 0.5
V=-N.y / 2 + 0.5
(Nは正規化された法線ベクトル)

となります。
うん、超簡単ですね。

あとはこれにテクスチャを貼り付ければ・・・


じゃーん。
こうなります。
水銀っぽくてとてもきれいです。

では実際に見てみましょう!
続きからどぞ↓




かなり重いのでライティングは無効にしてあります。
クリック・ドラッグで波を起こします。

[ 2010/10/03 12:46 ] 3D | Comment(8)
おおおお!決めえwwwwwww
[ 2010/10/03 16:44 ] [ 編集 ]
ようやく来ましたね! 
[ 2010/10/03 17:08 ] [ 編集 ]
すごいうねうねしますね♪ とても面白いww
なんか連打すると山みたいなのができるのも、とても面白いww
[ 2010/10/03 22:34 ] [ 編集 ]
すごい表現です!
はじめましてフミです。
Processingの水の波紋のやり方を捜していてたどり着きました。

この波紋の表現すごいです!

Processingで環境マッピングの方法はどうすればいいのかわからなく悩んでます。
環境マッピングのOpneGLの参考サイトなどあれば教えて頂けないでしょうか?

Processingでこの表現はすごいです。


[ 2010/11/29 17:38 ] [ 編集 ]
>>フミ さん
はじめまして。
コメントありがとうございます!
環境マッピングはOpenGLでなくても(P3Dで)できます。

水面の表現の具体的な手順としては、

・水面の動きを計算
・頂点の高さから法線ベクトルを計算
・法線ベクトルを元に、頂点のUV座標を計算
・UV座標でテクスチャを貼り付ける

となります。
Processingには環境マッピングのメソッド(関数)がないので、自力での実装になります。
ポリゴンにテクスチャを貼り付けるメソッドはあるので、それを使って表示していきます。

参考サイトなどは、OpenGLの元々の環境マッピング機能(Processingでは使えないです)で実装しているものがほとんどなので、
ほぼないです・・・
分からないことがあれば、詳しく説明しますね。
[ 2010/11/29 18:38 ] [ 編集 ]
ありがとうございます!
非常に参考になります。
環境マッピングやスフィアマップのことについてもうちょっと勉強してみます。

この波紋の表現にはびっくりしました。
[ 2010/11/29 21:14 ] [ 編集 ]
初めまして。
最近Processingを勉強し始めたばかりで、水面の表現を出来たらなと検索をかけた結果ここに辿り着きました。
まずはProcessingでここまで美しく滑らかに水面を描けることに驚き、さらにOpenGLを用いていないことに開いた口がふさがりませんでした!
よろしければ具体的にどういう構造になっているのかご教授をお願いできないでしょうか?
ブログの方で解説などをしていただけたらと思います。
ご検討のほどを、よろしくお願いします。
[ 2012/07/17 21:38 ] [ 編集 ]
>>Pixyさん
初めまして。
描画部分は少し手が込んでいますが、水面の計算は簡易的なものです。
今はちょっとオリジナルのソースコードは見当たらないのですが、ActionScript版のものがこちらにあるので、
挙動計算の部分は参考になるかと思います。
http://el-ement.com/labs/water/

頂点の位置情報を持っておき、
それらを平均化させるような方向に速度を与えています。

描画は記事の通りUV座標を計算し、
texture()関数でテクスチャを指定してポリゴンを表示しています。
こちらはスフィアマップで調べるといろいろ分かります。
[ 2012/07/19 17:43 ] [ 編集 ]
コメントの投稿




※URL記述の際はttp://としてください


プロフィール

saharan

Author:saharan

Twitter
検索フォーム