html5的3d知识大全

【P2H.cn观点】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的矩阵。

image

 

 

二.投影矩阵

我们先来揭开投影矩阵的神秘面纱。

projectionmatrix

矩阵中各个变量值的意义如下图所示:

img1

然后我从Three.js上拔下一段代码:

01 THREE.Matrix4.makeFrustum = function ( left, right, bottom, top, near, far ) {
02
03     var m, x, y, a, b, c, d;
04
05     m = new THREE.Matrix4();
06
07     x = 2 * near / ( right - left );
08     y = 2 * near / ( top - bottom );
09
10     a = ( right + left ) / ( right - left );
11     b = ( top + bottom ) / ( top - bottom );
12     c = - ( far + near ) / ( far - near );
13     d = - 2 * far * near / ( far - near );
14
15     m.n11 = x;  m.n12 = 0;  m.n13 = a;   m.n14 = 0;
16     m.n21 = 0;  m.n22 = y;  m.n23 = b;   m.n24 = 0;
17     m.n31 = 0;  m.n32 = 0;  m.n33 = c;   m.n34 = d;
18     m.n41 = 0;  m.n42 = 0;  m.n43 = - 1; m.n44 = 0;
19
20     return m;
21
22 };

没错,它就是投影变换矩阵。为了能够看得懂这个矩阵,那么就要从头说起·········

 

 

三.什么是矩阵

数学上,一个m×n矩阵乃一mn列的矩形阵列。矩阵由数组成,或更一般的,由某环中元素组成。

矩阵常见于线性代数、线性规划、统计分析,以及组合数学等。请参考矩阵理论。

以下是一个4 × 3矩阵:

359422fc4179dde36ca6921f4cd17302

某矩阵A的第i 行第j 列,或i,j位,通常记为A[i,j] 或Ai,j。在上述例子中A[2,3]=7。

此外A = (aij),意为A[i,j] = aij对于所有ij,常见于数学著作中。

 

 

四.向量和矩阵的乘积

为了搞明白向量和矩阵的运算,首先来看单位向量和矩阵的乘积,我们拿行式(也可以用列式)为例。

我们假设三维的单位坐标向量分别为i=(1,0,0),j=(0,1,0),k=(0,0,1),

我们取x坐标轴上的单位向量i与image相乘。乘积如下:

image

 

我们取x坐标轴上的单位向量j与image相乘。乘积如下:

image

我们取x坐标轴上的单位向量k与image相乘。乘积如下:

image

 

所以如果我们用向量(1,1,1)与A相乘,最后得到的坐标就是(a1+b1+c1, a2+b2+c2, a3+b3+c3)。

 

 

 

五.基本初等矩阵的几何意义

要想理解矩阵的意义,就要从它的几何意义开始体会,基本初等矩阵有下面三种几何意义:

(1)关于某一“标准轴(面)”的镜面反射(对称)变换

img7

 

 

(2)在某一坐标轴方向的伸缩变换(当某一坐标缩小为0时,即投影变换)

img6

 

(3)在某一坐标轴方向的切变变换

img3img4img5

 

 

 

 

六.神马是齐次坐标,为什么要用它?

“齐次坐标表示是计算机图形学的重要手段之一,它既能够用来明确区分向量和点,同时也更易用于进行仿射(线性)几何变换。”—— F.S. Hill, JR

用于表示n维透视空间的点的n+1维分量。透视空间的点可以被认为是欧几里德空间加上一些无穷远处的点。由于每个坐标分量乘以一个非零值并不改变这些坐标所表示的点,

这样的坐标是齐次坐标。齐次坐标主要应用在透视几何计算,因此在场景必须投影到一个窗口上的计算机图形学中也十分有用。

为了能用矩阵的形式统一描述图形变换,在计算机图形学中常采用齐次坐标的形式来描述空间的点。

在n维空间中的一个问题,在n+1维空间中相应地也有一个问题,而在n+1维空间中却常常比n维空间中较易获得结果。

二维点(x,y)的齐次表示是(hx,hy,h),这里h是任何一个非零因子,有时叫做比例因子。

齐次点(a,b,c)被投射回复到二维时简单地就是(a/c,b/c),由比例因子c去除。

在计算机中处理一个三维空间的“无穷远点”是困难的,但是可以容易地处理一个四维齐次空间的解析点,

例如可以用向量:

    (1 0 0 0) 表示x轴方向无穷远点

 

    (0 1 0 0) 表示y轴方向无穷远点

 

    (0 0 1 0) 表示z轴方向无穷远点

 

    (0 0 0 1) 表示坐标原点

 

     这4个向量将构成四维齐次空间的单位矩阵

 

那么,我们为什么要使用齐次坐标呢?

