7、视点，观察目标点，上方向

模型视图矩阵 = 视图矩阵 模型矩阵
从视点看上去的“旋转后的顶点坐标”=模型视图矩阵 原顶点坐标

移动视点与移动被观察对象等效，不过他们的移动方向正好相反
{“eyeX”:0,”eyeY”:0,”eyeZ”:0,”atX”:-0.25,”atY”:-0.25,”atZ”:-0.25,”upX”:0,”upY”:1,”upZ”:0}
=
{“eyeX”:0.25,”eyeY”:0.25,”eyeZ”:0.25,”atX”:0,”atY”:0,”atZ”:0,”upX”:0,”upY”:1,”upZ”:0}

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>Clear canvas</title>
  7. </head>
  9. <body>
  10.     <canvas id="webgl" width="400" height="400">
  11.         Please use the browser supporting "canvas"
  12.     </canvas>
  13.     <div>
  14.         <button onclick="change('add', 'eyeX')">eyeX+</button>
  15.         <button onclick="change('remove', 'eyeX')">eyeX-</button>
  16.         <br />
  17.         <button onclick="change('add', 'eyeY')">eyeY+</button>
  18.         <button onclick="change('remove', 'eyeY')">eyeY-</button>
  19.         <br />
  20.         <button onclick="change('add', 'eyeZ')">eyeZ+</button>
  21.         <button onclick="change('remove', 'eyeZ')">eyeZ-</button>
  22.         <br />
  24.         <button onclick="change('add', 'atX')">atX+</button>
  25.         <button onclick="change('remove', 'atX')">atX-</button>
  26.         <br />
  27.         <button onclick="change('add', 'atY')">atY+</button>
  28.         <button onclick="change('remove', 'atY')">atY-</button>
  29.         <br />
  30.         <button onclick="change('add', 'atZ')">atZ+</button>
  31.         <button onclick="change('remove', 'atZ')">atZ-</button>
  32.         <br />
  34.         <button onclick="change('add', 'upX')">upX+</button>
  35.         <button onclick="change('remove', 'upX')">upX-</button>
  36.         <br />
  37.         <button onclick="change('add', 'upY')">upY+</button>
  38.         <button onclick="change('remove', 'upY')">upY-</button>
  39.         <br />
  40.         <button onclick="change('add', 'upZ')">upZ+</button>
  41.         <button onclick="change('remove', 'upZ')">upZ-</button>
  42.         <br />
  43.         <div>
  44.             <div id="content"></div>
  45.         </div>
  46.     </div>
  47.     <script src="../lib/webgl-utils.js"></script>
  48.     <script src="../lib/webgl-debug.js"></script>
  49.     <script src="../lib/cuon-utils.js"></script>
  50.     <script src="../lib/cuon-matrix.js"></script>
  51.     <script>
  52.         const obj = {
  53.             eyeX: 0.25,
  54.             eyeY: 0.25,
  55.             eyeZ: 0.25,
  56.             atX: 0,
  57.             atY: 0,
  58.             atZ: 0,
  59.             upX: 0,
  60.             upY: 1,
  61.             upZ: 0
  62.         }
  63.         function innerHtml() {
  64.             document.getElementById("content").innerHTML = JSON.stringify(obj)
  65.         }
  66.         function change(type, name) {
  67.             if (type === 'add') {
  68.                 obj[name] += 0.01;
  69.             } else {
  70.                 obj[name] -= 0.01;
  71.             }
  72.             if (obj[name] > 1) {
  73.                 obj[name] = 0;
  74.             } else if (obj[name] < 0) {
  75.                 obj[name] = 1
  76.             }
  77.             main()
  78.             innerHtml()
  79.         }
  80.         // Vertex shader program
  81.         var VSHADER_SOURCE =
  82.             'attribute vec4 a_Position;\n' +
  83.             'attribute vec4 a_Color;\n' +
  84.             'uniform mat4 u_ViewMatrix;\n' + // 视图矩阵
  85.             'varying vec4 v_Color;\n' +
  86.             'void main() {\n' +
  87.             '  gl_Position = u_ViewMatrix * a_Position;\n' + // 视图矩阵 * 原始顶点坐标
  88.             '  v_Color = a_Color;\n' +
  89.             '}\n';
  91.         // Fragment shader program
  92.         var FSHADER_SOURCE =
  93.             '#ifdef GL_ES\n' +
  94.             'precision mediump float;\n' +
  95.             '#endif\n' +
  96.             'varying vec4 v_Color;\n' +
  97.             'void main() {\n' +
  98.             '  gl_FragColor = v_Color;\n' +
  99.             '}\n';
  101.         function main() {
  102.             // Retrieve <canvas> element
  103.             var canvas = document.getElementById('webgl');
  105.             // Get the rendering context for WebGL
  106.             var gl = getWebGLContext(canvas);
  107.             if (!gl) {
  108.                 console.log('Failed to get the rendering context for WebGL');
  109.                 return;
  110.             }
  112.             // Initialize shaders
  113.             if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  114.                 console.log('Failed to intialize shaders.');
  115.                 return;
  116.             }
  118.             // Set the vertex coordinates and color (the blue triangle is in the front)
  119.             var n = initVertexBuffers(gl);
  120.             if (n < 0) {
  121.                 console.log('Failed to set the vertex information');
  122.                 return;
  123.             }
  125.             gl.clearColor(0, 0, 0, 1);
  127.             // 获取试图矩阵变量
  128.             var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  129.             if (!u_ViewMatrix) {
  130.                 console.log('Failed to get the storage locations of u_ViewMatrix');
  131.                 return;
  132.             }
  134.             // 视图矩阵
  135.             var viewMatrix = new Matrix4();
  136.             //  viewMatrix.setLookAt(v1, v2, v3, v4, v5, v6, v7, v8, v9)
  137.             // v1 ～ v3 视点 默认是0，0，0
  138.             // v4 ～ v6 观察目标点，默认是0，0，1
  139.             // v7 ～ v9 上方向，默认是0，1，0
  140.             viewMatrix.setLookAt(
  141.                 obj.eyeX, obj.eyeY, obj.eyeZ, 
  142.                 obj.atX, obj.atY, obj.atZ, 
  143.                 obj.upX, obj.upY, obj.upZ, 
  144.             );
  146.             // 模型矩阵，（平移，旋转）
  147.             var modalMatrix = new Matrix4();
  148.             // angle, x, y, z
  149.             modalMatrix.setRotate(0, 0, 0, 1);
  151.             var modalViewMatrix = viewMatrix.multiply(modalMatrix)
  153.             gl.uniformMatrix4fv(u_ViewMatrix, false, modalViewMatrix.elements);
  155.             gl.clear(gl.COLOR_BUFFER_BIT);
  157.             gl.drawArrays(gl.TRIANGLES, 0, n);
  158.         }
  160.         function initVertexBuffers(gl) {
  161.             var verticesColors = new Float32Array([
  162.                 // 前三个点是顶点坐标，后三个点是颜色坐标
  163.                 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 绿色三角形在最后面
  164.                 -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
  165.                 0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
  167.                 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形在中间
  168.                 -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
  169.                 0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
  171.                 0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // 蓝色三角形在最前面
  172.                 -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
  173.                 0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
  174.             ]);
  175.             var n = 9;
  177.             var vertexColorbuffer = gl.createBuffer();
  178.             if (!vertexColorbuffer) {
  179.                 console.log('Failed to create the buffer object');
  180.                 return -1;
  181.             }
  183.             gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  184.             gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  186.             var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  187.             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  188.             if (a_Position < 0) {
  189.                 console.log('Failed to get the storage location of a_Position');
  190.                 return -1;
  191.             }
  192.             gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  193.             gl.enableVertexAttribArray(a_Position);
  195.             var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  196.             if (a_Color < 0) {
  197.                 console.log('Failed to get the storage location of a_Color');
  198.                 return -1;
  199.             }
  200.             gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  201.             gl.enableVertexAttribArray(a_Color);
  203.             gl.bindBuffer(gl.ARRAY_BUFFER, null);
  205.             return n;
  206.         }
  209.         main();
  212.     </script>
  213. </body>
  215. </html>

