在我们的日常的生活的中看到的物体在视觉上并不是前后大小一样；至少他应该是前大后小的模式；也就是我们之前的所看到的正视投影应该不符合肉眼的观察习惯的；

想要实现近大远小的效果， 简单的做法就是将裁减空间中的 X 和 Y 值除以 Z 值。
你可以这么想：如果一个线段是 (10, 15) 到 (20,15)， 它长度为十个单位，在当前的代码中它就是 10 个像素长， 但是如果我们将它除以 Z ，且 Z 值 为 1

10 / 1 = 10 20 / 1 = 20 abs(10-20) = 10 它将是 10 个像素长
10 / 2 = 5 20 / 2 = 10 abs(5-10) = 5 它将是 5 个像素长
10 / 3 = 3.333 20 / 3 = 6.666 abs(3.333 - 6.666) = 3.333 它将是 3.333 个像素长

一. fudgeFactor

你可以看出随着 Z 变大距离就变远了，画的也会小一点。 如果我们除以裁剪空间中的 Z ，值可能会变大，因为 Z 是一个较小的值(-1 到 +1)。但是我们可以提供一个 fudgeFactor 因子和 Z 相乘，这样就可以调整缩放的程度。
让我们来试试，首先修改顶点着色器，除以 Z 再乘以我们的 “fudgeFactor” 因子。

  1. <script id="vertex-shader-3d" type="x-shader/x-vertex">
  2. ...
  3. uniform float u_fudgeFactor;
  4. ...
  5. void main() {
  6.   // 将位置和矩阵相乘
  7.   vec4 position = u_matrix * a_position;
  9.   // 调整除数
  10.   float zToDivideBy = 1.0 + position.z * u_fudgeFactor;
  12.   // x 和 y 除以调整后的除数
  13.   gl_Position = vec4(position.xy / zToDivideBy, position.zw);
  14. }
  15. </script>

