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
])

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

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

相关文章推荐

WebGL 第八课 翻译

OpenGL第7~8章裁剪,光栅化和隐藏面消除光栅化是将对象处理成片元的过程。必须完成的两件事;第一,使每个集合对象经过图形系统第二,给颜色缓存中要显示的每个像素附一个颜色值。图形绘制系统的4个主要任...

java教程 第八课 异常处理

  • 2012-06-07 10:16
  • 871KB
  • 下载

【零基础免杀第八课】

  • 2011-01-31 12:19
  • 6.83MB
  • 下载

【算法导论】第八课 全域哈希 完美哈希

哈希表的固有缺点怎么解决?这节课讨论的两个解决哈希表缺陷的方法——全域哈希和完美哈希 1.第一个哈希的根本缺陷:对于任意哈希函数而言,都存在一个不好的健集,使得所有的健都会哈希到同一个槽里去,那...

Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现

UI系列教程第八课:Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现  今天蓝老师要讲的是关于新浪新闻侧滑界面的实现。先看看原图: 如图...

ionic入门教程第八课-(加更)从无到有说Ionic、画图说明MVC-U-S

这节课的内容,有些前面几节已经说过了。 公司这次给我一个任务,让我带一个没有编程基础的同事学习ionic。 今天是我跟他讲的第一课,晚上把讲的笔记整理了一下,觉得还是挺适合零基础的朋友学习的。 有些前...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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