[程式] 用GL實作漣漪

[Morshues (汪汪)]

因為前陣子有個關於遊戲玩法的發想

想做一個關於漣漪特效

因此來請教板上的前輩們

有沒有什麼改進效能的做法


我所指的漣漪

就是假設以一張圖片為底圖

觸碰某個點的時候會產生隨時間擴散的漣漪

類似像這樣的效果 http://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
推 littleshan:這個可以用shader算，用render to texture就可以存結果
馬上來研究看看！
感謝提供關鍵字！
→ azureblaze:你需要使用shader
我是有寫shader，
不過我一直以為沒辦法讓shader算的結果存起來QQ"
※ 編輯: Morshues        來自: 114.24.6.218         (03/21 22:07)
推 cjcat2266:VertexShader可以存結果，google "transform feedback"
推 Killercat:普通都是丟pixel shader忽略掉y軸
→ Killercat:要用vs的話 效能一定會被吃很大 直接用ps作弊會好點
→ Killercat:當然你要做的很擬真就得vs或者gs(D3D11+)了
→ Killercat:如果你用gs實作成功記得分享一下 關於gs資料真的太少=P
推 Bencrie:gs 資料應該不算少吧
→ bachi95:GL ES2應該沒有支援geometry shader
推 Bencrie:沒注意到是 GLES2  XD