来一点题外话

5G距离大家越来越近，今年在拉斯维加斯CES 2019的每个人都在谈论它将要做什么。如果你认为5G带来的只是下载视频更快，上网更加流畅，那你就错了。

5G可以带给我们的远不止这些。在5G时代，你眼前的一切都可以连接在一起，水杯、汽车、空调、电视机、农作物……真正实现了万物互联互通。

5G具有超高速率、超大连接、超低时延三大特性，通信速率会比4G高出10-100倍，5G生态圈中的云计算、AI、无人机、VR和大视频都会同步发展。

可以说，5G将引领一场新的网络革命。

5G对前端工程来说可能也是一场技术改革，过去和现在所经历的互联网繁荣都是4G对3G的颠覆。

对于前端工程师来说

相比4G，5G快的不只是速度
新的交互场景，新的交互形式
对安全，可靠等的要求越来越高

继移动互联网之后，物联网的发展将带来新的应用场景，包括智能家居，可穿戴设备等领域将带来大量的前端开发需求。前端将不限于传统的PC屏幕和各种尺寸的手机屏幕，这意味着前端工程师的战场将更加多样化，复杂化。

新的场景必然带来交互方式的改变，不论是传统的PC还是新出现的手机和pad设备，都是基于数遍或者触摸等接触式的操作，新的场景可能带来声音，动作等新的交互方式，也变得更加复杂。

而要做到这些，我们现有的技术可能不能全部满足我们想要实现的场景。就这样，我就踏上了学习WebGL的慢慢长路上。

WebGL概述

WebGL，是一项用来网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。WebGL技术结合了HTML5和JavaScript,允许开发者在网页上创建和渲染三维图形。

WebGl的起源

在个人计算机上使用最广泛的两种三维图形渲染技术是Direct3D和OpenGL。 Direact3D是微软DireactX技术的一部分，主要用于Windows平台。而OpenGL由于其开放和免费的特性，在多平台上都有广泛的使用。而我们WebGL也是源于继承OpenGL的。 OpenGL支持一项非常重要的特性，即可编程着色器方法。该特性被OpenGL2.0继承，并成为了WebGL1.0标准的核心部分。

着色器方法

着色器方法或称着色器，使用一种类似于C的编程语言实现金梅的视觉效果。编写着色器的语言有称为着色器语言，OpenGL ES 2.0 基于OpenGL着色器语言(GLSL),因此后者又称为OpenGl着色器语言(GLSL ES),WebGL基于OpenGL ES 2.0也使用GLSL ES编写着色器

WebGL的优势

现在我们可以使用css或canvas标签在网页上绘制二维图形，以呈现更丰富的内容，WebGL则走的更远，它允许JavaScript在网页上显示和操作三维图形。有了WebGL的帮助，开发三位的客户界面，运行三维的网页游戏，对互联网上的海量数据进行三维可视化都成为了可能。虽然，WebGL强大到令人惊叹，但是使用这项技术进行开发却很简单。

你只需要一个文本编辑器和浏览器。
你可以充分利用浏览器的功能。

webGL程序的结构

然而，因为通常GLSL ES是(以字符串的形式)在Javascript中编写的，实际上WebGL程序也只需要用到JavaScript文件。虽然，WebGL让网页更复杂了，但它仍然保持着于传统的网页相同的机构。

WebGL入门

最短的WebGL程序：清空绘图区

