作者Morshues (汪汪)
看板GameDesign
標題[程式] 用GL實作漣漪
時間Thu Mar 21 01:13:37 2013
因為前陣子有個關於遊戲玩法的發想
想做一個關於漣漪特效
因此來請教板上的前輩們
有沒有什麼改進效能的做法
我所指的漣漪
就是假設以一張圖片為底圖
觸碰某個點的時候會產生隨時間擴散的漣漪
類似像這樣的效果
https://www.youtube.com/watch?v=Wtyxbi1c7r4
我使用的語言是android的openGL ES2
網路上找到一個關於漣漪的演算法
http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
而網路上我看到對應到圖片的作法 大致上有兩類
一是將整張圖片切成大量的三角片
再將水深資訊對應到Z軸坐標
二是將深度資訊做為texture的偏移量
越深的就偏移越多
我在試做的時候所使用的是第二種
是因為剛好找到這個
http://dl.dropbox.com/u/35529986/kokokakku/Mika.html
參考他的原始碼來做的
做出來了之後沒想到FPS低到差點吐血
我用的測試機是HTC OneX
所以深度資訊的array就用原生的1280x720
(PS:我是用sampler的buffer來丟深度資訊)
結果計算array以及把array丟進shader的buffer
沒想到100 frames竟然需要47539ms！！
(算深度 23xxx，丟進buffer 23xxx)
等於等於FPS只有2....XDDDDDDDDDDD
( 題外話
( 另外android放進buffer的方式有兩種
( 1. buffer.array()[index] = depth[index]
( 2. buffer.position(index)
( buffer.put(depth[index])
( 上面說的時間是-1-的時間
( -2-更高達73493ms
( 偏偏第一種方法在一些比較早期的手機會crash....
後來我把buffer改小剩下125x62就超順 (約700ms)
只是解析度有點悲壯
原本期待第一種更變z軸buffer的方法
不過後來想想他也是堆進buffer啊....
只是還沒試就是了
很想讓深度資訊丟給shader自己算
可是參考那個網頁的演算法
每次的深度資訊都需要前一次的深度資訊來計算
等於必須要存下每次的計算結果
不過shader program好像沒有辦法拿來儲存結果？
看youtube別人的demo都跑好順
不知道自己哪個環節出了錯
請教板上的前輩有沒有什麼好的建議？
感謝耐心看完！
後面附上片段的code
==計算深度的code==
for (int y = 1; y < rippleHeight - 1; y++) {
for (int x = 1; x < rippleWidth - 1; x++) {
rippleMap[y][x][1-bufferSwitch] = (((rippleMap[y][x+1][bufferSwitch]
+ rippleMap[y][x-1][bufferSwitch]
+ rippleMap[y+1][x][bufferSwitch]
+ rippleMap[y-1][x][bufferSwitch] )
/ 2f - rippleMap[y][x][1-bufferSwitch] )*rippleViscosity);
}
}
// PS:bufferSwitch是用來區分前後兩次深度值的array
==array丟進buffer的code==
for (int y = 0; y < rippleHeight; y++) {
int tempY = y*rippleWidth*4;
for (int x = 0; x < rippleWidth; x++) {
depthBuffer.array()[tempY+x*4] =
(byte)(rippleMap[y][x][1-bufferSwitch]*rippleAmpRatio + 127);
}
}
==array丟進buffer的另一個方法==
==所花時間是上面那個方法的兩倍，不過某些型號的手機只能用這個方法==
for (int y = 0; y < rippleHeight; y++) {
int tempY = y*rippleWidth*4;
for (int x = 0; x < rippleWidth; x++) {
depthBuffer.position(tempY+x*4);
depthBuffer.put(
(byte)(rippleMap[y][x][1-bufferSwitch]*rippleAmpRatio + 127));
}
}
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.24.6.218
1F：推 littleshan:這個可以用shader算，用render to texture就可以存結果 03/21 01:37
馬上來研究看看！
感謝提供關鍵字！
2F：→ azureblaze:你需要使用shader 03/21 01:37
我是有寫shader，
不過我一直以為沒辦法讓shader算的結果存起來QQ"
※ 編輯: Morshues 來自: 114.24.6.218 (03/21 22:07)
3F：推 cjcat2266:VertexShader可以存結果，google "transform feedback" 03/22 01:36
4F：推 Killercat:普通都是丟pixel shader忽略掉y軸 03/22 12:10
5F：→ Killercat:要用vs的話 效能一定會被吃很大 直接用ps作弊會好點 03/22 12:11
6F：→ Killercat:當然你要做的很擬真就得vs或者gs(D3D11+)了 03/22 12:12
7F：→ Killercat:如果你用gs實作成功記得分享一下 關於gs資料真的太少=P 03/22 12:13
8F：推 Bencrie:gs 資料應該不算少吧 03/22 14:58
9F：→ bachi95:GL ES2應該沒有支援geometry shader 03/22 16:20
10F：推 Bencrie:沒注意到是 GLES2 XD 03/23 01:00