polygon-drawing-order.gif

一. 做三维只需要再迈出一小步

二维例子中的二维点 (x, y) 与 3x3 的矩阵相乘， 在三维中我们需要三维点 (x, y, z) 与 4x4 的矩阵相乘。
让我们将上个例子改成三维的，这里会继续使用 F ，但是这次是三维的 ‘F’ 。
首先需要修改顶点着色器以支持三维处理，这是原顶点着色器，

  1. <script id="vertex-shader-2d" type="x-shader/x-vertex">
  2. attribute vec2 a_position;
  4. uniform mat3 u_matrix;
  6. void main() {
  7.   // 将位置和矩阵相乘
  8.   gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
  9. }
  10. </script>
  12. // 对比前后
  14. <script id="vertex-shader-3d" type="x-shader/x-vertex">
  15. attribute vec4 a_position;
  16. uniform mat4 u_matrix;
  18. void main() {
  19.   // 将位置和矩阵相乘
  20.   gl_Position = u_matrix * a_position;
  21. }
  22. </script>

它甚至变简单了！在二维中我们提供x和y并设置z为1， 在三维中我们将提供x，y和z，然后将w设置为1, 而在属性中w的默认值就是1，我们可以利用这点不用再次设置。然后提供三维数据。

二. 二维中的点的操作

  1.   ...
  3.   // 告诉属性怎么从 positionBuffer (ARRAY_BUFFER) 中读取位置
  4.   var size = 3;          // 每次迭代使用 3 个单位的数据
  5.   var type = gl.FLOAT;   // 单位数据类型是32位的浮点型
  6.   var normalize = false; // 不需要归一化数据
  7.   var stride = 0;        // 0 = 移动距离 * 单位距离长度sizeof(type)  每次迭代跳多少距离到下一个数据
  8.   var offset = 0;        // 从绑定缓冲的起始处开始
  9.   gl.vertexAttribPointer(
  10.       positionAttributeLocation, size, type, normalize, stride, offset);
  12.   ...
  14. // 填充当前 ARRAY_BUFFER 缓冲
  15. // 使用组成 'F' 的数据填充缓冲.
  16. function setGeometry(gl) {
  17.   gl.bufferData(
  18.       gl.ARRAY_BUFFER,
  19.       new Float32Array([
  20.            // 左竖
  21.             0,   0,  0,
  22.            30,   0,  0,
  23.             0, 150,  0,
  24.             0, 150,  0,
  25.            30,   0,  0,
  26.            30, 150,  0,
  28.            // 上横
  29.            30,   0,  0,
  30.           100,   0,  0,
  31.            30,  30,  0,
  32.            30,  30,  0,
  33.           100,   0,  0,
  34.           100,  30,  0,
  36.            // 下横
  37.            30,  60,  0,
  38.            67,  60,  0,
  39.            30,  90,  0,
  40.            30,  90,  0,
  41.            67,  60,  0,
  42.            67,  90,  0]),
  43.       gl.STATIC_DRAW);
  44. }
  46. // 对应的二维矩阵
  48. var m3 = {
  49.   translation: function translation(tx, ty) {
  50.     return [
  51.       1, 0, 0,
  52.       0, 1, 0,
  53.       tx, ty, 1
  54.     ];
  55.   },
  57.   rotation: function rotation(angleInRadians) {
  58.     var c = Math.cos(angleInRadians);
  59.     var s = Math.sin(angleInRadians);
  60.     return [
  61.       c,-s, 0,
  62.       s, c, 0,
  63.       0, 0, 1
  64.     ];
  65.   },
  67.   scaling: function scaling(sx, sy) {
  68.     return [
  69.       sx, 0, 0,
  70.       0, sy, 0,
  71.       0, 0, 1
  72.     ];
  73.   },
  74. };

三. 三维中的点的操作

  1. var m4 = {
  2.   translation: function(tx, ty, tz) {
  3.     return [
  4.        1,  0,  0,  0,
  5.        0,  1,  0,  0,
  6.        0,  0,  1,  0,
  7.        tx, ty, tz, 1,
  8.     ];
  9.   },
  11.   xRotation: function(angleInRadians) {
  12.     var c = Math.cos(angleInRadians);
  13.     var s = Math.sin(angleInRadians);
  14.     return [
  15.       1, 0, 0, 0,
  16.       0, c, s, 0,
  17.       0, -s, c, 0,
  18.       0, 0, 0, 1,
  19.     ];
  20.   },
  22.   yRotation: function(angleInRadians) {
  23.     var c = Math.cos(angleInRadians);
  24.     var s = Math.sin(angleInRadians);
  26.     return [
  27.       c, 0, -s, 0,
  28.       0, 1, 0, 0,
  29.       s, 0, c, 0,
  30.       0, 0, 0, 1,
  31.     ];
  32.   },
  34.   zRotation: function(angleInRadians) {
  35.     var c = Math.cos(angleInRadians);
  36.     var s = Math.sin(angleInRadians);
  38.     return [
  39.        c, s, 0, 0,
  40.       -s, c, 0, 0,
  41.        0, 0, 1, 0,
  42.        0, 0, 0, 1,
  43.     ];
  44.   },
  46.   scaling: function(sx, sy, sz) {
  47.     return [
  48.       sx, 0,  0,  0,
  49.       0, sy,  0,  0,
  50.       0,  0, sz,  0,
  51.       0,  0,  0,  1,
  52.     ];
  53.   },
  54. };

注意到我们现在有三个旋转方法，在二维中只需要一个是因为我们只需要绕 Z 轴旋转，现在在三维中还可以绕 X 轴和 Y 轴旋转。它们看起来还是很简单， 如果使用它们后你会发现和之前一样
绕 Z 轴旋转
newX = x c + y s;
newY = x -s + y c;
绕 Y 轴旋转
newX = x c + z s;
newZ = x -s + z c;
绕 X 轴旋转
newY = y c + z s;
newZ = y -s + z c;
它们提供这些旋转方式。
image.png

