最近在研究WebGL，看到国外很多高手做的很多超炫的3D效果，无比羡慕。忍不住把效果趴下来研究，下面介绍一个逼真的游泳池中浮动小球的效果。效果非常绚丽，功能强大。示例可切换观察水池的视角，不同视角考虑到了光线从不同角度折射和反射的影响，所以波纹效果极其逼真。

先介绍下WebGL

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

啰嗦这这么多先给张效果图

webgl-water

下面是整理好的一个示例，在chrome,firefox浏览器下查看，不支持IE和safari。chrome下效果最佳，另外对显卡和驱动也有要求。

查看示例

下面是示例的下载地址，不过由于WebGl不能跨域加载图片本地查看不到效果，上传到服务器中或者本地的本地搭建的服务器环境也可以。

下载地址

一个基于WebGL的仿真3D水池有逼真的水波纹效果的更多相关文章

  1. 2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效

     1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...

  2. 基于 webGL 的元素周期表 3D 交互展示

    前言 之前在网上看到别人写的有关元素周期表的文章,深深的勾起了一波回忆,记忆里初中时期背的“氢氦锂铍硼,碳氮氧氟氖,钠镁铝硅磷,硫氯氩钾钙”.“养(氧)龟(硅)铝铁盖(钙),哪(钠)家(钾)没(镁)青 ...

  3. 基于WebGL架构的3D可视化平台ThingJS-搭建设备管理系统

    国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑设备也是大量的.为了提高设 ...

  4. 基于WebGL架构的3D可视化平台—设备管理

    ---恢复内容开始--- 国内高层建筑不断兴建,它的特点是高度高.层数多.体量大.面积可达几万平方米到几十万平方米.这些建筑都是一个个庞然大物,高高的耸立在地面上,这是它的外观,而随之带来的内部的建筑 ...

  5. 基于WebGL架构的3D可视化平台—新风系统演示

    新风系统是根据在密闭的室内一侧用专用设备向室内送新风,再从另一侧由专用设备向室外排出,在室内会形成“新风流动场”,从而满足室内新风换气的需要.实施方案是:采用高风压.大流量风机.依靠机械强力由一侧向室 ...

  6. 基于WebGL架构的3D可视化平台—实现小车行走路线演示

    小车行走路线演示New VS Old 刚接触ThingJS的时候,写的一个小车开进小区的演示,今天又看了教程中有movePath这个方法就重新写了一遍,其中也遇到了一些问题,尤其突出的问题就是小车过弯 ...

  7. 手搓一个“七夕限定”，用3D Engine 5分钟实现烟花绽放效果

    七夕来咯!又到了给重要的人送惊喜的时刻. 今年,除了将心意融入花和礼物,作为程序员,用自己的代码本事手搓一个技术感十足"七夕限定"惊喜,我觉得,这是不亚于车马慢时代手写信的古典主义 ...

  8. WebGL——水波纹特效

    大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...

  9. 基于 HTML5 WebGL 与 WebVR 3D 虚实现实的可视化培训系统

    前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...

随机推荐

  1. 【一】php 操作符

    1.php单引号和双引号的区别 单引号和双引号都能表示字符串,但是单引号不能识别里面带有转义字符'/'和变量的字符串,所以需要""去表示这种字符串.或者使用<<< ...

  2. 常见的NoSql系统使用场景分析--转载

    •Cassandra •特性:分布式与复制的权衡\根据列和键范围进行查询\BigTable类似的功能:列,列族\写比读快很多 •最佳适用:写操作较多,读比较少的时候.如果你的系统都是基于Java的时候 ...

  3. hdu 4726 Kia's Calculation

    思路:刚开始想复杂了. 看解题报告后才知道这题挺简单的,看来还是要多训练啊!!! 单独处理首位的数字,不能为0.其他的就好处理了,从大到小依次找下去就可以了…… 代码如下: #include<i ...

  4. regexp_substr在oracle9i的替换方案

    regexp_substr()方法在oracle9i尚不存在,是从oracle10g开始新增,如下为替换解决方法. SELECT regexp_substr('|83~GT67XVFU0RCVIV|6 ...

  5. lintcode：数字组合III

    数字组合III 组给出两个整数n和k,返回从1......n中选出的k个数的组合. 您在真实的面试中是否遇到过这个题? Yes 样例 例如 n = 4 且 k = 2 返回的解为: [[2,4],[3 ...

  6. Centos下修改启动项和网络配置

    1.Centos默认是从图形界面启动,需要较多的资源,为了节省资源可以从命令行启动.修改方法如下: /etc/inittab文件,把 代码: id:5:initdefault:这一行,修改成 代码: ...

  7. 5、java反射基础

    Class对象: Class对象记录了所有与类相关的信息,当类加载器从文件系统中加载.class文件到JVM中的同时会为每一个类创建一个Class对象.通过Class对象可以获取到类的属性.方法.构造 ...

  8. 解决COS、FileUpload上传文件时中文文件名乱码问题

    方法: MultipartParser mp = new MultipartParser(request, 10*1024*1024); mp.setEncoding("GBK") ...

  9. HDU 4617 Weapon 三维计算几何

    题意:给你一些无限长的圆柱,知道圆柱轴心直线(根据他给的三个点确定的平面求法向量即可)与半径,判断是否有圆柱相交.如果没有,输出柱面最小距离. 一共只有30个圆柱,直接暴力一下就行. 判相交/相切:空 ...

  10. 【USACO】【Section1.1】Greedy Gift Givers

    小白题,也没啥好说的.关键我的算法感觉特别菜的一点是每次要遍历数组从人名找对应的编号,这个效率就很低了.看了ANALYZE里面也是这样的.不过它比我好的一点是我多余设置了initial_money变量 ...