使用WebGL实现四边形网格交互式编辑

CG_Project2文档1知识点总结 本文档主要介绍了CG_Project2文档1的项目要求、开发与测试环境、WebGL绘制可交互式多边形网格与简单动画、四边形网格信息、Canvas坐标系转化为WebGL坐标系、四边形网格转化为三角形网格等知识点。 **项目目的** 本项目的目的是从Canvas图形绘制过渡到WebGL图形绘制，掌握WebGL基本编程方法，理解WebGL中Shader原理，与模型变换原理。 **项目要求** 实现四边形网格交互式编辑，搭建WebGL编程环境，通过WebGL编程接口，在浏览器中绘制可交互的四边形网格，进行颜色的渐变填充，并且实现一个小动画。 **开发与测试环境** 硬件：带有支持OpenGLES2.0显卡的计算机。 软件：支持HTML5、JavaScript和WebGL的浏览器，建议选择最新版本的Google Chrome浏览器，也可以选择Internet Explorer 11+或者最新版本的Firefox、Safari等。 **WebGL绘制可交互式多边形网格与简单动画** 使用WebGL绘制可交互式多边形网格，实现颜色的渐变填充，并且实现一个小动画。 **四边形网格信息** 四边形网格是一个网状几何形状，由多个四边形紧密连接而成。构建一个四边形网格，我们需要知道网格的所有顶点位置、网格中的四边形顶点连接关系。我们可以从给定配置文件中得到顶点坐标、每个顶点的颜色，以及四边形顶点连接关系等信息，并用利用这些信息绘制图形。 **Canvas坐标系转化为WebGL坐标系** Canvas坐标系同学们应该已经非常熟悉了，它的原点在画布的左上角，x轴的正方向水平向右，y轴正方向垂直向下。而WebGL虽然是以Canvas为载体，但是具有不同的坐标系，它类似于同学们高中数学中常用的坐标系，坐标原点在画布中央，x轴水平向右范围(-1.0~1.0)，y轴垂直向上(-1.0~1.0)，实际上它还有Z坐标轴，从屏幕内侧指向外侧（右手坐标系）。因此，我们通常还需要进行坐标转换。 **四边形网格转化为三角形网格** 大多数情况下，我们需要将四边形网格转化为三角形网格，以便于绘制和计算。