7.1 调整盒子的可视空间

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <title>Clear canvas</title>
  7. </head>
  9. <body>
  10.   <canvas id="webgl" width="400" height="400">
  11.     Please use the browser supporting "canvas"
  12.   </canvas>
  13.   <p id="nearFar">The near and far values are displayed here.</p>
  14.   <p id="nearFar">The near and far values are displayed here.</p>
  16.   <script src="../lib/webgl-utils.js"></script>
  17.   <script src="../lib/webgl-debug.js"></script>
  18.   <script src="../lib/cuon-utils.js"></script>
  19.   <script src="../lib/cuon-matrix.js"></script>
  20.   <script>
  21.     // OrthoView.js (c) 2012 matsuda
  22. // Vertex shader program
  23. var VSHADER_SOURCE =
  24.   'attribute vec4 a_Position;\n' +
  25.   'attribute vec4 a_Color;\n' +
  26.   'uniform mat4 u_ProjMatrix;\n' +
  27.   'varying vec4 v_Color;\n' +
  28.   'void main() {\n' +
  29.   '  gl_Position = u_ProjMatrix * a_Position;\n' +
  30.   '  v_Color = a_Color;\n' +
  31.   '}\n';
  33. // Fragment shader program
  34. var FSHADER_SOURCE =
  35.   '#ifdef GL_ES\n' +
  36.   'precision mediump float;\n' +
  37.   '#endif\n' +
  38.   'varying vec4 v_Color;\n' +
  39.   'void main() {\n' +
  40.   '  gl_FragColor = v_Color;\n' +
  41.   '}\n';
  43. function main() {
  44.   // Retrieve <canvas> element
  45.   var canvas = document.getElementById('webgl');
  46.   // Retrieve the nearFar element
  47.   var nf = document.getElementById('nearFar');
  49.   // Get the rendering context for WebGL
  50.   var gl = getWebGLContext(canvas);
  51.   if (!gl) {
  52.     console.log('Failed to get the rendering context for WebGL');
  53.     return;
  54.   }
  56.   // Initialize shaders
  57.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  58.     console.log('Failed to intialize shaders.');
  59.     return;
  60.   }
  62.   // Set the vertex coordinates and color (the blue triangle is in the front)
  63.   var n =  initVertexBuffers(gl);
  64.   if (n < 0) {
  65.     console.log('Failed to set the vertex information');
  66.     return;
  67.   }
  69.   // Specify the color for clearing <canvas>
  70.   gl.clearColor(0, 0, 0, 1);
  72.   // get the storage location of u_ProjMatrix
  73.   var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
  74.   if (!u_ProjMatrix) { 
  75.     console.log('Failed to get the storage location of u_ProjMatrix');
  76.     return;
  77.   }
  79.   // Create the matrix to set the eye point, and the line of sight
  80.   var projMatrix = new Matrix4();
  81.   // Register the event handler to be called on key press
  82.   document.onkeydown = function(ev){ keydown(ev, gl, n, u_ProjMatrix, projMatrix, nf); };
  84.   draw(gl, n, u_ProjMatrix, projMatrix, nf);   // Draw the triangles
  85. }
  87. function initVertexBuffers(gl) {
  88.   var verticesColors = new Float32Array([
  89.     // Vertex coordinates and color
  90.      0.0,  0.6,  -0.4,  0.4,  1.0,  0.4, // The back green one
  91.     -0.5, -0.4,  -0.4,  0.4,  1.0,  0.4,
  92.      0.5, -0.4,  -0.4,  1.0,  0.4,  0.4, 
  94.      0.5,  0.4,  -0.2,  1.0,  0.4,  0.4, // The middle yellow one
  95.     -0.5,  0.4,  -0.2,  1.0,  1.0,  0.4,
  96.      0.0, -0.6,  -0.2,  1.0,  1.0,  0.4, 
  98.      0.0,  0.5,   0.0,  0.4,  0.4,  1.0, // The front blue one 
  99.     -0.5, -0.5,   0.0,  0.4,  0.4,  1.0,
  100.      0.5, -0.5,   0.0,  1.0,  0.4,  0.4, 
  101.   ]);
  102.   var n = 9;
  104.   // Create a buffer object
  105.   var vertexColorbuffer = gl.createBuffer();  
  106.   if (!vertexColorbuffer) {
  107.     console.log('Failed to create the buffer object');
  108.     return -1;
  109.   }
  111.   // Write the vertex coordinates and color to the buffer object
  112.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  113.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  115.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  116.   // Assign the buffer object to a_Position and enable the assignment
  117.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  118.   if(a_Position < 0) {
  119.     console.log('Failed to get the storage location of a_Position');
  120.     return -1;
  121.   }
  122.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  123.   gl.enableVertexAttribArray(a_Position);
  124.   // Assign the buffer object to a_Color and enable the assignment
  125.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  126.   if(a_Color < 0) {
  127.     console.log('Failed to get the storage location of a_Color');
  128.     return -1;
  129.   }
  130.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  131.   gl.enableVertexAttribArray(a_Color);
  133.   return n;
  134. }
  136. // The distances to the near and far clipping plane
  137. var g_near = 0.0, g_far = 0.5;
  138. function keydown(ev, gl, n, u_ProjMatrix, projMatrix, nf) {
  139.   switch(ev.keyCode){
  140.     case 39: g_near += 0.01; break;  // The right arrow key was pressed
  141.     case 37: g_near -= 0.01; break;  // The left arrow key was pressed
  142.     case 38: g_far += 0.01;  break;  // The up arrow key was pressed
  143.     case 40: g_far -= 0.01;  break;  // The down arrow key was pressed
  144.     default: return; // Prevent the unnecessary drawing
  145.   }
  147.   draw(gl, n, u_ProjMatrix, projMatrix, nf);    
  148. }
  150. function draw(gl, n, u_ProjMatrix, projMatrix, nf) {
  151.   // projMatrix.setOrtho(left, right, bottom, top, near, far) 调整可视空间
  152.   // projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, g_near, g_far); // 将视点置于原点处
  153.   projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, g_near, g_far);
  155.   // Pass the projection matrix to u_ProjMatrix
  156.   gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  158.   gl.clear(gl.COLOR_BUFFER_BIT);       // Clear <canvas>
  160.   // Display the current near and far values
  161.   nf.innerHTML = 'near: ' + Math.round(g_near * 100)/100 + ', far: ' + Math.round(g_far*100)/100;
  163.   gl.drawArrays(gl.TRIANGLES, 0, n);   // Draw the triangles
  164. }
  168.     main();
  171.   </script>
  172. </body>
  174. </html>

