关闭

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

标签: webgl
537人阅读 评论(0) 收藏 举报
分类:

之前看了二维绘图的知识,基本上了解了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
])

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

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7462次
    • 积分:265
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:2篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论