[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...
  • fengda2870
  • fengda2870
  • 2012年11月19日 13:21
  • 40664

android camera 3d特效 详解与进阶

1 概述本篇主要讲解camera,这里的camera并不是照相相关的类,而是android.graphics.Camera,这个类中封装了一个matrix,不熟悉的同学可以看前面的文章来了解。andr...
  • cquwentao
  • cquwentao
  • 2016年05月20日 16:55
  • 4339

HTML5 canvas中的3D地表

可能你已经注意到最近一段时间,我正接触除Flash之外的其他技术并乐此不疲。   只是为了好玩,我开始尝试使用HTML5绘图API开发简单的3D引擎。从html5 css3获得源码并...
  • u011162800
  • u011162800
  • 2014年02月28日 15:10
  • 398

THREE.js -- 增加Nurbs曲线旋转生成曲面,即时调整更新实例

three.js webgl - Nurbs曲线旋转生成曲面,即时调整更新实例 拖动黄色节点,调整曲面母线...
  • omni360
  • omni360
  • 2015年01月17日 01:05
  • 3783

QT Canvas 3D 介绍

  • 2016年10月31日 23:13
  • 1.3MB
  • 下载

基于 HTML5 WebGl 的 3D 网络拓扑图

在数据量很大的2D 场景下,要找到具体的模型比较困难,并且只能显示出模型的的某一部分,显示也不够直观,这种时候能快速搭建出 3D 场景就有很大需求了。HT 基于 WebGL 的 3D 技术的图形组件 ...
  • u013161495
  • u013161495
  • 2017年06月30日 13:23
  • 682

Android Canvas绘图详解(图文)

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎...
  • yunnywu
  • yunnywu
  • 2015年09月28日 14:28
  • 2870

canvas3d学习一 应用结构

Qt Canvas 3D是Qt 基于WebGL的3D内容运行环境。由于QtQuick本身就是通过类js引擎执行,而且渲染层面基于opengl技术。故结合webgL和Qtquick的优势,利用js高效的...
  • business122
  • business122
  • 2017年09月06日 17:31
  • 283

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

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

WebGL入门教程第1篇——六色立方

介绍了WebGL的基础知识,并实战绘制立方体
  • u013874236
  • u013874236
  • 2014年04月15日 20:39
  • 5370
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[WebGL入门]三,3D绘图的基础知识
举报原因:
原因补充:

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