7.2 通过可视空间修复缺掉的角

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8" />
  6.     <title>Clear canvas</title>
  7. </head>
  9. <body>
  10.     <canvas id="webgl" width="400" height="400">
  11.         Please use the browser supporting "canvas"
  12.     </canvas>
  13.     <div>
  14.         <button onclick="change('add', 'eyeX')">eyeX+</button>
  15.         <button onclick="change('remove', 'eyeX')">eyeX-</button>
  16.         <br />
  17.         <button onclick="change('add', 'eyeY')">eyeY+</button>
  18.         <button onclick="change('remove', 'eyeY')">eyeY-</button>
  19.         <br />
  20.         <button onclick="change('add', 'eyeZ')">eyeZ+</button>
  21.         <button onclick="change('remove', 'eyeZ')">eyeZ-</button>
  22.         <br />
  24.         <button onclick="change('add', 'atX')">atX+</button>
  25.         <button onclick="change('remove', 'atX')">atX-</button>
  26.         <br />
  27.         <button onclick="change('add', 'atY')">atY+</button>
  28.         <button onclick="change('remove', 'atY')">atY-</button>
  29.         <br />
  30.         <button onclick="change('add', 'atZ')">atZ+</button>
  31.         <button onclick="change('remove', 'atZ')">atZ-</button>
  32.         <br />
  34.         <button onclick="change('add', 'upX')">upX+</button>
  35.         <button onclick="change('remove', 'upX')">upX-</button>
  36.         <br />
  37.         <button onclick="change('add', 'upY')">upY+</button>
  38.         <button onclick="change('remove', 'upY')">upY-</button>
  39.         <br />
  40.         <button onclick="change('add', 'upZ')">upZ+</button>
  41.         <button onclick="change('remove', 'upZ')">upZ-</button>
  42.         <br />
  43.         <div>
  44.             <div id="content"></div>
  45.         </div>
  46.     </div>
  47.     <script src="../lib/webgl-utils.js"></script>
  48.     <script src="../lib/webgl-debug.js"></script>
  49.     <script src="../lib/cuon-utils.js"></script>
  50.     <script src="../lib/cuon-matrix.js"></script>
  51.     <script>
  52.         const obj = {
  53.             eyeX: 0.25,
  54.             eyeY: 0.25,
  55.             eyeZ: 0.25,
  56.             atX: 0,
  57.             atY: 0,
  58.             atZ: 0,
  59.             upX: 0,
  60.             upY: 1,
  61.             upZ: 0
  62.         }
  63.         function innerHtml() {
  64.             document.getElementById("content").innerHTML = JSON.stringify(obj)
  65.         }
  66.         function change(type, name) {
  67.             if (type === 'add') {
  68.                 obj[name] += 0.01;
  69.             } else {
  70.                 obj[name] -= 0.01;
  71.             }
  72.             if (obj[name] > 1) {
  73.                 obj[name] = 0;
  74.             } else if (obj[name] < 0) {
  75.                 obj[name] = 1
  76.             }
  77.             main()
  78.             innerHtml()
  79.         }
  80.         // Vertex shader program
  81.         var VSHADER_SOURCE =
  82.             'attribute vec4 a_Position;\n' +
  83.             'attribute vec4 a_Color;\n' +
  84.             'uniform mat4 u_ViewMatrix;\n' + // 视图矩阵
  85.             'uniform mat4 u_ProjMatrix;\n'+
  86.             'varying vec4 v_Color;\n' +
  87.             'void main() {\n' +
  88.             '  gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;\n' + // 视图矩阵 * 原始顶点坐标
  89.             '  v_Color = a_Color;\n' +
  90.             '}\n';
  92.         // Fragment shader program
  93.         var FSHADER_SOURCE =
  94.             '#ifdef GL_ES\n' +
  95.             'precision mediump float;\n' +
  96.             '#endif\n' +
  97.             'varying vec4 v_Color;\n' +
  98.             'void main() {\n' +
  99.             '  gl_FragColor = v_Color;\n' +
  100.             '}\n';
  102.         function main() {
  103.             // Retrieve <canvas> element
  104.             var canvas = document.getElementById('webgl');
  106.             // Get the rendering context for WebGL
  107.             var gl = getWebGLContext(canvas);
  108.             if (!gl) {
  109.                 console.log('Failed to get the rendering context for WebGL');
  110.                 return;
  111.             }
  113.             // Initialize shaders
  114.             if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  115.                 console.log('Failed to intialize shaders.');
  116.                 return;
  117.             }
  119.             // Set the vertex coordinates and color (the blue triangle is in the front)
  120.             var n = initVertexBuffers(gl);
  121.             if (n < 0) {
  122.                 console.log('Failed to set the vertex information');
  123.                 return;
  124.             }
  126.             gl.clearColor(0, 0, 0, 1);
  128.             // 获取视图矩阵变量
  129.             var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  130.             // 获取投影矩阵变量
  131.             var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
  132.             if (!u_ViewMatrix) {
  133.                 console.log('Failed to get the storage locations of u_ViewMatrix');
  134.                 return;
  135.             }
  137.             // 视图矩阵
  138.             var viewMatrix = new Matrix4();
  139.             //  viewMatrix.setLookAt(v1, v2, v3, v4, v5, v6, v7, v8, v9)
  140.             // v1 ～ v3 视点 默认是0，0，0
  141.             // v4 ～ v6 观察目标点，默认是0，0，1
  142.             // v7 ～ v9 上方向，默认是0，1，0
  143.             viewMatrix.setLookAt(
  144.                 obj.eyeX, obj.eyeY, obj.eyeZ,
  145.                 obj.atX, obj.atY, obj.atZ,
  146.                 obj.upX, obj.upY, obj.upZ,
  147.             );
  149.             // 模型矩阵，（平移，旋转）
  150.             var modalMatrix = new Matrix4();
  151.             // angle, x, y, z
  152.             modalMatrix.setRotate(0, 0, 0, 1);
  154.             var modalViewMatrix = viewMatrix.multiply(modalMatrix)
  156.             gl.uniformMatrix4fv(u_ViewMatrix, false, modalViewMatrix.elements);
  158.             var projMatrix = new Matrix4();
  159.             // 设置可视空间，定义正射投影矩阵
  160.             // projMatrix.setOrtho(left, right, top, bottom, near, far);
  161.             // near，far 指定近裁剪面和远裁剪面的位置，即可视空间的近边界和远边界
  162.             projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 2.0);
  163.             gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  165.             gl.clear(gl.COLOR_BUFFER_BIT);
  167.             gl.drawArrays(gl.TRIANGLES, 0, n);
  168.         }
  170.         function initVertexBuffers(gl) {
  171.             var verticesColors = new Float32Array([
  172.                 // 前三个点是顶点坐标，后三个点是颜色坐标
  173.                 0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 绿色三角形在最后面
  174.                 -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
  175.                 0.5, -0.5, -0.4, 1.0, 0.4, 0.4,
  177.                 0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形在中间
  178.                 -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
  179.                 0.0, -0.6, -0.2, 1.0, 1.0, 0.4,
  181.                 0.0, 0.5, 0.0, 0.4, 0.4, 1.0,  // 蓝色三角形在最前面
  182.                 -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
  183.                 0.5, -0.5, 0.0, 1.0, 0.4, 0.4,
  184.             ]);
  185.             var n = 9;
  187.             var vertexColorbuffer = gl.createBuffer();
  188.             if (!vertexColorbuffer) {
  189.                 console.log('Failed to create the buffer object');
  190.                 return -1;
  191.             }
  193.             gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  194.             gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  196.             var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  197.             var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  198.             if (a_Position < 0) {
  199.                 console.log('Failed to get the storage location of a_Position');
  200.                 return -1;
  201.             }
  202.             gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  203.             gl.enableVertexAttribArray(a_Position);
  205.             var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  206.             if (a_Color < 0) {
  207.                 console.log('Failed to get the storage location of a_Color');
  208.                 return -1;
  209.             }
  210.             gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  211.             gl.enableVertexAttribArray(a_Color);
  213.             gl.bindBuffer(gl.ARRAY_BUFFER, null);
  215.             return n;
  216.         }
  219.         main();
  222.     </script>
  223. </body>
  225. </html>