四. 更新对应的点的矩阵运算

  1. // 在一些方法上面做一些简单运算 ex:m4.translate(matrix做一些矩阵运算)
  3. translate: function(m, tx, ty, tz) {
  4.     return m4.multiply(m, m4.translation(tx, ty, tz));
  5.   },
  7.   xRotate: function(m, angleInRadians) {
  8.     return m4.multiply(m, m4.xRotation(angleInRadians));
  9.   },
  11.   yRotate: function(m, angleInRadians) {
  12.     return m4.multiply(m, m4.yRotation(angleInRadians));
  13.   },
  15.   zRotate: function(m, angleInRadians) {
  16.     return m4.multiply(m, m4.zRotation(angleInRadians));
  17.   },
  19.   scale: function(m, sx, sy, sz) {
  20.     return m4.multiply(m, m4.scaling(sx, sy, sz));
  21.   },
  1.   projection: function (width, height) {
  2.     // 注意：这个矩阵翻转了 Y 轴，所以 0 在上方
  3.     return [
  4.       2 / width, 0, 0,
  5.       0, -2 / height, 0,
  6.       -1, 1, 1
  7.     ];
  8.     },
  9.   }
  11.   // 它将像素坐标转换到裁剪空间，在初次尝试三维时我们将这样做
  13.  projection: function(width, height, depth) {
  14.     // 注意：这个矩阵翻转了 Y 轴，所以 0 在上方
  15.     return [
  16.        2 / width, 0, 0, 0,
  17.        0, -2 / height, 0, 0,
  18.        0, 0, 2 / depth, 0,
  19.       -1, 1, 0, 1,
  20.     ];
  21.   },

就像 X 和 Y 需要从像素空间转换到裁剪空间一样，Z 也需要。 在这个例子中我也将 Z 单位化了，我会传递一些和 width 相似的值给 depth ，所以我们的空间将会是 0 到 width 像素宽，0 到 height 像素高， 但是对于depth将会是 -depth / 2 到 +depth / 2 。
最后需要更新计算矩阵的代码

  1.  // 计算矩阵【透视图中这个又可以优化】
  2.   var matrix = m4.projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400);
  4.   matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
  5.   matrix = m4.xRotate(matrix, rotation[0]);
  6.   matrix = m4.yRotate(matrix, rotation[1]);
  7.   matrix = m4.zRotate(matrix, rotation[2]);
  8.   matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
  10.   // 设置矩阵
  11.   gl.uniformMatrix4fv(matrixLocation, false, matrix);

