WebGL 月影带练 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第16天，今天学习WebGL相关知识体系。

什么是WebGL

WebGL可以让我们在浏览器上进行3D绘图，并且可以提供硬件3D加速渲染，使得浏览器可以更流畅地展示3D场景，在一些前端3D图形展示交互场景中有重要应用。WebGL对浏览器兼容性要求高，越来越多的主流浏览器都开始支持WebGL。

webgl行业背景

随着 5G 时代的到来，3D可视化需求大量涌现。3D 游戏，酷炫的活动宣传页，三维数字城市，VR全景展示、3D 产品展示等领域中，很多项目都是用 WebGL 实现的，也只能用WebGL来做，也就是说，WebGL 的时代就在眼前了

• canvas

  canvas画布是HTML5中提供的一个可以在页面上绘图的api，我们通常习惯用canvas来绘制2D图形，比如绘制一个红色三角形：

  var c = document.getElementById('canvas');
  
  var cxt = c.getContext('2d');
  
  cxt.fillStyle = 'red';
  
  cxt.moveTo(0,0);
  
  cxt.lineTo(10,10);
  
  cxt.lineTo(0,20);
  
  cxt.fill();
  

• 着色器

  WebGL绘图还需要着色器，着色器分为顶点着色器和片元着色器，WebGL的着色器代码是通过着色器语言GLSL ES来编写的，跟我们平时接触的程序运行在CPU上不一样，着色器语言是运行在GPU上的。 顶点着色器主要用来定义顶点的位置和大小：

  var vertexSource = 'void main(){' +      
      //顶点像素大小
      'gl_PointSize=50.0;' +      
      //顶点位置    
      'gl_Position=vec4(0.0,0.0,0.0,1.0);' +   
  '}';
  

  除了上面通过字符串形式引入顶点着色器代码外，还可以通过script标签引入顶点着色器代码：

  <script id="vertexShader" type="x-shader/x-vertex">  
  void main() {    
      gl_PointSize=50.0;    
      gl_Position =vec4(0.0,0.0,0.0,1.0);  
  }
  </script>
  

  获取script中的顶点着色器代码：

  var vertexShaderDom = document.getElementById('vertexShader');
  var vertexSource = vertexShaderDom.innerText;
  

• WebGL坐标系

  WebGL使用的是三维坐标系，具有X轴、Y轴和Z轴，其中水平方向是X轴，垂直方向是Y轴，垂直于屏幕的是Z轴

  在2D绘图环境的坐标系统中，默认情况下canvas是与窗口坐标系统相同的，以canvas的左上角为坐标原点，沿X轴向右为正值，沿Y轴向下为正值，canvas坐标的单位都是 "px"。