7.3透视投影矩阵

  1. // PerspectiveView.js (c) 2012 matsuda
  2. // Vertex shader program
  3. var VSHADER_SOURCE =
  4.   'attribute vec4 a_Position;\n' +
  5.   'attribute vec4 a_Color;\n' +
  6.   'uniform mat4 u_ViewMatrix;\n' +
  7.   'uniform mat4 u_ProjMatrix;\n' +
  8.   'varying vec4 v_Color;\n' +
  9.   'void main() {\n' +
  10.   '  gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;\n' +
  11.   '  v_Color = a_Color;\n' +
  12.   '}\n';
  14. // Fragment shader program
  15. var FSHADER_SOURCE =
  16.   '#ifdef GL_ES\n' +
  17.   'precision mediump float;\n' +
  18.   '#endif\n' +
  19.   'varying vec4 v_Color;\n' +
  20.   'void main() {\n' +
  21.   '  gl_FragColor = v_Color;\n' +
  22.   '}\n';
  24. function main() {
  25.   // Retrieve <canvas> element
  26.   var canvas = document.getElementById('webgl');
  28.   // Get the rendering context for WebGL
  29.   var gl = getWebGLContext(canvas);
  30.   if (!gl) {
  31.     console.log('Failed to get the rendering context for WebGL');
  32.     return;
  33.   }
  35.   // Initialize shaders
  36.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  37.     console.log('Failed to intialize shaders.');
  38.     return;
  39.   }
  41.   // Set the vertex coordinates and color (the blue triangle is in the front)
  42.   var n = initVertexBuffers(gl);
  43.   if (n < 0) {
  44.     console.log('Failed to set the vertex information');
  45.     return;
  46.   }
  48.   // Specify the color for clearing <canvas>
  49.   gl.clearColor(0, 0, 0, 1);
  51.   var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  52.   var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
  53.   if (!u_ViewMatrix || !u_ProjMatrix) { 
  54.     console.log('Failed to get the storage location of u_ViewMatrix and/or u_ProjMatrix');
  55.     return;
  56.   }
  58.   var viewMatrix = new Matrix4();　// 视图矩阵
  59.   var projMatrix = new Matrix4();  // 投影矩阵，这里是透视投影矩阵
  60.   // 旋转，平移，缩放，的矩阵被称为模型矩阵
  61.   // 视点(0,0,0)，观察点(0,0,-1)，上方向(如果上方向是y轴的正方向，那么upX，upY，upZ就是0，1，0) 组成 视图矩阵
  62.   // 在平面直角坐标系中, y轴正方向 是指 从原点沿纵轴向上的方向.”
  63.   // 模型视图矩阵 = 视图矩阵 * 模型矩阵
  64.   // 模型视图矩阵 * 顶点坐标
  65.   // 投影矩阵 * 模型视图矩阵 * 顶点坐标 
  66.   // 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点坐标
  68.   // 定义 eyeX，eyeY，eyeZ，atX，atY，atX，upX，upY，upZ
  69.   viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
  70.   // 设置可视空间，定义透视投影矩阵
  71.   // projMatrix.setPerspective(fov, aspect, near, far)
  72.   // fov：指定垂直视角，即可视空间顶面和地面间的夹角，必须大于0
  73.   // aspect：指定近裁剪面的宽高比
  74.   // near：近裁剪面的位置，必须大于0
  75.   // far：远裁剪面的位置，必须大于0
  77.   projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
  80.   gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
  81.   gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  83.   // Clear <canvas>
  84.   gl.clear(gl.COLOR_BUFFER_BIT);
  86.   // Draw the triangles
  87.   gl.drawArrays(gl.TRIANGLES, 0, n);
  88. }
  90. function initVertexBuffers(gl) {
  91.   // 三角形的位置x，y完全相同
  92.   // 渲染出的三角形距离远的看上去变小了，其次，三角形被不同程度地平移以贴近中心线(即视线)，
  93.   // 使他们看上去在视线的左右排出了两列
  94.   var verticesColors = new Float32Array([
  95.     // 右侧三个三角形
  96.     0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // 绿色
  97.     0.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
  98.     1.25, -1.0,  -4.0,  1.0,  0.4,  0.4, 
  100.     0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, //黄色
  101.     0.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
  102.     1.25, -1.0,  -2.0,  1.0,  0.4,  0.4, 
  104.     0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // 蓝色
  105.     0.25, -1.0,   0.0,  0.4,  0.4,  1.0,
  106.     1.25, -1.0,   0.0,  1.0,  0.4,  0.4, 
  108.     // 左侧三个三角形
  109.    -0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // 绿色
  110.    -1.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
  111.    -0.25, -1.0,  -4.0,  1.0,  0.4,  0.4, 
  113.    -0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, // 黄色
  114.    -1.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
  115.    -0.25, -1.0,  -2.0,  1.0,  0.4,  0.4, 
  117.    -0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // 蓝色
  118.    -1.25, -1.0,   0.0,  0.4,  0.4,  1.0,
  119.    -0.25, -1.0,   0.0,  1.0,  0.4,  0.4, 
  120.   ]);
  121.   var n = 18; // Three vertices per triangle * 6
  123.   // Create a buffer object
  124.   var vertexColorbuffer = gl.createBuffer();  
  125.   if (!vertexColorbuffer) {
  126.     console.log('Failed to create the buffer object');
  127.     return -1;
  128.   }
  130.   // Write the vertex coordinates and color to the buffer object
  131.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  132.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  134.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  136.   // Assign the buffer object to a_Position and enable the assignment
  137.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  138.   if(a_Position < 0) {
  139.     console.log('Failed to get the storage location of a_Position');
  140.     return -1;
  141.   }
  142.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  143.   gl.enableVertexAttribArray(a_Position);
  145.   // Assign the buffer object to a_Color and enable the assignment
  146.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  147.   if(a_Color < 0) {
  148.     console.log('Failed to get the storage location of a_Color');
  149.     return -1;
  150.   }
  152.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  153.   gl.enableVertexAttribArray(a_Color);
  155.   return n;
  156. }

7.4 在上一个例子，绘制中间的三个三角形，通过模型矩阵，绘制两次，一次偏移0.75，一次偏移-0.75，达到和上个例子一样的效果

  1. // PerspectiveView.js (c) 2012 matsuda
  2. // Vertex shader program
  3. var VSHADER_SOURCE =
  4.   'attribute vec4 a_Position;\n' +
  5.   'attribute vec4 a_Color;\n' +
  6.   'uniform mat4 u_ViewMatrix;\n' +
  7.   'uniform mat4 u_ProjMatrix;\n' +
  8.   'uniform mat4 u_ModelMatrix;\n' +
  9.   'varying vec4 v_Color;\n' +
  10.   'void main() {\n' +
  11.   // 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点位置
  12.   '  gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;\n' +
  13.   '  v_Color = a_Color;\n' +
  14.   '}\n';
  16. // Fragment shader program
  17. var FSHADER_SOURCE =
  18.   '#ifdef GL_ES\n' +
  19.   'precision mediump float;\n' +
  20.   '#endif\n' +
  21.   'varying vec4 v_Color;\n' +
  22.   'void main() {\n' +
  23.   '  gl_FragColor = v_Color;\n' +
  24.   '}\n';
  26. function main() {
  27.   // Retrieve <canvas> element
  28.   var canvas = document.getElementById('webgl');
  30.   // Get the rendering context for WebGL
  31.   var gl = getWebGLContext(canvas);
  32.   if (!gl) {
  33.     console.log('Failed to get the rendering context for WebGL');
  34.     return;
  35.   }
  37.   // Initialize shaders
  38.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  39.     console.log('Failed to intialize shaders.');
  40.     return;
  41.   }
  43.   // Set the vertex coordinates and color (the blue triangle is in the front)
  44.   var n = initVertexBuffers(gl);
  45.   if (n < 0) {
  46.     console.log('Failed to set the vertex information');
  47.     return;
  48.   }
  50.   // Specify the color for clearing <canvas>
  51.   gl.clearColor(0, 0, 0, 1);
  53.   var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  54.   var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
  55.   var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix")
  56.   if (!u_ViewMatrix || !u_ProjMatrix || !u_ModelMatrix) { 
  57.     throw new TypeError("获取uniform变量失败")
  58.   }
  60.   var viewMatrix = new Matrix4();　// 视图矩阵
  61.   var projMatrix = new Matrix4();  // 透视投影矩阵
  62.   var modelMatrix = new Matrix4(); // 模型矩阵
  63.   // 旋转，平移，缩放，的矩阵被称为模型矩阵
  64.   // 视点(0,0,0)，观察点(0,0,-1)，上方向(如果上方向是y轴的正方向，那么upX，upY，upZ就是0，1，0) 组成 视图矩阵
  65.   // 在平面直角坐标系中, y轴正方向 是指 从原点沿纵轴向上的方向.”
  66.   // 模型视图矩阵 = 视图矩阵 * 模型矩阵
  67.   // 模型视图矩阵 * 顶点坐标
  68.   // 透视投影矩阵 * 模型视图矩阵 * 顶点坐标 
  69.   // 透视投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点坐标
  71.   // 模型矩阵，平移0.75
  72.   modelMatrix.setTranslate(0.75, 0, 0);
  73.   // 定义 eyeX，eyeY，eyeZ，atX，atY，atX，upX，upY，upZ
  74.   viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
  75.   // 定义透视投影矩阵
  76.   // projMatrix.setPerspective(fov, aspect, near, far)
  77.   // fov：指定垂直视角，即可视空间顶面和地面间的夹角，必须大于0
  78.   // aspect：指定近裁剪面的宽高比
  79.   // near：近裁剪面的位置，必须大于0
  80.   // far：远裁剪面的位置，必须大于0
  81.   projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
  83.   gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  84.   gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
  85.   gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  87.   // Clear <canvas>
  88.   gl.clear(gl.COLOR_BUFFER_BIT);
  89.   // Draw the triangles
  90.   gl.drawArrays(gl.TRIANGLES, 0, n);
  91.   // 设置矩阵
  92.   modelMatrix.setTranslate(-0.75, 0, 0);
  93.   gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  94.   gl.drawArrays(gl.TRIANGLES, 0, n);
  95. }
  97. function initVertexBuffers(gl) {
  98.   // 三角形的位置x，y完全相同
  99.   // 渲染出的三角形距离远的看上去变小了，其次，三角形被不同程度地平移以贴近中心线(即视线)，
  100.   // 使他们看上去在视线的左右排出了两列
  101.   var verticesColors = new Float32Array([
  102.     // Vertex coordinates and color
  103.      0.0,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
  104.     -0.5, -1.0,  -4.0,  0.4,  1.0,  0.4,
  105.      0.5, -1.0,  -4.0,  1.0,  0.4,  0.4, 
  107.      0.0,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
  108.     -0.5, -1.0,  -2.0,  1.0,  1.0,  0.4,
  109.      0.5, -1.0,  -2.0,  1.0,  0.4,  0.4, 
  111.      0.0,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
  112.     -0.5, -1.0,   0.0,  0.4,  0.4,  1.0,
  113.      0.5, -1.0,   0.0,  1.0,  0.4,  0.4, 
  114.   ]);
  115.   var n = 9;
  117.   var vertexColorbuffer = gl.createBuffer();  
  118.   if (!vertexColorbuffer) {
  119.     console.log('Failed to create the buffer object');
  120.     return -1;
  121.   }
  123.   // Write the vertex coordinates and color to the buffer object
  124.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  125.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  127.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  129.   // Assign the buffer object to a_Position and enable the assignment
  130.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  131.   if(a_Position < 0) {
  132.     console.log('Failed to get the storage location of a_Position');
  133.     return -1;
  134.   }
  135.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  136.   gl.enableVertexAttribArray(a_Position);
  138.   // Assign the buffer object to a_Color and enable the assignment
  139.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  140.   if(a_Color < 0) {
  141.     console.log('Failed to get the storage location of a_Color');
  142.     return -1;
  143.   }
  145.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  146.   gl.enableVertexAttribArray(a_Color);
  148.   return n;
  149. }

