WebGL2系列之从WebGL1迁移到WebGL2

WebGL2几乎100%兼容WebGL1，须要注意的是，这里说的几乎，也就是说，也是存在一些细微的差异的，所以本来WebGL1的代码迁移到WebGL2，应该不会有遇到太多的困难；不过WebGL2和WebGL1有两个主要的差异，请看下文。

获取WebGL2上下文

获取WEBGL2和获取WebGL1的上下文的方式并不彻底一致：

• 经过canvas的getContext方法获取WebGL2的上下文，这和WebGL1是一致的
• getContext方法传入的参数是"webgl2",而不是"webgl".

如下是获取WEBGL2上下文的代码

var  canvas = document.createElement('canvas');
var  gl2 = canvas.getContext('webgl2');

WebGL2并不是全部的浏览器都支持，因此比较鲁棒的方式是，判断若是不存在WebGL2上下文，则回退使用WebGL1，代码以下：

var  canvas = document.createElement('canvas');
var  gl = canvas.getContext('webgl2');
var isWebGL2 = true;
if (!gl) { // try to fallback to webgl 1
    gl = canvas.getContext('webgl') ||
          canvas.getContext('experimental-webgl');
  isWebGL2 = false;
}
if (!gl) {
    console.log('your browser does not support WebGL');
}

不少WebGL扩展可在WebGL2中直接使用

WebGL1中，有不少扩展功能,在WebGL1中使用这些功能，首先须要加载扩展，而后调用，而在WebGL2中，WebGL1的不少扩展功能能够直接在使用。
好比
顶点数组对象(Vertex Array Object)，在WebGL1中，是一个扩展对象OES_vertex_array_object，而在WebGL2直接使用。在WebGL1中，使用代码以下：

var ext = gl.getExtension("OES_vertex_array_object");
if (!ext) {
   // 告诉用户没有此扩展或者使用其余方式
  // tell user they don't have the required extension or work around it
} else {
  var aVAO = ext.createVertexArrayOES();
}

而在WebGL2中，代码以下：

var aVAO = gl.createVertexArray();

有关VAO的相关功能，将会在之后的章节中介绍。

---

除了以上所说的两点，webgl1的其余功能，WebGL2均可以很好的兼容。

当如，为了可以使用一些WebGL2的高级特性，咱们须要作一些改变。

使用 GLSL 300 es

WebGL2的着色器语言支持本来WebGL1的GLSL 100 ，同时也支持GLSL 300 es，可是若是要使用更多的高级特性，则必须使用GLSL 300 es；如下会介绍使用GLSL 300 es的一些变化的地方。

显示指定着色器语言版本

要使用GLSL 300 es，须要在着色器代码中显示的声明，声明版本代码以下：

#version 300 es

须要注意的是：

• 版本声明的代码须要在顶点着色器和片元着色器中同时指定
• 版本声明的代码必须严格在第一行

上文所说的严格的第一行的意思是说，该声明前面不能有任何的行，哪怕是空行和注释也不行，下面经过代码说明：
好比如下代码是错误的,由于在#version 300 es以前会有一个空行

var vsSource = `
#version 300 es
`;

正确的代码应该是：

var vsSource = `#version 300 es
`;

在好比，如下代码是错误的：

<script id="vs" type="notjs">
#version 300 es
...
</script>

正确的代码应该是：

<script id="vs" type="notjs">#version 300 es
...
</script>

GLSL 300 es 的不一样

GLSL 300 es 和GLSL 100 es 有一些不一样的地方，如下会一一讲述这些差别的地方

使用in代替attribute

在GLSL 100中，定义顶点数据的变量，使用attribute关键词，以下：

attribute vec4 aPosition;
attribute vec2 aTexcoord;
attribute vec3 aNormal;

而在GLSL 300 es中，使用in关键词，代码以下：

in vec4 aPosition;
in vec2 aTexcoord;
in vec3 aNormal;

varying 被in/out替代

在GLSL 100，在顶点着色器和片元着色器中，经过varying关键词来声明varying变量，代码以下：

varying vec2 vTexcoord;
 varying vec3 vNormal;

而在GLSL 300 es中，顶点着色器中的varying变量用out声明，表示输出：

out vec2 vTexcoord;
 out vec3 vNormal;

在片元着色器中的varying变量用in声明，表示输如：

in vec2 vTexcoord;
 in vec3 vNormal;

GLSL 300 es 中没有内置变量gl_FragColor

在GLSL 100 中，咱们经过给内置变量gl_FragColor赋值来设置片元的输出颜色，代码以下：

gl_FragColor = vec4(1,1,1, 1);  // white

而在GLSL 300 es中，须要本身定义一个输出颜色的变量，并在main函数中设置颜色值，代码以下：

out vec4 myOutputColor;
 ......
void main() {
   myOutputColor = vec4(1, 1, 1, 1);  // white
}

此处，输入变量名能够随意定义，不过不能使用gl_开通，所以你也不能这样定义 out vec4 gl_FragColor;

用texture代替 texture2D、textureCube

在GLSL 100中，经过texture2D方法获取2D贴图的像素，textureCube方法获取立方体贴图的像素，代码以下：

uniform sampler2D uTexture;
uniform samplerCube uCubeTexture;
 ......
void main(){
  vec4 color1 = texture2D(uTexture, ...);
  vec4 color2 = textureCube(uCubeTexture, ...);
}

而在GLSL 300 es中，只须要使用texture方法便可，改方法会经过传入的贴图对象，自动判断，代码以下：

uniform sampler2D uTexture;
uniform samplerCube uCubeTexture;
 ......
void main(){
  vec4 color1 = texture(uTexture, ...);
  vec4 color2 = texture(uCubeTexture, ...);
}

总结

前面 列举了从WebGL1 迁移到WebGL2一些主要的差别和使用GLSL 300 es 与GLSL 100的不一样，能够看出，WEBGL2虽然不对WebGL1彻底兼容，可是不兼容的地方很少，因此迁移的难度不大。
后面的章节，会陆续介绍WebGL2 相关的特性。

欢迎关注公众号：ITman彪叔