function main(){
    //获取canvas元素
    var canvas = document.getElementById('webgl')
    
    //获取WebGL绘图上下文
    var gl = getWebGLcontext(canvas)
    if(!gl){
        console.log("没有获取到WebGl")
        return
    }
    
    //指定清空canvas的颜色
    gl.clearColor(0.0,0.0,0.0,1.0)
    //清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT)

我们来归纳一下，WebGL的工作流程。

获取Canvas元素
获取WebGl绘图的上下文
设置背景色
清空canvas

其实，熟悉canvas绘制流程的朋友都应该会觉得眼熟。事实上，的确也差不多。

获取canvas元素

我们首先会去获取canvas元素，并将其保存在canvas变量里。

为WebGL获取绘图的上下文

var gl = getWebGLContext(canvas)

使用变量canvas来获取WebGL绘图的上下文。这个函数是WebGL编程有用的辅助函数之一。

getWebGLContext(element,[,debug])
element	指定canvas元素
debug	默认为false，如果设置为true，javascript中发生的错误显示在控制台，注意:在调试结束后关闭它，否则会影响性能

设置canvas的背景色

gl.clearColor(red,green,blue,alpha) 指定绘图区域的背景色

gl.clearColor(red,green,blue,alpha)
red	指定红色值(从0,0到1.0)
green	指定绿色值(从0,0到1.0)
blue	指定绿色值(从0,0到1.0)
alpha	指定透明度值(从0,0到1.0)

如果任何值小于0.0或者大于1.0，那么就会分别截断为0.0或者1.0

在这里我们会发现第一个不同，就是颜色的分量值，一般我们都会用到rgba来表示颜色，它的颜色取值范围0-255之间，但是在WebGL中，它继承了OpenGL，所以它也遵循了OpenGL的颜色分量的取值，即从0.0到1.0。

第二个不同就是一旦指定了背景颜色，颜色就会贮存在WebGL系统中，在一下调用gl.clearColor()方法前不会改变。换句话来说，如果将来你什么时候还想用同一个颜色在清空一次绘图区，没必要在指定一次背景色。

清空canvas

最后，你就调用gl.clear()函数，用上面定义好的背景色清空（即填充背景，擦除已经绘制的内容）绘图区域。

注意：函数的参数是gl.COLOR_BUFFER_BIT，而不是表示绘图区于的canvas。这是因为WebGL中的gl.clear()方法来自OpenGL，它基于多基本缓存区模型。清空绘图区域，实际上是在清空颜色缓冲区(color buffer),传递的参数COLOR_BUFFER_BIT就是在告诉WebGL我们在操作颜色缓冲区。

gl.clearC(buffer)将指定缓冲区设定为预定的值，像例子所说，如果是像清空颜色缓冲区，那么将使用gl.clearColor定义的颜色。

gl.clearC(buffer)
buffer	gl.COLOR_BUFFER_BIT 指定颜色缓存／gl.DEPTH_BUFFER_BIT 指定深度缓存／gl。STENCIL_BUFFER_BIT 指定模版缓存

绘制一个点

接下来我们将画一个点，交互是随着我们的鼠标点击而出现，在不通的WebGL象限里出现的颜色也会不同。

这个例子很完善的展示了Javascript与WebGL之间是怎么交流沟通的，第一眼会很难看懂，可以试着理解理解。

//顶点着色器
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '  gl_PointSize = 10.0;\n' +
  '}\n';

// 片元着色器
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'uniform vec4 u_FragColor;\n' +  // uniform変数
  'void main() {\n' +
  '  gl_FragColor = u_FragColor;\n' +
  '}\n';

//初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('着色器初始化失败');
    return;
  }
  
function main(){
    //获取canvas
    var canvas = document.getElementById('webgl')
    //获取webgl上下文
    var gl = getWebGLContext(canvas)
    //if(!gl){
        console.log('没有获取到WebGL')
        return
    }
    //获取a_position变量的储存位置
    var a_position = gl.getAttribLocation(gl.program,'a_position')
    if (a_Position < 0) {
        console.log('没有找到a_Position储存地址');
        return;
    }
  
    //获取u_FragColor变量的存储的位置
    var u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor')
    if (!u_FragColor) {
        console.log('没有找到u_FragColor储存的地址');
        return;
    }
  
    //注册鼠标点击时的事件响应函数
    canvas.onmousedown = function(ev){
        click(ev,gl,canvas,a_Position,u_FragColor)
    }
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT)
}

