WebGL2系列之从WebGL1迁移到WebGL2

2024-02-06 10:19:52

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

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

总结

前面列举了从WebGL1 迁移到WebGL2一些主要的差异和使用GLSL 300 es 与GLSL 100的不同，可以看出，WEBGL2虽然不对WebGL1完全兼容，但是不兼容的地方不多，所以迁移的难度不大。
后面的章节，会陆续介绍WebGL2 相关的特性。

码农公寓