欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。
申明
从这篇文章开始，我们正式进入web3D的程式设计了，那么提到web3D，大家可能第一印象就想到了ThreeJs了，抱歉，正如题目所言，一切不提原生WebGl而直接开讲ThreeJs的都是在耍流氓！！！这就好比只教你使用Jquery而不管原生JS的是一个道理。学习WebGL的必要性
作为threejs的底层程式码，为了更好的去理解threejs，webgl是我们绕不过去的坎儿webgl程式是在GPU中执行，Canvas2d则是在CPU中执行。区别很大~没有第三了……下面就开始进入今天的主题了webgl概念名词扫盲
着色器。着色器是用着色器语言（GLSL）编写的程式，它携带着绘制形状的顶点资讯以及构造绘制在屏幕上画素的所需资料，换句话说，它负责记录着画素点的位置和颜色。
因此，着色器有两种：一是顶点着色器（记录顶点位置），二是片元着色器（记录各顶点的颜色）。
下面先来认识一下着色器程式码：
说真的，初次看到这样的程式码，相信很多程序员的内心是拒绝的，因为好像看不太懂。
没关系，我来大概解释一下。
在顶点着色器程式码中，void main() 为主入口方法，相信熟悉java C这些编译型语言的程序员应该很熟悉了。
gl_Position ＝ vec4(0.0,0.0,0.0,1.0);//
gl_Position 为着色器语言中的变数
gl_PointSize 一样，表示点的大小的变数。
在片元着色器中
gl_FragColor ＝vec4(1.0,0.0,0.0,1.0);
其中：gl_Position 、gl_PointSize、gl_FragColor 都是着色器语言中的内建变数，也就是不需要申明的变数。
可以理解为我们定义了一个顶点的颜色。其中 vec4()中的4个引数分别代表颜色中的RGBA四个分量，不同的是，RGBA四个分量取值是[0~255] ，而在着色器语言中，取值则是[0~1]。
那么我们上面定义的颜色值对应的RGBA应该为(255,0,0,1);就是红色了~
值得注意的是：在着色器语言中，每一行程式码的结尾处的分号(;)不可少。一定不能少，否则你懂的。
那么我们应该从现在开始建立起顶点的概念，不管是在原生的Webgl还是threeJs中，顶点的概念非常重要~
上面说到，webgl 提供API去编译著这些色器程式码，然后在GPU中执行，也就是说在GPU中提供了可供开发者程式设计的硬件单元。而我们之前所学到的Canvas2d则是在CPU中执行。那么，也就是说，我们的CPU现在要与GPU进行互动通讯，所以我们不得不提到WebGL给我们提供的API了。
webgl执行步骤
一、获取webgl上下文物件var canvas = document.getElementById('webgl');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
var gl = canvas.getContext('webgl');
二、建立顶点着色器和片元着色器物件
var vertshader = gl.createShader(gl.VERTEX_SHADER);
var flagShader = gl.createShader(gl.FRAGMENT_SHADER);
三、CPU中顶点着色器单元和片元着色器单元分别执行对应的着色器源代码，并编译著色器程式码
//建立顶点着色器
var vertshader = gl.createShader(gl.VERTEX_SHADER);
//在CPU中执行顶点着色器程式码
gl.shaderSource(vertshader, vshareSource);
//编译顶点着色器程式码
gl.compileShader(vertshader);
//建立片元着色器
var flagShader = gl.createShader(gl.FRAGMENT_SHADER);
//在CPU中执行片元着色器程式码
gl.shaderSource(flagShader, fshaderSource);
//编译片元着色器程式码
gl.compileShader(flagShader);
四：建立应用程序，并分别着我们的顶点着色器和片元着色器与之相关联
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertshader);
gl.attachShader(shaderProgram, flagShader);
五：连线和使用应用程序
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
六：绘制
gl.drawArrays(gl.POINTS, 0, 1);
完整程式码：
最后一步的绘制我们采用的是点模式的绘制，第二个引数0代表的是：从第1个点开始绘制，1表示的是绘制一个点。刚好我们的前端的顶点着色器中定义了一个点座标。
最终效果
最终的效果就被渲染出来啦
总结
从效果图中可以看出来，我们定义的顶点是(0,0,0)的位置，最终的显示效果在画布的正中间。说明Webgl的原点是在画布的中心点（Threejs中也是如此），而我们Canvas2d中原点是画布的左上角位置。
着色器语言的基础语法以及在CPU中编译传送到GPU中对应的硬件单元中执行。
应用程序的概念和着色器单元的关联。
webgl的最终绘制。
今天的主要内容可能比较枯燥，但是这些概念性的内容能让我们更好的理解ThreeJs,比如Threejs中的各种材质其实就是我们今天所说的着色器程式码！！
以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散~~
这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。
未完待续。。。