对于一个普通坐标的点P=(Px, Py, Pz),有对应的一族齐次坐标(wPx, wPy, wPz, w),其中w不等于零。

比如,P(1, 4, 7)的齐次坐标有(1, 4, 7, 1)、(2, 8, 14, 2)、(-0.1, -0.4, -0.7, -0.1)等等。

因此,如果把一个点从普通坐标变成齐次坐标,给x,y,z乘上同一个非零数w,然后增加第4个分量w;如果把一个齐次坐标转换成普通坐标,把前三个坐标同时除以第4个坐标,然后去掉第4个分量。由于齐次坐标使用了4个分量来表达3D概念,使得平移变换可以使用矩阵进行,从而如F.S. Hill, JR所说,仿射(线性)变换的进行更加方便。由于图形硬件已经普遍地支持齐次坐标与矩阵乘法,因此更加促进了齐次坐标使用,使得它似乎成为图形学中的一个标准。

 

当显示器或者照相机拿到这个坐标信息去渲染(渲染的算法先不考虑)的时候,无法得知深度信息,

即z的大小,就得不出非常有层次感立体感的图片。

所以我们利用齐次坐标技术来描述空间各点的坐标,用4*4的矩阵来解决空间各点的变换。

总结:齐次坐标在投影矩阵中的作用就是对x,y进行缩放,达到透视变换的作用,使得相同的x,y,因为z的不同,投影出的坐标也不同。

 

 

 

七.摄像机的视野

这是我们上次漏掉的一个重要概念,属于摄像机的一个重要属性。

我们都有这样的经验,当我们正前方看过去的时候,处于我们视野外的东西是看不到的,或者模糊的。所以在3D编程当中,我们要规定

摄像机的视野。如果您玩过《反恐精英》这款游戏的画,你肯定见过下面这张图

img8

持枪者,有着自己的视野,太靠右边或者太靠着左边都看不到,后面就更不用说了。如果我们要把枪口指向右边,我们就可以

旋转世界(或者旋转摄像机)。我们可以根据x,y坐标进行裁剪,裁剪出我们视野中的图像。

 

 

 

 

 

 

 

 

 

八.透视变换

讲透视变换之前,先看一看投影的分类,如下图:

img2

我们所看到的有立体层次感的图片就是透视投影的结果。

空间里的坐标,经过透视变换,x,y也会进行一定比例的变化。这也是为什么Y坐标相等的两个点,为什么Z越大,透视投影之后Y越小的原因。

由于,投影的时候,Z的坐标为0,只取X,Y进行渲染。然后透视变换是3D转2D的必经流水线。而该流水线,就是要取得Z的坐标,对图形就行渲染。

而这个渲染的过程是在CVV当中进行,也就是一个正方体。在该正方体当中,Z已经不再是Z,但也没有完全抹去,它也随着摄像机与屏幕与被观察物体三者的距离的变化而进行着相应的变化。

投影变换就做一件事:将锥形的观察空间转化为单位立方体空间。

下面两张图分别代表了透视投影和平行投影:

透视投影:

image

平行投影:

image

拿上篇文章的演示作为透视例子,如下图:

image

这就是透视变换,这也更加说明了齐次坐标在透视投影中的作用。如果是平行投影,我们看到的就只是一个正方行:

image

 

 

 

 

九.投影规范化

投影规范化的目的:

1.不想为每种类型的投影设计不同的投影矩阵,所以把所有的投影转化为具有默认视景的正交投影;

2.这种策略可以使我们在流水线中应用标准变换,并进行有效的裁剪。

投影规范化过程:

1.把对象进行变形,使得变形后的对象经过正交投影后得到与原对象的理想投影一样的视图;

2.规范化矩阵就是正交投影矩阵乘上对象变形矩阵。

流水线如下图:

image

 

 

OpenGL、微软的Direct3D都要经过规范化的投影流水线,而他们之间的区别在于视景立方体的大小,

OpenGL的视景体是边长为2的正方体,Direct3D的视景体一个是长宽高分别为2,2,1的长方体。

如下图OpenGL透视投影变换过程:

image

被观察体上的点和屏幕上的点分别被映射到立方体的前后两个面,即z=1和z=-1两个面上,如下图

image

看完一上就节,然后就可以看这篇文章了,我相信只要充分理解上面。看懂这篇应该没有问题

深入理解透视变换http://blog.csdn.net/popy007/article/details/1797121

 

 

十.投影逆变换

投影逆变化的实际应用中的意义:

我们思考这样一个问题,先看下面这张图:

image

当我们点击最上面这个蓝色的立方体的时候,我们可能也点击到了下面那个,因为因为他们投影重叠了。

那么计算机是怎么知道我们点击的是上面这个还是下面这个呢?这个大家先思考,已经超过本节范围,下次详细分解。

 

 

