WebGL 技术允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 元素提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。今天,本文向大家展示8个惊艳的 WebGL 应用实验。

您可能感兴趣的相关文章

1.  Pearl Boy

如果你需要片刻来放松心情,那么来试玩一下 Pearl Boy 吧。这个精美的演示操作很简单,控制船上小男孩在美丽的海上夕阳的背景下划船前进或者潜入水底,探寻神秘的海底世界。

 

2.  Pitts Demo

Pitts demo 是另一个精彩的 3D 飞行游戏,像其它我已经展示的游戏演示一样,这个游戏的物理引擎也是让人难以置信的。你可以滚动,减慢,加速!

3. Chrome World Maze

《Chrome 世界迷宫》是 Chrome 最前沿的实验项目之一。玩转世界迷宫的时候,用你的桌面设备作为显示屏和手机(安装了 Chrome 浏览器)作为控制器。你可以使用任何网站作为迷宫,赶紧体验一下吧!

4.  Optic Flow

《光流》演示使用的设备的摄像头来检测移动,并再运动路径周围发散一系列的光点。运动越多,动画圆点越多。终极玩法,在摄像头前面的摇摆运动,以获得最佳体验。

5.  Roll It

这是一款经典的滚雪球游戏,和《Chrome 迷宫》游戏一样,也是桌面屏幕作为显示器,移动设备作为控制器。摆动手动的移动设备,板上的球就能滚动了,赶紧试一下!

6.  Ironbane MMO

Ironbane 是一个 3D 平台游戏,在你移动的的时候回自动切换的角度。不可思议的平滑动画和响应能力,Ironbane 是 HTML5 游戏经典案例之一。

7.  Cube Slam

有人想尝试和一只孤独的熊玩挡板打砖块游戏吗?Cube slam 给你这个机会,当然也可以和朋友玩,只要发给他们一个用于同步的链接就可以了。

 

8.  WebCam Mesh

这个令人惊叹的演示也是应用了摄像头,创建动态,充满质感的脉动形态的用户图像,多么令人难以置信的流畅和迷人的杰作。

9.  Pixelate

像素化是另一种基于摄像头的演示,跟踪用户的动作,并以绿色的像素点显示对象的轮廓。此演示甚至能模仿声音(在Mac上,尝试增加和减少音量可以实现)。

  WebGL 还可以用于更强大的图形创作和动画。上述几个演示项目都是令人印象深刻的游戏,代表着 HTML5 游戏的未来!

您可能感兴趣的相关文章

英文来源:未来的Web:九个让人兴奋的 WebGL 应用演示

文章来源:梦想天空 ◆ 关注Web前端开发技术 ◆ 分享网页设计资源

未来的 Web:九个不可思议的 WebGL 应用试验的更多相关文章

  1. 20个不可思议的 WebGL 示例和演示

    WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲 ...

  2. Java Web(九) 用户管理系统

    前面学习了一大堆,什么JSP,Servlet.jstl.el等等等,大多是一些死的东西,只要会其语法,知道怎么用就行了,所以做了一个小小的只有增删改查的小demo,为的就是熟悉这些知识.灵活运用起来. ...

  3. Java Web(九) JDBC及数据库连接池及DBCP,c3p0,dbutils的使用

    DBCP.C3P0.DBUtils的jar包和配置文件(百度云盘):点我下载 JDBC JDBC(Java 数据库连接,Java Database Connectify)是标准的Java访问数据库的A ...

  4. 惊艳!9个不可思议的 HTML5 Canvas 应用试验

    HTML5 <canvas> 元素给网页中的视觉展示带来了革命性的变化.Canvas 能够实现各种让人惊叹的视觉效果和高效的动画,在这以前是需要 Flash 支持或者 JavaScript ...

  5. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  6. 小伙伴们惊呆了!10行 JavaScript 实现文本编辑器

    最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表,对齐等等. 您可能感兴趣的相关文章 分 ...

  7. JavaScript 实现文本编辑器

    JavaScript 实现文本编辑器 最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...

  8. localForage——轻松实现 Web 离线存储

    Web 应用程序有离线功能,如保存大量数据集和二进制文件.你甚至可以做缓存 MP3 文件这样的事情.浏览器技术可以保存离线数据和大量的储存.但问题是,如何选择合适技术,如何方便灵活的实现. 如果你需要 ...

  9. 使用 Promises 编写更优雅的 JavaScript 代码

    你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...

随机推荐

  1. ASP.NET MVC删除数据

    Index.cshtml @model IEnumerable<MvcExample.Models.Category> <script type="text/javascr ...

  2. PHP扩展开发入门

    原文:http://www.orlion.ga/1090/ 写一个最简单的将字符串全部变成大写的函数: <?php function my_toupper($str) { return strt ...

  3. Oracle Dataguard之物理standby的基本配置

    尽管网上有很多Oracle Dataguard的配置教程,但不难发现,很多采用的是rman duplicate这种方法,尽管此种方法较为简便.但在某种程度上,却也误导了初学者,虽说也能配置成功,但只知 ...

  4. JavaScript垃圾回收(二)——垃圾回收算法

    一.引用计数(Reference Counting)算法 Internet Explorer 8以下的DOM和BOM使用COM组件所以是引用计数来为DOM对象处理内存,引用计数的含义是跟踪记录每个值被 ...

  5. Spring应用教程-3 依赖关系配置

    注:组件与组件之间的耦合,采用依赖注入管理,但普通的JavaBean属性值,应直接在代码中设置. 1. 注入其他Bean的属性值 我们分析一下,Bean_A的一个属性要依赖Bean_B的一个属性值.这 ...

  6. 测试servlet学习笔记

    操作方法: 1.新建工程: File——>new——>Java Project——>TestServlet(工程名称)——>Finish. 2.加载servlet-api.ja ...

  7. G++ 参数介绍(转载)

    g++参数介绍 From: http://www.cnblogs.com/lidan/archive/2011/05/25/2239517.html gcc and g++分别是gnu的c & ...

  8. Elasticsearch使用REST API实现全文检索

    通过rest api添加检索数据,阅读官方文档可以发现,elasticsearch支持动态映射,但是其中有不少问题,且听慢慢详解. 本文主要讲述三点内容: 1 Elasticsearch常用的rest ...

  9. MVC 分页

    后台代码: using Webdiyer.WebControls.Mvc; ) { int pageIndex = id; int count; ; List<News> newsList ...

  10. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值。 sql server 临时表

    当 IDENTITY_INSERT 设置为 OFF 时,不能向表 '#TT' 中的标识列插入显式值.我是在SqlServer写存储过程中遇到的这个错误,当时就心想:临时表怎么会有主键呢,我也没有设置主 ...