zoukankan      html  css  js  c++  java
  • 一个基于WebGL的仿真3D水池有逼真的水波纹效果

    最近在研究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

    webgl-water

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

    查看示例

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

    下载地址

  • 相关阅读:
    NSBundle使用:获取文件路径
    安装git后遇到的问题及解决
    (转)iPhone 字体显示效果大全
    iPhone开发小技巧
    协议与委托简单实例讲解(转)
    Zoom Me FAQ
    Show Desktop Pro FAQ
    The Startup Manager FAQ
    Finder Quick Menu FAQ
    The App Locker FAQ
  • 原文地址:https://www.cnblogs.com/laosan/p/webgl-water.html
Copyright © 2011-2022 走看看