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