注意，由于裁减空间中的 Z 值是 -1 到 +1 的，所以 +1 是为了让 zToDivideBy 变成 0 到 +2 * fudgeFactor
还需要更新代码以设置 fudgeFactor。

  1.   ...
  2.   var fudgeLocation = gl.getUniformLocation(program, "u_fudgeFactor");
  4.   ...
  5.   var fudgeFactor = 1;
  6.   ...
  7.   function drawScene() {
  8.     ...
  9.     // 设置 fudgeFactor
  10.     gl.uniform1f(fudgeLocation, fudgeFactor);
  12.     // 绘制几何体
  13.     var primitiveType = gl.TRIANGLES;
  14.     var offset = 0;
  15.     var count = 16 * 6;
  16.     gl.drawArrays(primitiveType, offset, count);

image.png
事实上WebGL会将我们提供给 gl_Position 的 x,y,z,w 值自动除以 w 。
我们可以通过修改着色器来证明，用 zToDivideBy 代替 gl_Position.w

  1.   ...
  2.   var fudgeLocation = gl.getUniformLocation(program, "u_fudgeFactor");
  4.   ...
  5.   var fudgeFactor = 1;
  6.   ...
  7.   function drawScene() {
  8.     ...
  9.     // 设置 fudgeFactor
  10.     gl.uniform1f(fudgeLocation, fudgeFactor);
  12.     // 绘制几何体
  13.     var primitiveType = gl.TRIANGLES;
  14.     var offset = 0;
  15.     var count = 16 * 6;
  16.     gl.drawArrays(primitiveType, offset, count);

有惊人的同样的效果

二. 矩阵隐藏着线性代数

为什么WebGL会自动除以 W ？

因为使用矩阵的魔力，可以用把值从 z 传值到 w 。
一个这样的矩阵
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 1,
0, 0, 0, 0,
将会把 z 的值复制给 w ， 你可以把每列看作
x_out = x_in 1 + y_in 0 + z_in 0 + w_in 0 ;
y_out = x_in 0 + y_in 1 + z_in 0 + w_in 0 ;
z_out = x_in 0 + y_in 0 + z_in 1 + w_in 0 ;
w_out = x_in 0 + y_in 0 + z_in 1 + w_in 0 ;
简化后得到
x_out = x_in;
y_out = y_in;
z_out = z_in;
w_out = z_in;
如果 w 原来就是 1.0 就会加 1
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 1,
0, 0, 0, 1,
他会将 W 的运算变为
w_out = x_in 0 + y_in 0 + z_in 1 + w_in 1 ;
因为 w_in = 1.0 是已知的
w_out = z_in + 1;
最后可以将 fudgeFactor 像这样放入矩阵中
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, fudgeFactor,
0, 0, 0, 1,
相当于
w_out = x_in 0 +y_in 0 +z_in fudgeFactor + w_in 1 ;
简化后为
w_out = z_in * fudgeFactor + 1;
我们来修改代码，使用这个矩阵。
首先将顶点着色器还原，又变成简单的样子

  1. <script id="vertex-shader-2d" type="x-shader/x-vertex">
  2. uniform mat4 u_matrix;
  4. void main() {
  5.   // 位置和矩阵相乘
  6.   gl_Position = u_matrix * a_position;
  7.   ...
  8. }
  9. </script>
  11. //
  12. function makeZToWMatrix(fudgeFactor) {
  13.   return [
  14.     1, 0, 0, 0,
  15.     0, 1, 0, 0,
  16.     0, 0, 1, fudgeFactor,
  17.     0, 0, 0, 1,
  18.   ];
  19. }
  21.   ...
  22.     // 计算矩阵
  23.     var matrix = makeZToWMatrix(fudgeFactor);
  24.     matrix = m4.multiply(matrix, m4.projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400));
  25.     matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
  26.     matrix = m4.xRotate(matrix, rotation[0]);
  27.     matrix = m4.yRotate(matrix, rotation[1]);
  28.     matrix = m4.zRotate(matrix, rotation[2]);
  29.     matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
  31.     ...

这只是展示了除以 Z 值获可以实现透视投影，以及在WebGL中简单实现。

三. Z轴的空间的裁剪

但还有一些问题需要解决，比如将 Z 值设置为 -100 左右的时候会遇到下面的情形
23.gif

为什么会这样？为什么 F 提前消失了？WebGL裁剪空间中的 X 和 Y 会被 +1 和 -1 裁剪， Z也一样。我们看到的是 Z < -1 的情况。
我可以从数学方法深入探讨并寻找解决办法，但是你可以 联想 二维中的的解决方法。我们需要获取 Z 值，然后加上一些量， 缩放一些量，就可以将任意范围映射到 -1 到 +1 的范围内。
最有意思的是这件事可以在一个矩阵中完成，更方便的是， 我们可以定义一个 fieldOfView 代替 fudgeFactor ， 计算出更合适的值。
这是创建矩阵的方法。

  1. var m4 = {
  2.   perspective: function(fieldOfViewInRadians, aspect, near, far) {
  3.     var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians);
  4.     var rangeInv = 1.0 / (near - far);
  6.     return [
  7.       f / aspect, 0, 0, 0,
  8.       0, f, 0, 0,
  9.       0, 0, (near + far) * rangeInv, -1,
  10.       0, 0, near * far * rangeInv * 2, 0
  11.     ];
  12.   },
  14.   ...

这个矩阵会为我们完成所有转换。它可以调整单位以适应裁剪空间， 它可以自定义视场角，选择 Z-裁剪面。假设有一个眼睛或者摄像机 在原点(0, 0, 0)，根据 zNear 和 fieldOfView 可以将 zNear 对应到 Z = -1 ，在 zNear 平面上一半的 fieldOfView 长度 对应画布中心到 Y = -1 或 Y = 1 的距离，X 的值通过乘以 aspect 获取，最后通过设置 zFar 对应 Z = 1 ，控制缩放的程度。
操作实景
image.png
正方体所在的有四个侧面的椎体叫做“视锥”，矩阵将视锥中的空间转换到裁剪空间中， zNear 决定了被正面切割的位置，zFar 决定被背面切割的位置。 将 zNear 设置为 23 就会看到正方体正面被切割， 将 zFar 设置为 24 就会看到正方体背面被切割。

还有一个问题，矩阵假定观察位置为 0,0,0 并且看向 Z 轴负方向， Y 轴为上方向。这和我们目前为止做法不同， 为了解决这个问题我们需要将物体放到视图范围内。
我们在 (45, 150, 0) 绘制的 F，可以将它移动到 (-150, 0, -360)
使用 m4.projection 方法代替之前的投影方法，可以调用 m4.perspective

  1. var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  2. var zNear = 1;
  3. var zFar = 2000;
  4. var matrix = m4.perspective(fieldOfViewRadians, aspect, zNear, zFar);
  5. matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
  6. matrix = m4.xRotate(matrix, rotation[0]);
  7. matrix = m4.yRotate(matrix, rotation[1]);
  8. matrix = m4.zRotate(matrix, rotation[2]);
  9. matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);

