带你快速入门webgl与shader着色器渲染基础

webgl的初见（二维）

你是谁？

WebGL经常被当成3D API，人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。 想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。
WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器， 另一个叫片断着色器，并且使用一种和C或C++类似的强类型的语言 GLSL。 (GL着色语言)。 每一对组合起来称作一个 program（着色程序）。——资料来源

前端的角度

对于前端而言，我们一般不太需要直接使用webgl的原生API，主流的框架就足以应对我们的开发了，但是如果我们能够了解webgl的原理的话，对于我们使用框架会更加容易上手。

知根知底

webgl特别的地方

1. WebGL在电脑的GPU中运行。
2. WebGL是一个“中央空调”，不仅可以在浏览器使用，通过一定的方法，也可以直接在OpenGL使用。
3. 降低了浏览器的依赖：可以实现一些更加酷炫的效果，同时又不增加浏览器的负担。

简单的流程图

交个“朋友”吧

shader

1. 顶点着色器
   作用：计算顶点的位置

2. 片断着色器
   作用：计算出当前绘制图元中每个像素的颜色值

   还是不知道这2个是什么东东？
   

GPU的翻译：GLSL语言

GLSL全称是 Graphics Library Shader Language （图形库着色器语言），是着色器使用的语言。 它有一些不同于JavaScript的特性，主要目的是为栅格化图形提供常用的计算功能。

• 顶点着色器

  • 从JS获取的数据方式
  1. Attributes 属性 (从缓冲中获取的数据)
  2. Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值)
  3. Textures 纹理 (从像素或纹理元素中获取的数据，来自于图片的数据)
  4. Varyings 可变量（一种顶点着色器给片断着色器传值的方式）

  • 把最终渲染的位置返回给GPU

    		gl_Position = Vec4(0,0,0,0);
    

• 片断着色器

  • 从JS获取的数据方式
  1. Attributes 属性 (从缓冲中获取的数据)
  2. Uniforms 全局变量 (在一次绘制中对所有顶点保持一致值)
  3. Varyings 可变量（一种顶点着色器给片断着色器传值的方式）

  • 把最终渲染的位置返回给GPU

    		gl_FragColor = Vec4(r,g,b,a);
    

其他语法：
更多详细请点击链接了解

​

JS层级的操作

渲染前的准备

1. 着色器（shader）程序创建
2. 缓存区创建与绑定
3. 渲染配置设置与渲染

结合代码来看

着色器（shader）程序创建

1. 读取shader

在JS代码中，不管你怎么样引入，GLSL在JS代码中存在的方式是字符串。

• HTML标签引入

  	<!-- vertex shader -->
  	<script  id="vertex-shader-2d" type="x-shader/x-vertex">
  	attribute vec2 a_position;
  	uniform mat3 u_matrix;
  	varying vec4 v_color;
  	void main() {
         
         
  	  gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
  	  v_color = gl_Position * 0.5 + 0.5;
  	}
  	</script>
  	<!-- fragment shader -->
  	<script  id="fragment-shader-2d" type="x-shader/x-fragment">
  	precision mediump float;
  	varying vec4 v_color;
  	void main() {
         
         
  	  gl_FragColor = v_color;
  	}
  	</script>
  	<script>
  		var vertexShaderSource = document.querySelector("#vertex-shader-2d").text;
  		var fragmentShaderSource = document.