webgl2.0 新特性的用途

webgl 2.0 对标 es3.0 ，opengl4.0 设计的，其中包含了一些很有的特性

1. VAO vertex array object

之前都是用 vbo 来存储顶点数据，创建 ，上传数据时bind一遍，draw 时又得来一遍bind, 性能和效率都不高，vao 就相当于一个容器，你bind 这个容器后，再创建 vbo，vao会把当前的vbo 用类似的队列的方式记录每个vbo的 layout,layout 是 这个关键词也是 wengl2.0 对应的 glsl 里描述 顶点属性布局的关键词。

layout(location=0) in vec4 aPosition;
layout(location=1) in vec3 aNormal;
layout(location=2) in vec2 aUV;

2. ubo uniform block object

uniform Matrices {
    mat4 uPerspective;
    mat4 uModel;
    mat4 uView;
};

这就是一个 ubo 里面可以包含一些 uniform

    var matrixUniformLocation = gl.getUniformBlockIndex(Program, "Matrices");
    gl.uniformBlockBinding(Program, matrixUniformLocation, 0);
    matrixUniformBuffer = gl.createBuffer();
    gl.bindBufferBase(gl.UNIFORM_BUFFER, 0, matrixUniformBuffer);
    gl.bufferData(gl.UNIFORM_BUFFER, 64 * 3, gl.DYNAMIC_DRAW);

要用特定的接口去传数据。
或者用

gl.bindBufferRange(gl.UNIFORM_BUFFER, 0, matrixUniformBuffer, 0, 64 * 3);

3. mrt（gBuffer） muit render target

这是实现延迟渲染的关键，就是说可以一个framebuffer 上绑定多个 texture,分别渲染输出不同的属性，position, normal，color,depth 等。有来了 normal,depth 的rt就方便 做 ssao ssr 等效果。
在 fs 里一会这样写

layout(location=0) out vec4 fragPosition;
layout(location=1) out vec4 fragNormal;
layout(location=2) out vec4 fragColor; 
layout(location=3) out vec4 fragMaterial; 

4. 非2的幂纹理支持

非2的幂纹理支持
WebGL1中不是2的幂的纹理不能有mip。WebGL2移除了限制，非2的幂大小的纹理和2的幂大小的纹理一样工作。

5. 3D 纹理

3D 纹理存储的是体数据，大小是 32 * 32 *32 这种，可以存距离场数据，体素数据，3dnoise,体渲染，体积云 都能用的到。

6. 纹理数组

纹理数组是一组 2d 纹理数组的集合，可以通过索引来采样指定的纹理，可以做相同 mesh 不同纹理的 instance ，还能把点阴影的 一组 深度图用纹理数组。

7.移除着色器循环限制

WebGL1中，着色器中的循环必须使用常量整数表达式。 WebGL2移除了这个限制(GLSL 300 es)
WebGL1

for(float i = 1.0; i <= 80.0; i++)

WebGL2 可以使用变量

uniform float num;
for(float i = 1.0; i <= num; i++)

8. 深度纹理

深度纹理在WebGL1中是可选的，使用起来很麻烦。现在它成为标准。常用于计算阴影贴图。

webgl2

DEPTH_COMPONENT32F
DEPTH_COMPONENT24
DEPTH_COMPONENT16

还有一些 没写出来 可以看看这个
webgl2fundamentals