[WebGL入门]三,3D绘图的基础知识

翻译 2014年07月30日 06:43:34

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正。


二维和三维

三维空间--我们生活这个这个现实的世界就是一个三维空间。

在三维的世界里,所有的东西都由横,竖,深度。将这些东西重现,就是一个实时3D渲染。但是再现这个3D空间,我们是在一个2D的显示器上来实现的。

电脑和手机的屏幕,都是一个2D的显示器。至少现在还没有一个3D的显示设备,当然,研究所这些地方可能会有,但是一般的家庭肯定是没有的。

利用WebGL可以模拟三维空间,但是最终必须输出显示在一个二维的显示器上。由深度决定的前后关系,根据远近进行放大和缩小,这些都必须提前进行运算得出结果。

OpenGL也好,DirectX也好,这个从三维到二维的变换等基本的计算手法一般是不会变的。当然,WebGL也是一样的。



右手?左手?说一说坐标系

虽然说3D的计算基本上都是一致的,但是DirectXOpenGL之间还有点小差异。

说到DirectXOpenGL的区别,经常会拿坐标系来举例。就是使用左手坐标系还是右手坐标系。OpenGL使用的是右手坐标系。

下图是右手坐标系的图解。


下图是左手坐标系的图解。



比较的话,主要是Z坐标的方向不同。x坐标和y坐标的话,哪个坐标系都是一样的。

除去Z坐标的处理,哪个坐标系都是没有深度的概念的,所以没必要想的太复杂。WebGLOpenGL的一个分支,当然是使用右手坐标系了。


坐标变换

无论用DirectX还是OpenGL,最终都需要将三维的情报向二维进行变换。就像刚开始说的那样,最终的图像都是由二维显示器来显示的。

这时候,坐标变换就是必须的了。坐标变换大致可以分为三种,将这些正确的组合在一起,最终决定显示器上的位置。

用身边的东西举例说明的话,三维向二维转换的例子就是照相机。照片和图像,通过照相机已经全部变为了二维,最终,输出成了照片和动画。

脑子里想象一下使用照相机照相的一幕,来试着理解一下坐标变换吧。


模型变换

三种坐标变换中的第一个,是模型变换。在OpenGL的处理中虽然一般叫做模型变换,但是在DirectX中被叫做世界变换。

模型变换,是指为了定义参照物在三维空间的什么位置而进行的坐标变换。和现实的世界不同,程序中的三维空间里定义了世界的中心的基准点,就是原点。从这个原点出发,为了知道参照物的相对位置,就需要进行必要的坐标变换。

假设,虚拟的三维空间里有一个苹果,那么为了表示这个苹果在什么位置,就需要进行相应的模型变换了。


视图变换

三种坐标变换的第二个,是视图变换。

视图变换,定义了镜头的实际位置以及镜头的方向。拿刚刚举例的苹果来说,即使三维空间中有一个苹果,如果镜头的方向不对着苹果的话,同样也是看不到这个苹果的。而且,如果将镜头大幅度远离苹果,那么也有可能看不到苹果了。

为了决定镜头的位置和角度所进行的坐标变换就叫做视图变换。


投影变换

三种坐标变换中的最后一个,是投影变换。

这个变换,定义了三维空间的摄影区域。比如,是横向摄影,还是纵向摄影,最远拍摄多远距离等。

一般的照相机,直接拍摄镜头前的所有图像,最远拍摄多远也基本上没什么意识。但是,程序是无法模拟无限大的空间的,所以,从哪里开始拍摄,拍摄到哪里,必须有一个明确的范围。

投影变幻,通过远近法则,可以将近处的物体描画的比较大,远处的物体描画的比较小。


总结

内容有点长了,来总结一下吧。

使用程序来模拟三维空间的时候,最终的情报必须变换成二维数据。而且三维坐标,根据平台不同,Z轴的处理是不一样的。WebGLOpenGL的处理系,使用的是右手坐标系。

为了模拟三维空间,将三维空间的情报向二维的情报进行转换,需要三个坐标变换。分别是模型变换,视图变换和投影变换,将这些变换进行组合,最终决定描画的图形内容。

为了使用WebGL进行开发,本次所介绍的坐标系和坐标变换的知识是必不可少的。细节先不说,如果大致的意思都不了解的话,后面实际处理的时候肯定会有疑惑的。最低限度,三个坐标变换的意思一定要记住。

下一次,看一下为了使用WebGL都需要做哪些准备。


转载请注明:转自lufy_legend的博客http://blog.csdn.net/lufy_legend


7 款基于 HTML5 Canvas 的超炫 3D 动画效果

在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了。遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari...

WebGL学习系列-基础矩阵变换

在图形学中,特别是涉及到3D的时候,矩阵变换起着非常重要的作用。在实际使用的过程当中,通常每一帧画面可能都会涉及到成千上万个顶点的坐标变换,如果没有矩阵变换计算,一个是计算复杂,一个是难以达到我们想要...

[WebGL入门]二,开始WebGL之前,先了解一下canvas

HTML5和canvas标签,canvas标签的基础知识,WebGL和canvas,总结

[WebGL入门]五,矩阵的基础知识

这次,不是让你完全理解矩阵,就是先介绍一下,如果要阵的讲解矩阵的话,你必须一个脚踩进数学世界的大门才行。 进行3D渲染,矩阵是不可缺少的,而且要彻底理解矩阵是非常难的。所以现在先明白一下矩阵到底是个什...

OpenGl入门基础知识-叩开3D的心扉

OpenGl入门基础知识-叩开3D的心扉

3D 和 WebGL 入门基础 1

因为[哔---], 所以[哔---], 后来[哔---], 因此就有了这一系列文章. 我自己也是不久前才正式接触3D相关的内容, 如有错误, 可以留评论, 我会更正. 全文不是课本, 所以只会提到最重...

3d gpu渲染基础知识

  • 2014年08月25日 20:50
  • 4.74MB
  • 下载

ArcGIS教程:3D表面的基础知识

  • 2014年09月19日 11:32
  • 230KB
  • 下载

【西川善司的3D图形技术连载】GPU和Shader技术的基础知识(1~8回)

本连载的主要目的,是介绍最新的PC和GAME所使用的最新3D图形技术的发展趋势。 暂时的方针是,首先是考虑介绍比较新的PC Game和PS3,XBOX360等新时代游戏机的游戏所采用的技术。 ...

DirectX3D基础知识

  • 2008年09月11日 20:19
  • 4.8MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[WebGL入门]三,3D绘图的基础知识
举报原因:
原因补充:

(最多只允许输入30个字)