WebGL入门基础知识

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

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

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

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

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

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

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

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

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

下边准备了线立方体和面立方体的实现方式。他们的主要不同点也是在于数据构造和绘制方式上。绘制立方体个人感觉你要学会自己自己去构造立方体所需要的数据。明白为什么么要构造出这种数据格式。

绘制矩形的方式多种多样。以下是我总结的5中绘制方式。矩形的绘制是在三角形的基础上进行绘制的。所以代码没有多大改动，唯一的区别在于构造数据时，需要的顶点个数不同。

三角形的绘制比点的绘制多对多一个步骤。那就是三角形需要创建缓冲区。有以下几种绘制三角形的方法。 三种绘制方式的代码几乎是一样的。只是在进行渲染时drawArrays(type,start,count)

WebGL能够绘制三种基本的图形，点、线、三角形。其他图形都是由这三种基本图形组装成的。 以下例子主要用到以下GLSL知识。 着色器代码 gl_Position： 内置变量，用来设置顶点坐标。 gl_