最近在研究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. 游戏引擎网络开发者的64做与不做（二A）：协议与API

    [编者按]在这个系列之前的文章"游戏引擎网络开发者的64做与不做(一):客户端方面"中,Sergey介绍了游戏引擎添加网络支持时在客户端方面的注意点.本文,Sergey则将结合实战 ...

  2. 翻译 - 元编程动态方法之public_send

    李哲 - MAY 20, 2015 原文地址:Metaprogramming Dynamic Methods: Using Public_send 作者:Friends of The Web的开发者V ...

  3. IE6中常见兼容性问题及浏览器显示难题

    1.双倍边距Bug 问题描述:假如有一个ul,里面有若干li,当li设置为左浮动时,此时设置li的margin-left为10px,会在最左侧呈现双倍情况.即20px 正常显示: IE6显示: 修正方 ...

  4. ＳＱＬ技术内幕－5 比较特殊 insert into 数据的写法

    ---比较特殊,第一次看到这种写法,记录下来 create table Student --学生成绩表 ( id int, --主键 Grade int, --班级 Score int --分数 ) ...

  5. JavaWeb开发好资料

    以下来源:http://oss.org.cn/ossdocs/ Documents 操作系统: GNU, Linux, Linux核心, Linux Kernel API, Linux核心架构: a1 ...

  6. PYTHON发送邮件时，有的服务器不用密码认证的

    #!/usr/bin/python # coding: UTF-8 import smtplib from email.mime.text import MIMEText receivers_list ...

  7. WCF分布式开发步步为赢(7):WCF数据契约与序列化

    本节继续学习WCF分布式开发步步为赢(7):WCF数据契约与序列化.数据契约是WCF应用程序开发中一个重要的概念,毫无疑问实现客户端与服务端数据契约的传递中序列化是非常重要的步骤.那么序列化是什么?为 ...

  8. 重温《js权威指南》 第7，8章

    第七章 数组         数组是值的有序集合.js数组是无类型的,数组元素可以是任意类型,同一个数组中不同元素也可能有不同的类型.数组可以动态增长或缩减,创建时无须生命那个一个固定的大小并且数组大 ...

  9. ubuntu系统使用minicom终端操作说明

    http://blog.chinaunix.net/uid-22030783-id-3350834.html 在linux下,使用minicom作为串口终端工具,默认的串口设备是/dev/ttyS0, ...

  10. 添加dubbo xsd的支持

    使用dubbo时遇到问题: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document 'htt ...