flllllllllly

实际上，“根据自定义的观察者状态，绘制观察者看到的景象”与“使用默认的观察状态，但是对三维对象进行评议、旋转等变换，再绘制观察者看到的景象”，这两种行为是等价的。 即，“改变观察者的状态”与“对整个世界进行平移和旋转变换”，本质上是一样的。

WebGL可以同时处理多幅纹理，纹理单元就是为了这个目的而设置。 我们需要对每一幅纹理分别进行前一节所述的将纹理图像映射到图形表面的操作。

一、介绍1、定义纹理映射：将一张图像映射到一个几何图形的表面作用：根据纹理图像，为之前光栅化后的每个片元涂上合适的颜色；纹素:组成纹理图像的像素，每一个纹素的颜色都使用RGB或RGBA格式编码2、纹理

上一节我们绘制了一个三个角分别为红绿蓝颜色的三角形，然而我们只是给三角形的每个顶点指定一个颜色，WebGL就能自动在三角形表面产生颜色平滑过渡的效果。 这一节讲解顶点着色器和片元着色器直接的数据传输细节，也就是varying变量起作用的地方。 执行顶点着色器，缓冲区对象的第一个…

上节熟悉通过gl.vertexAttribPointer()方法的步进和偏移参数同时绘制顶点坐标和尺寸信息，该节通过该技术同时修改顶点和颜色数据。 同上一节示例不同的是，本节使用varying变量从顶点着色器向片元着色器传输数据。 varying变量只能是float类型，以及相…

前面的章节，我们通过创建缓冲区对象，在其中存储顶点的坐标数据，然后将缓冲区对象传入顶点着色器。然而三维图形除了顶点坐标信息之外，还有其他信息，如顶点的大小。 本节将非坐标数据传入顶点着色器，步骤同传入顶点坐标到着色器. WebGL允许我们把顶点的坐标和尺寸数据打包到同一个缓冲区…

前面学习通过用公式和矩阵来实现图形的基础变换，因为基础变换的逻辑基本相似，只有参数不同，故市面上很多开源的webgl库函数将图形变换操作封装，来简化代码冗余，提高开发效率。本节使用cuon-matrix.js库函数来创建变换矩阵库，实现复合动画。

上节我们学习了平移、旋转、缩放这三种基础的图形变换公式，这些公式可以分别通过矩阵来实现，具体推导逻辑可详查资料，此处不做赘述。 在WebGL和OpenGL中采用列主序。

我们学会了绘制简单的点和三角形，然而想要绘制生动灵活的动画，平移、旋转、缩放等基本的图片变换是最基础的也是最重要的操作。本节学习三种基本变换的基础要素和公式。