shader水面起伏的波浪

2021-07-11 14:21:42 字數 1249 閱讀 2885

利用shader來實現飄揚的旗幟,同樣可以實現水面起伏的效果.

說多無益,來看一張實現的美圖,蔚藍的天,還有那陣陣微風,水浪徐徐波動,動人心悸.

旗幟飄揚的動作都比較平滑,這個是利用了正弦曲線來實現頂點位置的變換規則,

簡單看一下上圖,水波利用先定義的乙個函式來計算y方向的移動,在vertexshader裡面呼叫此函式來實現模型在y軸方向的位置,並隨著時間而起伏,實現類似波浪和旗幟飄揚的效果.

看一下效果圖

在returny函式裡面,先求每個定點與原點的距離distance(in.position, fzero),在縮放後(乘1.4,有更多波浪)再與時間合併才能變化,然後按指數衰減可.

其實這裡的浪是可以動的,只是在下面不是非常好的表達出來,在遠處的波浪的效果更佳

我們只貼出處water的vertex**

uniform mat4 umvpmatrix; //總變換矩陣

uniform float ustartangle;//本幀起始角度

uniform float uwidthspan;//橫向長度總跨度

attribute vec3 aposition; //頂點位置

attribute vec2 atexcoor; //頂點紋理座標

varying vec2 vtexturecoord; //用於傳遞給片元著色器的變數

void main()

參考: opengl es遊戲開發(下)

directx 3d hlsl高階例項精講

一日一Shader 水面折射 SG 17

今天回看昨天做的折射的效果,發現我想的太狹隘了,我完全是按球體的光學原理來實現,所以用其他形狀的透鏡時,效果就是錯誤的。想了想,不規則透鏡的折射效果更多的是一種模擬。不過,我還是想嘗試實現波紋水面的折射效果,因為只用考慮乙個面,所以光學模型還是比較容易構建的。將上圖中的光線原理轉換為幾何問題 已知向...

Shader 各種Shader效果的合集

1.the fresnel effect 參考 實用的shader shader heroshader character a通道標記陣營區域,1 表示有陣營顏色區域,0 表示非陣營顏色區域 emission emission range 0,1 0 自發光 shadowlevel shadow l...

SVG JS驅動的波浪動畫

先上效果圖 這只是svg js驅動的動畫的驚鴻一瞥,這裡用到的技術,只是其皮毛。三次以上的貝塞爾曲線,更加複雜的函式控制svg路徑 路總要一步一步走,先總結一下當前實現的效果吧!功能 隨意指定高度和寬度 在svg path的d屬性中填寫相關引數 波浪的高度會在高度和 高度之間來會變動,時間控制使用了...