背景

随着互联网的发展，出现了各式各样的技术，html也已经到达了5.0的版本，前几天也发布了最新的5.1，Web前端能承载越来越多的功能。自从5.0发布后了风靡一时的canvas、video、audio等，一下把flash逼入死角，一时间各种音频、游戏、视频网站都换成了h5来开发，提高了性能以及跨平台的作用。而且随着技术的发展，必然会迎来web的3D时代，随着WebGl的到来，预示着web的3D时代真正来临。
WebGL不是官方标准，其实是khronos团队去制定的标准。

WebGl基础

WebGL是前端3D语言，从名字就可以看出，跟OpenGL有一定关系。没错，Webgl是从OpenGL转变来的。实际上，WebGL来源于OpenGl ES2.0，并在其基础上做了一层javascript的兼容处理，也就是简化版本的OpenGl，所以在WebGL中依旧能看到很多GLSE语言编写的痕迹。

检测浏览器是否支持webgl

创建webGL对象

不同浏览器生命WebGL对象方式有所区别，虽然大部分浏览器都支持experimental-webgl，而且以后会变成webgl，所以创建时做一下兼容处理

1
2
var canvas = document.getElementById("glcanvas");
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

创建着色器编码

WebGL依赖一种新的称为着色器（shader）的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方法，所有WebGL必须使用它。着色器不仅强大，而且更复杂，仅仅通过一条简单的绘图指令是不能操作它的。

WebGL需要两种着色器

  • 顶点着色器（Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点(Vertex)是指二维或三维空间的一个点，比如二维或三维空间线与线之间的交叉点或者端点。

  • 片元着色器（Fragment shader）：进行逐片元处理过程（如光照等）的程序。片元(fragment)是一个WebGL的术语，你可以将其理解成像素。

    着色器语言使用的是GLSL ES语言，所以在javascript需要将之存放在字符串中，等待调用编译

创建顶点着色器：

1
2
3
4
5
var VSHADER_SOURCE = 
  'void main() {\n' +
    '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
    '  gl_PointSize = 10.0;\n' + 
  '}\n';

创建片元着色器：

1
2
3
4
 var FSHADER_SOURCE =
    'void main() {\n' +
    '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';

浏览器的整个过程如下：

webgl渲染过程

着色器中包含几个内置变量：gl_Position, gl_PointSize, gl_FragColor。

着色器语言中涉及到vec4的数据类型，此数据类型是一个思维浮点数组，所以其值不可以是整形如(1,1,1,1)，正确应为：(1.0,1.0,1.0,1.0)

  • gl_Position: 为一种vec4类型的变量，且必须被赋值。四维坐标矢量，我们称之为齐次坐标，即(x,y,z,w)等价于三维左边(x/w,y/w,z/w)，w相当于深度，没有特殊要求设置为1.0即可。

  • gl_PointSize：表示顶点的尺寸，也是浮点数，为非必填项，如果不填则默认显示为1.0。

  • gl_FragColor：该变量为片元着色器唯一的内置变量，表示其颜色，也是一个vec4类型变量，分别代表（R,G,B,A），不过颜色范围是从0.0-1.0对应Javascript中的#00-#FF。

坐标系

WebGL采用右手坐标系，如图所示：

webgl渲染过程

基础部分介绍到此，大家也基本了解WebGL与着色器了，下一课我们一起来运用着色器绘制一个圆点，下一课。

Webgl课程列表