计算机图形学——实验一 WebGL基本图形绘制

实验内容

1. 修改程序HelloPoint2，使用uniform变量来获取颜色值。
2. 绘制曲线。参考程序MultiPoint。
3. 通过点击鼠标选取点绘制三角形，添加菜单改变三角形的颜色。

参考程序ClickedPoints和rotatingSquare2。

实验设计思路

      注：由于只有实验相关的文档，给我提供文档的人没有给我相关的示例代码，因此所有的程序都是自己编写，非常可能与示例程序有较大出入，但是实现的原理基本一致。后面的几篇实验也是如此。实验中要求使用cuon-matrix.js作为矩阵操作函数库，而这里是用glMatrix.js作为矩阵操作函数库。

      任务1：最基本的webgl在canvas上进行图形绘制操作。以下是需要实现的步骤

             ①获取webgl上下文

             ②编写顶点着色器和片元着色器

             ③创建和编译着色器

             ④创建着色器程序并链接

             ⑤准备顶点数据并创建缓冲区

             ⑥向着色器程序传入所需的数据

             ⑦进行绘图操作

     任务2：将曲线细分为大量的点，再将这些点用直线连起来，能够得到非常接近该曲线的图形

     任务3：对canvas画布进行onclick事件绑定，发生点击事件后，通过点击事件的坐标，计算出点击的点在画布中的坐标{ (x,y)|x∈[-1,1]，y∈[-1,1] }，并将该点记录到indices数组中。当indices数组满足绘制三角形所需的顶点个数时，进行绘制操作。设置三个改变颜色的button，点击后会向着色器程序传入对应的颜色数据，并进行重新绘制。

实验结果

任务1

任务2

任务3