webGL第八课-绘制一个三维图形

原创 2016年08月29日 15:04:03

之前看了二维绘图的知识,基本上了解了webGL的工作原理,下面开始了解一下三维的知识了
在看的过程中,会注意到之前没有留意的细节或知识,也一并进行记录和补充

视图矩阵

  • 观察者所处的位置称为视点(eye point)。
  • 从视点出发沿着观察方向的射线成为视线(viewing direction).
  • 被观察目标所在的点,称作观察目标点(look-at point).
  • 视点、观察目标点和上方向三个矢量,形成视图矩阵

这里写图片描述

webGL中,观察者默认状态为:
* 视点(0,0,0)
* 视线为Z轴负方向,观察点为(0,0,-1)
* 上方向为Y轴负方向,(0,1,0)

模型矩阵

用于对模型进行旋转、平移或缩放等基本变换矩阵称作模型矩阵(model matrix)

如果想实现这样的功能:对模型进行缩放旋转,然后从不同的角度对模型进行观察,则可以使用,视图矩阵X模型矩阵X原始坐标,来实现。
比如,我坐在办公桌前,看着面前的电脑,想换个角度看电脑。我可以先把电脑转个角度,然后我站起来,对电脑进行观察。把电脑转角度,使用模型矩阵控制;站起来使用视图矩阵控制。
这样,完全可以使用视图矩阵或者模型矩阵中的一个来进行调整,来达到同样的效果。如同书上说的:
“改变观察者状态”和“对整个世界进行平移和旋转变换”,本质上是一样的。

模型视图矩阵

为了方便,可以将视图矩阵X视图矩阵,结果作为一个矩阵传到webGL中,叫做模型视图矩阵。

投影矩阵

三角形独缺一角 —— 可视范围

例子中,出现三角形独缺一角问题,是因为没有指定可视范围,即实际观察得到的区域边界。可由投影矩阵操作来改善。

可视空间

水平视角、垂直视角和可视深度,定义了可视空间(view volume). 想想一下我们看东西的情况即可理解…

  • 可视空间有两种常用:
    1. 长方形可视空间,由正射投影(orthographic projection)产生。
    2. 四棱锥/金字塔可视空间,由透视投影(perspective projection)产生。

这里写图片描述

正射投影

  • 正射投影,即盒状可视空间,由近裁剪面(near clipping plane)和远裁剪面两个矩形表面构成。
    上显示的就是可视空间中物体在近裁剪面上的投影。 如果可见面高宽比不同,会根据canvas高宽比对图像进行压缩处理。
    使用正射投影矩阵设置正射投影效果

这里写图片描述

透视投影

定义了透视投影可视空间的矩阵成为透视投影矩阵

规范立方体(canonical view volume )

透视投影矩阵将金字塔形可视空间变换为盒状的可视空间,这个盒状可视空间又称规范立方体。

这里写图片描述

综上,投影矩阵、模型矩阵和视图矩阵相结合,就能够处理顶点需要经过的所有几何变换(平移、旋转、缩放),最终达到“具有深度感”的视觉效果。

后面的图形遮挡前面的图形 —— 隐藏面消除

这里写图片描述

为了解决这个问题,webGL提供了隐藏面消除(hidden surface removal)功能。

  • 开启隐藏面消除功能,需要遵循以下两步:*
    1. 开启隐藏面消除功能。 gl.enable(gl.depth_test);
    2. 在绘制之前,消除深度缓冲区。gl.clear(gl.depth_buffer_bit);

这里写图片描述

在绘制任意一帧之前,都必须清除深度缓冲区和颜色缓冲区

深度冲突 —— 多边形偏移机制(polygon offset)

这里写图片描述

  • 启用多边形偏移机制:
    1. 启用多边形偏移。gl.enable(gl.polygon_offset_fill);
    2. 在绘制之前指定用来计算偏移量的参数。gl.polygonOffset(1.0,1.0);

这里写图片描述

