html5新增了很多的效果，拥有很多的特性，其中最被看好的应该是html5的3d效果了，但是html5的3d效果你究竟懂得多少呢 ，下面P2H带您了解一下何为html5的3d效果，以及html5的3d效果的网页上的运用，以及html5的3d运用在以后的发展前景。

html5的3d效果知识普及

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

WebGL 和3D图形规范OpenGL、通用计算规范OpenCL一样来自Khronos Group，而且免费开放，预计2010年上半年完成并公开发布。Adobe Flash 10、微软Silverlight 3.0也都已经支持GPU加速，但它们都是私有的、不透明的。WebGL标准工作组的成员包括AMD，爱立信，谷歌，Mozilla，Nvidia以及 Opera等，这些成员会与Khronos公司通力合作，创建一种多平台环境可用的WebGL标准，预计WebGL标准会在2010年上半年首度公开发 布，该标准将完全免费对外提供。

WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

最新情况WebGL 标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中，这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景，未来有望推出3D网页游戏及复杂3D结构的网站 页面。

Google作为Khronos的成员之一正在帮助建立WebGL规格，蓝狮官网以提供在网页里通过Canvas元素进行硬件加速的3D渲染。今天WebGL规格的初期公开草案公布了，Mac/Windows/Linux（32与64位）平台的 Chromium（开源版的Chrome浏览器）均提供了对WebGL的支持，这是与Apple（我惊讶Google博客里居然还在称苹果是Apple Computer公司）和WebKit联合开发的成果。

你可以体验：

San Angeles：未来的城市风景（做的比较粗糙）
Shiny teapot：演示了3D图形与网页的混合呈现能力
Particle system：演示如何用GPU做动画
这里还有更多

WebGL wiki提供了更多标准的进化过程，包括草案规格，介绍文章，教程，邮件列表和论坛。

Google 希望WebGL的最终标准能尽快定型，这是Google将人们拽到纯浏览器世界里的重要一步。

小提示：要让Chromium支持WebGL，需要在启动参数里加入“ –enable-webgl”。

html5的3d效果编程教程

在3D编程的中，我们利用向量与矩阵的运算来简化空间坐标变换的计算，比如求出某立方体绕任意轴旋转后的坐标，再比如计算旋转+缩放+切变+投影后的坐标变换，如果抛弃矩阵，将陷入大量的复杂计算当中。利用齐次坐标技术来描述空间各点的坐标，用4*4的矩阵来解决空间各点的变换，已经成了计算机图形学的一个标准。比如主流的3D APIs如OpenGL、微软的Direct3D，还有javascript版的3D引擎Three.js,还有Glide、Heidi等等，

基于这些API之上的API有Java3D,XNA framework。我们在msdn官网的xna api上可以看到这张图，可以看到4*4的矩阵。