五. 三维中的点基本流程 【 正视投影 】

  1. // javascript
  2. "use strict";
  4. function main() {
  5.   // Get A WebGL context
  6.   /** @type {HTMLCanvasElement} */
  7.   var canvas = document.querySelector("#canvas");
  8.   var gl = canvas.getContext("webgl");
  9.   if (!gl) {
  10.     return;
  11.   }
  13.   // setup GLSL program
  14.   var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
  16.   // look up where the vertex data needs to go.
  17.   var positionLocation = gl.getAttribLocation(program, "a_position");
  19.   // lookup uniforms
  20.   var colorLocation = gl.getUniformLocation(program, "u_color");
  21.   var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  23.   // Create a buffer to put positions in
  24.   var positionBuffer = gl.createBuffer();
  25.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  26.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  27.   // Put geometry data into buffer
  28.   setGeometry(gl);
  30.   function radToDeg(r) {
  31.     return r * 180 / Math.PI;
  32.   }
  34.   function degToRad(d) {
  35.     return d * Math.PI / 180;
  36.   }
  38.   var translation = [45, 150, 0];
  39.   var rotation = [degToRad(40), degToRad(25), degToRad(325)];
  40.   var scale = [1, 1, 1];
  41.   var color = [Math.random(), Math.random(), Math.random(), 1];
  43.   drawScene();
  45.   // Setup a ui.
  46.   webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width });
  47.   webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height});
  48.   webglLessonsUI.setupSlider("#z", {value: translation[2], slide: updatePosition(2), max: gl.canvas.height});
  49.   webglLessonsUI.setupSlider("#angleX", {value: radToDeg(rotation[0]), slide: updateRotation(0), max: 360});
  50.   webglLessonsUI.setupSlider("#angleY", {value: radToDeg(rotation[1]), slide: updateRotation(1), max: 360});
  51.   webglLessonsUI.setupSlider("#angleZ", {value: radToDeg(rotation[2]), slide: updateRotation(2), max: 360});
  52.   webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
  53.   webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});
  54.   webglLessonsUI.setupSlider("#scaleZ", {value: scale[2], slide: updateScale(2), min: -5, max: 5, step: 0.01, precision: 2});
  56.   function updatePosition(index) {
  57.     return function(event, ui) {
  58.       translation[index] = ui.value;
  59.       drawScene();
  60.     };
  61.   }
  63.   function updateRotation(index) {
  64.     return function(event, ui) {
  65.       var angleInDegrees = ui.value;
  66.       var angleInRadians = angleInDegrees * Math.PI / 180;
  67.       rotation[index] = angleInRadians;
  68.       drawScene();
  69.     };
  70.   }
  72.   function updateScale(index) {
  73.     return function(event, ui) {
  74.       scale[index] = ui.value;
  75.       drawScene();
  76.     };
  77.   }
  79.   // Draw the scene.
  80.   function drawScene() {
  81.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  83.     // Tell WebGL how to convert from clip space to pixels
  84.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  86.     // Clear the canvas.
  87.     gl.clear(gl.COLOR_BUFFER_BIT);
  89.     // Tell it to use our program (pair of shaders)
  90.     gl.useProgram(program);
  92.     // Turn on the attribute
  93.     gl.enableVertexAttribArray(positionLocation);
  95.     // Bind the position buffer.
  96.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  98.     // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  99.     var size = 3;          // 3 components per iteration
  100.     var type = gl.FLOAT;   // the data is 32bit floats
  101.     var normalize = false; // don't normalize the data
  102.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  103.     var offset = 0;        // start at the beginning of the buffer
  104.     gl.vertexAttribPointer(
  105.         positionLocation, size, type, normalize, stride, offset);
  107.     // set the color
  108.     gl.uniform4fv(colorLocation, color);
  110.     // Compute the matrices
  111.     var matrix = m4.projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400);
  112.     matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
  113.     matrix = m4.xRotate(matrix, rotation[0]);
  114.     matrix = m4.yRotate(matrix, rotation[1]);
  115.     matrix = m4.zRotate(matrix, rotation[2]);
  116.     matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
  118.     // Set the matrix.
  119.     gl.uniformMatrix4fv(matrixLocation, false, matrix);
  121.     // Draw the geometry.
  122.     var primitiveType = gl.TRIANGLES;
  123.     var offset = 0;
  124.     var count = 18;  // 6 triangles in the 'F', 3 points per triangle
  125.     gl.drawArrays(primitiveType, offset, count);
  126.   }
  127. }
  129. var m4 = {
  131.   projection: function(width, height, depth) {
  132.     // Note: This matrix flips the Y axis so 0 is at the top.
  133.     return [
  134.        2 / width, 0, 0, 0,
  135.        0, -2 / height, 0, 0,
  136.        0, 0, 2 / depth, 0,
  137.       -1, 1, 0, 1,
  138.     ];
  139.   },
  141.   multiply: function(a, b) {
  142.     var a00 = a[0 * 4 + 0];
  143.     var a01 = a[0 * 4 + 1];
  144.     var a02 = a[0 * 4 + 2];
  145.     var a03 = a[0 * 4 + 3];
  146.     var a10 = a[1 * 4 + 0];
  147.     var a11 = a[1 * 4 + 1];
  148.     var a12 = a[1 * 4 + 2];
  149.     var a13 = a[1 * 4 + 3];
  150.     var a20 = a[2 * 4 + 0];
  151.     var a21 = a[2 * 4 + 1];
  152.     var a22 = a[2 * 4 + 2];
  153.     var a23 = a[2 * 4 + 3];
  154.     var a30 = a[3 * 4 + 0];
  155.     var a31 = a[3 * 4 + 1];
  156.     var a32 = a[3 * 4 + 2];
  157.     var a33 = a[3 * 4 + 3];
  158.     var b00 = b[0 * 4 + 0];
  159.     var b01 = b[0 * 4 + 1];
  160.     var b02 = b[0 * 4 + 2];
  161.     var b03 = b[0 * 4 + 3];
  162.     var b10 = b[1 * 4 + 0];
  163.     var b11 = b[1 * 4 + 1];
  164.     var b12 = b[1 * 4 + 2];
  165.     var b13 = b[1 * 4 + 3];
  166.     var b20 = b[2 * 4 + 0];
  167.     var b21 = b[2 * 4 + 1];
  168.     var b22 = b[2 * 4 + 2];
  169.     var b23 = b[2 * 4 + 3];
  170.     var b30 = b[3 * 4 + 0];
  171.     var b31 = b[3 * 4 + 1];
  172.     var b32 = b[3 * 4 + 2];
  173.     var b33 = b[3 * 4 + 3];
  174.     return [
  175.       b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
  176.       b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
  177.       b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
  178.       b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
  179.       b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
  180.       b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
  181.       b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
  182.       b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
  183.       b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
  184.       b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
  185.       b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
  186.       b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
  187.       b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
  188.       b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
  189.       b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
  190.       b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
  191.     ];
  192.   },
  194.   translation: function(tx, ty, tz) {
  195.     return [
  196.        1,  0,  0,  0,
  197.        0,  1,  0,  0,
  198.        0,  0,  1,  0,
  199.        tx, ty, tz, 1,
  200.     ];
  201.   },
  203.   xRotation: function(angleInRadians) {
  204.     var c = Math.cos(angleInRadians);
  205.     var s = Math.sin(angleInRadians);
  207.     return [
  208.       1, 0, 0, 0,
  209.       0, c, s, 0,
  210.       0, -s, c, 0,
  211.       0, 0, 0, 1,
  212.     ];
  213.   },
  215.   yRotation: function(angleInRadians) {
  216.     var c = Math.cos(angleInRadians);
  217.     var s = Math.sin(angleInRadians);
  219.     return [
  220.       c, 0, -s, 0,
  221.       0, 1, 0, 0,
  222.       s, 0, c, 0,
  223.       0, 0, 0, 1,
  224.     ];
  225.   },
  227.   zRotation: function(angleInRadians) {
  228.     var c = Math.cos(angleInRadians);
  229.     var s = Math.sin(angleInRadians);
  231.     return [
  232.        c, s, 0, 0,
  233.       -s, c, 0, 0,
  234.        0, 0, 1, 0,
  235.        0, 0, 0, 1,
  236.     ];
  237.   },
  239.   scaling: function(sx, sy, sz) {
  240.     return [
  241.       sx, 0,  0,  0,
  242.       0, sy,  0,  0,
  243.       0,  0, sz,  0,
  244.       0,  0,  0,  1,
  245.     ];
  246.   },
  248.   translate: function(m, tx, ty, tz) {
  249.     return m4.multiply(m, m4.translation(tx, ty, tz));
  250.   },
  252.   xRotate: function(m, angleInRadians) {
  253.     return m4.multiply(m, m4.xRotation(angleInRadians));
  254.   },
  256.   yRotate: function(m, angleInRadians) {
  257.     return m4.multiply(m, m4.yRotation(angleInRadians));
  258.   },
  260.   zRotate: function(m, angleInRadians) {
  261.     return m4.multiply(m, m4.zRotation(angleInRadians));
  262.   },
  264.   scale: function(m, sx, sy, sz) {
  265.     return m4.multiply(m, m4.scaling(sx, sy, sz));
  266.   },
  268. };
  269. // Fill the buffer with the values that define a letter 'F'. 其实这个对应一个分存一个模型的所有点；
  270. function setGeometry(gl) {
  271.   gl.bufferData(
  272.       gl.ARRAY_BUFFER,
  273.       new Float32Array([
  274.           // left column
  275.             0,   0,  0,
  276.            30,   0,  0,
  277.             0, 150,  0,
  278.             0, 150,  0,
  279.            30,   0,  0,
  280.            30, 150,  0,
  282.           // top rung
  283.            30,   0,  0,
  284.           100,   0,  0,
  285.            30,  30,  0,
  286.            30,  30,  0,
  287.           100,   0,  0,
  288.           100,  30,  0,
  290.           // middle rung
  291.            30,  60,  0,
  292.            67,  60,  0,
  293.            30,  90,  0,
  294.            30,  90,  0,
  295.            67,  60,  0,
  296.            67,  90,  0]),
  297.       gl.STATIC_DRAW);
  298. }
  300. main();
  302. // html 代码 已经简化好多了；几乎所有的运动都存在矩阵中去了；
  304. <canvas id="canvas"></canvas>
  305. <div id="uiContainer">
  306.   <div id="ui">
  307.     <div id="x"></div>
  308.     <div id="y"></div>
  309.     <div id="z"></div>
  310.     <div id="angleX"></div>
  311.     <div id="angleY"></div>
  312.     <div id="angleZ"></div>
  313.     <div id="scaleX"></div>
  314.     <div id="scaleY"></div>
  315.     <div id="scaleZ"></div>
  316.   </div>
  317. </div>
  319. <!-- vertex shader -->
  321. <script  id="vertex-shader-3d" type="x-shader/x-vertex">
  322. attribute vec4 a_position;
  324. uniform mat4 u_matrix;
  326. void main() {
  327.   // Multiply the position by the matrix.
  328.   gl_Position = u_matrix * a_position;
  329. }
  330. </script>
  331. <!-- fragment shader -->
  332. <script  id="fragment-shader-3d" type="x-shader/x-fragment">
  333. precision mediump float;
  335. uniform vec4 u_color;
  337. void main() {
  338.    gl_FragColor = u_color;
  339. }
  340. </script>
  341. <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  342. <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>

