WebGL 2シリーズのWebGL 1からWebGL 2への移行

WebGL 2はWebGL 1とほぼ100%互換性がありますが、ここで言うのはほとんど、つまり、わずかな違いがあるので、もともとWebGL 1のコードがWebGL 2に移行しても、あまり困難にぶつかることはないはずです.ただし、WebGL 2とWebGL 1には2つの主な違いがありますので、以下を参照してください.
WebGL 2コンテキストの取得
WEB 2とWebGL 1のコンテキストを取得する方法は完全に一致していない.

はcanvasのgetContextメソッドによってWebGL 2のコンテキストを取得し、これはWebGL 1と一致する

である.

getContextメソッドが入力パラメータは「webgl 2」であり、「webgl」ではない.

以下、WEB 2コンテキストを取得するコード

var  canvas = document.createElement('canvas');
var  gl2 = canvas.getContext('webgl2');

WebGL 2はすべてのブラウザでサポートされているわけではないので、WebGL 2コンテキストが存在しない場合は、WebGL 1をロールバックして使用すると判断し、コードは以下の通りです.

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拡張はWebGL 2で直接使用できます
WebGL 1には、多くの拡張機能があり、WebGL 1でこれらの機能を使用するには、まず拡張をロードして呼び出す必要がありますが、WebGL 2では、WebGL 1の多くの拡張機能が直接使用できます.たとえば、頂点配列オブジェクト(Vertex Array Object)は、WebGL 1では拡張オブジェクトOES_vertex_array_objectは、WebGL 2で直接使用します.WebGL 1では、次のようにコードを使用します.

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();
}

WebGL 2では、コードは次のとおりです.

var aVAO = gl.createVertexArray();

VAOの関連機能については、後章でご紹介します.
上記の2点を除いて、webgl 1の他の機能は、WebGL 2とよく互換性があります.
例えば、いくつかのWebGL 2の高度な特性を使用するためには、いくつかの変更が必要です.
GLSL 300 esの使用
WebGL 2のシェーダ言語は、本来のWebGL 1のGLSL 100をサポートするとともにGLSL 300 esもサポートするが、より高度な特性を使用するにはGLSL 300 esを使用する必要がある.GLSL 300 esを使ったいくつかのバリエーションを以下にご紹介します.
指定したシェーダ言語バージョンを表示
GLSL 300 esを使用するには、シェーダコードに表示される宣言が必要です.宣言バージョンコードは次のとおりです.

#version 300 es

次の点に注意してください.
バージョン

で宣言されたコードは、頂点シェーダとシェーダで同時に

を指定する必要があります.

バージョンで宣言されたコードは、第1行

で厳格にしなければならない.
前述の厳密な第1行は、宣言の前に空行や注釈であっても何の行も存在しないことを意味し、以下はコードによって説明する.例えば、version 300 esの前に空行があるため、次のコードは間違っている.

var vsSource = `
#version 300 es
`;

正しいコードは次のとおりです.

var vsSource = `#version 300 es
`;

たとえば、次のコードはエラーです.

#version 300 es
...

正しいコードは次のとおりです.

#version 300 es
...

GLSL 300 esの違い
GLSL 300 esとGLSL 100 esにはいくつかの違いがありますが、以下ではこれらの違いを一つ一つ説明します
attributeの代わりにinを使用
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で宣言され、次のようになります.

 in vec2 vTexcoord;
 in 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 vec 4 glをこのように定義することはできません.FragColor;
texture 2 D、texture Cubeの代わりにtextureを使用
GLSL 100では、texture 2 D法により2 Dマップの画素を取得し、texture Cube法により立方体マップの画素を取得する.

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

まとめ
前述したWebGL 1からWebGL 2への移行の主な違いとGLSL 300 esを用いたGLSL 100との違いを挙げると、WEB 2はWebGL 1と完全に互換性がないものの、互換性がない点が多くないため、移行の難易度は大きくないことがわかる.後述の章では、WebGL 2に関する特性を続々と紹介します.
公衆番号へようこそ:ITman彪おじさん