这是我参与「第五届青训营」笔记创作活动的第9天

一、本堂课重点内容：

介绍什么是WebGL，这个完整的WebGL程序执行过程，WebGL的简单案例。

二、详细知识点介绍：

1.什么是WebGL？

WebGL它是一个与具有丰富特性的 HTML5 一起运行的 3D JavaScript API。JavaScript 开发人员现在可以创建交互式 3D 游戏、应用程序和 3D 增强的用户界面。由于 WebGL 被集成到主流浏览器中，只配备了浏览器和文本编辑器的大量开发人员终于可以进行 3D 应用程序开发了。通过WebGL我们可以实现一些3D特效，并且可以进行缩放和旋转，还能实现一些动态的2D平面特效动画等等。

2.WebGL的执行过程

创建WebGL上下文
创建WebGL Program
将数据存入缓冲区
将缓冲区数据读取到GPU
GPU执行WebGL程序，输出结果

3.三角形绘制案例

HTML

 <canvas id="WebGL" width="200" height="200">

JS

//获取画布元素
      var WebGL = document.getElementById('WebGL')
      //获取到元素的上下文环境对象
      var gl = WebGL.getContext('webgl')
      //顶点着色器变量
      var VSHADER_SOURCE =
        //使用存储限定符定义一个接受顶点坐标的变量
        'attribute vec4 a_Position;' +
        'void main() {' +
        //定义点的坐标并转换成变量保存
        'gl_Position = a_Position; ' +
        '} '
      //片段着色器变量
      var FSHADER_SOURCE =
        'void main() {' +
        //设置图形像素的颜色并保存
        'gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);' +
        '}'
      //新建一个用于装顶点字符串的着色器对象
      var vertShader = gl.createShader(gl.VERTEX_SHADER)
      //加载保存好的顶点代码字符串变量
      gl.shaderSource(vertShader, VSHADER_SOURCE)
      //编译顶点着色器
      gl.compileShader(vertShader)

      //新建一个用于装片段字符串的着色器对象
      var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
      //加载保存好的片段代码字符串变量
      gl.shaderSource(fragShader, FSHADER_SOURCE)
      //编译片段着色器
      gl.compileShader(fragShader)
      //新建一个程序
      var shaderProgram = gl.createProgram()
      //分别附加两个已编译好的着色器对象
      gl.attachShader(shaderProgram, vertShader)
      gl.attachShader(shaderProgram, fragShader)
      //链接两个附件加好的着色器程序
      gl.linkProgram(shaderProgram)
      //开启程序的使用
      gl.useProgram(shaderProgram)
      //定义一个类型数组保存顶点坐标值
      var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
      //先创建一个缓存对象
      var vertexBuffer = gl.createBuffer()
      //说明缓存对象保存的类型
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
      //写入坐标数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
      //获取到顶点着色器中变量
      var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position')
      //将坐标值赋值给变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
      //开启变量值的使用
      gl.enableVertexAttribArray(a_Position)
      //绘制指定位置的图形
      gl.drawArrays(gl.TRIANGLES, 0, 3)

三、课后个人总结：

通过对本次课程的学习让我对WebGL有了初步的了解，了解了WebGL是如何开发的，以及WebGL简单2D图形的实现。

四、引用参考：

字节青训营录播-WebGL
WebGL入门教程博客

WebGL|青训营笔记