本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL;本节代码在文件夹chapter-02里面的color-triangle-02.html。
上节课笔者绘制了一个颜色随顶点位置变化的三角形,实现平移、旋转和缩放变换的矩阵计算,并提供了一个可供交互的菜单栏工具:原生webgl学习(三) WebGL中的矩阵运算:平移、旋转和缩放;
在前面我们已经画了两次三角形了,这次,改变一些套路,我们画矩形。画矩形的代码跟上一节大同小异,代码解释可以参考上一节:原生webgl学习(三) WebGL中的矩阵运算:平移、旋转和缩放,唯一不同的是顶点坐标发生了改变,利用两个三角形构成一个矩形,只需要将代码中的顶点稍作修改即可:
let positions = [
-150, -100,
150, -100,
-150, 100,
150, -100,
-150, 100,
150, 100
];
在画图的时候gl.drawArrays的参数稍作修改即可,由于顶点数组