慕斯不想说话

GPU的渲染管线有各种功能单元,通过执行gl.enable函数可以开启。gl.enable可以传入不同的值来开启相应的功能,gl.enable()的参数对应的功能模块。

图片拉伸的原理本质上是旋转顶点坐标。彩色图转灰度图本质上是改变纹理的颜色。顶点着色器代码 将顶点坐标绕x,y轴分别旋转，就可以实现图片拉伸的效果。

可以给一个面添加多个问题，并且还能然纹理动起来。这个demo是在纹理贴图和纹理动画的基础上修改的。修改的代码如下所示

该demo实例是在前面立方体的纹理贴图的基础上修改的。不过这里用到了一些别人写好的库。库文件都放在我的github里面，有需要的可以自行下载。所以这里就只列出了跟立方体的纹理贴图demo不一样的地方。

立方体有六个面，六个面都需要添加纹理。同时为了显示立方体的三维效果，我们还需要旋转一下立方体。这里的难点还是在于顶点数据的构建。

在前端我们可以使通过改变dom的样式来实现dom的动画效果。在WebGL中我们同样可以实现动画效果。通过改变纹理坐标我们也可以实现纹理贴图的动画效果。

就是将 png、jpg 等格式图片显示在 WebGL 三维场景中。 在着色器中图片的坐标称为纹理坐标，图片称为纹理图像，图片上的一个像素称为纹素，一个纹素就是一个 `RGB` 或者`RGBA`值。

本文是通过三角形扇来绘制一个圆的，通过绘制足够多的三角扇使得三角扇使得外弧变得圆滑，从而达到圆的效果。通过颜色插值来实现圆的渐变色。

通过鼠标事件，来控制立方体的旋转。通过鼠标点击事件来控制立方体是否旋转，通过键盘键码值来控制立方体的运动方向。