html5最重要和最吸引眼球的一个技术，就是html5的3d技术了 ，这个技术能够绘制3d的网页效果，让以后的网页更加生动和有趣。html5的3d效果需要配合很多插件来实现甚至包括硬件上的支持 ，但是有一点值得了解 ，就是html5+webgl可以实现无插件的3d网页效果 ，而webgl是什么呢？ webgl是目前热门的javascript的3d实现类库。

HTML5标准将内建3D技术的支持，其中WebGL就是一项用于加速网页3D图形界面应用的通用技术标准。近日，Khronos联盟组织发布 了WebGL标准的草案版本。标准的草案版本中使用了HTML5的有关技术来绘制OpenGL ES 2.0图像，这样便无需使用插件便可以达到将网页3D化的目的。

WebGL标准不仅可以简化开启显卡3D网页硬加速功能的操作步骤，蓝狮注册登陆而且还规定了一套适合网页使用的3D图形接口界面，支持脚本化运行，而且还设计了显卡性能测试工具等调试类功能。

　　HTML5中的WebGL示例

　　网页3D应用示例

　　对于那些已经能够支持HTML5技术的浏览器如苹果Safari4，谷歌Chrome3，Mozilla Firfox3.5，Opera10而言，理论上讲应用WebGL标准的难度并不大，不过仍然可能需要发布专门的pre-release版本才可以完美支 持WebGL标准。同时，尽管目前基于Android2.0或iPhone Safari的系统仍然无法支持WebGL，但随着移动OpenGL标准在移动浏览器应用中的日渐普及，WebGL标准也将被支持HTML5标准，并采用 OpenGL ES渲染页面的浏览器所逐步广泛采用。

不过目前由AMD,苹果，谷歌，Mozilla以及Nvidia等公司组成的标准小组仍在继续WebGL的代码平台部分的标准编写工作，据Khronos联盟组织估计，明年上半年，支持WebGL的有关产品便会面市。

HTML5及Flash3D炫目效果

首先说明一下推荐的运行环境，Flash需要FP10以上版本的支持，支持HTML5的浏览器为IE9+、Firefox3+、Chrome6+、 Opera10+、Safari5+，闭门造车几年了，看来我已经被这个日新月异的时代远远的抛在了背后，悲哀啊，今天看了太多暂时无法接受的新技术，蓝狮注册开户先 留下来，留给以后慢慢的消化吧。

顶礼膜拜中…

Flash3D：

Alternativa3D（免费不开源）

这里有个3D坦克大战，就是用它做的，建议大家进去感受一下（我也免费给他们做回水手吧）：

妈的百度编辑器没有HTML模式，大家就撮合着看上面的这个吧。

http://v.youku.com/v_show/id_XMjE4MzM0NTUy.html

http://v.youku.com/v_show/id_XMjE4MzM1NjQw.html

http://v.youku.com/v_show/id_XMjE4MzM3MzA0.html

Electric Oyster公司的Flash based Electric 3D engine（商业）

飞越南极 http://www.electricoyster.com/index.html
日本flash界二号人物roxik的Sharikura 3D
http://roxik.com/
（AS3.0 performance demo）http://temp.roxik.com/datas/perform/index.html
骨骼动画（http://temp.roxik.com/datas/bone/index.html）
物理模拟（http://temp.roxik.com/datas/physics/index.html）
柔体模拟（http://temp.roxik.com/datas/cloth/index.html）
日本motion portrait公司的flash实时三维脸部动画（商业）
http://motionportrait.com/about/
真人演示1：http://motionportrait.com/about/demo_face_01.html
真人演示2：http://motionportrait.com/about/demo_face_02.html
动漫人物演示1：http://motionportrait.com/about/frndA250TS/frndA250TS.html
动漫人物演示2：http://motionportrait.com/about/demo_others_05.html
更多演示在http://motionportrait.com/about/（点击网页上图片查看）
基于真实三维运算的SWFZ(已开源)
http://www.custommedia.co.nz/
超强的演示http://www.swfzlab.com/swfz/demo2/
地形（http://www.swfzlab.com/swfz/terrain/）
FPS引擎（http://www.swfzlab.com/swfz/crossfire/）

