多视角3D逼真HTML5水波动画


Posted in HTML / CSS onMarch 03, 2016

这是一款基于HTML5的3D水波动画特效,它的效果非常逼真,我们可以按“G”键来让水池中的石头上下浮动,按“L”键添加灯光效果,设计相当完美。同时说明一下,这款3D水波动画是基于WebGL渲染技术的,大家可以了解一下WebGL。

多视角3D逼真HTML5水波动画

在线预览 源码下载

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <img id="tiles" src="tiles.jpg">  
  2. <img id="xneg" src="xneg.jpg">  
  3. <img id="xpos" src="xpos.jpg">  
  4. <img id="ypos" src="ypos.jpg">  
  5. <img id="zneg" src="zneg.jpg">  
  6. <img id="zpos" src="zpos.jpg">  
  7.   

JavaScript代码

JavaScript Code复制内容到剪贴板
  1. function Water() {   
  2.   var vertexShader = '\  
  3.     varying vec2 coord;\  
  4.     void main() {\  
  5.       coord = gl_Vertex.xy * 0.5 + 0.5;\  
  6.       gl_Position = vec4(gl_Vertex.xyz, 1.0);\  
  7.     }\  
  8.   ';   
  9.   this.plane = GL.Mesh.plane();   
  10.   if (!GL.Texture.canUseFloatingPointTextures()) {   
  11.     throw new Error('This demo requires the OES_texture_float extension');   
  12.   }   
  13.   var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
  14.   this.textureA = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter });   
  15.   this.textureB = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter });   
  16.   this.dropShader = new GL.Shader(vertexShader, '\  
  17.     const float PI = 3.141592653589793;\  
  18.     uniform sampler2D texture;\  
  19.     uniform vec2 center;\  
  20.     uniform float radius;\  
  21.     uniform float strength;\  
  22.     varying vec2 coord;\  
  23.     void main() {\  
  24.       /* get vertex info */\  
  25.       vec4 info = texture2D(texture, coord);\  
  26.       \  
  27.       /* add the drop to the height */\  
  28.       float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\  
  29.       drop = 0.5 - cos(drop * PI) * 0.5;\  
  30.       info.r += drop * strength;\  
  31.       \  
  32.       gl_FragColor = info;\  
  33.     }\  
  34.   ');   
  35.   this.updateShader = new GL.Shader(vertexShader, '\  
  36.     uniform sampler2D texture;\  
  37.     uniform vec2 delta;\  
  38.     varying vec2 coord;\  
  39.     void main() {\  
  40.       /* get vertex info */\  
  41.       vec4 info = texture2D(texture, coord);\  
  42.       \  
  43.       /* calculate average neighbor height */\  
  44.       vec2 dx = vec2(delta.x, 0.0);\  
  45.       vec2 dy = vec2(0.0, delta.y);\  
  46.       float average = (\  
  47.         texture2D(texture, coord - dx).r +\  
  48.         texture2D(texture, coord - dy).r +\  
  49.         texture2D(texture, coord + dx).r +\  
  50.         texture2D(texture, coord + dy).r\  
  51.       ) * 0.25;\  
  52.       \  
  53.       /* change the velocity to move toward the average */\  
  54.       info.g += (average - info.r) * 2.0;\  
  55.       \  
  56.       /* attenuate the velocity a little so waves do not last forever */\  
  57.       info.g *= 0.995;\  
  58.       \  
  59.       /* move the vertex along the velocity */\  
  60.       info.r += info.g;\  
  61.       \  
  62.       gl_FragColor = info;\  
  63.     }\  
  64.   ');   
  65.   this.normalShader = new GL.Shader(vertexShader, '\  
  66.     uniform sampler2D texture;\  
  67.     uniform vec2 delta;\  
  68.     varying vec2 coord;\  
  69.     void main() {\  
  70.       /* get vertex info */\  
  71.       vec4 info = texture2D(texture, coord);\  
  72.       \  
  73.       /* update the normal */\  
  74.       vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);\  
  75.       vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);\  
  76.       info.ba = normalize(cross(dy, dx)).xz;\  
  77.       \  
  78.       gl_FragColor = info;\  
  79.     }\  
  80.   ');   
  81.   this.sphereShader = new GL.Shader(vertexShader, '\  
  82.     uniform sampler2D texture;\  
  83.     uniform vec3 oldCenter;\  
  84.     uniform vec3 newCenter;\  
  85.     uniform float radius;\  
  86.     varying vec2 coord;\  
  87.     \  
  88.     float volumeInSphere(vec3 center) {\  
  89.       vec3 toCenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - center;\  
  90.       float t = length(toCenter) / radius;\  
  91.       float dy = exp(-pow(t * 1.5, 6.0));\  
  92.       float ymin = min(0.0, center.y - dy);\  
  93.       float ymax = min(max(0.0, center.y + dy), ymin + 2.0 * dy);\  
  94.       return (ymax - ymin) * 0.1;\  
  95.     }\  
  96.     \  
  97.     void main() {\  
  98.       /* get vertex info */\  
  99.       vec4 info = texture2D(texture, coord);\  
  100.       \  
  101.       /* add the old volume */\  
  102.       info.r += volumeInSphere(oldCenter);\  
  103.       \  
  104.       /* subtract the new volume */\  
  105.       info.r -= volumeInSphere(newCenter);\  
  106.       \  
  107.       gl_FragColor = info;\  
  108.     }\  
  109.   ');   
  110. }   
  111.   
  112. Water.prototype.addDrop = function(x, y, radius, strength) {   
  113.   var this_ = this;   
  114.   this.textureB.drawTo(function() {   
  115.     this_.textureA.bind();   
  116.     this_.dropShader.uniforms({   
  117.       center: [x, y],   
  118.       radius: radius,   
  119.       strength: strength   
  120.     }).draw(this_.plane);   
  121.   });   
  122.   this.textureB.swapWith(this.textureA);   
  123. };   
  124.   
  125. Water.prototype.moveSphere = function(oldCenter, newCenter, radius) {   
  126.   var this_ = this;   
  127.   this.textureB.drawTo(function() {   
  128.     this_.textureA.bind();   
  129.     this_.sphereShader.uniforms({   
  130.       oldCenter: oldCenter,   
  131.       newCenter: newCenter,   
  132.       radius: radius   
  133.     }).draw(this_.plane);   
  134.   });   
  135.   this.textureB.swapWith(this.textureA);   
  136. };   
  137.   
  138. Water.prototype.stepSimulation = function() {   
  139.   var this_ = this;   
  140.   this.textureB.drawTo(function() {   
  141.     this_.textureA.bind();   
  142.     this_.updateShader.uniforms({   
  143.       delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
  144.     }).draw(this_.plane);   
  145.   });   
  146.   this.textureB.swapWith(this.textureA);   
  147. };   
  148.   
  149. Water.prototype.updateNormals = function() {   
  150.   var this_ = this;   
  151.   this.textureB.drawTo(function() {   
  152.     this_.textureA.bind();   
  153.     this_.normalShader.uniforms({   
  154.       delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
  155.     }).draw(this_.plane);   
  156.   });   
  157.   this.textureB.swapWith(this.textureA);   
  158. };   

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
Jul 02 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
HTML5的新特性(1)
Mar 03 #HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 #HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 #HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 #HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 #HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 #HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 #HTML / CSS
You might like
session 的生命周期是多长
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
PHP实现变色验证码实例
2014/01/06 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
使用python实现rsa算法代码
2016/02/17 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
使用Python封装excel操作指南
2021/01/29 Python
HTML5中外部浏览器唤起微信分享
2020/01/02 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
Shell编程面试题
2012/05/30 面试题
战略合作意向书范本
2014/04/01 职场文书
农行心得体会
2014/09/02 职场文书
公司租房协议书范本
2014/10/08 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技