##1.矩阵变换库理解矩阵变换的原理即可，在实际开发中，最好借用矩阵变换库，以我看的这本书中的矩阵库为例，它提供以下方法##2.复合变换我们将三角形先平移再旋转特意翻了一下大学的线性代数，矩阵的乘法是
##1.矩阵变换库理解矩阵变换的原理即可，在实际开发中，最好借用矩阵变换库，以我看的这本书中的矩阵库为例，它提供以下方法
##2.复合变换我们将三角形先平移再旋转
特意翻了一下大学的线性代数，矩阵的乘法是符合乘法的结合律和分配律的。最后，不同变换矩阵相乘得到的结果就是复合矩阵，这样的变换称之为模型变换或者建模变换。
##3.修改多种值前面我们只是通过缓存修改顶点的坐标值，如果同时修改坐标和尺寸，应该怎样做？有两种方案：
- 建立多个缓存对象，依次传递不同的数据。
- 通过一个缓存对象传递多种值。
简单考虑一下，方案二肯定性能更高。通过vertexAttribPointer()方法实现：
var verticesSizes = new Float32Array([ // Coordinate and size of points 0.0, 0.5, 10.0, // the 1st point -0.5, -0.5, 20.0, // the 2nd point 0.5, -0.5, 30.0 // the 3rd point ]);//position gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);//size gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);##4.修改颜色值片元着色器只能使用uniform(不变的)变量和varying(变化的)变量，而不能使用attribute变量。因此我们需要将颜色值传入到顶点着色器中，然后通过varying变量传递给片元着色器。在webgl中，如果顶点着色器和片元着色器中都定义有命名和类型都相同的varying变量，那么顶点着色器赋值给varying变量的值会自动传入到片元着色器中。
##5.光栅化
图形装配：将孤立的点装配成几何图形，几何图形的形状由gl.drawArrays()函数第一个参数决定。
光栅化：将装配好的几何图形转化为片元。
片元着色器的处理是逐片元的，经过片元着色器光栅化之后生成的片元是带有位置信息的，可以通过片元着色的内置变量来访问片元的坐标，
##6.彩色的图形当为不同顶点设置不同颜色之后，产生的图形是渐变的，彩色的。这是因为我们在顶点着色器中定义的varying变量在传给片元着色器之前会进行内插值。将颜色值和像素的坐标联系在了一起。
##7.纹理除了给几何图形赋予不同颜色之外，还可以给图形贴图，这样的图片称之为纹理。纹理的像素值成为纹素。
###7.1纹理坐标纹理坐标是纹理图像上的坐标，通过纹理坐标我们可以在图像上获得纹素颜色。为了和xy坐标区分，webgl中纹理坐标为st坐标系统（也有很多地方成为uv坐标）。如下图，纹理坐标与纹理自身大小无关。
###7.2纹理贴图为了将纹理贴到几何图形上，我们需要建立映射关系，如图：
var verticesTexCoords = new Float32Array([ // Vertex coordinates, texture coordinate -0.5, 0.5, 0.0, 1.0, -0.5, -0.5, 0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0, ]);###7.3配置和加载纹理
- 创建纹理对象
var texture = gl.createTexture(); // Create a texture object删除时可以使用gl.deleteTexture();
- 获取取样器的存储位置，该变量用来接收纹理图像
var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');- 加载图像
var image = new Image(); // Create the image object // Register the event handler to be called on loading an image image.onload = function(){ loadTexture(gl, n, texture, u_Sampler, image); }; // Tell the browser to load an image image.src = '../resources/sky.jpg';- 纹理进行y轴翻转因为图片的y轴和纹理坐标的t轴是相反的，因此在使用之前，需要进行y轴翻转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); // Flip the image's y axis该函数的具体用法，见pixelStorei
- 激活纹理单元webgl通过一种纹理单元的机制来使用多张纹理，每个纹理单元有一个单元号来管理一张纹理。系统支持的纹理单元数量和硬件以及浏览器的webgl实现有关。但是默认至少都是有8个纹理单元的。内置变量TEXTURE0，TEXTURE1,....TEXTURE7各自表示一个纹理单元
// Enable texture unit0 gl.activeTexture(gl.TEXTURE0);- 绑定纹理对象
// Bind the texture object to the target gl.bindTexture(gl.TEXTURE_2D, texture);
- 配置参数