最后公式 gl_Position = u_matrix * a_position;

六. 拉伸具有三维效果

我们遇到的第一个问题是 F 在三维中过于扁平， 所以很难看出三维效果。解决这个问题的方法是将它拉伸成三维几何体。 现在的 F 是由三个矩形组成，每个矩形两个三角形。让它变三维需要 16 个矩形。 三个矩形在正面，三个背面，一个左侧，四个右侧，两个上侧，三个底面。
image.png
需要列出的还有很多，16 个矩形每个有两个三角形，每个三角形有 3 个顶点， 所以一共有 96 个顶点。如果你想看这些可以去示例的源码里找。
其实也就是把对应保存有模型点的轨迹修改就可以

  1. function setGeometry(gl) {
  2.   gl.bufferData(
  3.       gl.ARRAY_BUFFER,
  4.       new Float32Array([
  5.           // left column front
  6.             0,   0,  0,
  7.            30,   0,  0,
  8.             0, 150,  0,
  9.             0, 150,  0,
  10.            30,   0,  0,
  11.            30, 150,  0,
  13.           // top rung front
  14.            30,   0,  0,
  15.           100,   0,  0,
  16.            30,  30,  0,
  17.            30,  30,  0,
  18.           100,   0,  0,
  19.           100,  30,  0,
  21.           // middle rung front
  22.            30,  60,  0,
  23.            67,  60,  0,
  24.            30,  90,  0,
  25.            30,  90,  0,
  26.            67,  60,  0,
  27.            67,  90,  0,
  29.           // left column back
  30.             0,   0,  30,
  31.            30,   0,  30,
  32.             0, 150,  30,
  33.             0, 150,  30,
  34.            30,   0,  30,
  35.            30, 150,  30,
  37.           // top rung back
  38.            30,   0,  30,
  39.           100,   0,  30,
  40.            30,  30,  30,
  41.            30,  30,  30,
  42.           100,   0,  30,
  43.           100,  30,  30,
  45.           // middle rung back
  46.            30,  60,  30,
  47.            67,  60,  30,
  48.            30,  90,  30,
  49.            30,  90,  30,
  50.            67,  60,  30,
  51.            67,  90,  30,
  53.           // top
  54.             0,   0,   0,
  55.           100,   0,   0,
  56.           100,   0,  30,
  57.             0,   0,   0,
  58.           100,   0,  30,
  59.             0,   0,  30,
  61.           // top rung right
  62.           100,   0,   0,
  63.           100,  30,   0,
  64.           100,  30,  30,
  65.           100,   0,   0,
  66.           100,  30,  30,
  67.           100,   0,  30,
  69.           // under top rung
  70.           30,   30,   0,
  71.           30,   30,  30,
  72.           100,  30,  30,
  73.           30,   30,   0,
  74.           100,  30,  30,
  75.           100,  30,   0,
  77.           // between top rung and middle
  78.           30,   30,   0,
  79.           30,   30,  30,
  80.           30,   60,  30,
  81.           30,   30,   0,
  82.           30,   60,  30,
  83.           30,   60,   0,
  85.           // top of middle rung
  86.           30,   60,   0,
  87.           30,   60,  30,
  88.           67,   60,  30,
  89.           30,   60,   0,
  90.           67,   60,  30,
  91.           67,   60,   0,
  93.           // right of middle rung
  94.           67,   60,   0,
  95.           67,   60,  30,
  96.           67,   90,  30,
  97.           67,   60,   0,
  98.           67,   90,  30,
  99.           67,   90,   0,
  101.           // bottom of middle rung.
  102.           30,   90,   0,
  103.           30,   90,  30,
  104.           67,   90,  30,
  105.           30,   90,   0,
  106.           67,   90,  30,
  107.           67,   90,   0,
  109.           // right of bottom
  110.           30,   90,   0,
  111.           30,   90,  30,
  112.           30,  150,  30,
  113.           30,   90,   0,
  114.           30,  150,  30,
  115.           30,  150,   0,
  117.           // bottom
  118.           0,   150,   0,
  119.           0,   150,  30,
  120.           30,  150,  30,
  121.           0,   150,   0,
  122.           30,  150,  30,
  123.           30,  150,   0,
  125.           // left side
  126.           0,   0,   0,
  127.           0,   0,  30,
  128.           0, 150,  30,
  129.           0,   0,   0,
  130.           0, 150,  30,
  131.           0, 150,   0]),
  132.       gl.STATIC_DRAW);
  133. }

所以可以想象这还是一个比较简单模型；如果模型的复杂度有人物或者那种特别精致的物件；我们还能一个个点去操作这些吗？这个问题留到后面

七. 模型处理不同的颜色

在这之前我们需要修改一下对应的模型上有好几种颜色而不是对应就只有一种颜色

  1. <script id="vertex-shader-3d" type="x-shader/x-vertex">
  2. attribute vec4 a_position;
  3. attribute vec4 a_color;
  5. uniform mat4 u_matrix;
  7. varying vec4 v_color;
  9. void main() {
  10.   // 将位置和矩阵相乘.
  11.   gl_Position = u_matrix * a_position;
  13.   // 将颜色传递给片断着色器
  14.   v_color = a_color;
  15. }
  16. </script>
  19. // 片段着色器 使用
  20. <script id="fragment-shader-3d" type="x-shader/x-fragment">
  21. precision mediump float;
  23. // 从顶点着色器中传入
  24. varying vec4 v_color;
  26. void main() {
  27.    gl_FragColor = v_color;
  28. }
  29. </script>