7.5 在7.4的例子上，合并了 投影矩阵，视图矩阵，模型矩阵

  1. // PerspectiveView.js (c) 2012 matsuda
  2. // Vertex shader program
  3. var VSHADER_SOURCE =
  4.   'attribute vec4 a_Position;\n' +
  5.   'attribute vec4 a_Color;\n' +
  6.   // 'uniform mat4 u_ViewMatrix;\n' +
  7.   // 'uniform mat4 u_ProjMatrix;\n' +
  8.   // 'uniform mat4 u_ModelMatrix;\n' +
  9.   'uniform mat4 u_MvpMatrix;\n' +
  10.   'varying vec4 v_Color;\n' +
  11.   'void main() {\n' +
  12.   // 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点位置
  13.   // '  gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;\n' +
  14.   // 合并 投影矩阵 * 视图矩阵 * 模型矩阵 这三个矩阵
  15.   '  gl_Position = u_MvpMatrix * a_Position;\n' + 
  16.   '  v_Color = a_Color;\n' +
  17.   '}\n';
  19. // Fragment shader program
  20. var FSHADER_SOURCE =
  21.   '#ifdef GL_ES\n' +
  22.   'precision mediump float;\n' +
  23.   '#endif\n' +
  24.   'varying vec4 v_Color;\n' +
  25.   'void main() {\n' +
  26.   '  gl_FragColor = v_Color;\n' +
  27.   '}\n';
  29. function main() {
  30.   // Retrieve <canvas> element
  31.   var canvas = document.getElementById('webgl');
  33.   // Get the rendering context for WebGL
  34.   var gl = getWebGLContext(canvas);
  35.   if (!gl) {
  36.     console.log('Failed to get the rendering context for WebGL');
  37.     return;
  38.   }
  40.   // Initialize shaders
  41.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  42.     throw new TypeError("着色器初始化失败")
  43.     return;
  44.   }
  46.   // Set the vertex coordinates and color (the blue triangle is in the front)
  47.   var n = initVertexBuffers(gl);
  48.   if (n < 0) {
  49.     console.log('Failed to set the vertex information');
  50.     return;
  51.   }
  53.   // Specify the color for clearing <canvas>
  54.   gl.clearColor(0, 0, 0, 1);
  56.   // var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  57.   // var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
  58.   // var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix")
  59.   var u_MvpMatrix = gl.getUniformLocation(gl.program, "u_MvpMatrix")
  60.   if (!u_MvpMatrix) { 
  61.     throw new TypeError("获取uniform变量失败")
  62.   }
  64.   var viewMatrix = new Matrix4();　// 视图矩阵
  65.   var projMatrix = new Matrix4();  // 透视投影矩阵
  66.   var modelMatrix = new Matrix4(); // 模型矩阵
  67.   var mvpMatrix = new Matrix4();
  68.   // 旋转，平移，缩放，的矩阵被称为模型矩阵
  69.   // 视点(0,0,0)，观察点(0,0,-1)，上方向(如果上方向是y轴的正方向，那么upX，upY，upZ就是0，1，0) 组成 视图矩阵
  70.   // 在平面直角坐标系中, y轴正方向 是指 从原点沿纵轴向上的方向.”
  71.   // 模型视图矩阵 = 视图矩阵 * 模型矩阵
  72.   // 模型视图矩阵 * 顶点坐标
  73.   // 透视投影矩阵 * 模型视图矩阵 * 顶点坐标 
  74.   // 透视投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点坐标
  76.   // 模型矩阵，平移0.75
  77.   modelMatrix.setTranslate(0.75, 0, 0);
  78.   // 定义 eyeX，eyeY，eyeZ，atX，atY，atX，upX，upY，upZ
  79.   viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
  80.   // 定义透视投影矩阵
  81.   // projMatrix.setPerspective(fov, aspect, near, far)
  82.   // fov：指定垂直视角，即可视空间顶面和地面间的夹角，必须大于0
  83.   // aspect：指定近裁剪面的宽高比
  84.   // near：近裁剪面的位置，必须大于0
  85.   // far：远裁剪面的位置，必须大于0
  86.   projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
  88.   mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)
  89.   gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  90.   // gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  91.   // gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
  92.   // gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  94.   // Clear <canvas>
  95.   gl.clear(gl.COLOR_BUFFER_BIT);
  96.   // Draw the triangles
  97.   gl.drawArrays(gl.TRIANGLES, 0, n);
  98.   // 设置矩阵
  99.   modelMatrix.setTranslate(-0.75, 0, 0);
  100.   mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)
  101.   gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  102.   gl.drawArrays(gl.TRIANGLES, 0, n);
  103. }
  105. function initVertexBuffers(gl) {
  106.   // 三角形的位置x，y完全相同
  107.   // 渲染出的三角形距离远的看上去变小了，其次，三角形被不同程度地平移以贴近中心线(即视线)，
  108.   // 使他们看上去在视线的左右排出了两列
  109.   var verticesColors = new Float32Array([
  110.     // Vertex coordinates and color
  111.      0.0,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
  112.     -0.5, -1.0,  -4.0,  0.4,  1.0,  0.4,
  113.      0.5, -1.0,  -4.0,  1.0,  0.4,  0.4, 
  115.      0.0,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
  116.     -0.5, -1.0,  -2.0,  1.0,  1.0,  0.4,
  117.      0.5, -1.0,  -2.0,  1.0,  0.4,  0.4, 
  119.      0.0,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
  120.     -0.5, -1.0,   0.0,  0.4,  0.4,  1.0,
  121.      0.5, -1.0,   0.0,  1.0,  0.4,  0.4, 
  122.   ]);
  123.   var n = 9;
  125.   var vertexColorbuffer = gl.createBuffer();  
  126.   if (!vertexColorbuffer) {
  127.     console.log('Failed to create the buffer object');
  128.     return -1;
  129.   }
  131.   // Write the vertex coordinates and color to the buffer object
  132.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  133.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  135.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  137.   // Assign the buffer object to a_Position and enable the assignment
  138.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  139.   if(a_Position < 0) {
  140.     console.log('Failed to get the storage location of a_Position');
  141.     return -1;
  142.   }
  143.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  144.   gl.enableVertexAttribArray(a_Position);
  146.   // Assign the buffer object to a_Color and enable the assignment
  147.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  148.   if(a_Color < 0) {
  149.     console.log('Failed to get the storage location of a_Color');
  150.     return -1;
  151.   }
  153.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  154.   gl.enableVertexAttribArray(a_Color);
  156.   return n;
  157. }