绘制立方体 —— 引出光照

  • 介绍了可以进行绘制的两个函数:gl.drawArrays() 和 gl.drawElements();
  • 使用gl.drawelements()绘制渐变色和面单色立方体;
  • 纯色无法显示出3D效果,需要使用光照技术。

列主序

webGL和openGL在存储矩阵时,按照列主序存储到数组中,所以如果要将一个矩阵存储到webGL中的矩阵对象中,需要将实际矩阵按照列主序进行存储。如图:这里写图片描述

所以,定义一个数组时,应该这个顺序:
var newarr = new Float32Array([
a,e,i,m,b,f,j,n,c,g,k,o,d,h,l,p
])

综上所诉,使用视图矩阵、模型矩阵和投影矩阵即可绘制一个有深度感的三维模型。在这三个矩阵的基础上,进行一些其他的修补和变换则可以达到所用的图形操作目的。

版权声明:本文为博主原创文章,未经博主允许不得转载。

28 WebGL绘制立方体

到现在为止,一直学的都是绘制一些简单的三角形。下面,我们将学习如何绘制如图所示的一个立方体,目标: 如果按以前所学的知识,制作这个正方体就需要使用三角形两个拼一个矩形,最后拼出来六个正方形来组成这...

WebGL自学教程——WebGL示例:6. 第一个三维的物体:立方体

6. 第一个三维的物体:立方体       前面几章都在讲二维的三角形,本章开始接触真正的3D物体。我们从一个简单的立方体开始。     立方体有六个面;每个面分为两个三角形,每个三角形3个顶点...
  • tiewen
  • tiewen
  • 2011年10月23日 19:59
  • 5106

23 WebGL的视点和视线

强烈建议大家再往后看的时候,把本人更新的GLSL ES语言相关的内容先查看一遍,然后再继续本内容及以后内容的学习。 这一节往后,我们就开始接触3d相关的信息了,所以,今天,先接触一下跟3d有关的概念...

[WebGL入门]十四,绘制多边形

其实这次的代码绘制的只是一个简单的三角形。只是这样,却写了这么长的代码,所以才说3D开发是比较难的。 但是,个人认为,即使这样,和DirectX相比较的话,已经相当简单,简练了。 单从开发环境上来说,...

55 WebGL加载三维模型

迄今为止,示例程序都是在代码中显式定位三维模型的顶点坐标,并保存在Float32Array类型的数组中。然而,大部分三维程序都是从模型文件中读取三维模型的顶点坐标和颜色数据,而模型文件是有三维建模软件...

webGL教程4:实现三维效果

欢迎来到WebGL教学系列的第四课。这次我们来显示一些3D物体。本课是基于NeHe OpenGL教学系列的第五课。如果你的浏览器已经支持WebGL,请点击此处,你将看到本课WebGL的现场版;如果不支...
  • WebGL_
  • WebGL_
  • 2011年05月11日 16:28
  • 2007

[WebGL入门]二十,绘制立体模型(圆环体)

这次,并没有对WebGL相关的新技术进行说明,这一点运行一下demo就能知道了,果然,比起绘制简单的板状的多边形来说,像圆环体这样的立体模型绘制起来更有意思吧。 demo中使用的着色器和HTML跟以前...

[webGL学习]基于three.js构建WebGL实例第三讲

大多程序员在刚开始理解3D(webGL)的知识时,通常对三维空间可能理解的比较困难,你也可能有困难理解不同的光线是如何工作的,或轴甚至如何位于空间。 今天,我会帮你处理这些问题。three....

27 WebGL的正确处理对象的前后关系

正常的话,前面的图形挡住后面的图形,这是正常的人眼看到的效果,但是图形绘制出来,不会考虑这些前后关系什么的,只是会按照绘制的前后拜访而已。 如果我们将前面案例的三角形最后面的和最前面的三角形的z轴...

[WebGL入门]二十七,多纹理

多纹理进行渲染的时候应该注意的是,指定正确的纹理单位进行数据的处理,这就足够了。 其他的细节,主要是activeTexture函数和uniform1i函数的使用方法,这几个不出错的话,之后就可以在着色...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:webGL第八课-绘制一个三维图形
举报原因:
原因补充:

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