var g_points=[]
var g_colors=[]
function click(ev,gl,canvas,a_Position,u_FragColor){
    var x = ev.clientX;//鼠标点击处的X坐标
    var y = ev.clientY;//鼠标点击处的Y坐标
    var rect = ev.targetgetBoundingClientRect()
    
    //调整到webGL的坐标系
    x = ((x-rect.left ) - canvas.width/2) / (canvas.width/2)
    y = ((x-rect.top ) - canvas.height/2) / (canvas.height/2)
    
    //将坐标储存到g_points中
    g_points.push([x,y])
    //将点的颜色储存到g_colors中
    if(x>=0.0 && y>= 0.0){ //第一象限
        g_color.push([1.0,0.0,0.0,1.0]) //红色
    }else if(){
        g_color.push([0.0,1.0,0.0,1.0]) //绿色
    }else{
         g_color.push([1.0,1.0,1.0,1.0]) //白色
    }
    
    //清空canvas
    
    gl.clear(gl.COLOR_BUFFER_BIT)
    
    var len = g_points.length
    
    for( let i = 0 ; i<len ; i++){
        var xy = g_points[i]
        var rgba = g_colors[i]
        
        //将点的位置传输到a_position中
        gl.vertxAttrib3f(a_Position,xy[0],xy[0],0.0)
        //将点的颜色传输到u_FragColor变量中
        gl.uniform4f(u_FragColor,rgba[0],rgba[1],raba[2].rgba[3])
        gl.drawArrays(gl.POINTS,0,1)
    }
    
}

着色器

函数的一开始，就定义了2个着色器，我们之前说过着色器是WebGL里最重要的一部分，我们要用WebGL绘图就必要要使用着色器。在代码中你会很明显的发现，着色器程序是以 字符串 的形式嵌入在Javascript中的。

在这里，我们用到了2个着色器

顶点着色器
片元着色器

这张图是从执行JavaScript程序到浏览器中显示结果的过程：首先运行Javascript程序，调用了WebbGL的相关方法，然后顶点着色器和片元着色器就会运行，在颜色缓冲区内进行绘制，这时就清空了绘图区，最后，颜色缓冲区中的内容就会自动在浏览器的canvas上显示出来。

顶点着色器

顶点着色器是用来描述顶点特性(如位置，颜色)的程序。顶点是指二维或三维空间的一个点。比如二维或三维图形的端点或交点。

//顶点着色器
var VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '  gl_PointSize = 10.0;\n' +
  '}\n';

这里用字符串写在Javascript里的语言就是我们说的OpenGL着色器语言，也就是说GLSL ES 登台了～

因为着色器程序必须预先处理成单个字符串的形式，所以我们用+号把它们串联起来，每行以/n结束，这不是必要的，只是为了检查代码错误的时候就报出错误的行号，方便我们进行调试，如果你不喜欢，不写也是可以的。

attribute

关键词attribute被称为储存限定符，它表示接下来的变量(在我们这里例子中是a_Position)是一个attribute变量。attribute变量必须声明成全局变量，数据将从着色器的外部传给该变量。(这里也就是说我们可以利用attribute变量来传输我们需要值给着色器) 变量声明格式如下

<储存限定符> <类型> <变量名>
attribute  vec4   a_Position

vec4

变量名	描述
vec4 gl_Position	表示顶点位置
float gl_PointSize	表示点的尺寸(像素)

注意：gl_Position变量必须被赋值，否则着色器是无法工作的，相反g_PonintSize并不是必须的，如果你不赋值，默认就是1.0.

类型	描述
vec4	表示由4个浮点数组成的矢量
float	便是浮点数

你现在应该发现了，Javascript和GSSL ES对变量定义的不同，Javascript是弱类型的语言，而GSSL ES是强类型的语言，也就是说在开发的过程中，我们必须明确明确指出某个变量是什么类型。

这里还需要注意的是，如果向某类型的变量赋一个不同类型的值，就会出错。

片元着色器

进行逐片元处理过程(光照等)的程序。片元是WebGL的一个术语，也可以理解称为像素。

