实施光照的方式有很多种，最简单的可能就是方向光源了。
方向光是指光照均匀地来自某一个方向，晴朗天气下的太阳经常被当作方向光源， 它距离太远所以光线被看作是平行的照到地面上。
计算方向光非常简单，将方向光的方向和面的朝向点乘就可以得到两个方向的余弦值。
image.png

随意拖动其中的点，如果两点方向刚好相反，点乘结果则为 -1。 如果方向相同结果为 1。
这有什么用呢？如果将三维物体的朝向和光的方向点乘， 结果为 1 则物体朝向和光照方向相同，为 -1 则物体朝向和光照方向相反。
image.png
我们可以将颜色值和点乘结果相乘，BOOM！有光了！
还有一个问题，我们如何知道三维物体的朝向？

一.法向量

我不知道为什么叫法向量，但是在三维图形学中法向量就是描述面的朝向的单位向量。
这是正方体和球体的一些法向量。
image.png

这些插在物体上的线就是对应顶点的法向量。
注意到正方体在每个顶角有 3 个法向量。 这是因为需要 3 个法向量去描述相邻的每个面的朝向。
这里的法向量是基于他们的方向着色的，正 x 方向为红色， 上方向为绿色，正 z 方向为蓝色。

让我们来给上节中的 F 添加法向量。 由于 F 非常规则并且朝向都是 x, y, z轴，所以非常简单。正面的的部分法向量为 0, 0, 1， 背面的部分法向量为 0, 0, -1，左面为 -1, 0, 0，右面为 1, 0, 0，上面为 0, 1, 0， 然后底面为 0, -1, 0。

  1. function setNormals(gl) {
  2.   var normals = new Float32Array([
  3.           // 正面左竖
  4.           0, 0, 1,
  5.           0, 0, 1,
  6.           0, 0, 1,
  7.           0, 0, 1,
  8.           0, 0, 1,
  9.           0, 0, 1,
  11.           // 正面上横
  12.           0, 0, 1,
  13.           0, 0, 1,
  14.           0, 0, 1,
  15.           0, 0, 1,
  16.           0, 0, 1,
  17.           0, 0, 1,
  19.           // 正面中横
  20.           0, 0, 1,
  21.           0, 0, 1,
  22.           0, 0, 1,
  23.           0, 0, 1,
  24.           0, 0, 1,
  25.           0, 0, 1,
  27.           // 背面左竖
  28.           0, 0, -1,
  29.           0, 0, -1,
  30.           0, 0, -1,
  31.           0, 0, -1,
  32.           0, 0, -1,
  33.           0, 0, -1,
  35.           // 背面上横
  36.           0, 0, -1,
  37.           0, 0, -1,
  38.           0, 0, -1,
  39.           0, 0, -1,
  40.           0, 0, -1,
  41.           0, 0, -1,
  43.           // 背面中横
  44.           0, 0, -1,
  45.           0, 0, -1,
  46.           0, 0, -1,
  47.           0, 0, -1,
  48.           0, 0, -1,
  49.           0, 0, -1,
  51.           // 顶部
  52.           0, 1, 0,
  53.           0, 1, 0,
  54.           0, 1, 0,
  55.           0, 1, 0,
  56.           0, 1, 0,
  57.           0, 1, 0,
  59.           // 上横右面
  60.           1, 0, 0,
  61.           1, 0, 0,
  62.           1, 0, 0,
  63.           1, 0, 0,
  64.           1, 0, 0,
  65.           1, 0, 0,
  67.           // 上横下面
  68.           0, -1, 0,
  69.           0, -1, 0,
  70.           0, -1, 0,
  71.           0, -1, 0,
  72.           0, -1, 0,
  73.           0, -1, 0,
  75.           // 上横和中横之间
  76.           1, 0, 0,
  77.           1, 0, 0,
  78.           1, 0, 0,
  79.           1, 0, 0,
  80.           1, 0, 0,
  81.           1, 0, 0,
  83.           // 中横上面
  84.           0, 1, 0,
  85.           0, 1, 0,
  86.           0, 1, 0,
  87.           0, 1, 0,
  88.           0, 1, 0,
  89.           0, 1, 0,
  91.           // 中横右面
  92.           1, 0, 0,
  93.           1, 0, 0,
  94.           1, 0, 0,
  95.           1, 0, 0,
  96.           1, 0, 0,
  97.           1, 0, 0,
  99.           // 中横底面
  100.           0, -1, 0,
  101.           0, -1, 0,
  102.           0, -1, 0,
  103.           0, -1, 0,
  104.           0, -1, 0,
  105.           0, -1, 0,
  107.           // 底部右侧
  108.           1, 0, 0,
  109.           1, 0, 0,
  110.           1, 0, 0,
  111.           1, 0, 0,
  112.           1, 0, 0,
  113.           1, 0, 0,
  115.           // 底面
  116.           0, -1, 0,
  117.           0, -1, 0,
  118.           0, -1, 0,
  119.           0, -1, 0,
  120.           0, -1, 0,
  121.           0, -1, 0,
  123.           // 左面
  124.           -1, 0, 0,
  125.           -1, 0, 0,
  126.           -1, 0, 0,
  127.           -1, 0, 0,
  128.           -1, 0, 0,
  129.           -1, 0, 0]);
  130.   gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  131. }