7.6 隐藏面清除功能开启

原来的例子是先画远的，在画近处的内容，这样有一个问题，后面画的内容会出现在画布中，他应该被挡住才是的，开启隐藏面清除功能，可以解决此问题
// 开启隐藏面消除功能
gl.enable(gl.DEPTH_TEST);
// 清除默认颜色和深度缓冲区
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  1. // PerspectiveView.js (c) 2012 matsuda
  2. // Vertex shader program
  3. var VSHADER_SOURCE =
  4.   'attribute vec4 a_Position;\n' +
  5.   'attribute vec4 a_Color;\n' +
  6.   // 'uniform mat4 u_ViewMatrix;\n' +
  7.   // 'uniform mat4 u_ProjMatrix;\n' +
  8.   // 'uniform mat4 u_ModelMatrix;\n' +
  9.   'uniform mat4 u_MvpMatrix;\n' +
  10.   'varying vec4 v_Color;\n' +
  11.   'void main() {\n' +
  12.   // 投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点位置
  13.   // '  gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;\n' +
  14.   // 合并 投影矩阵 * 视图矩阵 * 模型矩阵 这三个矩阵
  15.   '  gl_Position = u_MvpMatrix * a_Position;\n' + 
  16.   '  v_Color = a_Color;\n' +
  17.   '}\n';
  19. // Fragment shader program
  20. var FSHADER_SOURCE =
  21.   '#ifdef GL_ES\n' +
  22.   'precision mediump float;\n' +
  23.   '#endif\n' +
  24.   'varying vec4 v_Color;\n' +
  25.   'void main() {\n' +
  26.   '  gl_FragColor = v_Color;\n' +
  27.   '}\n';
  29. function main() {
  30.   // Retrieve <canvas> element
  31.   var canvas = document.getElementById('webgl');
  33.   // Get the rendering context for WebGL
  34.   var gl = getWebGLContext(canvas);
  35.   if (!gl) {
  36.     console.log('Failed to get the rendering context for WebGL');
  37.     return;
  38.   }
  40.   // Initialize shaders
  41.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  42.     throw new TypeError("着色器初始化失败")
  43.     return;
  44.   }
  46.   // Set the vertex coordinates and color (the blue triangle is in the front)
  47.   var n = initVertexBuffers(gl);
  48.   if (n < 0) {
  49.     console.log('Failed to set the vertex information');
  50.     return;
  51.   }
  53.   // Specify the color for clearing <canvas>
  54.   gl.clearColor(0, 0, 0, 1);
  56.   // var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
  57.   // var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
  58.   // var u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix")
  59.   var u_MvpMatrix = gl.getUniformLocation(gl.program, "u_MvpMatrix")
  60.   if (!u_MvpMatrix) { 
  61.     throw new TypeError("获取uniform变量失败")
  62.   }
  64.   var viewMatrix = new Matrix4();　// 视图矩阵
  65.   var projMatrix = new Matrix4();  // 透视投影矩阵
  66.   var modelMatrix = new Matrix4(); // 模型矩阵
  67.   var mvpMatrix = new Matrix4();
  68.   // 旋转，平移，缩放，的矩阵被称为模型矩阵
  69.   // 视点(0,0,0)，观察点(0,0,-1)，上方向(如果上方向是y轴的正方向，那么upX，upY，upZ就是0，1，0) 组成 视图矩阵
  70.   // 在平面直角坐标系中, y轴正方向 是指 从原点沿纵轴向上的方向.”
  71.   // 模型视图矩阵 = 视图矩阵 * 模型矩阵
  72.   // 模型视图矩阵 * 顶点坐标
  73.   // 透视投影矩阵 * 模型视图矩阵 * 顶点坐标 
  74.   // 透视投影矩阵 * 视图矩阵 * 模型矩阵 * 顶点坐标
  76.   // 模型矩阵，平移0.75
  77.   modelMatrix.setTranslate(0.75, 0, 0);
  78.   // 定义 eyeX，eyeY，eyeZ，atX，atY，atX，upX，upY，upZ
  79.   viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
  80.   // 定义透视投影矩阵
  81.   // projMatrix.setPerspective(fov, aspect, near, far)
  82.   // fov：指定垂直视角，即可视空间顶面和地面间的夹角，必须大于0
  83.   // aspect：指定近裁剪面的宽高比
  84.   // near：近裁剪面的位置，必须大于0
  85.   // far：远裁剪面的位置，必须大于0
  86.   projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
  88.   mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)
  89.   gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  90.   // gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  91.   // gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
  92.   // gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  94.   // 开启隐藏面消除功能
  95.   gl.enable(gl.DEPTH_TEST);
  96.   // 清除默认颜色和深度缓冲区
  97.   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  98.   // Draw the triangles
  99.   gl.drawArrays(gl.TRIANGLES, 0, n);
  100.   // 设置矩阵
  101.   modelMatrix.setTranslate(-0.75, 0, 0);
  102.   mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)
  103.   gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  104.   gl.drawArrays(gl.TRIANGLES, 0, n);
  105. }
  107. function initVertexBuffers(gl) {
  108.   // 三角形的位置x，y完全相同
  109.   // 渲染出的三角形距离远的看上去变小了，其次，三角形被不同程度地平移以贴近中心线(即视线)，
  110.   // 使他们看上去在视线的左右排出了两列
  111.   var verticesColors = new Float32Array([
  112.     // Vertex coordinates and color
  113.      0.0,  1.0,  0.0,  0.4,  1.0,  0.4, // 绿色，在最前面
  114.     -0.5, -1.0,  0.0,  0.4,  1.0,  0.4,
  115.      0.5, -1.0,  0.0,  1.0,  0.4,  0.4, 
  117.      0.0,  1.0,  -2.0,  1.0,  1.0,  0.4, // 黄色，在中间
  118.     -0.5, -1.0,  -2.0,  1.0,  1.0,  0.4,
  119.      0.5, -1.0,  -2.0,  1.0,  0.4,  0.4, 
  121.      0.0,  1.0,   -4.0,  0.4,  0.4,  1.0,  // 蓝色，在最后面
  122.     -0.5, -1.0,   -4.0,  0.4,  0.4,  1.0,
  123.      0.5, -1.0,   -4.0,  1.0,  0.4,  0.4, 
  124.   ]);
  125.   var n = 9;
  127.   var vertexColorbuffer = gl.createBuffer();  
  128.   if (!vertexColorbuffer) {
  129.     console.log('Failed to create the buffer object');
  130.     return -1;
  131.   }
  133.   // Write the vertex coordinates and color to the buffer object
  134.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  135.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  137.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  139.   // Assign the buffer object to a_Position and enable the assignment
  140.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  141.   if(a_Position < 0) {
  142.     console.log('Failed to get the storage location of a_Position');
  143.     return -1;
  144.   }
  145.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  146.   gl.enableVertexAttribArray(a_Position);
  148.   // Assign the buffer object to a_Color and enable the assignment
  149.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  150.   if(a_Color < 0) {
  151.     console.log('Failed to get the storage location of a_Color');
  152.     return -1;
  153.   }
  155.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  156.   gl.enableVertexAttribArray(a_Color);
  158.   return n;
  159. }

