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>