我们需要找到属性的位置，然后在另一个缓冲中存入对应的颜色。

  1.  ...
  2.   var colorLocation = gl.getAttribLocation(program, "a_color");
  4.   ...
  5.   // 给颜色创建一个缓冲
  6.   var colorBuffer = gl.createBuffer();
  7.   gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  8.   // 将颜色值传入缓冲
  9.   setColors(gl);
  12.   ...
  13. // 向缓冲传入 'F' 的颜色值
  15. function setColors(gl) {
  16.   gl.bufferData(
  17.       gl.ARRAY_BUFFER,
  18.       new Uint8Array([
  19.         // 正面左竖
  20.         200,  70, 120,
  21.         200,  70, 120,
  22.         200,  70, 120,
  23.         200,  70, 120,
  24.         200,  70, 120,
  25.         200,  70, 120,
  27.         // 正面上横
  28.         200,  70, 120,
  29.         200,  70, 120,
  30.         ...
  31.         ...
  32.       gl.STATIC_DRAW);
  33. }
  35. // 在渲染时告诉颜色属性如何从缓冲中获取颜色值
  37. // 启用颜色属性
  38. gl.enableVertexAttribArray(colorLocation);
  40. // 绑定颜色缓冲
  41. gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  43. // 告诉颜色属性怎么从 colorBuffer (ARRAY_BUFFER) 中读取颜色值
  44. var size = 3;                 // 每次迭代使用3个单位的数据
  45. var type = gl.UNSIGNED_BYTE;  // 单位数据类型是无符号 8 位整数
  46. var normalize = true;         // 标准化数据 (从 0-255 转换到 0.0-1.0)
  47. var stride = 0;               // 0 = 移动距离 * 单位距离长度sizeof(type)  每次迭代跳多少距离到下一个数据
  48. var offset = 0;               // 从绑定缓冲的起始处开始
  49. gl.vertexAttribPointer(
  50.     colorLocation, size, type, normalize, stride, offset)

八. 正反三角面

image.png2323.gif
不过他好像和我们看到实际那种的模型都不太一样；比如前面有遮挡的时候我们会看不见后面；
你要知道电脑并没有三维的概念；在线性代数中两个点决定一条线；只不过是我们通过规则和数学的方式将图形变化成我们想看到那种形态；很显然现在规则有点问题；排在前面的三角面会比较先画出来然后后面的点就会把前面覆盖；很显然电脑并不知道哪些点是否会重合；而在真实的物理世界那些面是可以看到哪些又是看不到的；
聪明如大家
image.png
WebGL中的三角形有正反面的概念，正面三角形的顶点顺序是逆时针方向， 反面三角形是顺时针方向。

  1.  gl.enable(gl.CULL_FACE);

将它放在 drawScene 方法里，开启这个特性后WebGL默认“剔除”背面三角形， “剔除”在这里是“不用绘制”的花哨叫法。
对于WebGL而言，一个三角形是顺时针还是逆时针是根据裁剪空间中的顶点顺序判断的， 换句话说，WebGL是根据你在顶点着色器中运算后提供的结果来判定的， 这就意味着如果你把一个顺时针的三角形沿 X 轴缩放 -1 ，它将会变成逆时针， 或者将顺时针的三角形旋转180度后变成逆时针。由于我们没有开启 CULL_FACE， 所以可以同时看到顺时针（正面）和逆时针（反面）三角形。现在开启了， 任何时候正面三角形无论是缩放还是旋转的原因导致翻转了，WebGL就不会绘制它。 这件事很有用，因为通常情况下你只需要看到你正面对的面。

不得不说WEBGL在编写协议的时候就已经给我们准备好了【 当然后面又是一层精致的底层算法 ，他会在一定的时机给你算出对应的点谁在谁物理世界层面的顶部 】

image.png
结果对应的数据中显示出如下效果
大多数三角形朝向都是错的， 旋转的时候你会看到背面的三角形，幸好它很容易解决， 我们只需要看看哪些是三角形是反的，然后交换它们的两个顶点

  1.   1,   2,   3,
  2.  40,  50,  60,
  3. 700, 800, 900,
  6.   1,   2,   3,
  7. 700, 800, 900,
  8. 40,  50,  60,

通过修正朝向错误后得到

九. DEPTH BUFFER（深度缓冲）

image.png
不过好像对应的点的序列对应的模型部分还有有问题；
这很接近实际效果了但是还有一个问题，即使所有三角形的朝向是正确的， 然后背面的被剔除了，有些应该在背面的部分还是出现在了前面。
接触 DEPTH BUFFER（深度缓冲）
深度缓冲有时也叫 Z-Buffer，是一个存储像素深度的矩形， 一个深度像素对应一个着色像素，在绘制图像时组合使用。 当WebGL绘制每个着色像素时也会写入深度像素， 它的值基于顶点着色器返回的Z值，就像我们将 X 和 Y 转换到裁剪空间一样， Z 也在裁剪空间或者 (-1 到 +1) 。这个值会被转换到深度空间( 0 到 +1)， WebGL绘制一个着色像素之前会检查对应的深度像素， 如果对应的深度像素中的深度值小于当前像素的深度值，WebGL就不会绘制新的颜色。 反之它会绘制片断着色器提供的新颜色并更新深度像素中的深度值。 这也意味着在其他像素后面的像素不会被绘制。
我们可以像这样开启这个特性

  1. gl.enable(gl.DEPTH_TEST);
  4. // code
  5. // 绘制场景
  6.   function drawScene() {
  7.     ...
  9.     // 清空画布和深度缓冲
  10.     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  12.     ...

image.png
这才是三维！

十. 终极代码

  1. "use strict";
  3. function main() {
  4.   // Get A WebGL context
  5.   /** @type {HTMLCanvasElement} */
  6.   var canvas = document.querySelector("#canvas");
  7.   var gl = canvas.getContext("webgl");
  8.   if (!gl) {
  9.     return;
  10.   }
  12.   // setup GLSL program
  13.   var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);
  15.   // look up where the vertex data needs to go.
  16.   var positionLocation = gl.getAttribLocation(program, "a_position");
  17.   var colorLocation = gl.getAttribLocation(program, "a_color");
  19.   // lookup uniforms
  20.   var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  22.   // Create a buffer to put positions in
  23.   var positionBuffer = gl.createBuffer();
  24.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  25.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  26.   // Put geometry data into buffer
  27.   setGeometry(gl);
  29.   // Create a buffer to put colors in
  30.   var colorBuffer = gl.createBuffer();
  31.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = colorBuffer)
  32.   gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  33.   // Put geometry data into buffer
  34.   setColors(gl);
  36.   function radToDeg(r) {
  37.     return r * 180 / Math.PI;
  38.   }
  40.   function degToRad(d) {
  41.     return d * Math.PI / 180;
  42.   }
  44.   var translation = [45, 150, 0];
  45.   var rotation = [degToRad(40), degToRad(25), degToRad(325)];
  46.   var scale = [1, 1, 1];
  48.   drawScene();
  50.   // Setup a ui.
  51.   webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width });
  52.   webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height});
  53.   webglLessonsUI.setupSlider("#z", {value: translation[2], slide: updatePosition(2), max: gl.canvas.height});
  54.   webglLessonsUI.setupSlider("#angleX", {value: radToDeg(rotation[0]), slide: updateRotation(0), max: 360});
  55.   webglLessonsUI.setupSlider("#angleY", {value: radToDeg(rotation[1]), slide: updateRotation(1), max: 360});
  56.   webglLessonsUI.setupSlider("#angleZ", {value: radToDeg(rotation[2]), slide: updateRotation(2), max: 360});
  57.   webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
  58.   webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});
  59.   webglLessonsUI.setupSlider("#scaleZ", {value: scale[2], slide: updateScale(2), min: -5, max: 5, step: 0.01, precision: 2});
  61.   function updatePosition(index) {
  62.     return function(event, ui) {
  63.       translation[index] = ui.value;
  64.       drawScene();
  65.     };
  66.   }
  68.   function updateRotation(index) {
  69.     return function(event, ui) {
  70.       var angleInDegrees = ui.value;
  71.       var angleInRadians = angleInDegrees * Math.PI / 180;
  72.       rotation[index] = angleInRadians;
  73.       drawScene();
  74.     };
  75.   }
  77.   function updateScale(index) {
  78.     return function(event, ui) {
  79.       scale[index] = ui.value;
  80.       drawScene();
  81.     };
  82.   }
  84.   // Draw the scene.
  85.   function drawScene() {
  86.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  88.     // Tell WebGL how to convert from clip space to pixels
  89.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  91.     // Clear the canvas.
  92.     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  94.     // Turn on culling. By default backfacing triangles
  95.     // will be culled.
  96.     gl.enable(gl.CULL_FACE);
  98.     // Enable the depth buffer
  99.     gl.enable(gl.DEPTH_TEST);
  101.     // Tell it to use our program (pair of shaders)
  102.     gl.useProgram(program);
  104.     // Turn on the position attribute
  105.     gl.enableVertexAttribArray(positionLocation);
  107.     // Bind the position buffer.
  108.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  110.     // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  111.     var size = 3;          // 3 components per iteration
  112.     var type = gl.FLOAT;   // the data is 32bit floats
  113.     var normalize = false; // don't normalize the data
  114.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  115.     var offset = 0;        // start at the beginning of the buffer
  116.     gl.vertexAttribPointer(
  117.         positionLocation, size, type, normalize, stride, offset);
  119.     // Turn on the color attribute
  120.     gl.enableVertexAttribArray(colorLocation);
  122.     // Bind the color buffer.
  123.     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  125.     // Tell the attribute how to get data out of colorBuffer (ARRAY_BUFFER)
  126.     var size = 3;                 // 3 components per iteration
  127.     var type = gl.UNSIGNED_BYTE;  // the data is 8bit unsigned values
  128.     var normalize = true;         // normalize the data (convert from 0-255 to 0-1)
  129.     var stride = 0;               // 0 = move forward size * sizeof(type) each iteration to get the next position
  130.     var offset = 0;               // start at the beginning of the buffer
  131.     gl.vertexAttribPointer(
  132.         colorLocation, size, type, normalize, stride, offset);
  134.     // Compute the matrices
  135.     var matrix = m4.projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400);
  136.     matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
  137.     matrix = m4.xRotate(matrix, rotation[0]);
  138.     matrix = m4.yRotate(matrix, rotation[1]);
  139.     matrix = m4.zRotate(matrix, rotation[2]);
  140.     matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
  142.     // Set the matrix.
  143.     gl.uniformMatrix4fv(matrixLocation, false, matrix);
  145.     // Draw the geometry.
  146.     var primitiveType = gl.TRIANGLES;
  147.     var offset = 0;
  148.     var count = 16 * 6;
  149.     gl.drawArrays(primitiveType, offset, count);
  150.   }
  151. }
  153. var m4 = {
  155.   projection: function(width, height, depth) {
  156.     // Note: This matrix flips the Y axis so 0 is at the top.
  157.     return [
  158.        2 / width, 0, 0, 0,
  159.        0, -2 / height, 0, 0,
  160.        0, 0, 2 / depth, 0,
  161.       -1, 1, 0, 1,
  162.     ];
  163.   },
  165.   multiply: function(a, b) {
  166.     var a00 = a[0 * 4 + 0];
  167.     var a01 = a[0 * 4 + 1];
  168.     var a02 = a[0 * 4 + 2];
  169.     var a03 = a[0 * 4 + 3];
  170.     var a10 = a[1 * 4 + 0];
  171.     var a11 = a[1 * 4 + 1];
  172.     var a12 = a[1 * 4 + 2];
  173.     var a13 = a[1 * 4 + 3];
  174.     var a20 = a[2 * 4 + 0];
  175.     var a21 = a[2 * 4 + 1];
  176.     var a22 = a[2 * 4 + 2];
  177.     var a23 = a[2 * 4 + 3];
  178.     var a30 = a[3 * 4 + 0];
  179.     var a31 = a[3 * 4 + 1];
  180.     var a32 = a[3 * 4 + 2];
  181.     var a33 = a[3 * 4 + 3];
  182.     var b00 = b[0 * 4 + 0];
  183.     var b01 = b[0 * 4 + 1];
  184.     var b02 = b[0 * 4 + 2];
  185.     var b03 = b[0 * 4 + 3];
  186.     var b10 = b[1 * 4 + 0];
  187.     var b11 = b[1 * 4 + 1];
  188.     var b12 = b[1 * 4 + 2];
  189.     var b13 = b[1 * 4 + 3];
  190.     var b20 = b[2 * 4 + 0];
  191.     var b21 = b[2 * 4 + 1];
  192.     var b22 = b[2 * 4 + 2];
  193.     var b23 = b[2 * 4 + 3];
  194.     var b30 = b[3 * 4 + 0];
  195.     var b31 = b[3 * 4 + 1];
  196.     var b32 = b[3 * 4 + 2];
  197.     var b33 = b[3 * 4 + 3];
  198.     return [
  199.       b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
  200.       b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
  201.       b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
  202.       b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
  203.       b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
  204.       b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
  205.       b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
  206.       b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
  207.       b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
  208.       b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
  209.       b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
  210.       b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
  211.       b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
  212.       b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
  213.       b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
  214.       b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
  215.     ];
  216.   },
  218.   translation: function(tx, ty, tz) {
  219.     return [
  220.        1,  0,  0,  0,
  221.        0,  1,  0,  0,
  222.        0,  0,  1,  0,
  223.        tx, ty, tz, 1,
  224.     ];
  225.   },
  227.   xRotation: function(angleInRadians) {
  228.     var c = Math.cos(angleInRadians);
  229.     var s = Math.sin(angleInRadians);
  231.     return [
  232.       1, 0, 0, 0,
  233.       0, c, s, 0,
  234.       0, -s, c, 0,
  235.       0, 0, 0, 1,
  236.     ];
  237.   },
  239.   yRotation: function(angleInRadians) {
  240.     var c = Math.cos(angleInRadians);
  241.     var s = Math.sin(angleInRadians);
  243.     return [
  244.       c, 0, -s, 0,
  245.       0, 1, 0, 0,
  246.       s, 0, c, 0,
  247.       0, 0, 0, 1,
  248.     ];
  249.   },
  251.   zRotation: function(angleInRadians) {
  252.     var c = Math.cos(angleInRadians);
  253.     var s = Math.sin(angleInRadians);
  255.     return [
  256.        c, s, 0, 0,
  257.       -s, c, 0, 0,
  258.        0, 0, 1, 0,
  259.        0, 0, 0, 1,
  260.     ];
  261.   },
  263.   scaling: function(sx, sy, sz) {
  264.     return [
  265.       sx, 0,  0,  0,
  266.       0, sy,  0,  0,
  267.       0,  0, sz,  0,
  268.       0,  0,  0,  1,
  269.     ];
  270.   },
  272.   translate: function(m, tx, ty, tz) {
  273.     return m4.multiply(m, m4.translation(tx, ty, tz));
  274.   },
  276.   xRotate: function(m, angleInRadians) {
  277.     return m4.multiply(m, m4.xRotation(angleInRadians));
  278.   },
  280.   yRotate: function(m, angleInRadians) {
  281.     return m4.multiply(m, m4.yRotation(angleInRadians));
  282.   },
  284.   zRotate: function(m, angleInRadians) {
  285.     return m4.multiply(m, m4.zRotation(angleInRadians));
  286.   },
  288.   scale: function(m, sx, sy, sz) {
  289.     return m4.multiply(m, m4.scaling(sx, sy, sz));
  290.   },
  292. };
  294. // Fill the buffer with the values that define a letter 'F'.
  295. function setGeometry(gl) {
  296.   gl.bufferData(
  297.       gl.ARRAY_BUFFER,
  298.       new Float32Array([
  299.           // left column front
  300.           0,   0,  0,
  301.           0, 150,  0,
  302.           30,   0,  0,
  303.           0, 150,  0,
  304.           30, 150,  0,
  305.           30,   0,  0,
  307.           // top rung front
  308.           30,   0,  0,
  309.           30,  30,  0,
  310.           100,   0,  0,
  311.           30,  30,  0,
  312.           100,  30,  0,
  313.           100,   0,  0,
  315.           // middle rung front
  316.           30,  60,  0,
  317.           30,  90,  0,
  318.           67,  60,  0,
  319.           30,  90,  0,
  320.           67,  90,  0,
  321.           67,  60,  0,
  323.           // left column back
  324.             0,   0,  30,
  325.            30,   0,  30,
  326.             0, 150,  30,
  327.             0, 150,  30,
  328.            30,   0,  30,
  329.            30, 150,  30,
  331.           // top rung back
  332.            30,   0,  30,
  333.           100,   0,  30,
  334.            30,  30,  30,
  335.            30,  30,  30,
  336.           100,   0,  30,
  337.           100,  30,  30,
  339.           // middle rung back
  340.            30,  60,  30,
  341.            67,  60,  30,
  342.            30,  90,  30,
  343.            30,  90,  30,
  344.            67,  60,  30,
  345.            67,  90,  30,
  347.           // top
  348.             0,   0,   0,
  349.           100,   0,   0,
  350.           100,   0,  30,
  351.             0,   0,   0,
  352.           100,   0,  30,
  353.             0,   0,  30,
  355.           // top rung right
  356.           100,   0,   0,
  357.           100,  30,   0,
  358.           100,  30,  30,
  359.           100,   0,   0,
  360.           100,  30,  30,
  361.           100,   0,  30,
  363.           // under top rung
  364.           30,   30,   0,
  365.           30,   30,  30,
  366.           100,  30,  30,
  367.           30,   30,   0,
  368.           100,  30,  30,
  369.           100,  30,   0,
  371.           // between top rung and middle
  372.           30,   30,   0,
  373.           30,   60,  30,
  374.           30,   30,  30,
  375.           30,   30,   0,
  376.           30,   60,   0,
  377.           30,   60,  30,
  379.           // top of middle rung
  380.           30,   60,   0,
  381.           67,   60,  30,
  382.           30,   60,  30,
  383.           30,   60,   0,
  384.           67,   60,   0,
  385.           67,   60,  30,
  387.           // right of middle rung
  388.           67,   60,   0,
  389.           67,   90,  30,
  390.           67,   60,  30,
  391.           67,   60,   0,
  392.           67,   90,   0,
  393.           67,   90,  30,
  395.           // bottom of middle rung.
  396.           30,   90,   0,
  397.           30,   90,  30,
  398.           67,   90,  30,
  399.           30,   90,   0,
  400.           67,   90,  30,
  401.           67,   90,   0,
  403.           // right of bottom
  404.           30,   90,   0,
  405.           30,  150,  30,
  406.           30,   90,  30,
  407.           30,   90,   0,
  408.           30,  150,   0,
  409.           30,  150,  30,
  411.           // bottom
  412.           0,   150,   0,
  413.           0,   150,  30,
  414.           30,  150,  30,
  415.           0,   150,   0,
  416.           30,  150,  30,
  417.           30,  150,   0,
  419.           // left side
  420.           0,   0,   0,
  421.           0,   0,  30,
  422.           0, 150,  30,
  423.           0,   0,   0,
  424.           0, 150,  30,
  425.           0, 150,   0]),
  426.       gl.STATIC_DRAW);
  427. }
  428. // Fill the buffer with colors for the 'F'.
  429. function setColors(gl) {
  430.   gl.bufferData(
  431.       gl.ARRAY_BUFFER,
  432.       new Uint8Array([
  433.           // left column front
  434.         200,  70, 120,
  435.         200,  70, 120,
  436.         200,  70, 120,
  437.         200,  70, 120,
  438.         200,  70, 120,
  439.         200,  70, 120,
  441.           // top rung front
  442.         200,  70, 120,
  443.         200,  70, 120,
  444.         200,  70, 120,
  445.         200,  70, 120,
  446.         200,  70, 120,
  447.         200,  70, 120,
  449.           // middle rung front
  450.         200,  70, 120,
  451.         200,  70, 120,
  452.         200,  70, 120,
  453.         200,  70, 120,
  454.         200,  70, 120,
  455.         200,  70, 120,
  457.           // left column back
  458.         80, 70, 200,
  459.         80, 70, 200,
  460.         80, 70, 200,
  461.         80, 70, 200,
  462.         80, 70, 200,
  463.         80, 70, 200,
  465.           // top rung back
  466.         80, 70, 200,
  467.         80, 70, 200,
  468.         80, 70, 200,
  469.         80, 70, 200,
  470.         80, 70, 200,
  471.         80, 70, 200,
  473.           // middle rung back
  474.         80, 70, 200,
  475.         80, 70, 200,
  476.         80, 70, 200,
  477.         80, 70, 200,
  478.         80, 70, 200,
  479.         80, 70, 200,
  481.           // top
  482.         70, 200, 210,
  483.         70, 200, 210,
  484.         70, 200, 210,
  485.         70, 200, 210,
  486.         70, 200, 210,
  487.         70, 200, 210,
  489.           // top rung right
  490.         200, 200, 70,
  491.         200, 200, 70,
  492.         200, 200, 70,
  493.         200, 200, 70,
  494.         200, 200, 70,
  495.         200, 200, 70,
  497.           // under top rung
  498.         210, 100, 70,
  499.         210, 100, 70,
  500.         210, 100, 70,
  501.         210, 100, 70,
  502.         210, 100, 70,
  503.         210, 100, 70,
  505.           // between top rung and middle
  506.         210, 160, 70,
  507.         210, 160, 70,
  508.         210, 160, 70,
  509.         210, 160, 70,
  510.         210, 160, 70,
  511.         210, 160, 70,
  513.           // top of middle rung
  514.         70, 180, 210,
  515.         70, 180, 210,
  516.         70, 180, 210,
  517.         70, 180, 210,
  518.         70, 180, 210,
  519.         70, 180, 210,
  521.           // right of middle rung
  522.         100, 70, 210,
  523.         100, 70, 210,
  524.         100, 70, 210,
  525.         100, 70, 210,
  526.         100, 70, 210,
  527.         100, 70, 210,
  529.           // bottom of middle rung.
  530.         76, 210, 100,
  531.         76, 210, 100,
  532.         76, 210, 100,
  533.         76, 210, 100,
  534.         76, 210, 100,
  535.         76, 210, 100,
  537.           // right of bottom
  538.         140, 210, 80,
  539.         140, 210, 80,
  540.         140, 210, 80,
  541.         140, 210, 80,
  542.         140, 210, 80,
  543.         140, 210, 80,
  545.           // bottom
  546.         90, 130, 110,
  547.         90, 130, 110,
  548.         90, 130, 110,
  549.         90, 130, 110,
  550.         90, 130, 110,
  551.         90, 130, 110,
  553.           // left side
  554.         160, 160, 220,
  555.         160, 160, 220,
  556.         160, 160, 220,
  557.         160, 160, 220,
  558.         160, 160, 220,
  559.         160, 160, 220]),
  560.       gl.STATIC_DRAW);
  561. }
  563. main();
  1. <canvas id="canvas"></canvas>
  2. <div id="uiContainer">
  3.   <div id="ui">
  4.     <div id="x"></div>
  5.     <div id="y"></div>
  6.     <div id="z"></div>
  7.     <div id="angleX"></div>
  8.     <div id="angleY"></div>
  9.     <div id="angleZ"></div>
  10.     <div id="scaleX"></div>
  11.     <div id="scaleY"></div>
  12.     <div id="scaleZ"></div>
  13.   </div>
  14. </div>
  15. <!-- vertex shader -->
  16. <script  id="vertex-shader-3d" type="x-shader/x-vertex">
  17. attribute vec4 a_position;
  18. attribute vec4 a_color;
  20. uniform mat4 u_matrix;
  22. varying vec4 v_color;
  24. void main() {
  25.   // Multiply the position by the matrix.
  26.   gl_Position = u_matrix * a_position;
  28.   // Pass the color to the fragment shader.
  29.   v_color = a_color;
  30. }
  31. </script>
  32. <!-- fragment shader -->
  33. <script  id="fragment-shader-3d" type="x-shader/x-fragment">
  34. precision mediump float;
  36. // Passed in from the vertex shader.
  37. varying vec4 v_color;
  39. void main() {
  40.    gl_FragColor = v_color;
  41. }
  42. </script>
  43. <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  44. <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>