7.7 z值相同，会产生深度冲突，解决深度冲突

  1. // Zfighting.js (c) 2012 matsuda
  2. // Vertex shader program
  3. var VSHADER_SOURCE =
  4.   'attribute vec4 a_Position;\n' +
  5.   'attribute vec4 a_Color;\n' +
  6.   'uniform mat4 u_ViewProjMatrix;\n' +
  7.   'varying vec4 v_Color;\n' +
  8.   'void main() {\n' +
  9.   '  gl_Position = u_ViewProjMatrix * a_Position;\n' +
  10.   '  v_Color = a_Color;\n' +
  11.   '}\n';
  13. // Fragment shader program
  14. var FSHADER_SOURCE =
  15.   '#ifdef GL_ES\n' +
  16.   'precision mediump float;\n' +
  17.   '#endif\n' +
  18.   'varying vec4 v_Color;\n' +
  19.   'void main() {\n' +
  20.   '  gl_FragColor = v_Color;\n' +
  21.   '}\n';
  23. function main() {
  24.   // Retrieve <canvas> element
  25.   var canvas = document.getElementById('webgl');
  27.   // Get the rendering context for WebGL
  28.   var gl = getWebGLContext(canvas);
  29.   if (!gl) {
  30.     console.log('Failed to get the rendering context for WebGL');
  31.     return;
  32.   }
  34.   // Initialize shaders
  35.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  36.     console.log('Failed to intialize shaders.');
  37.     return;
  38.   }
  40.   // Set the vertex coordinates and color (the blue triangle is in the front)
  41.   var n = initVertexBuffers(gl);
  42.   if (n < 0) {
  43.     console.log('Failed to set the vertex information');
  44.     return;
  45.   }
  47.   //Set clear color and enable the hidden surface removal function
  48.   gl.clearColor(0, 0, 0, 1);
  49.   gl.enable(gl.DEPTH_TEST);
  51.   // Get the storage locations of u_ViewProjMatrix
  52.   var u_ViewProjMatrix = gl.getUniformLocation(gl.program, 'u_ViewProjMatrix');
  53.   if (!u_ViewProjMatrix) { 
  54.     console.log('Failed to get the storage locations of u_ViewProjMatrix');
  55.     return;
  56.   }
  58.   var viewProjMatrix = new Matrix4();
  59.   // Set the eye point, look-at point, and up vector.
  60.   viewProjMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
  61.   viewProjMatrix.lookAt(3.06, 2.5, 10.0, 0, 0, -2, 0, 1, 0);
  63.   // Pass the view projection matrix to u_ViewProjMatrix
  64.   gl.uniformMatrix4fv(u_ViewProjMatrix, false, viewProjMatrix.elements);
  66.   // Clear color and depth buffer
  67.   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  69.   // 启用多边形偏移，这个会自动偏移z值，给每个多边形自动加上一个偏移值
  70.   gl.enable(gl.POLYGON_OFFSET_FILL);
  72.   gl.drawArrays(gl.TRIANGLES, 0, n/2);   // The green triangle
  73.   // gl.polygonOffset(factor, units);
  74.   // m * factor + r * units
  75.   // m 表示顶点所在表面相对于观察者的视线的角度
  76.   // r 表示 硬件能够区分两个z值之差的最小值
  77.   gl.polygonOffset(1.0, 1.0); // 指定加到每个顶点绘制后z值上的偏移量
  78.   gl.drawArrays(gl.TRIANGLES, n/2, n/2); // The yellow triangle
  79. }
  81. function initVertexBuffers(gl) {
  82.   var verticesColors = new Float32Array([
  83.     // Vertex coordinates and color
  84.      0.0,  2.5,  -5.0,  0.4,  1.0,  0.4, // The green triangle
  85.     -2.5, -2.5,  -5.0,  0.4,  1.0,  0.4,
  86.      2.5, -2.5,  -5.0,  1.0,  0.4,  0.4, 
  88.      0.0,  3.0,  -5.0,  1.0,  0.4,  0.4, // The yellow triagle
  89.     -3.0, -3.0,  -5.0,  1.0,  1.0,  0.4,
  90.      3.0, -3.0,  -5.0,  1.0,  1.0,  0.4, 
  91.   ]);
  92.   var n = 6;
  94.   // Create a buffer object
  95.   var vertexColorbuffer = gl.createBuffer();  
  96.   if (!vertexColorbuffer) {
  97.     console.log('Failed to create the buffer object');
  98.     return -1;
  99.   }
  101.   // Write the vertex coordinates and color to the buffer object
  102.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorbuffer);
  103.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  105.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  106.   // Assign the buffer object to a_Position and enable the assignment
  107.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  108.   if(a_Position < 0) {
  109.     console.log('Failed to get the storage location of a_Position');
  110.     return -1;
  111.   }
  112.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  113.   gl.enableVertexAttribArray(a_Position);
  114.   // Assign the buffer object to a_Color and enable the assignment
  115.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  116.   if(a_Color < 0) {
  117.     console.log('Failed to get the storage location of a_Color');
  118.     return -1;
  119.   }
  120.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  121.   gl.enableVertexAttribArray(a_Color);
  123.   return n;
  124. }

7.7 通过顶点索引绘制立方体

  1. // 顶点着色器
  2. var VSHADER_SOURCE =
  3.   'attribute vec4 a_Position;\n' +
  4.   'attribute vec4 a_Color;\n' +
  5.   'uniform mat4 u_MvpMatrix;\n' +
  6.   'varying vec4 v_Color;\n' +
  7.   'void main() {\n' +
  8.   '  gl_Position = u_MvpMatrix * a_Position;\n' +
  9.   '  v_Color = a_Color;\n' +
  10.   '}\n';
  12. // 片源着色器
  13. var FSHADER_SOURCE =
  14.   '#ifdef GL_ES\n' +
  15.   'precision mediump float;\n' +
  16.   '#endif\n' +
  17.   'varying vec4 v_Color;\n' +
  18.   'void main() {\n' +
  19.   '  gl_FragColor = v_Color;\n' +
  20.   '}\n';
  22. function main() {
  23.   // canvas对象
  24.   var canvas = document.getElementById('webgl');
  26.   // 创建webgl对象
  27.   var gl = getWebGLContext(canvas);
  28.   if (!gl) {
  29.     throw new TypeError("创建webgl对象失败")
  30.   }
  32.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  33.     throw new TypeError("初始化着色器失败");
  34.   }
  36.   var n = initVertexBuffers(gl);
  37.   if (n < 0) {
  38.     throw new TypeError("初始化Buffer失败");
  39.   }
  41.   // 设置默认颜色
  42.   gl.clearColor(0.0, 0.0, 0.0, 1.0);
  43.   // 开启隐藏面消除
  44.   gl.enable(gl.DEPTH_TEST);
  46.   // 获取 矩阵对象变量
  47.   var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  48.   if (!u_MvpMatrix) { 
  49.     console.log('Failed to get the storage location of u_MvpMatrix');
  50.     return;
  51.   }
  53.   // 创建矩阵对象
  54.   var mvpMatrix = new Matrix4();
  55.   // 定义透视投影矩阵
  56.   mvpMatrix.setPerspective(30, 1, 1, 100);
  57.   // 设置视点，观察点，上方向
  58.   mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
  60.   // 矩阵对象变量赋值
  61.   gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  63.   // 清除默认颜色和深度缓冲区
  64.   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  66.   // 按索引值来绘制顶点
  67.   gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
  68. }
  70. function initVertexBuffers(gl) {
  71.   // Create a cube
  72.   //    v6----- v5
  73.   //   /|      /|
  74.   //  v1------v0|
  75.   //  | |     | |
  76.   //  | |v7---|-|v4
  77.   //  |/      |/
  78.   //  v2------v3
  79.   var verticesColors = new Float32Array([
  80.     // Vertex coordinates and color
  81.      1.0,  1.0,  1.0,     1.0,  1.0,  1.0,  // v0 White
  82.     -1.0,  1.0,  1.0,     1.0,  0.0,  1.0,  // v1 Magenta
  83.     -1.0, -1.0,  1.0,     1.0,  0.0,  0.0,  // v2 Red
  84.      1.0, -1.0,  1.0,     1.0,  1.0,  0.0,  // v3 Yellow
  85.      1.0, -1.0, -1.0,     0.0,  1.0,  0.0,  // v4 Green
  86.      1.0,  1.0, -1.0,     0.0,  1.0,  1.0,  // v5 Cyan
  87.     -1.0,  1.0, -1.0,     0.0,  0.0,  1.0,  // v6 Blue
  88.     -1.0, -1.0, -1.0,     0.0,  0.0,  0.0   // v7 Black
  89.   ]);
  91.   // 生成索引顶点坐标，12个三角形的顶点
  92.   var indices = new Uint8Array([
  93.     0, 1, 2,   0, 2, 3,    // front
  94.     0, 3, 4,   0, 4, 5,    // right
  95.     0, 5, 6,   0, 6, 1,    // up
  96.     1, 6, 7,   1, 7, 2,    // left
  97.     7, 4, 3,   7, 3, 2,    // down
  98.     4, 7, 6,   4, 6, 5     // back
  99.  ]);
  101.   // 创建buffer对象
  102.   var vertexColorBuffer = gl.createBuffer();
  103.   var indexBuffer = gl.createBuffer();
  104.   if (!vertexColorBuffer || !indexBuffer) {
  105.     return -1;
  106.   }
  108.   // 绑定颜色Buffer变量
  109.   gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
  110.   gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
  112.   var FSIZE = verticesColors.BYTES_PER_ELEMENT;
  113.   // 获取顶点位置变量
  114.   var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  115.   if(a_Position < 0) {
  116.     console.log('Failed to get the storage location of a_Position');
  117.     return -1;
  118.   }
  119.   gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
  120.   gl.enableVertexAttribArray(a_Position);
  121.   // 设置顶点颜色
  122.   var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  123.   if(a_Color < 0) {
  124.     throw new TypeError("获取Attribute变量失败");
  125.   }
  126.   gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
  127.   gl.enableVertexAttribArray(a_Color);
  129.   // 绑定变量，设置变量
  130.   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  131.   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  133.   // 顶点索引值的长度 36
  134.   return indices.length;
  135. }

