在这一课，你所看到的webGL生成出來的景象，应该是这样的：
好了，如果你想要看到这个动画的话，你可以看看：
不过你需要使用chrome浏览器浏览他。
下面我就来介绍工作原理了：
如果你发现这篇教程有什么错误的话，你可以尽快地告诉我，我会尽快地纠正它的。
如果你想要看到这次教程中网页的代码，你可以使用chrome用代码查看器查看详细的代码。
对于纹理的工作，其实从原理上面你可以这样理解，他们是利用了特殊的方式，给三维的物体的每一个点设置了颜色。大家还记得第二课上面，颜色指定到着色器（shader）上面嘛？其实我们在纹理这一步要做的就是加载图像并将其发送到着色器上面。
functionwebGLStart(){varcanvas=document.getElementById(“lesson05-canvas”);initGL(canvas);initShaders();
initTexture();
gl.clearColor(0.0,0.0,0.0,1.0);
让我们来看看initTexture－它的大约三分之一的位置，是新的代码：
varneheTexture;functioninitTexture(){neheTexture=gl.createTexture();
neheTexture.image=newImage();
neheTexture.image.onload=function(){handleLoadedTexture(neheTexture)}neheTexture.image.src=”nehe.gif”;}
handleLoadedTexture:
functionhandleLoadedTexture(texture){
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
}
接下来的两行中：指定的特殊的纹理缩放参数。第一个参数告诉了WebGL做什么的时候，纹理填充了相对于屏幕大小的图像，换句话，这个参数就是告诉他如果规范在模型中的应用。第二是它的提示下同等规模如何。还有各种尺寸的提示。它具有一定的优势，但是这个是相对你的电脑配置而言的，稍微弱一点的电脑会显得很不给力。在下一课，我们将会采用不同的尺寸提示，这样你可以比较在性能上，外观上的一些差别。
一旦做到了这一点，我们设置了当前纹理为空，虽然这个不是必要的做法，但是这个是一个良好的习惯。以后你就会明白。
所以到了这里为止，这是所有纹理加载所需的代码。接下来，让我们继续利用initBuffers。在这里，更有趣的事情是顶点颜色缓冲一个新的－立方体纹理坐标缓冲区。它看起来像是这样：
cubeVertexTextureCoordBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,cubeVertexTextureCoordBuffer);
vartextureCoords=[//Frontface0.0,0.0,1.0,0.0,1.0,1.0,0.0,1.0,//Backface1.0,0.0,1.0,1.0,0.0,1.0,0.0,0.0,//Topface0.0,1.0,0.0,0.0,1.0,0.0,1.0,1.0,//Bottomface1.0,1.0,0.0,1.0,0.0,0.0,1.0,0.0,//Rightface1.0,0.0,1.0,1.0,0.0,1.0,0.0,0.0,//Leftface0.0,0.0,1.0,0.0,1.0,1.0,0.0,1.0,];
varxRot=0;varyRot=0;varzRot=0;
mat4.rotate(mvMatrix,degToRad(xRot),[1,0,0]);mat4.rotate(mvMatrix,degToRad(yRot),[0,1,0]);
mat4.rotate(mvMatrix,degToRad(zRot),[0,0,1]);gl.bindBuffer(gl.ARRAY_BUFFER,cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,cubeVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);
还有一些一起配套起来的功能，比如动画功能，xRot,yRot,zRot。
让我们看看纹理的代码，在initBuffers我们设立了缓冲区，其中包含纹理坐标，所以在这里我们需要它绑定到相应的属性，以便可以看到它的颜色：
而现在，webGL知道了每个顶点的纹理使用位，我们需要告诉它使用的纹理，我们装过，然后绘制立方体：
无论如何，一旦这三线执行了，我们就准备好下一步了。所以我们只用像以前绘制三角形的立方体构成相同的代码。
新代码剩下的唯一解释是对的着色变化，让我们看看顶点着色器吧：
attributevec3aVertexPosition;attributevec2aTextureCoord;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec2vTextureCoord;
勇于接受自己的失败，告诉自己，这就是自己的现实，
