本文主要介紹水波動(dòng)畫(huà)的gif制作(flas)，下面一起看看水波動(dòng)畫(huà)的gif制作(flas)相關(guān)資訊。
這是一個(gè)基于html5的3d水波動(dòng)畫(huà)效果。效果很逼真。我們可以按g和鍵讓石頭在水池里上下浮動(dòng)，按l，再加上燈光效果的鍵，這樣設(shè)計(jì)就相當(dāng)完美了。同時(shí)這個(gè)3d動(dòng)畫(huà)是基于webgl渲染技術(shù)的，可以了解一下webgl。在線預(yù)覽源代碼，下載html代碼，并將內(nèi)容復(fù)制到剪貼板。javascript代碼javascript代碼將內(nèi)容復(fù)制到剪貼板。函數(shù)water{ var =不同vec2坐標(biāo)的頂點(diǎn)著色器；空(主){ coordinate = gl _ vertex . xy * 0 . 50 . 5；gl_position = vec4(gl_vertex.xyz，1)；◎} ;；this . plane = gl . mesh . plane；如果(！gl . texture . canusefloatingpointtextures){放一個(gè)新的錯(cuò)誤(本演示需要oes_texture_float擴(kuò)展)；} var filter = gl . texture . can use floating pointlinearfilteringgl . linear:gl . nearest；this.texturea =新總帳。texture (256，256，{type: gl.float，filter:filtering })；this.textureb =新總帳。texture (256，256，{type: gl.float，filter:filtering })；this.dropshader = new(頂點(diǎn)著色器，gl。有色常數(shù)浮點(diǎn)pi = 3.19973統(tǒng)一為sampler2d紋理；均勻的vec2中心；統(tǒng)一浮動(dòng)半徑；均勻的浮動(dòng)強(qiáng)度；不同的vec2坐標(biāo)；空(主){獲取頂點(diǎn)信息vec4信息= texture2d(紋理坐標(biāo))；◎?qū)⑾吕?xiàng)添加到高度浮動(dòng)drop = max(0，1長(zhǎng)度(中心* 0.5 0.5坐標(biāo))/半徑)；減少= 0.5-cos(減少*)* 0.5；信息?！?gl_fragcolor =信息；} );this.updateshader = new(頂點(diǎn)著色器，gl。著色統(tǒng)一為sampler2d紋理；均勻vec2 delta不同的vec2坐標(biāo)；空(主){獲取頂點(diǎn)信息vec4信息= texture2d(紋理坐標(biāo))；◎平均鄰居身高vec2 dx = vec2(delta。x，0)；◎ vec2dy = vec2 (0，delta，y)；浮點(diǎn)平均值=( texture2d(紋理坐標(biāo)的dx)。r texture2d(紋理坐標(biāo)-鏑)。r texture2d(紋理坐標(biāo)r dx)。texture2d(紋理坐標(biāo)dy)。r * 0.25◎改變速度移動(dòng)到{平均值}信息=(平均值為r)* 2；◎稍微放慢速度，讓浪贏了 不會(huì)永遠(yuǎn)持續(xù)下去。信息:g = 0.995◎沿速度移動(dòng)頂點(diǎn)。信息?！?gl_fragcolor =信息；} );this.normalshader = new(頂點(diǎn)著色器，gl。著色統(tǒng)一為sampler2d紋理；均勻vec2 delta不同的vec2坐標(biāo)；空(主){獲取頂點(diǎn)信息vec4信息= texture2d(紋理坐標(biāo))；◎更新正常vec3 dx = vec3 (delta。x，texture2d(紋理，vec2(坐標(biāo)x delta。x，坐標(biāo)y))。r信息。r，0)；vec3dy = vec3 (0，texture2d(紋理，vec2(x，y坐標(biāo)，坐標(biāo)系delta。y)).r信息。r，delta，y)；info.ba =規(guī)格(cross (dy，dx))。xz；◎ gl_fragcolor =信息；} );this.sphereshader = new(頂點(diǎn)著色器，gl。著色統(tǒng)一為sampler2d紋理；統(tǒng)一vec3 oldcenter；統(tǒng)一vec3 newcenter；統(tǒng)一浮動(dòng)半徑；不同的vec2坐標(biāo)；◎浮動(dòng)volumeinsphere(vec3中心){vec3距離= vec3(坐標(biāo)x * 2-1，0，坐標(biāo)y * 2-1)中心；浮動(dòng)t =長(zhǎng)度(中心)/半徑；浮點(diǎn)(= t，1.5，6)；浮點(diǎn)ymin = min(0，居中。y dy)；floating ymax = min(max(0，居中。y dy)、ymin 2 * dy)；返回(ymax-ymin)* 0.1；；◎空(主){獲取頂點(diǎn)信息vec4信息= texture2d(紋理坐標(biāo))；◎在舊卷中添加信息。r = volumeinsphere(old center)；◎新增量*減去信息。r = volumeinsphere(new center)；◎ gl_fragcolor =信息；} );}水。prototype.adddrop = function (x，y，半徑，強(qiáng)度){ reactive this _ = thisthis . texture b . draw to(function{this _ texture a . bind；這_ .dropshader.uniforms({ center: {，}，radius: radius，strength: strength})。畫(huà)畫(huà)(這個(gè)_。平面)；});this.textureb.swapwith (this。texture a)；};water . prototype . move sphere = function(old center，newcenter，radius){ reactive this _ = this；this . texture b . draw to(function{this _ texture a . bind；這_ .sphere shader . uniforms({舊中心:舊中心，新中心:新中心，半徑:半徑})。畫(huà)畫(huà)(這個(gè)_。平面)；});this.textureb.swapwith (this。texture a)；};water . prototype . step simulation = function{ reactive this _ = this；this . texture b . draw to(function{this _ texture a . bind；這_ .update shader . uniforms({ delta:{ 1/this _)。texturea.width，1 / this_ .texturea高度}。})。畫(huà)畫(huà)(這個(gè)_。平面)；});this.textureb.swapwith (this。texture a)；};water . prototype . update normals = function{ reactive this _ = this；this . texture b . draw to(function{this _ texture a . bind；這_ .normal shader . uniforms({ delta:{ 1/this _)。texturea.width，1 / this_ .texturea高度}。})。畫(huà)畫(huà)(這個(gè)_。平面)；});this.textureb.swapwith (this。texture a)；};以上是本文的全部?jī)?nèi)容，希望能對(duì)大家有所幫助。救命。
了解更多水波動(dòng)畫(huà)的gif制作(flas)相關(guān)內(nèi)容請(qǐng)關(guān)注本站點(diǎn)。