WebGL2はWebGL1からかなり大幅にアップグレードされています。 WebGL1からWebGL2へ変更する方法はこの記事を参照して下さい。
以下はWebGL2新機能の順不同のリストです。
WebGL1ではオプションですが、WebGL2では常に利用可能になりました。 これはかなり重要で常に使った方がいいと思います。
WebGL1ではシェーダーでテクスチャサイズがほしい場合、ユニフォームでサイズを渡す必要がありました。 WebGL2では以下のようになります。
vec2 size = textureSize(sampler, lod)
lodはテクスチャのレベルを指定します。
大きな配列のデータをテクスチャに保存しておくと便利です。 WebGL1でも可能でしたが、テクスチャのアドレスはテクスチャ座標（0.0～1.0）でしか指定できませんでした。 WebGL2ではピクセル/テクセル座標で直接テクスチャの値を調べられるので、配列へのアクセスが少し簡単になります。
vec4 values = texelFetch(sampler, ivec2Position, lod);
WebGL1にはテクスチャフォーマットが数種類しかありませんでした。 WebGL2ではたくさんの種類があります！
RGBA32IRGBA32UIRGBA16IRGBA16UIRGBA8RGBA8IRGBA8UISRGB8_ALPHA8RGB10_A2RGB10_A2UIRGBA4RGB5_A1RGB8RGB565RG32IRG32UIRG16IRG16UIRG8RG8IRG8UIR32IR32UIR16IR16UIR8R8IR8UIRGBA32FRGBA16FRGBA8_SNORMRGB32FRGB32IRGB32UIRGB16FRGB16IRGB16UIRGB8_SNORMRGB8IRGB8UISRGB8R11F_G11F_B10FRGB9_E5RG32FRG16FRG8_SNORMR32FR16FR8_SNORMDEPTH_COMPONENT32FDEPTH_COMPONENT24DEPTH_COMPONENT163Dテクスチャは名前の通り3Dのテクスチャです。
テクスチャ配列はテクスチャを分割する場合を除き、3Dテクスチャに非常によく似ています。 全ての分割は同じサイズでなければなりません。 これはシェーダーがテクスチャユニットの数が比較的少ないにも関わらず、何百ものテクスチャにアクセスできるようになる素晴らしい方法です。 シェーダーで分割するか(slice)を選択できます。
vec4 color = texture(someSampler2DArray, vec3(u, v, slice));
WebGL1では、2のべき乗でないテクスチャはミップマップを持てませんでした。 WebGL2ではこの制限は削除されています。 2のべき乗でないテクスチャも2のべき乗のテクスチャと同じように動作します。
WebGL1ではシェーダー内のループは整数定数式を使用する必要がありました。 WebGL2ではその制限が削除されています (GLSL 300 es)
WebGL1では逆行列を取得する場合、ユニフォームに渡す必要がありました。
WebGL2 GLSL 300 esでは transpose と同じく inverse 関数が組み込まれています。
WebGL1ではハードウェアに依存する様々な圧縮テクスチャフォーマットがありました。 S3TCはデスクトップのみ、PVRTCはiOSのみなど。
WebGL2では以下のフォーマットがサポートされています。
COMPRESSED_R11_EAC REDCOMPRESSED_SIGNED_R11_EAC REDCOMPRESSED_RG11_EAC RGCOMPRESSED_SIGNED_RG11_EAC RGCOMPRESSED_RGB8_ETC2 RGBCOMPRESSED_SRGB8_ETC2 RGBCOMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2 RGBACOMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2 RGBACOMPRESSED_RGBA8_ETC2_EAC RGBACOMPRESSED_SRGB8_ALPHA8_ETC2_EACユニフォームバッファオブジェクトは、たくさんのユニフォームを指定できます。 メリットは以下の通りです。
WebGLの外でバッファ内の全てのユニフォームを操作できます
WebGL1で16個のユニフォームがあった場合、gl.uniformXXX を16回呼び出す必要がありました。
それは比較的遅いです。
WebGL2では、ユニフォームバッファオブジェクトを使用すると、
型付き配列をJavaScript内で使用する事ができてとても高速です。
全ての値が設定されたら gl.bufferData または gl.bufferSubData を1回呼び出して全ての値をアップロードします。
gl.bindBufferRange でそのバッファを使用するように指定して2回呼び出します。
異なるユニフォームバッファオブジェクトのセットを持てます
最初にいくつかの用語を説明します。 ユニフォームブロックは、シェーダーで定義されたユニフォームの集合体です。 ユニフォームバッファオブジェクトは、ユニフォームブロックが使用する値を含むバッファです。 ユニフォームバッファオブジェクトを好きなだけ作成し、描画時に特定のユニフォームブロックにバインドできます。
例えば、シェーダーで4つのユニフォームブロックを定義できます。
グローバル行列のユニフォームブロックは投影行列、ビュー行列のように全ての描画呼び出しで同じ行列を含みます。
モデルユニフォームブロックはワールド行列と法線行列など異なる行列を含みます。
マテリアルユニフォームブロックはディフューズ（拡散反射光）、アンビエント（環境光）、（鏡面反射光）などのマテリアル設定を含みます。
ライティングユニフォームブロックはライティングの色や位置などのデータを格納したライティングを含みます。
実行時にグローバルユニフォームバッファオブジェクトを1つ、 モデルユニフォームバッファオブジェクトをモデルごとに1つ、 ライトユニフォームバッファオブジェクトをライトごとに1つ、 マテリアルごとに1つのユニフォームバッファオブジェクトを作成できます。
全ての値が最新状態の場合は、4つのユニフォームバッファオブジェクトをバインドします。
gl.bindBufferRange(..., globalBlockIndx, globalMatrixUBO, ...);
gl.bindBufferRange(..., modelBlockIndx, someModelMatrixUBO, ...);
gl.bindBufferRange(..., materialBlockIndx, someMaterialSettingsUBO, ...);
gl.bindBufferRange(..., lightBlockIndx, someLightSettingsUBO, ...);
WebGL2では整数値のテクスチャを持てます。 WebGL1では浮動小数点値で表現されていました。
整数値の属性を持つ事も可能です。
さらにGLSL 300 esではシェーダーで整数のビット操作を行えます。
WebGL2では頂点シェーダーの結果をバッファに書き戻せます。
WebGL1では全てのテクスチャパラメーターはテクスチャごとに設定されてました。 WebGL2ではオプションでサンプラーオブジェクトを使用できます。 テクスチャの一部であるフィルタリングとリピート/クランプのパラメーターを全てサンプラーに移動します。 つまり、1つのテクスチャを様々な方法でサンプリングできます。 リピートするか、クランプするか、フィルタリングされているか、フィルタリングされていないかなどです。
WebGL1では深度テクスチャはオプションであり、手間がかかりました。 WebGL2では標準です。シャドウマップの計算によく使用されます。
これはWebGL2では標準的です。 一般的な使用法はシェーダーに法線を渡すのではなく、シェーダー内で法線を計算できます。
インスタンス描画の一般的な使用は迅速に木や茂み、草を描画したい時に役に立ちます。
インデックスに32ビットのintを使用できるので、インデックス付きジオメトリのサイズ制限がなくなりました。
gl_FragDepth を設定可能デプスバッファ/Zバッファに独自の値を書き込めます。
ブレンド時に2色の最小値または最大値を取得できます。
シェーダーから1度に複数のバッファに描画できます。 様々な遅延レンダリング（ディファードレンダリング）でよく使用されます。
WebGL1ではオプションでした。 頂点シェーダーでアクセスできるテクスチャの制限数があり、制限数は0にできました。 ほとんどのデバイスでサポートされています。 WebGL2ではこの制限数は少なくとも16です。
WebGL1ではGPUに内蔵されたマルチサンプルシステムを使用し、キャンバスをアンチエイリアスできました。 しかし、ユーザーが制御するマルチサンプリングはサポートされていませんでした。 WebGL2ではマルチサンプルのレンダーバッファを作成できるようになりました。
オクルージョンクエリは何かをレンダリングする時、実際に描画されるピクセルがあるかどうかをGPUに確認できます。
浮動小数点テクスチャは多くの特殊効果や計算に使用されます。 WebGL1ではオプションでした。 WebGL2では存在しますがオプションです。
注意: 残念ながらこれはまだ制限されており、浮動小数点テクスチャへのフィルタリングとレンダリングはオプションのままです。
OES_texture_float_linearと EXT_color_buffer_floatを参照して下さい。