这一块的基本内容基本上以后webgl中关于3d都会涉及到；

四. 终极代码

  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 = [-150, 0, -360];
  45.   var rotation = [degToRad(190), degToRad(40), degToRad(320)];
  46.   var scale = [1, 1, 1];
  47.   var fieldOfViewRadians = degToRad(60);
  49.   drawScene();
  51.   // Setup a ui.
  52.   webglLessonsUI.setupSlider("#fieldOfView", {value: radToDeg(fieldOfViewRadians), slide: updateFieldOfView, min: 1, max: 179});
  53.   webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), min: -200, max: 200 });
  54.   webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), min: -200, max: 200});
  55.   webglLessonsUI.setupSlider("#z", {value: translation[2], slide: updatePosition(2), min: -1000, max: 0});
  56.   webglLessonsUI.setupSlider("#angleX", {value: radToDeg(rotation[0]), slide: updateRotation(0), max: 360});
  57.   webglLessonsUI.setupSlider("#angleY", {value: radToDeg(rotation[1]), slide: updateRotation(1), max: 360});
  58.   webglLessonsUI.setupSlider("#angleZ", {value: radToDeg(rotation[2]), slide: updateRotation(2), max: 360});
  59.   webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
  60.   webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});
  61.   webglLessonsUI.setupSlider("#scaleZ", {value: scale[2], slide: updateScale(2), min: -5, max: 5, step: 0.01, precision: 2});
  63.   function updateFieldOfView(event, ui) {
  64.     fieldOfViewRadians = degToRad(ui.value);
  65.     drawScene();
  66.   }
  68.   function updatePosition(index) {
  69.     return function(event, ui) {
  70.       translation[index] = ui.value;
  71.       drawScene();
  72.     };
  73.   }
  75.   function updateRotation(index) {
  76.     return function(event, ui) {
  77.       var angleInDegrees = ui.value;
  78.       var angleInRadians = angleInDegrees * Math.PI / 180;
  79.       rotation[index] = angleInRadians;
  80.       drawScene();
  81.     };
  82.   }
  84.   function updateScale(index) {
  85.     return function(event, ui) {
  86.       scale[index] = ui.value;
  87.       drawScene();
  88.     };
  89.   }
  91.   // Draw the scene.
  92.   function drawScene() {
  93.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  95.     // Tell WebGL how to convert from clip space to pixels
  96.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  98.     // Clear the canvas AND the depth buffer.
  99.     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  101.     // Turn on culling. By default backfacing triangles
  102.     // will be culled.
  103.     gl.enable(gl.CULL_FACE);
  105.     // Enable the depth buffer
  106.     gl.enable(gl.DEPTH_TEST);
  108.     // Tell it to use our program (pair of shaders)
  109.     gl.useProgram(program);
  111.     // Turn on the position attribute
  112.     gl.enableVertexAttribArray(positionLocation);
  114.     // Bind the position buffer.
  115.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  117.     // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  118.     var size = 3;          // 3 components per iteration
  119.     var type = gl.FLOAT;   // the data is 32bit floats
  120.     var normalize = false; // don't normalize the data
  121.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  122.     var offset = 0;        // start at the beginning of the buffer
  123.     gl.vertexAttribPointer(
  124.         positionLocation, size, type, normalize, stride, offset);
  126.     // Turn on the color attribute
  127.     gl.enableVertexAttribArray(colorLocation);
  129.     // Bind the color buffer.
  130.     gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  132.     // Tell the attribute how to get data out of colorBuffer (ARRAY_BUFFER)
  133.     var size = 3;                 // 3 components per iteration
  134.     var type = gl.UNSIGNED_BYTE;  // the data is 8bit unsigned values
  135.     var normalize = true;         // normalize the data (convert from 0-255 to 0-1)
  136.     var stride = 0;               // 0 = move forward size * sizeof(type) each iteration to get the next position
  137.     var offset = 0;               // start at the beginning of the buffer
  138.     gl.vertexAttribPointer(
  139.         colorLocation, size, type, normalize, stride, offset);
  141.     // Compute the matrix
  142.     var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  143.     var zNear = 1;
  144.     var zFar = 2000;
  145.     var matrix = m4.perspective(fieldOfViewRadians, aspect, zNear, zFar);
  146.     matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
  147.     matrix = m4.xRotate(matrix, rotation[0]);
  148.     matrix = m4.yRotate(matrix, rotation[1]);
  149.     matrix = m4.zRotate(matrix, rotation[2]);
  150.     matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
  152.     // Set the matrix.
  153.     gl.uniformMatrix4fv(matrixLocation, false, matrix);
  155.     // Draw the geometry.
  156.     var primitiveType = gl.TRIANGLES;
  157.     var offset = 0;
  158.     var count = 16 * 6;
  159.     gl.drawArrays(primitiveType, offset, count);
  160.   }
  161. }
  163. var m4 = {
  165.   perspective: function(fieldOfViewInRadians, aspect, near, far) {
  166.     var f = Math.tan(Math.PI * 0.5 - 0.5 * fieldOfViewInRadians);
  167.     var rangeInv = 1.0 / (near - far);
  169.     return [
  170.       f / aspect, 0, 0, 0,
  171.       0, f, 0, 0,
  172.       0, 0, (near + far) * rangeInv, -1,
  173.       0, 0, near * far * rangeInv * 2, 0
  174.     ];
  175.   },
  177.   projection: function(width, height, depth) {
  178.     // Note: This matrix flips the Y axis so 0 is at the top.
  179.     return [
  180.        2 / width, 0, 0, 0,
  181.        0, -2 / height, 0, 0,
  182.        0, 0, 2 / depth, 0,
  183.       -1, 1, 0, 1,
  184.     ];
  185.   },
  187.   multiply: function(a, b) {
  188.     var a00 = a[0 * 4 + 0];
  189.     var a01 = a[0 * 4 + 1];
  190.     var a02 = a[0 * 4 + 2];
  191.     var a03 = a[0 * 4 + 3];
  192.     var a10 = a[1 * 4 + 0];
  193.     var a11 = a[1 * 4 + 1];
  194.     var a12 = a[1 * 4 + 2];
  195.     var a13 = a[1 * 4 + 3];
  196.     var a20 = a[2 * 4 + 0];
  197.     var a21 = a[2 * 4 + 1];
  198.     var a22 = a[2 * 4 + 2];
  199.     var a23 = a[2 * 4 + 3];
  200.     var a30 = a[3 * 4 + 0];
  201.     var a31 = a[3 * 4 + 1];
  202.     var a32 = a[3 * 4 + 2];
  203.     var a33 = a[3 * 4 + 3];
  204.     var b00 = b[0 * 4 + 0];
  205.     var b01 = b[0 * 4 + 1];
  206.     var b02 = b[0 * 4 + 2];
  207.     var b03 = b[0 * 4 + 3];
  208.     var b10 = b[1 * 4 + 0];
  209.     var b11 = b[1 * 4 + 1];
  210.     var b12 = b[1 * 4 + 2];
  211.     var b13 = b[1 * 4 + 3];
  212.     var b20 = b[2 * 4 + 0];
  213.     var b21 = b[2 * 4 + 1];
  214.     var b22 = b[2 * 4 + 2];
  215.     var b23 = b[2 * 4 + 3];
  216.     var b30 = b[3 * 4 + 0];
  217.     var b31 = b[3 * 4 + 1];
  218.     var b32 = b[3 * 4 + 2];
  219.     var b33 = b[3 * 4 + 3];
  220.     return [
  221.       b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
  222.       b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
  223.       b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
  224.       b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
  225.       b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
  226.       b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
  227.       b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
  228.       b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
  229.       b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
  230.       b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
  231.       b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
  232.       b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
  233.       b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
  234.       b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
  235.       b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
  236.       b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
  237.     ];
  238.   },
  240.   translation: function(tx, ty, tz) {
  241.     return [
  242.        1,  0,  0,  0,
  243.        0,  1,  0,  0,
  244.        0,  0,  1,  0,
  245.        tx, ty, tz, 1,
  246.     ];
  247.   },
  249.   xRotation: function(angleInRadians) {
  250.     var c = Math.cos(angleInRadians);
  251.     var s = Math.sin(angleInRadians);
  253.     return [
  254.       1, 0, 0, 0,
  255.       0, c, s, 0,
  256.       0, -s, c, 0,
  257.       0, 0, 0, 1,
  258.     ];
  259.   },
  261.   yRotation: function(angleInRadians) {
  262.     var c = Math.cos(angleInRadians);
  263.     var s = Math.sin(angleInRadians);
  265.     return [
  266.       c, 0, -s, 0,
  267.       0, 1, 0, 0,
  268.       s, 0, c, 0,
  269.       0, 0, 0, 1,
  270.     ];
  271.   },
  273.   zRotation: function(angleInRadians) {
  274.     var c = Math.cos(angleInRadians);
  275.     var s = Math.sin(angleInRadians);
  277.     return [
  278.        c, s, 0, 0,
  279.       -s, c, 0, 0,
  280.        0, 0, 1, 0,
  281.        0, 0, 0, 1,
  282.     ];
  283.   },
  285.   scaling: function(sx, sy, sz) {
  286.     return [
  287.       sx, 0,  0,  0,
  288.       0, sy,  0,  0,
  289.       0,  0, sz,  0,
  290.       0,  0,  0,  1,
  291.     ];
  292.   },
  294.   translate: function(m, tx, ty, tz) {
  295.     return m4.multiply(m, m4.translation(tx, ty, tz));
  296.   },
  298.   xRotate: function(m, angleInRadians) {
  299.     return m4.multiply(m, m4.xRotation(angleInRadians));
  300.   },
  302.   yRotate: function(m, angleInRadians) {
  303.     return m4.multiply(m, m4.yRotation(angleInRadians));
  304.   },
  306.   zRotate: function(m, angleInRadians) {
  307.     return m4.multiply(m, m4.zRotation(angleInRadians));
  308.   },
  310.   scale: function(m, sx, sy, sz) {
  311.     return m4.multiply(m, m4.scaling(sx, sy, sz));
  312.   },
  314. };
  316. // Fill the buffer with the values that define a letter 'F'.
  317. function setGeometry(gl) {
  318.   gl.bufferData(
  319.       gl.ARRAY_BUFFER,
  320.       new Float32Array([
  321.           // left column front
  322.           0,   0,  0,
  323.           0, 150,  0,
  324.           30,   0,  0,
  325.           0, 150,  0,
  326.           30, 150,  0,
  327.           30,   0,  0,
  329.           // top rung front
  330.           30,   0,  0,
  331.           30,  30,  0,
  332.           100,   0,  0,
  333.           30,  30,  0,
  334.           100,  30,  0,
  335.           100,   0,  0,
  337.           // middle rung front
  338.           30,  60,  0,
  339.           30,  90,  0,
  340.           67,  60,  0,
  341.           30,  90,  0,
  342.           67,  90,  0,
  343.           67,  60,  0,
  345.           // left column back
  346.             0,   0,  30,
  347.            30,   0,  30,
  348.             0, 150,  30,
  349.             0, 150,  30,
  350.            30,   0,  30,
  351.            30, 150,  30,
  353.           // top rung back
  354.            30,   0,  30,
  355.           100,   0,  30,
  356.            30,  30,  30,
  357.            30,  30,  30,
  358.           100,   0,  30,
  359.           100,  30,  30,
  361.           // middle rung back
  362.            30,  60,  30,
  363.            67,  60,  30,
  364.            30,  90,  30,
  365.            30,  90,  30,
  366.            67,  60,  30,
  367.            67,  90,  30,
  369.           // top
  370.             0,   0,   0,
  371.           100,   0,   0,
  372.           100,   0,  30,
  373.             0,   0,   0,
  374.           100,   0,  30,
  375.             0,   0,  30,
  377.           // top rung right
  378.           100,   0,   0,
  379.           100,  30,   0,
  380.           100,  30,  30,
  381.           100,   0,   0,
  382.           100,  30,  30,
  383.           100,   0,  30,
  385.           // under top rung
  386.           30,   30,   0,
  387.           30,   30,  30,
  388.           100,  30,  30,
  389.           30,   30,   0,
  390.           100,  30,  30,
  391.           100,  30,   0,
  393.           // between top rung and middle
  394.           30,   30,   0,
  395.           30,   60,  30,
  396.           30,   30,  30,
  397.           30,   30,   0,
  398.           30,   60,   0,
  399.           30,   60,  30,
  401.           // top of middle rung
  402.           30,   60,   0,
  403.           67,   60,  30,
  404.           30,   60,  30,
  405.           30,   60,   0,
  406.           67,   60,   0,
  407.           67,   60,  30,
  409.           // right of middle rung
  410.           67,   60,   0,
  411.           67,   90,  30,
  412.           67,   60,  30,
  413.           67,   60,   0,
  414.           67,   90,   0,
  415.           67,   90,  30,
  417.           // bottom of middle rung.
  418.           30,   90,   0,
  419.           30,   90,  30,
  420.           67,   90,  30,
  421.           30,   90,   0,
  422.           67,   90,  30,
  423.           67,   90,   0,
  425.           // right of bottom
  426.           30,   90,   0,
  427.           30,  150,  30,
  428.           30,   90,  30,
  429.           30,   90,   0,
  430.           30,  150,   0,
  431.           30,  150,  30,
  433.           // bottom
  434.           0,   150,   0,
  435.           0,   150,  30,
  436.           30,  150,  30,
  437.           0,   150,   0,
  438.           30,  150,  30,
  439.           30,  150,   0,
  441.           // left side
  442.           0,   0,   0,
  443.           0,   0,  30,
  444.           0, 150,  30,
  445.           0,   0,   0,
  446.           0, 150,  30,
  447.           0, 150,   0]),
  448.       gl.STATIC_DRAW);
  449. }
  451. // Fill the buffer with colors for the 'F'.
  452. function setColors(gl) {
  453.   gl.bufferData(
  454.       gl.ARRAY_BUFFER,
  455.       new Uint8Array([
  456.           // left column front
  457.         200,  70, 120,
  458.         200,  70, 120,
  459.         200,  70, 120,
  460.         200,  70, 120,
  461.         200,  70, 120,
  462.         200,  70, 120,
  464.           // top rung front
  465.         200,  70, 120,
  466.         200,  70, 120,
  467.         200,  70, 120,
  468.         200,  70, 120,
  469.         200,  70, 120,
  470.         200,  70, 120,
  472.           // middle rung front
  473.         200,  70, 120,
  474.         200,  70, 120,
  475.         200,  70, 120,
  476.         200,  70, 120,
  477.         200,  70, 120,
  478.         200,  70, 120,
  480.           // left column back
  481.         80, 70, 200,
  482.         80, 70, 200,
  483.         80, 70, 200,
  484.         80, 70, 200,
  485.         80, 70, 200,
  486.         80, 70, 200,
  488.           // top rung back
  489.         80, 70, 200,
  490.         80, 70, 200,
  491.         80, 70, 200,
  492.         80, 70, 200,
  493.         80, 70, 200,
  494.         80, 70, 200,
  496.           // middle rung back
  497.         80, 70, 200,
  498.         80, 70, 200,
  499.         80, 70, 200,
  500.         80, 70, 200,
  501.         80, 70, 200,
  502.         80, 70, 200,
  504.           // top
  505.         70, 200, 210,
  506.         70, 200, 210,
  507.         70, 200, 210,
  508.         70, 200, 210,
  509.         70, 200, 210,
  510.         70, 200, 210,
  512.           // top rung right
  513.         200, 200, 70,
  514.         200, 200, 70,
  515.         200, 200, 70,
  516.         200, 200, 70,
  517.         200, 200, 70,
  518.         200, 200, 70,
  520.           // under top rung
  521.         210, 100, 70,
  522.         210, 100, 70,
  523.         210, 100, 70,
  524.         210, 100, 70,
  525.         210, 100, 70,
  526.         210, 100, 70,
  528.           // between top rung and middle
  529.         210, 160, 70,
  530.         210, 160, 70,
  531.         210, 160, 70,
  532.         210, 160, 70,
  533.         210, 160, 70,
  534.         210, 160, 70,
  536.           // top of middle rung
  537.         70, 180, 210,
  538.         70, 180, 210,
  539.         70, 180, 210,
  540.         70, 180, 210,
  541.         70, 180, 210,
  542.         70, 180, 210,
  544.           // right of middle rung
  545.         100, 70, 210,
  546.         100, 70, 210,
  547.         100, 70, 210,
  548.         100, 70, 210,
  549.         100, 70, 210,
  550.         100, 70, 210,
  552.           // bottom of middle rung.
  553.         76, 210, 100,
  554.         76, 210, 100,
  555.         76, 210, 100,
  556.         76, 210, 100,
  557.         76, 210, 100,
  558.         76, 210, 100,
  560.           // right of bottom
  561.         140, 210, 80,
  562.         140, 210, 80,
  563.         140, 210, 80,
  564.         140, 210, 80,
  565.         140, 210, 80,
  566.         140, 210, 80,
  568.           // bottom
  569.         90, 130, 110,
  570.         90, 130, 110,
  571.         90, 130, 110,
  572.         90, 130, 110,
  573.         90, 130, 110,
  574.         90, 130, 110,
  576.           // left side
  577.         160, 160, 220,
  578.         160, 160, 220,
  579.         160, 160, 220,
  580.         160, 160, 220,
  581.         160, 160, 220,
  582.         160, 160, 220]),
  583.       gl.STATIC_DRAW);
  584. }
  586. main();
  1. <canvas id="canvas"></canvas>
  2. <div id="uiContainer">
  3.   <div id="ui">
  4.     <div id="fieldOfView"></div>
  5.     <div id="x"></div>
  6.     <div id="y"></div>
  7.     <div id="z"></div>
  8.     <div id="angleX"></div>
  9.     <div id="angleY"></div>
  10.     <div id="angleZ"></div>
  11.   </div>
  12. </div>
  13. <!-- vertex shader -->
  14. <script  id="vertex-shader-3d" type="x-shader/x-vertex">
  15. attribute vec4 a_position;
  16. attribute vec4 a_color;
  18. uniform mat4 u_matrix;
  20. varying vec4 v_color;
  22. void main() {
  23.   // Multiply the position by the matrix.
  24.   gl_Position = u_matrix * a_position;
  26.   // Pass the color to the fragment shader.
  27.   v_color = a_color;
  28. }
  29. </script>
  30. <!-- fragment shader -->
  31. <script  id="fragment-shader-3d" type="x-shader/x-fragment">
  32. precision mediump float;
  34. // Passed in from the vertex shader.
  35. varying vec4 v_color;
  37. void main() {
  38.    gl_FragColor = v_color;
  39. }
  40. </script>
  41. <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
  42. <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>