加入光照、纹理、运动效果 uniform mat3 uNMatrix; varying vec2 vTextureCoord; ) { aTextureCoord; uUseLighting) { { } 44 } varying vec2 vTextureCoord; 50 varying vec3 vLightWeighting; ) { } gl; initGL(canvas) { 69 try { ); canvas.width; canvas.height; (e) { 74 } gl) { ); 77 } 78 } getShader(gl, id) { document.getElementById(id); shaderScript) { ; 85 } ; shaderScript.firstChild; 89 while (k) { ) { k.textContent; 92 } k.nextSibling; 94 } shader; ) { gl.createShader(gl.FRAGMENT_SHADER); ) { gl.createShader(gl.VERTEX_SHADER); { ; 103 } gl.compileShader(shader); gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 109 alert(gl.getShaderInfoLog(shader)); ; 111 } shader; 114 } initShaders() { ); gl.createProgram(); 124 gl.attachShader(shaderProgram, vertexShader); ); 130 } 131 132 gl.useProgram(shaderProgram); ); 135 gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute); ); 138 gl.enableVertexAttribArray(shaderProgram.vertexNormalAttribute); ); 141 gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute); ); ); ); ); ); ); ); ); 151 } handleLoadedTexture(texture) { ); 157 158 gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); ); 165 } crateTexture; 169 var neheTexture; initTexture() { gl.createTexture(); Image(); handleLoadedTexture(crateTexture) 176 } gl.createTexture(); Image(); () { 182 handleLoadedTexture(neheTexture) 183 } ; } mat4.create(); []; mat4.create(); mvPushMatrix() { mat4.create(); 196 mat4.set(mvMatrix, copy); 197 mvMatrixStack.push(copy); 198 } mvPopMatrix() { ) { ; 203 } mvMatrixStack.pop(); 205 } setMatrixUniforms() { mat4.toInverseMat3(mvMatrix, normalMatrix); 214 mat3.transpose(normalMatrix); , normalMatrix); 216 } degToRad(degrees) { ; 221 } ; ; ; ; ; {}; handleKeyDown(event) { ; 238 } handleKeyUp(event) { ; 243 } handleKeys() { ]) { ; 250 } ]) { ; 254 } ]) { ; 258 } ]) { ; 262 } ]) { ; 266 } ]) { ; 270 } 271 } cubeVertexPositionBuffer; 274 var cubeVertexNormalBuffer; 275 var cubeVertexTextureCoordBuffer; 276 var cubeVertexIndexBuffer; 277 var cubeVertexIndexBuffer2; initBuffers() { gl.createBuffer(); 281 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); [ , , , , , , , , , , , , , , , , , , , , , , , , 319 ]; Float32Array(vertices), gl.STATIC_DRAW); ; ; gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer); [ , , , , , , , , , , , , , , , , , , , , , , , ]; Float32Array(vertexNormals), gl.STATIC_DRAW); ; ; gl.createBuffer(); 370 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); [ , , , , , , , , , , , , , , , , , , , , , , , ]; Float32Array(textureCoords), gl.STATIC_DRAW); ; ; gl.createBuffer(); 415 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); [ ]; Uint16Array(cubeVertexIndices), gl.STATIC_DRAW); gl.createBuffer(); 429 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer2); [ ]; Uint16Array(cubeVertexIndices2), gl.STATIC_DRAW); 439 } drawScene() { , gl.viewportWidth, gl.viewportHeight); gl.DEPTH_BUFFER_BIT); ).checked; 448 gl.uniform1i(shaderProgram.useLightingUniform, lighting); (lighting) { 451 gl.uniform3f( 452 shaderProgram.ambientColorUniform, ).value), ).value), ).value) 456 ); [ ).value), ).value), ).value) 461 ]; vec3.create(); 463 vec3.normalize(lightingDirection, adjustedLD); ); 466 gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD); 467 gl.uniform3f( 468 shaderProgram.directionalColorUniform, ).value), ).value), ).value) 472 ); 473 } , pMatrix); 477 mat4.identity(mvMatrix); , z]); ]); ]); gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer); ); 486 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer); ); 488 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer); ); gl.activeTexture(gl.TEXTURE0); 493 gl.bindTexture(gl.TEXTURE_2D, crateTexture); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer); gl.activeTexture(gl.TEXTURE1); 500 gl.bindTexture(gl.TEXTURE_2D, neheTexture); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer2); ); 505 } ; animate() { Date().getTime(); ) { lastTime; ; ; 517 } timeNow; 519 } tick() { } webGLStart() { ); ); handleKeyUp; } Back to Lesson 7Use lighting(Use cursor keys to spin the box and Page Up/Page Down to zoom out/in) Directional light:Direction:X: Y: Z: Colour:R: G: B: Ambient light:Colour:R: G: B: Back to Lesson 7