在代码中使用它们，先移除顶点颜色以便观察光照效果。
image.png

image.png
现在让着色器使用它
首先在顶点着色器中只将法向量传递给片断着色器
image.png
然后在片断着色器中将法向量和光照方向点乘
image.png
然后找到 u_color 和 u_reverseLightDirection 的位置。

  1.  // 寻找全局变量
  2.   var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  3.   var colorLocation = gl.getUniformLocation(program, "u_color");
  4.   var reverseLightDirectionLocation =
  5.       gl.getUniformLocation(program, "u_reverseLightDirection");
  7.   // 设置矩阵
  8.   gl.uniformMatrix4fv(matrixLocation, false, worldViewProjectionMatrix);
  10.   // 设置使用的颜色
  11.   gl.uniform4fv(colorLocation, [0.2, 1, 0.2, 1]); // green
  13.   // 设置光线方向
  14.   gl.uniform3fv(reverseLightDirectionLocation, m4.normalize([0.5, 0.7, 1]));

image.png
如果你旋转了 F 就会发现，F 虽然旋转了但是光照没变， 我们希望随着 F 的旋转正面总是被照亮的。
为了解决这个问题就需要在物体重定向时重定向法向量， 和位置一样我们也可以将向量和矩阵相乘，这个矩阵显然是 world 矩阵， 现在我们只传了一个矩阵 u_matrix，所以先来改成传递两个矩阵， 一个叫做 u_world 的世界矩阵，另一个叫做 u_worldViewProjection 也就是我们现在的 u_matrix。

  1. attribute vec4 a_position;
  2. attribute vec3 a_normal;
  4. uniform mat4 u_worldViewProjection;
  5. uniform mat4 u_world;
  7. varying vec3 v_normal;
  9. void main() {
  10.   // 将位置和矩阵相乘
  11.   gl_Position = u_worldViewProjection * a_position;
  13.   // 重定向法向量并传递给片断着色器
  14.   v_normal = mat3(u_world) * a_normal;
  15. }

注意到我们将 a_normal 与 mat3(u_world) 相乘， 那是因为法向量是方向所以不用关心位移， 矩阵的左上 3x3 部分才是控制姿态的。
找到全局变量

  1.  // 寻找全局变量
  2.   var worldViewProjectionLocation =
  3.       gl.getUniformLocation(program, "u_worldViewProjection");
  4.   var worldLocation = gl.getUniformLocation(program, "u_world");
  6. // 设置矩阵
  7. gl.uniformMatrix4fv(
  8.     worldViewProjectionLocation, false,
  9.     worldViewProjectionMatrix);
  10. gl.uniformMatrix4fv(worldLocation, false, worldMatrix);