// 片元着色器
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'uniform vec4 u_FragColor;\n' +  // uniform変数
  'void main() {\n' +
  '  gl_FragColor = u_FragColor;\n' +
  '}\n';

uniform变量

我们前面知道了attribute变量用来定义顶点着色器变量的。很遗憾，在片元着色器中，我们需要使用uniform变量或者你还可以使用varying变量。

<储存限定符> <类型> <变量名>
uniform  vec4   u_FragColor

这里需要一笔带过的的precision mediump float使用精度限定词垃圾指定变量的范围(最大值与最小值)和精度，本例为中等精度。

初始化着色器

//初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('着色器初始化失败');
    return;
  }

这里的initShaders是WebbGL编程指南中内置的一个辅助函数，帮我们初始化字符串形式的着色器。

initShaders(gl,vshader,fshader)
gl	指定渲染上下文
vshager	指定顶点着色器程序代码(字符串)
fshader	指定片元着色器代码(字符串)

在初始化着色器之前，顶点着色器和片元着色器都是空白的，我们需要将字符串的形式着色器从Javascript传给WebGL系统，并建立着色器。注意：着色器运行在WebGL系统中，而不是Javascript程序中。

这里你必须清楚，WebGL程序包括运行在浏览器中的Javascript和运行在WebGL系统的着色器程序这俩部分

获取attribute变量和uniform变量的存储地址

为什么要获取变量地址？

WebGL对着色器进行解析，辨识出着色器具有的attribute变量和uniform变量，每个变量都具有一个储存地址，以便通过储存地址向变量传输数据。比如，当你想向顶点着色器多的a_Position变量传输数据时，首先需要向WebGL系统请求该变量的储存地址。

我们使用gl.getAttribuLocation()和gl.getUniformLocation()来获取地址。

    //获取a_position变量的储存位置
    var a_position = gl.getAttribLocation(gl.program,'a_position')
    if (a_Position < 0) {
        console.log('没有找到a_Position储存地址');
        return;
    }
  
    //获取u_FragColor变量的存储的位置
    var u_FragColor = gl.getUniformLocation(gl.program,'u_FragColor')
    if (!u_FragColor) {
        console.log('没有找到u_FragColor储存的地址');
        return;
    }

gl.getAttribuLocation(program,name)
program	指定包含顶点着色器或片元着色器程序对象
name	指定想要获取其储存地址的attribute变量的名称

gl.getUniformLocation(program,name)
gl	指定渲染上下文
program	指定包含顶点着色器或片元着色器程序对象
name	指定想要获取其储存地址的uniform变量的名称

注意：第一个参数是一个程序对象，包含顶点着色器或者片元着色器。现在我们只需要理解gl.program做为参数即可。

向attribute变量和uniform变量赋值

一旦将attibute和uniform变量的储存地址保存在javascriot变量a_Position和u_FragColor中，下面就需要使用该变量来向着色器传入值。我们将使用gl.vertexArrib3f()和gl.uniform4f()

gl.vertexArrib3f(location,v0,v1,v2)
location	将要修改的attribute变量的地址
v0	指定填充attribute变量第一个分量值
v1	指定填充attribute变量第二个分量值
v2	指定填充attribute变量第三个分量值

我们将数据(v0,v1,v2)传输给由location参数指定的attribute变量。这里的v0,v1,v2，及点的x,y,z坐标值，都是浮点数。在这里你会发现，我之前说的a_Position是一个vec4类型，但是在这里只穿了3个值，当你忽略掉的第4个值会帮你自动不全为1.0。

gl.uniform4f(location,v0,v1,v2,v3)
location	将要修改的uniform变量的地址
v0	指定填充uniform变量第一个分量值
v1	指定填充uniform变量第二个分量值
v2	指定填充uniform变量第三个分量值
v3	指定填充uniform变量第四个分量值

我们将数据(v0,v1,v2,v3)传输给由location参数指定的unifrom变量。

