Web3D编程入门总结——WebGL与Three.js基础介绍

 /*在这里对这段时间学习的3D编程知识做个总结，以备再次出发。计划分成“webgl与three.js基础介绍”、“面向对象的基础3D场景框架编写”、“模型导入与简单3D游戏编写”三个部分，其他零散知识以后有机会再总结。*/
 /*第一部分，webgl与three.js基础介绍，要求读者掌握JavaScript入门知识*/
 //webgl原理：通过JavaScript语言在浏览器端生成glsl代码，把glsl代码送入显卡执行，把执行结果显示在浏览器中
 //简单例程：
 //根据Tony Parisi著《WebGL入门指南》第一章修改而来（简称T）
 window.onload=webGLStart;
 var gl;
 function webGLStart()
 {
     var canvas = document.getElementById("can_main");//canvas是html5下的绘图标签，可以支持3D绘图
     gl=initGL(canvas);//初始化“绘制上下文”，以后的绘制都要通过它进行
     var square=createSquare(gl);//建立一个演示用的四边形，包括顶点坐标，顶点数组格式和顶点绘制方法
     var matrix=initMatrices();//定义两个矩阵

     var shaderProgram=initShaders();//定义着色器程序（glsl）

     draw(gl,square,matrix,shaderProgram);//调用显卡进行绘制
     onLoad();//稍后用来触发three.js方式的绘图
 }
 function initGL(canvas){
     var gl;
     try
     {
         gl = canvas.getContext("experimental-webgl");//从canvas中获取webgl上下文
         gl.viewport(0,0,canvas.width,canvas.height);//设置视口
     }
     catch(e)
     {
         var msg="Error creating WebGL Context!: "+ e.toString();
         alert(msg);  //弹出错误信息
     }
     return gl;
 }
 function createSquare(gl)
 {
     var vertexBuffer=gl.createBuffer();//建立一个顶点缓存
     gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
     var verts = [
         1.0,  1.0,  0.0,
         -1.0,  1.0,  0.0,
         1.0, -1.0,  0.0,
         -1.0, -1.0,  0.0
     ];//把三维空间中的四个顶点存储在一个一维数组中
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);//把数组元素的存储方式设为“32位浮点数”
     var square={buffer:vertexBuffer,vertSize:3,nVerts:4,primtype:gl.TRIANGLE_STRIP};    //使用一个JavaScript对象返回信息：使用vertexBuffer缓存顶点信息，三维空间顶点，共四个顶点，使用“三角形带”图元绘制方法
     return square;
 }
 function initMatrices()
 {
     //定义姿态矩阵，即所有物体共用的相对于原点的位置和姿态
     var modelViewMatrix=new Float32Array(
         [1,0,0,0,
             0,1,0,0,
             0,0,1,0,
             0,0,-30.333,1]
     );
     //定义投影矩阵，即物体近大远小的透视程度
     var projectionMatrix=new Float32Array([
         2.41421,0,0,0,
         0,2.41421,0,0,
         0,0,-1.002002,-1,
         0,0,-0.2002002,0
     ]);
     var matrix={mvm:modelViewMatrix,pjm:projectionMatrix};
     return matrix;
 }
 function initShaders()
 {
     /*着色器（Shader）位于显卡上，分为顶点着色器和片元着色器两种，数量各以千记。
     其中顶点着色器运行顶点着色器程序，负责对每个顶点的位置颜色信息的计算；
     片元着色器运行片元着色器程序，负责对顶点之间的内容进行“插值”，得出每个像素的颜色；
     顶点着色器+片元着色器+光栅化=显卡渲染管线*/
     //顶点着色器
     var vertexShaderSource=
         " attribute vec3 vertexPos;\n"+
         " uniform mat4 modelViewMatrix;\n"+
         " uniform mat4 projectionMatrix;\n"+
         " void main(void) {\n"+
         " //返回变换并投影后的顶点数据\n"+
         " gl_Position=projectionMatrix*modelViewMatrix*vec4(vertexPos,1.0);\n"+
         " }\n";
     //片元着色器
     var fragmentShaderSource=
         " void main(void){\n"+
         " //返回像素颜色：永远输出白色\n"+
         " gl_FragColor=vec4(1.0,1.0,1.0,1.0);\n"+
         " }\n";
     //glsl的注释是“//”

     //这里是对shader代码的编译
     var vertexShader=gl.createShader(gl.VERTEX_SHADER);
     gl.shaderSource(vertexShader, vertexShaderSource);
     gl.compileShader(vertexShader);
     if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
         alert(gl.getShaderInfoLog(shader));
     }

     var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
     gl.shaderSource(fragmentShader, fragmentShaderSource);
     gl.compileShader(fragmentShader);
     if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
         alert(gl.getShaderInfoLog(shader));
     }

     //对glsl进行连接
     var shaderProgram = gl.createProgram();
     gl.attachShader(shaderProgram, vertexShader);
     gl.attachShader(shaderProgram, fragmentShader);
     gl.linkProgram(shaderProgram);
     gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);

     return shaderProgram;//返回编译连接之后的着色器程序
 }
 function draw(gl,obj,matrix,shaderProgram)//这里只进行了一个物体的一次绘制，事实上obj完全可以是一个物体数组
 {
     gl.clearColor(0.0,0.0,0.0,1.0);//使用完全不透明的黑色清屏
     gl.clear(gl.COLOR_BUFFER_BIT);

     gl.bindBuffer(gl.ARRAY_BUFFER,obj.buffer);//将gl对象与这个物体的缓存暂时绑定

     gl.useProgram(shaderProgram);//让gl使用上面定义的着色器程序

     gl.enableVertexAttribArray(gl.getAttribLocation(shaderProgram, "vertexPos"));//告诉WebGL我们将通过一个array提供顶点信息
     gl.vertexAttribPointer(gl.getAttribLocation(shaderProgram, "vertexPos"),obj.vertSize,gl.FLOAT,false,0,0);//提供顶点信息，顶点信息被保存在顶点着色器的vertexPos属性里（变量映射）
     gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "projectionMatrix"),false,matrix.pjm);
     gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "modelViewMatrix"),false,matrix.mvm);//将两个矩阵的信息发送给显卡

     gl.drawArrays(obj.primtype,0,obj.nVerts);//通知显卡按照顶点数组画图
 }

 //为提高编程效率，人们编写了一些基于WebGL的绘图引擎，Three.js是其中应用较广的一种：
 //使用Three.js实现同样的绘制
 function onLoad()
 {
     var container=document.getElementById("container");

     //Three.js定义的“场景”对象
     var scene=new THREE.Scene();
     //进行WebGL兼容性判断
     if(webglAvailable()){
         var renderer=new THREE.WebGLRenderer();
     }else{
         var renderer=new THREE.CanvasRenderer();//对于环境支持html5但不支持webgl的情况，可以尝试使用更慢一些的2Dcanvas来软件绘图，但效果差强人意
     }
     renderer.setSize(container.offsetWidth,container.offsetHeight);//render可以看成是对canvas的一种扩展
     container.appendChild(renderer.domElement);

     //定义相机，类似于WebGL中的定义投影矩阵，
     var camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);
     camera.position.set(0,0,30.3333);//起原版中姿态矩阵的共用部分的作用，但不同的是：这里是观察者向相反的方向移动了。
     scene.add(camera);//相机对象被添加到了场景中，可以认为场景对象是用来与显卡进行交互的东西，其中包含了变量映射

     var geometry=new THREE.PlaneGeometry(2,2);//库中包含预制的几何体，通过少量参数即可生成完整的顶点数组，这里是一个宽高为二的四边形
     var mesh=new THREE.Mesh(geometry,new THREE.MeshBasicMaterial());//赋予这个几何体材质，材质对应反光性
     scene.add(mesh);

     renderer.render(scene,camera);// 渲染
 }
 function webglAvailable()
 {//webgl的绘图是建立在显卡的基础上的，如果这台计算机没有显卡，或者浏览器不支持和显卡的通信，webgl上下文的建立将会失败
     try{
         var canvas=document.createElement("canvas");
         return !!(window.WebGLRenderingContext
         &&(canvas.getContext("webgl")||canvas.getContext("experimental-webgl"))
         );
     }catch(e){
         return false;
     }
 }

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title>webgl与three.js基础介绍</title>
 </head>
 <body>
     <!--在canvas中使用webglAPI绘制-->
     <canvas id="can_main" width="500" height="500"
             style="width:500px;height:500px;float: left"></canvas>
     <!--使用Three.js库绘制-->
     <div id="container" style="width:500px;height:500px;background-color: #000000;float: left"></div>
 </body>

 <script>

 </script>
 <!---->
 <script src="mygl1.js"></script>
 <script src="mygl1b.js"></script>

 <!--引用three.js库文件-->
 <!--three库是由多个文件联合成的一个大库，链接方式不同、库版本不同会产生不同的库文件！！-->

 <!--这个版本旧一些但是只需要引用一个文件-->
 <!--https://github.com/tparisi/WebGLBook/tree/master/libs-->
 <!--script src="../LIBS/Three.js"></script-->

 <!--这个版本较新但需要引用额外的文件-->
 <!--https://github.com/mrdoob/three.js/tree/master/build-->
 <!--https://github.com/mrdoob/three.js/tree/master/examples/js/renderers-->
 <script src="three.min.js"></script>
 <script src="Projector.js"></script>
 <script src="CanvasRenderer.js"></script>

 </html>

 <!DOCTYPE html>
 <html>
 <head lang="en">
 <title>加入光照、纹理、运动效果</title>
 <meta charset="UTF-8">
 <!--稍微复杂一点的场景，根据Giles Thomas的learningwebgl.com第七章修改而来（简称G）-->
 <!--一个数学库用来实现一些数学计算-->
 <script src="glMatrix-0.9.5.min.js" type="text/javascript"></script>
 <!--google的一个帧动画辅助库-->
 <script src="webgl-utils.js" type="text/javascript"></script>

 <!--G把着色器代码放在了script标签里-->
 <script id="shader-vs" type="x-shader/x-vertex">
     attribute vec3 aVertexPosition;//顶点位置数组
     attribute vec3 aVertexNormal;//法线向量数组
     attribute vec2 aTextureCoord;//纹理坐标数组

     uniform mat4 uMVMatrix;//模型姿态矩阵
     uniform mat4 uPMatrix;//投影矩阵
     uniform mat3 uNMatrix;

     uniform vec3 uAmbientColor;//环境光

     uniform vec3 uLightingDirection;//方向光方向
     uniform vec3 uDirectionalColor;//方向光颜色

     uniform bool uUseLighting;//是否使用光照
 //在glsl中，attribute和uniform是输入顶点着色器的只读常量，varying是从顶点着色器中输入片元着色器的变量
 //vec3是含有三个分量的元素组成的数组，mat4是4*4矩阵
     varying vec2 vTextureCoord;
     varying vec3 vLightWeighting;//顶点光照

     void main(void) {
         gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);//顶点位置数组经过模型姿态矩阵和投影矩阵变化后得到顶点位置
         vTextureCoord = aTextureCoord;

         if (!uUseLighting) {
             vLightWeighting = vec3(1.0, 1.0, 1.0);//如果选择不使用光照则设为最强白光
         } else {
             vec3 transformedNormal = uNMatrix * aVertexNormal;//对法线向量数组进行姿态变换
             float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);//按照法线方向和方向光方向计算反射光强度
             vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;//反射光加环境光得到顶点光照情况，这里使用的是最简单的光照模型，没有涉及材质。
         }
     }
 </script>
 <script id="shader-fs" type="x-shader/x-fragment">
     precision mediump float;//显卡处理浮点数的精度

     varying vec2 vTextureCoord;
     varying vec3 vLightWeighting;

     uniform sampler2D uSampler;//二维纹理句柄

     void main(void) {
         vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));//根据纹理坐标对纹理进行切割
         //OpenGL标准显卡为提高模型缩放时的渲染效率，需要为模型纹理建立多个逐渐缩小的缩略图，受此限制图片的边长必须为2的整数次方，但实际纹理基本不会符合此要求，所以实际纹理图片会把不规则纹理放在规则图片中，再使用纹理坐标进行切割提取
         gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);//纹理颜色乘以光照，再加上透明度信息作为实际片元颜色
     }
 </script>
 <!--gl_FragColor是glsl的保留字，表示片元着色器的输出-->

 <!--程序入口在webGLStart()函数-->
 <script type="text/javascript">

 var gl;
 //初始化weblg上下文
 function initGL(canvas) {
     try {
         gl = canvas.getContext("experimental-webgl");
         gl.viewportWidth = canvas.width;
         gl.viewportHeight = canvas.height;
     } catch (e) {
     }
     if (!gl) {
         alert("Could not initialise WebGL, sorry :-(");
     }
 }

 //生成着色器代码
 function getShader(gl, id) {
     var shaderScript = document.getElementById(id);
     if (!shaderScript) {
         return null;
     }

     var str = "";
     var k = shaderScript.firstChild;
     while (k) {
         if (k.nodeType == 3) {
             str += k.textContent;
         }
         k = k.nextSibling;
     }

     var shader;
     if (shaderScript.type == "x-shader/x-fragment") {
         shader = gl.createShader(gl.FRAGMENT_SHADER);
     } else if (shaderScript.type == "x-shader/x-vertex") {
         shader = gl.createShader(gl.VERTEX_SHADER);
     } else {
         return null;
     }

     gl.shaderSource(shader, str);//根据网页标签里的内容去生成shader program内容
     gl.compileShader(shader);

     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
         alert(gl.getShaderInfoLog(shader));
         return null;
     }

     return shader;
 }

 var shaderProgram;//用来和显卡交互的对象，是很多属性的结合体
 //初始化着色器
 function initShaders() {
     var fragmentShader = getShader(gl, "shader-fs");
     var vertexShader = getShader(gl, "shader-vs");//根据标签内容编译着色器代码

     shaderProgram = gl.createProgram();
     gl.attachShader(shaderProgram, vertexShader);
     gl.attachShader(shaderProgram, fragmentShader);//把两个着色器的代码分别装填到shaderProgram中
     gl.linkProgram(shaderProgram);//连接着色器代码

     if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {//通过gl的属性验证连接是否成功
         alert("Could not initialise shaders");
     }

     gl.useProgram(shaderProgram);
     //下面是需要传给显卡的参数（变量映射），通过这种方式把JavaScript中的变量和glsl中的输入量关联起来
     shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
     gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

     shaderProgram.vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
     gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute);

     shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
     gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

     shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
     shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
     shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
     shaderProgram.useLightingUniform = gl.getUniformLocation(shaderProgram, "uUseLighting");
     shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor");
     shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, "uLightingDirection");
     shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, "uDirectionalColor");
 }

 //处理载入的图片文件
 function handleLoadedTexture(texture) {
     gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

     gl.bindTexture(gl.TEXTURE_2D, texture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);//将图片对象变成纹理对象
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);//图片放大或扭曲时的插值方式
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
     gl.generateMipmap(gl.TEXTURE_2D);//缩略图

     gl.bindTexture(gl.TEXTURE_2D, null);
 }

 var crateTexture;
 var neheTexture;
 //载入图片文件
 function initTexture() {
     crateTexture = gl.createTexture();
     crateTexture.image = new Image();
     crateTexture.image.onload = function () {//onload事件代表图片载入完成
         handleLoadedTexture(crateTexture)
     }
     crateTexture.image.src = "crate.gif";//使用google chrome进行本地测试时注意跨域设置！！

     neheTexture = gl.createTexture();
     neheTexture.image = new Image();
     neheTexture.image.onload = function () {
         handleLoadedTexture(neheTexture)
     }
     neheTexture.image.src = "nehe.gif";
     //这里载入了两个图片，其实完全可以把两幅图片合在一起使用纹理坐标切割选择
 }

 var mvMatrix = mat4.create();
 var mvMatrixStack = [];
 var pMatrix = mat4.create();

 //考虑到场景中存在多个物体，它们的姿态矩阵有公用的部分也有私有的部分，故在设置私有部分时把共有部分入栈
 function mvPushMatrix() {
     var copy = mat4.create();
     mat4.set(mvMatrix, copy);
     mvMatrixStack.push(copy);
 }
 //设置完私有部分后将共有部分出栈，再去设置下一个物体
 function mvPopMatrix() {
     if (mvMatrixStack.length == 0) {
         throw "Invalid popMatrix!";
     }
     mvMatrix = mvMatrixStack.pop();
 }

 //三个矩阵的变量映射
 function setMatrixUniforms() {
     gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);//投影
     gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);//顶点

     var normalMatrix = mat3.create();//法线
     mat4.toInverseMat3(mvMatrix, normalMatrix);
     mat3.transpose(normalMatrix);
     gl.uniformMatrix3fv(shaderProgram.nMatrixUniform, false, normalMatrix);
 }

 //角度转化为弧度，webgl默认支持弧度
 function degToRad(degrees) {
     return degrees * Math.PI / 180;
 }

 var xRot = 0;
 var xSpeed = 3;

 var yRot = 0;
 var ySpeed = -3;

 var z = -5.0;

 //键盘处理，通过这种方式可以处理同时按下多个按键
 var currentlyPressedKeys = {};

 function handleKeyDown(event) {
     currentlyPressedKeys[event.keyCode] = true;
 }

 function handleKeyUp(event) {
     currentlyPressedKeys[event.keyCode] = false;
 }

 function handleKeys() {
     if (currentlyPressedKeys[33]) {
         // Page Up
         z -= 0.05;
     }
     if (currentlyPressedKeys[34]) {
         // Page Down
         z += 0.05;
     }
     if (currentlyPressedKeys[37]) {
         // Left cursor key
         ySpeed -= 1;
     }
     if (currentlyPressedKeys[39]) {
         // Right cursor key
         ySpeed += 1;
     }
     if (currentlyPressedKeys[38]) {
         // Up cursor key
         xSpeed -= 1;
     }
     if (currentlyPressedKeys[40]) {
         // Down cursor key
         xSpeed += 1;
     }
 }

 var cubeVertexPositionBuffer;
 var cubeVertexNormalBuffer;
 var cubeVertexTextureCoordBuffer;
 var cubeVertexIndexBuffer;
 var cubeVertexIndexBuffer2;
 //初始化缓存
 function initBuffers() {
     cubeVertexPositionBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
     //一个正方形的顶点数组
     vertices = [
         // Front face
         -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
         1.0,  1.0,  1.0,
         -1.0,  1.0,  1.0,

         // Back face
         -1.0, -1.0, -1.0,
         -1.0,  1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0, -1.0, -1.0,

         // Top face
         -1.0,  1.0, -1.0,
         -1.0,  1.0,  1.0,
         1.0,  1.0,  1.0,
         1.0,  1.0, -1.0,

         // Bottom face
         -1.0, -1.0, -1.0,
         1.0, -1.0, -1.0,
         1.0, -1.0,  1.0,
         -1.0, -1.0,  1.0,

         // Right face
         1.0, -1.0, -1.0,
         1.0,  1.0, -1.0,
         1.0,  1.0,  1.0,
         1.0, -1.0,  1.0,

         // Left face
         -1.0, -1.0, -1.0,
         -1.0, -1.0,  1.0,
         -1.0,  1.0,  1.0,
         -1.0,  1.0, -1.0,
     ];
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
     cubeVertexPositionBuffer.itemSize = 3;
     cubeVertexPositionBuffer.numItems = 24;

     //正方形每个面的法线向量
     cubeVertexNormalBuffer = gl.createBuffer();//法线向量
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
     var vertexNormals = [
         // Front face
         0.0,  0.0,  1.0,
         0.0,  0.0,  1.0,
         0.0,  0.0,  1.0,
         0.0,  0.0,  1.0,

         // Back face
         0.0,  0.0, -1.0,
         0.0,  0.0, -1.0,
         0.0,  0.0, -1.0,
         0.0,  0.0, -1.0,

         // Top face
         0.0,  1.0,  0.0,
         0.0,  1.0,  0.0,
         0.0,  1.0,  0.0,
         0.0,  1.0,  0.0,

         // Bottom face
         0.0, -1.0,  0.0,
         0.0, -1.0,  0.0,
         0.0, -1.0,  0.0,
         0.0, -1.0,  0.0,

         // Right face
         1.0,  0.0,  0.0,
         1.0,  0.0,  0.0,
         1.0,  0.0,  0.0,
         1.0,  0.0,  0.0,

         // Left face
         -1.0,  0.0,  0.0,
         -1.0,  0.0,  0.0,
         -1.0,  0.0,  0.0,
         -1.0,  0.0,  0.0
     ];
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals), gl.STATIC_DRAW);
     cubeVertexNormalBuffer.itemSize = 3;
     cubeVertexNormalBuffer.numItems = 24;

     //每个面的纹理坐标
     cubeVertexTextureCoordBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
     var textureCoords = [
         // Front face
         0.0, 0.0,
         1.0, 0.0,
         1.0, 1.0,
         0.0, 1.0,

         // Back face
         1.0, 0.0,
         1.0, 1.0,
         0.0, 1.0,
         0.0, 0.0,

         // Top face
         0.0, 1.0,
         0.0, 0.0,
         1.0, 0.0,
         1.0, 1.0,

         // Bottom face
         1.0, 1.0,
         0.0, 1.0,
         0.0, 0.0,
         1.0, 0.0,

         // Right face
         1.0, 0.0,
         1.0, 1.0,
         0.0, 1.0,
         0.0, 0.0,

         // Left face
         0.0, 0.0,
         1.0, 0.0,
         1.0, 1.0,
         0.0, 1.0
     ];
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
     cubeVertexTextureCoordBuffer.itemSize = 2;
     cubeVertexTextureCoordBuffer.numItems = 24;

     //顶点绘制顺序，即存在24个顶点，分别使用其中的哪几个顶点绘制三角形
     //因为使用了两个纹理句柄，这里将正方形分成了两个物体，降低了效率
     cubeVertexIndexBuffer = gl.createBuffer();
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
     var cubeVertexIndices = [
         //0, 1, 2,      0, 2, 3,    // Front face
         //4, 5, 6,      4, 6, 7,    // Back face
         //8, 9, 10,     8, 10, 11,  // Top face
         12, 13, 14,   12, 14, 15, // Bottom face
         16, 17, 18,   16, 18, 19, // Right face
         20, 21, 22,   20, 22, 23  // Left face
     ];
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
     //cubeVertexIndexBuffer.itemSize = 1;
     //cubeVertexIndexBuffer.numItems = 36;

     cubeVertexIndexBuffer2 = gl.createBuffer();
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer2);
     var cubeVertexIndices2 = [
         0, 1, 2,      0, 2, 3,    // Front face
         4, 5, 6,      4, 6, 7,    // Back face
         8, 9, 10,     8, 10, 11  // Top face
         //12, 13, 14,   12, 14, 15, // Bottom face
         //16, 17, 18,   16, 18, 19, // Right face
         //20, 21, 22,   20, 22, 23  // Left face
     ];
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices2), gl.STATIC_DRAW);
 }

 //场景绘制
 function drawScene() {
     gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

     //光照
     var lighting = document.getElementById("lighting").checked;
     gl.uniform1i(shaderProgram.useLightingUniform, lighting);
     //从html中读取光照设置
     if (lighting) {
         gl.uniform3f(
                 shaderProgram.ambientColorUniform,
                 parseFloat(document.getElementById("ambientR").value),
                 parseFloat(document.getElementById("ambientG").value),
                 parseFloat(document.getElementById("ambientB").value)
         );
         var lightingDirection = [
             parseFloat(document.getElementById("lightDirectionX").value),
             parseFloat(document.getElementById("lightDirectionY").value),
             parseFloat(document.getElementById("lightDirectionZ").value)
         ];
         var adjustedLD = vec3.create();
         vec3.normalize(lightingDirection, adjustedLD);

         vec3.scale(adjustedLD, -1);
         gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD);
         gl.uniform3f(
                 shaderProgram.directionalColorUniform,
                 parseFloat(document.getElementById("directionalR").value),
                 parseFloat(document.getElementById("directionalG").value),
                 parseFloat(document.getElementById("directionalB").value)
         );
     }

     //变换姿态矩阵，创造出物体运动效果
     mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
     mat4.identity(mvMatrix);
     mat4.translate(mvMatrix, [0.0, 0.0, z]);
     mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
     mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
     setMatrixUniforms();//考虑到多个物体的变化，这个矩阵设置加入在绘制之前，如果需要在另一个位置绘制物体，就再设置一次姿态矩阵

     //顶点数组变量映射
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
     gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
     gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, cubeVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
     gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
     gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

     //纹理与顶点索引
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, crateTexture);
     gl.uniform1i(shaderProgram.samplerUniform, 0);//传给着色器

     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
     gl.drawElements(gl.TRIANGLES, 18, gl.UNSIGNED_SHORT, 0);//与上一例程中的“三角形带”方式不同，包含顶点绘制顺序时使用drawElements方法绘制

     gl.activeTexture(gl.TEXTURE1);
     gl.bindTexture(gl.TEXTURE_2D, neheTexture);
     gl.uniform1i(shaderProgram.samplerUniform, 1);//传给着色器,替换了上一个samplerUniform变量的值

     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer2);
     gl.drawElements(gl.TRIANGLES, 18, gl.UNSIGNED_SHORT, 0);
 }

 var lastTime = 0;
 //根据延迟时间计算动画效果，使得动画效果不受帧率影响
 function animate() {
     var timeNow = new Date().getTime();
     if (lastTime != 0) {
         var elapsed = timeNow - lastTime;

         xRot += (xSpeed * elapsed) / 1000.0;
         yRot += (ySpeed * elapsed) / 1000.0;
     }
     lastTime = timeNow;
 }

 function tick() {
     requestAnimFrame(tick);//在浏览器认为可以时重调循环，这样可以随着系统负载情况不同产生动态帧率
     handleKeys();//处理键盘
     drawScene();//绘制场景
     animate();//帧动画
 }

 function webGLStart() {
     var canvas = document.getElementById("lesson07-canvas");
     initGL(canvas);//上下文
     initShaders();//着色器
     initBuffers();//缓存
     initTexture();//纹理

     gl.clearColor(0.0, 0.0, 0.0, 1.0);
     gl.enable(gl.DEPTH_TEST);//深度探测打开，webgl认为被遮挡的三角形将不被渲染，处理半透明物体时需关掉深度探测

     document.onkeydown = handleKeyDown;//声明键盘事件
     document.onkeyup = handleKeyUp;

     tick();//绘制循环
 }
 /*可以看到，随着页面复杂度的提高，webglAPI绘制方法的变量映射和glsl代码越来越多，因此在实际应用中往往使用运行库对这部分代码进行封装。至于顶点数组、法线向量、纹理坐标、纹理图片则使用标准绘制函数或模型文件进行封装*/
 </script>

 </head>

 <body onload="webGLStart();">
 <a href="http://learningwebgl.com/blog/?p=684">&lt;&lt; Back to Lesson 7</a><br>

 <canvas width="500" height="500" id="lesson07-canvas" style="border: currentColor; border-image: none;"></canvas>

 <br>
 <input id="lighting" type="checkbox" checked=""> Use lighting<br>
 (Use cursor keys to spin the box and <code>Page Up</code>/<code>Page Down</code> to zoom out/in)

 <br>
 <h2>Directional light:</h2>

 <table style="padding: 10px; border: 0px currentColor; border-image: none;">
     <tbody><tr>
         <td><b>Direction:</b>
         <td>X: <input id="lightDirectionX" type="text" value="-0.25">
         <td>Y: <input id="lightDirectionY" type="text" value="-0.25">
         <td>Z: <input id="lightDirectionZ" type="text" value="-1.0">
     </tr>
     <tr>
         <td><b>Colour:</b>
         <td>R: <input id="directionalR" type="text" value="0.8">
         <td>G: <input id="directionalG" type="text" value="0.8">
         <td>B: <input id="directionalB" type="text" value="0.8">
     </tr>
     </tbody></table>

 <h2>Ambient light:</h2>
 <table style="padding: 10px; border: 0px currentColor; border-image: none;">
     <tbody><tr>
         <td><b>Colour:</b>
         <td>R: <input id="ambientR" type="text" value="0.2">
         <td>G: <input id="ambientG" type="text" value="0.2">
         <td>B: <input id="ambientB" type="text" value="0.2">
     </tr>
     </tbody></table>

 <a href="http://learningwebgl.com/blog/?p=684">&lt;&lt; Back to Lesson 7</a>

 </body></html>

 <!DOCTYPE html>
 <html>
 <head lang="en">
 <title>使用Three.js实现上述效果</title>
 <meta charset="UTF-8">
     <link rel="stylesheet" href="../css/webglbook.css" />
     <script src="Three.js"></script>
     <script src="webgl-utils.js"></script>
     <script>

     var renderer = null,
         scene = null,
         camera = null,
         cube = null,
         animating = false;

     function onLoad()
     {
         // Grab our container div
         //取得作为容器的div，事实上容器不局限于div标签
         var container = document.getElementById("container");

         // Create the Three.js renderer, add it to our div
         //建立Three.js渲染器，并把它加入容器div中
         renderer = new THREE.WebGLRenderer( { antialias: true } );
         renderer.setSize(container.offsetWidth, container.offsetHeight);
         container.appendChild( renderer.domElement );

         // Create a new Three.js scene
         //建立一个Three.js场景
         scene = new THREE.Scene();

         // Put in a camera
         //引入一个相机
         camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
         camera.position.set( 0, 0, 3 );

         // Create a directional light to show off the object
         //建立一个方向光来照亮场景中的物体
         var light = new THREE.DirectionalLight( 0xffffff, 1.5);
         light.position.set(0, 0, 1);
         scene.add( light );

         // Create a shaded, texture-mapped cube and add it to the scene
         //建立一个具有阴影效果和纹理效果的立方体，并把它加入到场景中
         // First, create the texture map
         //第一步，建立纹理图片（Three.js不要求图片尺寸是2的整数次方）
         var mapUrl = "molumen_small_funny_angry_monster.jpg";
         var map = THREE.ImageUtils.loadTexture(mapUrl);

         // Now, create a Phong material to show shading; pass in the map
         //建立一个Phong类型的材质对象来表现光照和阴影；把这个材质传入纹理图中
         var material = new THREE.MeshPhongMaterial({ map: map });

         // Create the cube geometry
         //建立一个默认的几何体
         var geometry = new THREE.CubeGeometry(1, 1, 1);

         // And put the geometry and material together into a mesh
         //把“多边形”和“材质”组合成一个“网格”
         cube = new THREE.Mesh(geometry, material);

         // Turn it toward the scene, or we won't see the cube shape!
         //稍微旋转一下物体，否则我们看不出立体的效果！
         cube.rotation.x = Math.PI / 5;
         cube.rotation.y = Math.PI / 5;

         // Add the cube to our scene
         //把物体加入到场景中
         scene.add( cube );

         // Add a mouse up handler to toggle the animation
         //添加鼠标监听
         addMouseHandler();

         // Run our render loop
         //启动渲染循环
         run();
     }

     function run()
     {
         // Render the scene
         //渲染场景，renderer是canvas的绘制上下文，scene是变量映射接口，camera是姿态矩阵和投影矩阵的结合
         renderer.render( scene, camera );

         // Spin the cube for next frame
         //旋转物体生成下一帧画面
         if (animating)
         {
             cube.rotation.y -= 0.01;
         }

         // Ask for another frame
         //请求下一帧（循环）
         requestAnimFrame(run);
     }

     function addMouseHandler()
     {
         var dom = renderer.domElement;

         dom.addEventListener( 'mouseup', onMouseUp, false);
     }

     function onMouseUp    (event)
     {
         event.preventDefault();

         animating = !animating;
     }    

     </script>

 </head>
 <body onLoad="onLoad();" style="">
     <center><h1>Welcome to WebGL!</h1></center>
     <div id="container" style="width:95%; height:80%; position:absolute;"></div>
     <div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">Click to animate the cube</div>

 </body>
 </html>