image.png
旋转后就会发现面对 F 的面总是被照亮的。
这里有一个问题我不知道如何表述所以就用图解展示。 我们用 normal 和 u_world 相乘去重定向法向量， 如果世界矩阵被缩放了怎么办？事实是会得到错误的法向量

image.png

解决办法就是对世界矩阵求逆并转置， 用这个矩阵就会得到正确的结果。
在图解里中间的 紫色球体是未缩放的， 左边的红色球体用的世界矩阵并缩放了， 你可以看出有些不太对劲。右边蓝色 的球体用的是世界矩阵求逆并转置后的矩阵。
点击图解循环观察不同的表示形式，你会发现在缩放严重时左边的（世界矩阵） 法向量和表面没有保持垂直关系，而右边的（世界矩阵求逆并转置） 一直保持垂直。最后一种模式是将它们渲染成红色，你会发现两个球体的光照结果相差非常大， 基于可视化的结果可以得出使用世界矩阵求逆转置是对的。
修改代码让示例使用这种矩阵，首先更新着色器，理论上我们可以直接更新 u_world 的值，但是最好将它重命名以表示它真正的含义，防止混淆。

  1. attribute vec4 a_position;
  2. attribute vec3 a_normal;
  4. uniform mat4 u_worldViewProjection;
  5. uniform mat4 u_worldInverseTranspose;
  7. varying vec3 v_normal;
  9. void main() {
  10.   // 将位置和矩阵相乘
  11.   gl_Position = u_worldViewProjection * a_position;
  13.   // 重定向法向量并传递给片断着色器
  14.   v_normal = mat3(u_worldInverseTranspose) * a_normal;
  15. }
  17. // var worldLocation = gl.getUniformLocation(program, "u_world"); 弃用
  18. var worldInverseTransposeLocation =
  19.       gl.getUniformLocation(program, "u_worldInverseTranspose");
  21. var worldViewProjectionMatrix = m4.multiply(viewProjectionMatrix, worldMatrix);
  22. var worldInverseMatrix = m4.inverse(worldMatrix);
  23. var worldInverseTransposeMatrix = m4.transpose(worldInverseMatrix);
  25. // 设置矩阵
  26. gl.uniformMatrix4fv(
  27.     worldViewProjectionLocation, false,
  28.     worldViewProjectionMatrix);
  30. // gl.uniformMatrix4fv(worldLocation, false, worldMatrix); 弃用
  32. gl.uniformMatrix4fv(
  33.     worldInverseTransposeLocation, false,
  34.     worldInverseTransposeMatrix);