到这里，用到的WebGL的方法都已经讲完了，也完成了JavaScript与WebGL之间绘制一个点所有的通信。其他的逻辑其实都是在写Javascript的代码了。

通过鼠标点击绘点

//注册鼠标点击事件响应函数
canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position, u_FragColor) };

//响应鼠标点击事件
var g_points=[]
var g_colors=[]
function click(ev,gl,canvas,a_Position,u_FragColor){
    var x = ev.clientX;//鼠标点击处的X坐标
    var y = ev.clientY;//鼠标点击处的Y坐标
    var rect = ev.targetgetBoundingClientRect()
    
    //调整到webGL的坐标系
    x = ((x-rect.left ) - canvas.width/2) / (canvas.width/2)
    y = ((x-rect.top ) - canvas.height/2) / (canvas.height/2)
    
    //将坐标储存到g_points中
    g_points.push([x,y])
    //将点的颜色储存到g_colors中
    if(x>=0.0 && y>= 0.0){ //第一象限
        g_color.push([1.0,0.0,0.0,1.0]) //红色
    }else if(){
        g_color.push([0.0,1.0,0.0,1.0]) //绿色
    }else{
         g_color.push([1.0,1.0,1.0,1.0]) //白色
    }
    
    //清空canvas
    
    gl.clear(gl.COLOR_BUFFER_BIT)
    
    var len = g_points.length
    
    for( let i = 0 ; i<len ; i++){
        var xy = g_colors[i]
        var rgba = g_colors[i]
        
        //将点的位置传输到a_position中
        gl.vertxAttrib3f(a_Position,xy[0],xy[0],0.0)
        //将点的颜色传输到u_FragColor变量中
        gl.uniform4f(u_FragColor,rgba[0],rgba[1],raba[2].rgba[3])
        gl.drawArrays(gl.POINTS,0,1)
    }
    
}

在这里主要完成了:

获取到鼠标点击的位置并储存在一个数组中。
清空canvas
根据数组汇总的给个元素，在相应的位置绘制点。

鼠标点击时，我们能获取到ev,该对象能获取到ev.clientX和ev.clientY。但是我们并不能直接去用这个点的坐标。因为：

鼠标点击位置的坐标是在"浏览器客户区"的坐标，而不是在canvas中的。
cannvas的坐标系又和WebGL的坐标系，其原点位置和Y轴的正方向都不一样。

这时候，就需要会计算坐标系的转换。首先，获取canvas在浏览器客户区的坐标，rect.left和rect.top。这样rect.left-x和y-rect.top就是浏览器坐标系中(x,y)换算到了canvas坐标系。

接下来，我们要将canvas坐标系换算到WebGL坐标系，需要知道canvas的中心点的位置,通过canvas.width和canvas.height求出(canvas.width/2,canvas.height/2)

然后，在(x-rect.left) - canvas.width/2, canvas.height/2 - (y-rect.top))将canvas的坐标原平移到中心点。

接着，canvas的坐标x轴坐标区间为(0，canvas.width) ，y轴坐标区间(0,canvas.height)。而WebGL的坐标系是-1.0到1.0,所以，最后我们要将x坐标除以canvas.width/2,将y坐标除以canvas.height/2。将canvas坐标映射到WebGL坐标。

    x = ((x-rect.left ) - canvas.width/2) / (canvas.width/2)
    y = ((x-rect.top ) - canvas.height/2) / (canvas.height/2)

后续的操作就是每次点击回去判断点在WebGl坐标系中哪一个象限，然后放到g_colors数组中，循环遍历g_colors和g_colors,依次绘制出点的位置和颜色。

至此，终于学会了如何利用WebGL绘制简单的点图形了，撒花～～～

最后，这篇文章我学习了一个星期，整理了一个星期，看起来可能很枯燥，但是如果你也和我一样想学WebGL，我希望你能看完，还能找出我写错的地方，然后共同进步～哈哈哈哈哈哈哈学习WebGL任重道远，接下来我会做一些更好玩的例子分享给大家～flag先立起来，满满填～拜了个拜～