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  type="notjs">#version 300 es...</script>

正确的代码应该是：

<script  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声明，表示输如：

int vec2 vTexcoord; int 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, ...);}