二. 全部代码

  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 normalLocation = gl.getAttribLocation(program, "a_normal");
  19.   // lookup uniforms
  20.   var worldViewProjectionLocation = gl.getUniformLocation(program, "u_worldViewProjection");
  21.   var worldInverseTransposeLocation = gl.getUniformLocation(program, "u_worldInverseTranspose");
  22.   var colorLocation = gl.getUniformLocation(program, "u_color");
  23.   var reverseLightDirectionLocation =
  24.       gl.getUniformLocation(program, "u_reverseLightDirection");
  26.   // Create a buffer to put positions in
  27.   var positionBuffer = gl.createBuffer();
  28.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  29.   gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  30.   // Put geometry data into buffer
  31.   setGeometry(gl);
  33.   // Create a buffer to put normals in
  34.   var normalBuffer = gl.createBuffer();
  35.   // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = normalBuffer)
  36.   gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
  37.   // Put normals data into buffer
  38.   setNormals(gl);
  40.   function radToDeg(r) {
  41.     return r * 180 / Math.PI;
  42.   }
  44.   function degToRad(d) {
  45.     return d * Math.PI / 180;
  46.   }
  48.   var fieldOfViewRadians = degToRad(60);
  49.   var fRotationRadians = 0;
  51.   drawScene();
  53.   // Setup a ui.
  54.   webglLessonsUI.setupSlider("#fRotation", {value: radToDeg(fRotationRadians), slide: updateRotation, min: -360, max: 360});
  56.   function updateRotation(event, ui) {
  57.     fRotationRadians = degToRad(ui.value);
  58.     drawScene();
  59.   }
  61.   // Draw the scene.
  62.   function drawScene() {
  63.     webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  65.     // Tell WebGL how to convert from clip space to pixels
  66.     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  68.     // Clear the canvas AND the depth buffer.
  69.     gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  71.     // Turn on culling. By default backfacing triangles
  72.     // will be culled.
  73.     gl.enable(gl.CULL_FACE);
  75.     // Enable the depth buffer
  76.     gl.enable(gl.DEPTH_TEST);
  78.     // Tell it to use our program (pair of shaders)
  79.     gl.useProgram(program);
  81.     // Turn on the position attribute
  82.     gl.enableVertexAttribArray(positionLocation);
  84.     // Bind the position buffer.
  85.     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  87.     // Tell the position attribute how to get data out of positionBuffer (ARRAY_BUFFER)
  88.     var size = 3;          // 3 components per iteration
  89.     var type = gl.FLOAT;   // the data is 32bit floats
  90.     var normalize = false; // don't normalize the data
  91.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  92.     var offset = 0;        // start at the beginning of the buffer
  93.     gl.vertexAttribPointer(
  94.         positionLocation, size, type, normalize, stride, offset);
  96.     // Turn on the normal attribute
  97.     gl.enableVertexAttribArray(normalLocation);
  99.     // Bind the normal buffer.
  100.     gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
  102.     // Tell the attribute how to get data out of normalBuffer (ARRAY_BUFFER)
  103.     var size = 3;          // 3 components per iteration
  104.     var type = gl.FLOAT;   // the data is 32bit floating point values
  105.     var normalize = false; // normalize the data (convert from 0-255 to 0-1)
  106.     var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
  107.     var offset = 0;        // start at the beginning of the buffer
  108.     gl.vertexAttribPointer(
  109.         normalLocation, size, type, normalize, stride, offset);
  111.     // Compute the projection matrix
  112.     var aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
  113.     var zNear = 1;
  114.     var zFar = 2000;
  115.     var projectionMatrix = m4.perspective(fieldOfViewRadians, aspect, zNear, zFar);
  117.     // Compute the camera's matrix
  118.     var camera = [100, 150, 200];
  119.     var target = [0, 35, 0];
  120.     var up = [0, 1, 0];
  121.     var cameraMatrix = m4.lookAt(camera, target, up);
  123.     // Make a view matrix from the camera matrix.
  124.     var viewMatrix = m4.inverse(cameraMatrix);
  126.     // Compute a view projection matrix
  127.     var viewProjectionMatrix = m4.multiply(projectionMatrix, viewMatrix);
  129.     // Draw a F at the origin
  130.     var worldMatrix = m4.yRotation(fRotationRadians);
  132.     // Multiply the matrices.
  133.     var worldViewProjectionMatrix = m4.multiply(viewProjectionMatrix, worldMatrix);
  134.     var worldInverseMatrix = m4.inverse(worldMatrix);
  135.     var worldInverseTransposeMatrix = m4.transpose(worldInverseMatrix);
  137.     // Set the matrices
  138.     gl.uniformMatrix4fv(worldViewProjectionLocation, false, worldViewProjectionMatrix);
  139.     gl.uniformMatrix4fv(worldInverseTransposeLocation, false, worldInverseTransposeMatrix);
  141.     // Set the color to use
  142.     gl.uniform4fv(colorLocation, [0.2, 1, 0.2, 1]); // green
  144.     // set the light direction.
  145.     gl.uniform3fv(reverseLightDirectionLocation, m4.normalize([0.5, 0.7, 1]));
  147.     // Draw the geometry.
  148.     var primitiveType = gl.TRIANGLES;
  149.     var offset = 0;
  150.     var count = 16 * 6;
  151.     gl.drawArrays(primitiveType, offset, count);
  152.   }
  153. }
  155. // Fill the buffer with the values that define a letter 'F'.
  156. function setGeometry(gl) {
  157.   var positions = new Float32Array([
  158.           // left column front
  159.           0,   0,  0,
  160.           0, 150,  0,
  161.           30,   0,  0,
  162.           0, 150,  0,
  163.           30, 150,  0,
  164.           30,   0,  0,
  166.           // top rung front
  167.           30,   0,  0,
  168.           30,  30,  0,
  169.           100,   0,  0,
  170.           30,  30,  0,
  171.           100,  30,  0,
  172.           100,   0,  0,
  174.           // middle rung front
  175.           30,  60,  0,
  176.           30,  90,  0,
  177.           67,  60,  0,
  178.           30,  90,  0,
  179.           67,  90,  0,
  180.           67,  60,  0,
  182.           // left column back
  183.             0,   0,  30,
  184.            30,   0,  30,
  185.             0, 150,  30,
  186.             0, 150,  30,
  187.            30,   0,  30,
  188.            30, 150,  30,
  190.           // top rung back
  191.            30,   0,  30,
  192.           100,   0,  30,
  193.            30,  30,  30,
  194.            30,  30,  30,
  195.           100,   0,  30,
  196.           100,  30,  30,
  198.           // middle rung back
  199.            30,  60,  30,
  200.            67,  60,  30,
  201.            30,  90,  30,
  202.            30,  90,  30,
  203.            67,  60,  30,
  204.            67,  90,  30,
  206.           // top
  207.             0,   0,   0,
  208.           100,   0,   0,
  209.           100,   0,  30,
  210.             0,   0,   0,
  211.           100,   0,  30,
  212.             0,   0,  30,
  214.           // top rung right
  215.           100,   0,   0,
  216.           100,  30,   0,
  217.           100,  30,  30,
  218.           100,   0,   0,
  219.           100,  30,  30,
  220.           100,   0,  30,
  222.           // under top rung
  223.           30,   30,   0,
  224.           30,   30,  30,
  225.           100,  30,  30,
  226.           30,   30,   0,
  227.           100,  30,  30,
  228.           100,  30,   0,
  230.           // between top rung and middle
  231.           30,   30,   0,
  232.           30,   60,  30,
  233.           30,   30,  30,
  234.           30,   30,   0,
  235.           30,   60,   0,
  236.           30,   60,  30,
  238.           // top of middle rung
  239.           30,   60,   0,
  240.           67,   60,  30,
  241.           30,   60,  30,
  242.           30,   60,   0,
  243.           67,   60,   0,
  244.           67,   60,  30,
  246.           // right of middle rung
  247.           67,   60,   0,
  248.           67,   90,  30,
  249.           67,   60,  30,
  250.           67,   60,   0,
  251.           67,   90,   0,
  252.           67,   90,  30,
  254.           // bottom of middle rung.
  255.           30,   90,   0,
  256.           30,   90,  30,
  257.           67,   90,  30,
  258.           30,   90,   0,
  259.           67,   90,  30,
  260.           67,   90,   0,
  262.           // right of bottom
  263.           30,   90,   0,
  264.           30,  150,  30,
  265.           30,   90,  30,
  266.           30,   90,   0,
  267.           30,  150,   0,
  268.           30,  150,  30,
  270.           // bottom
  271.           0,   150,   0,
  272.           0,   150,  30,
  273.           30,  150,  30,
  274.           0,   150,   0,
  275.           30,  150,  30,
  276.           30,  150,   0,
  278.           // left side
  279.           0,   0,   0,
  280.           0,   0,  30,
  281.           0, 150,  30,
  282.           0,   0,   0,
  283.           0, 150,  30,
  284.           0, 150,   0]);
  286.   // Center the F around the origin and Flip it around. We do this because
  287.   // we're in 3D now with and +Y is up where as before when we started with 2D
  288.   // we had +Y as down.
  290.   // We could do by changing all the values above but I'm lazy.
  291.   // We could also do it with a matrix at draw time but you should
  292.   // never do stuff at draw time if you can do it at init time.
  293.   var matrix = m4.xRotation(Math.PI);
  294.   matrix = m4.translate(matrix, -50, -75, -15);
  296.   for (var ii = 0; ii < positions.length; ii += 3) {
  297.     var vector = m4.transformPoint(matrix, [positions[ii + 0], positions[ii + 1], positions[ii + 2], 1]);
  298.     positions[ii + 0] = vector[0];
  299.     positions[ii + 1] = vector[1];
  300.     positions[ii + 2] = vector[2];
  301.   }
  303.   gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  304. }
  306. function setNormals(gl) {
  307.   var normals = new Float32Array([
  308.           // left column front
  309.           0, 0, 1,
  310.           0, 0, 1,
  311.           0, 0, 1,
  312.           0, 0, 1,
  313.           0, 0, 1,
  314.           0, 0, 1,
  316.           // top rung front
  317.           0, 0, 1,
  318.           0, 0, 1,
  319.           0, 0, 1,
  320.           0, 0, 1,
  321.           0, 0, 1,
  322.           0, 0, 1,
  324.           // middle rung front
  325.           0, 0, 1,
  326.           0, 0, 1,
  327.           0, 0, 1,
  328.           0, 0, 1,
  329.           0, 0, 1,
  330.           0, 0, 1,
  332.           // left column back
  333.           0, 0, -1,
  334.           0, 0, -1,
  335.           0, 0, -1,
  336.           0, 0, -1,
  337.           0, 0, -1,
  338.           0, 0, -1,
  340.           // top rung back
  341.           0, 0, -1,
  342.           0, 0, -1,
  343.           0, 0, -1,
  344.           0, 0, -1,
  345.           0, 0, -1,
  346.           0, 0, -1,
  348.           // middle rung back
  349.           0, 0, -1,
  350.           0, 0, -1,
  351.           0, 0, -1,
  352.           0, 0, -1,
  353.           0, 0, -1,
  354.           0, 0, -1,
  356.           // top
  357.           0, 1, 0,
  358.           0, 1, 0,
  359.           0, 1, 0,
  360.           0, 1, 0,
  361.           0, 1, 0,
  362.           0, 1, 0,
  364.           // top rung right
  365.           1, 0, 0,
  366.           1, 0, 0,
  367.           1, 0, 0,
  368.           1, 0, 0,
  369.           1, 0, 0,
  370.           1, 0, 0,
  372.           // under top rung
  373.           0, -1, 0,
  374.           0, -1, 0,
  375.           0, -1, 0,
  376.           0, -1, 0,
  377.           0, -1, 0,
  378.           0, -1, 0,
  380.           // between top rung and middle
  381.           1, 0, 0,
  382.           1, 0, 0,
  383.           1, 0, 0,
  384.           1, 0, 0,
  385.           1, 0, 0,
  386.           1, 0, 0,
  388.           // top of middle rung
  389.           0, 1, 0,
  390.           0, 1, 0,
  391.           0, 1, 0,
  392.           0, 1, 0,
  393.           0, 1, 0,
  394.           0, 1, 0,
  396.           // right of middle rung
  397.           1, 0, 0,
  398.           1, 0, 0,
  399.           1, 0, 0,
  400.           1, 0, 0,
  401.           1, 0, 0,
  402.           1, 0, 0,
  404.           // bottom of middle rung.
  405.           0, -1, 0,
  406.           0, -1, 0,
  407.           0, -1, 0,
  408.           0, -1, 0,
  409.           0, -1, 0,
  410.           0, -1, 0,
  412.           // right of bottom
  413.           1, 0, 0,
  414.           1, 0, 0,
  415.           1, 0, 0,
  416.           1, 0, 0,
  417.           1, 0, 0,
  418.           1, 0, 0,
  420.           // bottom
  421.           0, -1, 0,
  422.           0, -1, 0,
  423.           0, -1, 0,
  424.           0, -1, 0,
  425.           0, -1, 0,
  426.           0, -1, 0,
  428.           // left side
  429.           -1, 0, 0,
  430.           -1, 0, 0,
  431.           -1, 0, 0,
  432.           -1, 0, 0,
  433.           -1, 0, 0,
  434.           -1, 0, 0]);
  435.   gl.bufferData(gl.ARRAY_BUFFER, normals, gl.STATIC_DRAW);
  436. }
  438. main();