《WebGL 编程指南》笔记 —— 第七章 进入三维世界

  1. 视点(eye point):观察者所处的(三维空间中的)位置。(eyeX, eyeY, eyeZ)

  2. 视线(viewing direction):从视点出发沿着观察方向的射线称作视线。

  3. 观察目标点(look-at point):被观察目标所在的点。视线从视点出发,穿过观察目标点并继续延伸。(atX, atY, atZ)

  4. 上方向(up direction):最终绘制在屏幕上的影像中的向上的方向。(upX, upY, upZ)

  1. 视点、观察目标点和上方向可以构成一个视图矩阵(view matrix)

  2. 等式:
    旋转后顶点坐标 = 旋转矩阵 × 原始顶点坐标
    "从视点看上去"的旋转后顶点坐标 = 视图矩阵 × 旋转后顶点坐标
    "从视点看上去"的变换后顶点坐标 = 视图矩阵 × 模型矩阵 × 原始顶点坐标

  3. 可视范围(visible range): 观察得到的区域边界。
    WebGL只绘制可视范围内的对象,降低程序开销。

8.可视空间:由水平视角、垂直失焦和可视深度(能够看多远)定义
可是空间常分为两类:
(1)长方体可视空间,也称盒状空间,由正射投影(orthographic projection)产生。

由前后两个矩形表面确定,分别称近裁剪面(near clipping plane)和远裁剪面(far clipping plane)。

近裁剪面的四个顶点为(right, top, -near), (-left, top, -near), (-left, -bottom, -near), (right, -bottom, -near)。

近裁剪面与远裁剪面之间的盒形空间就是可视空间,只有在此空间内的物体会被显示出来。

远裁剪面的四个顶点为(right, top, far), (-left, top, far), (-left, -bottom, far), (right, -bottom, far)

(2)四棱锥 / 金字塔可视空间,由透视投影(perspective projection)产生。

透视投影矩阵(perspective projection matrix)定义了透视投影可视空间的矩阵。

fov: 垂直失焦,即可视空间顶面和底面间的夹角,必须大于0
aspect: 近裁剪面的宽高比(宽度 / 高度)

  1. 等式
    正射投影后的坐标 = 正射投影矩阵 × 视图矩阵 × 顶点坐标
    "从视点看上去"的投影后变换后顶点坐标 = 投影矩阵 × 视图矩阵 × 模型矩阵 × 原始顶点坐标

  2. 隐藏面消除(hidden surface removal):消除那些被遮挡的表面(隐藏面)
    开启隐藏面消除功能
    前提:必须设置可视空间(正射投影空间或透视投影空间)
    步骤:
    (1)开启隐藏面消除功能: gl.enable(gl.DEPTH_TEST);
    gl.enable()规范:

(2)在绘制之前,清除深度缓冲区(depth buffer):gl.clear(gl.DEPTH_BUFFER_BIT);

与gl.enable()函数对应的还有gl.disable()函数。禁用某个功能:

  1. 深度冲突(Z fighting):当几何图形或物体的两个表面极为接近时,深度缓冲区有限的精度已经不能区分哪个在前,哪个在后了,就会使得表面看上去斑斑驳驳的。

解决方案: 多边形偏移(polygon offset),该机制将直接在Z值上加上一个偏移量,偏移量的值由物体表面相对于观察者视线的角度来确定。
启动该机制步骤:
(1)启用多边形偏移:gl.enable(gl.POLYGON_OFFSET_FILL);
(2)在绘制之前指定用来计算偏移量的参数: gl.polygonOffset(1.0, 1.0);

  1. 画立方体

gl.drawElements()

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 三维几何的矩阵变换: 平移变换: 比例变换: 绕X轴旋转: 绕Y轴旋转: 绕Z轴旋转: X轴反射变换: Y轴反射变...
    cain_huang阅读 11,702评论 2 6
  • 在顶点着色器处理图元顶点之后进入图元装配阶段。这一阶段,执行裁剪、透视分割和Viewport变换操作。 光栅化是将...
    cain_huang阅读 10,778评论 0 4
  • 第三章 管线一览 本章我们会学到什么 OpenGL管线的每个阶段做什么的 如果连接着色器和固定功能管线阶段 如果创...
    葭五阅读 11,462评论 2 18
  • 1 模型数据 前面我们说过,一个3D模型一般是由很多三角片(或四边形)组成,因此,首先我们需要有三角形的点数据。既...
    CHSmile阅读 3,798评论 0 0
  • 【先放张Jakarta的天空重温一下心情】 2017年寒假,我做了一个勇敢的决定,去一次海外志愿者项目。最后地点决...
    GORI阅读 2,900评论 0 0