HTML5：

HTML5和Javascript非常强大，它们可以增强互联网的互动性，并且让互联网趋向标准化。虽然Javascript在Chrome和Firefox上的运行速度越来越快，但是要赶上Flash还有很长一段路要走。下面是几个现在互联网上比较高级的HTML5例子。
(点击图片进入)

这是Satoshi Ueyama 的三个作品，展示了3D物品和和对2D画布进行贴图，效果另人惊叹。注意这个例子要求你的浏览器有一个运行速度较快的Javascript引擎，我推荐Google Chrome。(P2H.cn配图)

使用HTML5完成的游戏 (P2H.cn配图)

Kevin Roast的Javascript 3D引擎 (P2H.cn配图)

使用HTML5和Javascript完成的动画 (P2H.cn配图)

HTML5+Javascript完成的画板 (P2H.cn配图)

HTML+Javascript任天堂模拟器 (P2H.cn配图)

这是一个开源的策略游戏，你可以在线与其他玩家一起玩，也可以进行单机游戏 (P2H.cn配图)

html5+webgl构建3d效果

今年下半年， HTML5 和 WebGL 变成极热门词语，3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D 网页技术方案的发展，各种实验性项目层出不穷。这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D物体形象的展示。

何谓 WebGL ?

WebGL 是网页开发语言 JAVA Script 形式的绘图 API 接口，提供设备硬件图形能力的直接调用。HTML5 则是网页开发语言新标准，提供了网页上的 Canvas “画布”供网页上的 3D 对象展现。

简单的说，在此之前，3D 物体形象在网页上不能直接展示，必须使用非标准的特殊网页语言语法或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案，使程序员可以直接在网页上展示物体的 3D 形象，并且这种展现直接使用设备的图形处理器的处理能力，其绘图性能能够得到保证。3D网页技术应用很广，体验 3D 网页也非常简单，我们只需要桌面电脑支持现代的图形显示设备，同时，必须安装足够高版本的新型浏览器，诸如 firefox 和 Chrome 即可。

3D 网页游戏

先说说 3D 网页游戏，在这场技术浪潮中，先知先觉的游戏厂商真正积极研发 WebGL 游戏引擎，为 3D网页游戏潮流的到来提前进行技术储备。Mozilla 社区的 Paladin 项目组正在开发名为“Gladius”WebGL 3D 游戏引擎，CopperLicht 则是一个快速 JAVAScript 的 WebGL 游戏引擎，在其网站上提供了一批 WebGL 游戏场景范例，其中不少的3D 场景甚至可以媲美传统的 PC 桌面游戏。它们的效果可以在 ResureFox 和 ambiera 网站看到。

3D 地图

而 3D 地图是另外一个关键应用。和目前的枯燥平面地图相比，3D 地图可以以旋转的视角查看街景、建筑物的立体形状，用户有身临其境的感觉，体验非华丽、无以形容。在 MapsGL 项目中，3D 地图的先行者 Google 正利用 WebGL 技术提供 3D 街景地图。按照 Google 的说法，他们在“重新打造了Google 地图……提供更强大的性能、更丰富的 3D 图形、更流畅的图像过渡效果和 45° 视图旋转效果，以及能更方便地访问街景视图。”

要查看其效果，你可以直接访问 Google Maps 网页，并选择打开 MapsGL 功能。当地图的比例放大到一个街道路口大小的时候，平面的地图就会展示成 3D 的街景。下面是使用 MapsGL 功能访问美国曼哈顿周围的地图看到景观截图，转动图上的罗盘或者移动鼠标，查看的视角随之转动，其效果仿佛本人在曼哈顿的街道上闲逛。

可以想象，当每个城市都完成了 3D 的建模，并通过网页提供服务，3D 地图之上能够叠加各种有趣的服务，例如：3D 寻路导航，虚拟旅游，美食查找、网络社交、网络游戏等等。这些应用有目前的 2D的版本，安装插件可以实现不怎么流畅的 3D 效果，但在未来的 3D 网页中，逼真的 3D 城市街景呈现了流畅的视角转换后，它将带来迥异的用户体验。