十一.在线演示

a.旋转矩阵变换

01 function transform() {
02             angle = degToRad(currentAngle4)
03             init4();
04             m4.n11 = Math.cos(angle);
05             m4.n13 = -Math.sin(angle);
06             m4.n31 = Math.sin(angle);
07             m4.n33 = Math.cos(angle);
08             for (var i = 0; i < Points4.length; i++) {
09            Points4[i]=  m4.multiplyVector4(Points4[i]);
10        }

 

 

b.移动矩阵变换

1 function transform() {
2             angle = degToRad(currentAngle4)
3             init4();
4             m4.n41++;
5             m4.n42++;
6             m4.n43++;
7             for (var i = 0; i < Points4.length; i++) {
8            Points4[i]=  m4.multiplyVector4(Points4[i]);
9        }

 

 

c.切变

1 function transform() {
2          angle = degToRad(currentAngle4)
3          init4();
4          m4.n21+=0.01;        
5          for (var i = 0; i < Points4.length; i++) {
6         Points4[i]=  m4.multiplyVector4(Points4[i]);
7     }

 

 

d.比例变换

1 function transform() {
2         angle = degToRad(currentAngle4)
3         init4();
4         m4.n11 += 0.01;
5         m4.n22 += 0.01;
6         m4.n33 += 0.01;      
7         for (var i = 0; i < Points4.length; i++) {
8        Points4[i]=  m4.multiplyVector4(Points4[i]);
9    }

html5的3d的发展前景

美国《华尔街日报》网站今日发文称,Google正在在线软件领域发起一场豪赌。Google相信,未来的应用软件应该迁移到浏览器的网页上,为此Google正在推进HTML5网页3D等技术,并且鼓励其他公司加入这一潮流。Google正积极推广包括Docs在内的在线软件,Google认为,这将是其继核心的网络搜索和广告业务之后的下一个重大业务。

网络浏览器最初只是用来浏览静态文字或者图片,在Flash等技术的帮助下,通过网页播放视频和动画的能力大大加强。不过,浏览器还无法实现传统桌面软件的一些常用功能,比如使用键盘快捷键,粘帖文字,或是利用3D玩游戏。

软件开发工具提供商280North公司的首席执行官弗兰西斯克·托马斯基表示:“在网页和网络应用之间,仍有较大的区别。”

Google正在通过HTML5缩小上述差距。这一技术推出已有数年时间,还有来自Google的成果,它帮助开发人员推出更多更先进的功能。

一些软件开发商和浏览器厂商已经集成了HTML5的部分要素,比如更快速的视频流媒体传输,以及由浏览器保存更多数据,以加速网页访问。这些功能都无需用户安装另外的插件。

五月份,Google高层在一次面向软件开发人员的大会上发表了围绕HTML5的演讲,Google演示了一些先进功能,比如网民用鼠标在网页上画图。

Google负责技术的副总裁Vic Gundotra周一在接受采访时表示,Google影响并参与了HTML技术标准。他说:“我们很关注确保WEB技术不断前进。”Google目前还在 推动在HTML中增加新功能,比如将文件拖曳到浏览器网页中,支持3D图形。最近,Google推出了一个工具,允许在浏览器中运行3D图形。

目前有几十家公司正在开发新技术,缩小桌面软件和在线软件的差距,这当中包括微软和一些新创公司。就在上周,微软发布了最新版的Silverlight,增强对视频流媒体的支持。Adobe公司也在推进Flash对3D的支持。

Google和其他HTML5的支持者认为,经过一段时间之后,随着浏览器变得更强大,各种插件将不再有必要。微软发言人表示,最新的IE浏览器开始支持HTML5的部分要素,另外微软也是HTML技术标准机构的成员之一。

HTML5已经开始影响一些开发人员。最近,网络聊天平台Meebo利用了HTML5中的一个名为PostMessage的功能,即使是在用户切换到其他网页上,聊天网页仍然可以接受和更新信息。

不过,Meebo的首席执行官塞斯·斯特博格表示,在线软件如果要和桌面软件一样强大,还需要开发大量新技术。比如,电脑启动时,无法自动运行在线软件,另外如果浏览器关闭,用户也无法获得通知。

280North公司的托马斯基表示,Google在帮助软件开发商迁移到网络上已经很有名,最近Google还和他们公司接触,鼓励其整合Google的3D软件。

托马斯基说:“Google正在拿出实际行动(推广在线软件),这很不错。”

W3C联盟推出的HTML 5将面向Web应用。HTML 5的本地存储功能Canvas和Web Workers可以使用户通过浏览器做更多工作,使Web应用运行得更快,可以为用户提高整体体验,模糊网络应用与桌面应用的界限。