前端图形学(二十二)一切绕过原生WebGl直接上ThreeJs的都是耍流氓

欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

---

申明

从这篇文章开始，我们正式进入web3D的编程了，那么提到web3D，大家可能第一印象就想到了ThreeJs了，抱歉，正如题目所言，一切不提原生WebGl而直接开讲ThreeJs的都是在耍流氓！！！这就好比只教你使用Jquery而不管原生JS的是一个道理。

学习WebGL的必要性

1. 作为threejs的底层代码，为了更好的去理解threejs，webgl是我们绕不过去的坎儿
2. webgl程序是在GPU中执行，Canvas2d则是在CPU中执行。区别很大~
3. 没有第三了……

下面就开始进入今天的主题了

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中的各种材质其实就是我们今天所说的着色器代码！！

以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散~~

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。

未完待续。。。

文章来源: https://www.toutiao.com/group/6710189347133456900/