7.8 通过索引绘制每个面颜色值固定的立方体，相同顶点需要应用不同颜色值

7.7例子有一个问题，就是相同顶点需要应用不同颜色

  1. // ColoredCube.js (c) 2012 matsuda
  2. // Vertex shader program
  3. var VSHADER_SOURCE =
  4.   'attribute vec4 a_Position;\n' +
  5.   'attribute vec4 a_Color;\n' +
  6.   'uniform mat4 u_MvpMatrix;\n' +
  7.   'varying vec4 v_Color;\n' +
  8.   'void main() {\n' +
  9.   '  gl_Position = u_MvpMatrix * a_Position;\n' +
  10.   '  v_Color = a_Color;\n' +
  11.   '}\n';
  13. // Fragment shader program
  14. var FSHADER_SOURCE =
  15.   '#ifdef GL_ES\n' +
  16.   'precision mediump float;\n' +
  17.   '#endif\n' +
  18.   'varying vec4 v_Color;\n' +
  19.   'void main() {\n' +
  20.   '  gl_FragColor = v_Color;\n' +
  21.   '}\n';
  23. function main() {
  24.   // Retrieve <canvas> element
  25.   var canvas = document.getElementById('webgl');
  27.   // Get the rendering context for WebGL
  28.   var gl = getWebGLContext(canvas);
  29.   if (!gl) {
  30.     console.log('Failed to get the rendering context for WebGL');
  31.     return;
  32.   }
  34.   // Initialize shaders
  35.   if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
  36.     console.log('Failed to intialize shaders.');
  37.     return;
  38.   }
  40.   // Set the vertex information
  41.   var n = initVertexBuffers(gl);
  42.   if (n < 0) {
  43.     console.log('Failed to set the vertex information');
  44.     return;
  45.   }
  47.   // Set the clear color and enable the depth test
  48.   gl.clearColor(0.0, 0.0, 0.0, 1.0);
  49.   gl.enable(gl.DEPTH_TEST);
  51.   // Get the storage location of u_MvpMatrix
  52.   var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
  53.   if (!u_MvpMatrix) {
  54.     console.log('Failed to get the storage location of u_MvpMatrix');
  55.     return;
  56.   }
  58.   // Set the eye point and the viewing volume
  59.   var mvpMatrix = new Matrix4();
  60.   mvpMatrix.setPerspective(30, 1, 1, 100);
  61.   mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
  63.   // Pass the model view projection matrix to u_MvpMatrix
  64.   gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
  66.   // Clear color and depth buffer
  67.   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  69.   // Draw the cube
  70.   gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
  71. }
  73. function initVertexBuffers(gl) {
  74.   // Create a cube
  75.   //    v6----- v5
  76.   //   /|      /|
  77.   //  v1------v0|
  78.   //  | |     | |
  79.   //  | |v7---|-|v4
  80.   //  |/      |/
  81.   //  v2------v3
  83.   // 六个面的顶点
  84.   var vertices = new Float32Array([
  85.      1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,  // v0-v1-v2-v3 front
  86.      1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,  // v0-v3-v4-v5 right
  87.      1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,  // v0-v5-v6-v1 up
  88.     -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  // v1-v6-v7-v2 left
  89.     -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  // v7-v4-v3-v2 down
  90.      1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5 back
  91.   ]);
  92.   // 六个面的顶点颜色坐标
  93.   var colors = new Float32Array([     // Colors
  94.     0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  0.4, 0.4, 1.0,  // v0-v1-v2-v3 front(blue)
  95.     0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  0.4, 1.0, 0.4,  // v0-v3-v4-v5 right(green)
  96.     1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  1.0, 0.4, 0.4,  // v0-v5-v6-v1 up(red)
  97.     1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  1.0, 1.0, 0.4,  // v1-v6-v7-v2 left
  98.     1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  1.0, 1.0, 1.0,  // v7-v4-v3-v2 down
  99.     0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0,  0.4, 1.0, 1.0   // v4-v7-v6-v5 back
  100.   ]);
  102.   // 两个三角形一个面，一共六个面
  103.   var indices = new Uint8Array([
  104.      0, 1, 2,   0, 2, 3,    // front
  105.      4, 5, 6,   4, 6, 7,    // right
  106.      8, 9,10,   8,10,11,    // up
  107.     12,13,14,  12,14,15,    // left
  108.     16,17,18,  16,18,19,    // down
  109.     20,21,22,  20,22,23     // back
  110.   ]);
  112.   // Create a buffer object
  113.   var indexBuffer = gl.createBuffer();
  114.   if (!indexBuffer) 
  115.     return -1;
  117.   // Write the vertex coordinates and color to the buffer object
  118.   if (!initArrayBuffer(gl, vertices, 3, gl.FLOAT, 'a_Position'))
  119.     return -1;
  121.   if (!initArrayBuffer(gl, colors, 3, gl.FLOAT, 'a_Color'))
  122.     return -1;
  124.   // Write the indices to the buffer object
  125.   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  126.   gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  128.   return indices.length;
  129. }
  131. function initArrayBuffer(gl, data, num, type, attribute) {
  132.   var buffer = gl.createBuffer();   // Create a buffer object
  133.   if (!buffer) {
  134.     console.log('Failed to create the buffer object');
  135.     return false;
  136.   }
  137.   // Write date into the buffer object
  138.   gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  139.   gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
  140.   // Assign the buffer object to the attribute variable
  141.   var a_attribute = gl.getAttribLocation(gl.program, attribute);
  142.   if (a_attribute < 0) {
  143.     console.log('Failed to get the storage location of ' + attribute);
  144.     return false;
  145.   }
  146.   gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
  147.   // Enable the assignment of the buffer object to the attribute variable
  148.   gl.enableVertexAttribArray(a_attribute);
  150.   return true;
  151. }