learn-webgl
/
22-helloCube.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <!--通过canvas标签创建一个800px*800px大小的画布-->
  <canvas id="webgl" width="800" height="800"></canvas>
  <script type="text/javascript" src="./lib/cuon-matrix.js"></script>
  <script>
    //顶点着色器
    var VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'attribute vec4 a_Color;\n' + //声明attribute变量a_Color，用来存放顶点颜色信息
      'uniform mat4 u_MvpMatrix;\n' + //声明uniform变量u_MvpMatrix，用来存放模型视图投影组合矩阵
      'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来向片元着色器传值顶点颜色信息
      'void main(){\n' +
      '  gl_Position = u_MvpMatrix * a_Position;\n' + //将模型视图投影组合矩阵与顶点坐标相乘赋值给顶点着色器内置变量gl_Position
      '  v_Color = a_Color;\n' + //将顶点颜色信息传给片元着色器，
      '}\n';

    //片元着色器
    var FSHADER_SOURCE = '' +
      'precision mediump float;\n' + // 设置精度
      'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息
      'void main(){\n' +
      //将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor
      ' gl_FragColor = v_Color;\n' +
      '}\n';

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
      //创建顶点着色器对象
      var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      var program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      gl.program = program
      //返回程序program对象
      return program;
    }

    function init() {
      //通过getElementById()方法获取canvas画布
      var canvas = document.getElementById('webgl');
      //通过方法getContext()获取WebGL上下文
      var gl = canvas.getContext('webgl');
      //初始化着色器
      if (!initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('初始化着色器失败');
        return;
      }

      // 设置canvas的背景色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //初始化顶点坐标和顶点颜色
      var n = initVertexBuffers(gl)

      setMatrixAndDraw(gl, n)

    }

    //设置矩阵并绘图
    function setMatrixAndDraw(gl, n) {

      //开启隐藏面消除
      gl.enable(gl.DEPTH_TEST)

      //清空颜色和深度缓冲区
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

      //获取顶点着色器uniform变量u_MvpMatrix的存储地址
      var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix')

      //创建模型视图投影矩阵
      var mvpMatrix = new Matrix4()

      //设置可视空间/透视投影矩阵
      mvpMatrix.setPerspective(30, 1, 1, 100)

      //设置视点、视线和上方向
      mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0)

      //将模型视图投影组合矩阵传给顶点着色器uniform变量u_MvpMatrix
      gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements)

      //绘制立方体
      gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0)
    }

    //初始化顶点坐标和顶点颜色
    function initVertexBuffers(gl) {
      var verticesColors = new Float32Array([
        1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v0 白色
        -1.0, 1.0, 1.0, 1.0, 0.0, 1.0, // v1 品红
        -1.0, -1.0, 1.0, 1.0, 0.0, 0.0, // v2 红色
        1.0, -1.0, 1.0, 1.0, 1.0, 0.0, // v3 黄色
        1.0, -1.0, -1.0, 0.0, 1.0, 0.0, // v4 绿色
        1.0, 1.0, -1.0, 0.0, 1.0, 1.0, // v5 青色
        -1.0, 1.0, -1.0, 0.0, 0.0, 1.0, // v6 蓝色
        -1.0, -1.0, -1.0, 0.0, 0.0, 0.0 // v7 黑色
      ]);

      //顶点索引
      var indices = new Uint8Array([
        0, 1, 2, 0, 2, 3, // 前
        0, 3, 4, 0, 4, 5, // 右
        0, 5, 6, 0, 6, 1, // 上
        1, 6, 7, 1, 7, 2, // 左
        7, 4, 3, 7, 3, 2, // 下
        4, 7, 6, 4, 6, 5 // 后
      ])

      //创建缓冲区对象
      var vertexColorBuffer = gl.createBuffer();
      var indexBuffer = gl.createBuffer()

      //将顶点坐标和顶点颜色信息写入缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)
      gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)

      //获取类型化数组中每个元素的大小
      var FSIZE = verticesColors.BYTES_PER_ELEMENT

      //获取顶点着色器attribute变量a_Position的存储地址, 分配缓存并开启
      var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
      gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0)
      gl.enableVertexAttribArray(a_Position)

      //获取顶点着色器attribute变量a_Color(顶点颜色信息)的存储地址, 分配缓存并开启
      var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
      gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3)
      gl.enableVertexAttribArray(a_Color)

      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW)
      // 解绑缓冲区对象
      gl.bindBuffer(gl.ARRAY_BUFFER, null);
      return indices.length

    }

    init()
  </script>
</body>

</html>