本章的重点是使用WebGLUtilLib来实现多视口渲染相关的技术,由两个部分组成:

  • 使用GLMeshBuilder类多视口渲染旋转中的基本几何体。

  • 多视口渲染坐标系以及三维物体绕各种旋转轴旋转效果。

第一个Demo演示的重点在于如何实现多视口渲染以及GLMeshBuilder三种不同的顶点存储方式(EVertexLayout枚举结构的三个枚举值)以及使用颜色和纹理渲染相关内容。

而第二个Demo则是在使用多视口渲染的基础上,让大家更进一步的了解坐标系以及变换相关的数学概念。同时在该Demo中还会涉及到一个如何将局部坐标系中的点变换到屏幕坐标系表示的算法。通过这个点变换算法,我们可以实现将Canvas2D中的文字正确的呈现在WebGL中,从而解决WebGL文字绘制的短板。

通过本章,可以了解如下一些技术要点:

  • 如何用GLMeshBuilder类,以不同的顶点存储格式来绘制基于颜色或纹理的2D或3D几何体;

  • 如何使用函数对象来切换不同的渲染页面(或场景);

  • 如何进行多视口的渲染;

  • 理解WebGL中的纹理坐标系;

  • 如何绘制三角形、四边形以及立方体;

  • 如何使用Atlas贴图;

  • 如何绘制WebGL坐标系;

  • 如何绘制绕着各个轴平移、旋转的仿射变换效果;

  • 如何将局部坐标系中的点变换到屏幕坐标系;

  • 如何将Canvas2D中的文字绘制应用到WebGL中去;

  • 理解帧缓存深度测试;

  • 理解核心的3D数学变换流水线;