WebGL2几乎100%兼容WebGL1。需要注意的是这里说的差不多，也就是有一些细微的差别。因此，原来的WebGL1代码应该迁移到WebGL2。你不会遇到太多的困难；然而，WebGL2和WebGL1之间有两个主要区别，请参见下文。获取WebGL2上下文WEBGL2和WebGL1获取上下文的方式并不完全相同：WebGL2的上下文是通过canvas的getContext方法获取的，与WebGL1一致。getContext方法传入的参数是“webgl2”而不是“webgl”。下面是获取WEBGL2上下文的代码varcanvas=document.createElement('canvas');vargl2=canvas.getContext('webgl2');WebGL2并不是所有的浏览器都支持，所以比较健壮的方式是判断如果没有WebGL2上下文，则回退使用WebGL1，代码如下：varcanvas=document.createElement('canvas');vargl=canvas.getContext('webgl2');varisWebGL2=true;if(!gl){//尝试回退到webgl1gl=canvas.getContext('webgl')||canvas.getContext('experimental-webgl');isWebGL2=false;}if(!gl){console.log('您的浏览器不支持WebGL');}很多WebGL扩展可以在WebGL2中直接使用。在WebGL1中，有很多扩展函数。要在WebGL1中使用这些函数，首先需要加载扩展然后调用它。在WebGL2中，WebGL1的很多扩展功能都可以直接使用。比如顶点数组对象（VertexArrayObject），在WebGL1中是一个扩展对象OES_vertex_array_object，但在WebGL2中直接使用。在WebGL1中，使用的代码如下：varext=gl.getExtension("OES_vertex_array_object");if(!ext){//告诉用户他们没有所需的扩展或使用其他方法//告诉用户他们没有'没有所需的扩展或解决它}else{varaVAO=ext.createVertexArrayOES();}在WebGL2中，代码如下：varaVAO=gl.createVertexArray();VAO的相关功能将在后面的章节中介绍。除了上面提到的两点，webgl1的其他功能都可以很好的兼容WebGL2。当然，为了能够使用WebGL2的一些高级特性，我们需要做一些改动。使用GLSL300esWebGL2的着色器语言支持WebGL1原有的GLSL100，也支持GLSL300es，但是如果要使用更高级的特性，就必须使用GLSL300es；下面将介绍使用GLSL300es的一些变化的地方。显示指定的着色器语言版本要使用GLSL300es，需要在着色器代码中显示声明。声明版本代码如下：#version300es需要注意的是版本声明的代码需要在vertexshader和fragmentshader中显示同时指定版本声明的代码必须严格上第一行。上面说的strictfirstline是指语句之前不能有任何行，哪怕是空行和注释。下面的代码说明：比如下面的代码是错误的，因为#version300es之前会有一个空行varvsSource=`#version300es`;正确的代码应该是：varvsSource=`#version300es`;例如下面的代码是错误的：正确的代码应该是：GLSL300es之间的差异GLSL300es和GLSL100es之间存在一些差异。下面将对这些差异一一进行说明。在GLSL100中用in代替attribute来定义顶点数据的变量，使用attribute关键字，如下：attributevec4aPosition;attributevec2aTexcoord;attributevec3aNormal;而在GLSL300es中，使用in关键字，代码如下：invec4aPosition;invec2aTexcoord;invec3aNormal;varying是in/out替换GLSL100，在vertexshader和fragmentshader中，varying关键字是用于声明varying变量，代码如下：varyingvec2vTexcoord;变化的vec3vNormal；而在GLSL300es中，在vertexshader中varying变量用out声明，表示输出：outvec2vTexcoord；输出vec3vNormal；片段着色器中的varying变量用in声明，表示输出如：invec2vTexcoord；在vec3vN普通的;GLSL300es没有内置变量gl_FragColor在GLSL100中，我们通过给内置变量gl_FragColor赋值来设置片段的输出颜色，代码如下：gl_FragColor=vec4(1,1,1,1);//whiteand在GLSL300es中，需要为输出颜色定义一个变量，并在main函数中设置颜色值，代码如下：outvec4myOutputColor;......voidmain(){myOutputColor=vec4(1,1,1,1);//white}这里输入变量名可以自由定义，但是不能用gl_，所以不能这样定义outvec4gl_FragColor；使用texture代替texture2D，GLSL100中的textureCube，通过texture2D方法获取二维纹理的像素，textureCube方法获取立方体纹理的像素，代码如下：uniformsampler2DuTexture;uniformsamplerCubeuCubeTexture;......voidmain(){vec4color1=texture2D(uTexture,...);vec4color2=textureCube(uCubeTexture,...);}在GLSL300es中只需要使用texture方法，该方法会根据传入的纹??理对象自动判断，代码如下：uniformsampler2DuTexture;统一采样器立方体uCubeTexture;......voidmain(){vec4color1=texture(uTexture,...);vec4color2=texture(uCubeTexture,...);}总结GLSL300es和GLSL100的一些主要区别和Using区别，可以看出WEBGL2虽然不能完全兼容WebGL1，但是不兼容的并不多地方，所以迁移并不困难。后面的章节会陆续介绍WebGL2的相关特性。欢迎关注公众号：IT人彪叔
