WebGLは、Webページの3Dレンダリングの新しい時代を開きました。これにより、3Dコンテンツをプラグインの助けを借りずにキャンバスで直接レンダリングできます。 Canvas 2D APIと同様に、WebGLはスクリプトを介してオブジェクトを操作するため、手順は基本的に似ています。動作コンテキストを準備し、データを準備し、キャンバスでオブジェクトを描画し、レンダリングします。 2Dとは異なり、3Dには、世界、光、テクスチャ、カメラ、マトリックス、その他の専門知識など、より多くの知識が含まれます。 WebGLには優れた中国のチュートリアルがあります。これは以下のリファレンスの最初のリンクであるため、ここでのスキルを披露しません。次のコンテンツは、私が学んだことの簡単な要約にすぎません。
ブラウザのサポートMicrosoftには独自のグラフィック開発計画があり、WebGLをサポートしていないため、IEはプラグインをインストールすることを除いてWebGLを実行できません。 Chrome、Firefox、Safari、Operaなどの他の主流のブラウザは、すべて最新バージョンでインストールされています。最新のブラウザのインストールに加えて、グラフィックカードドライバーも最新であることを確認する必要があります。
これらをインストールした後、ブラウザを開き、次のURLを入力して、webglのブラウザのサポートを確認できます：http：//webglreport.sourceforge.net/。
上記のブラウザを正常にインストールした後、WebGLを実行できないため、WebGLサポートを強制的に有効にして試してみることができます。それを有効にする方法は次のとおりです。
ChromeブラウザChromeにいくつかのスタートアップパラメーターを追加する必要があります。次の特定の操作手順を例に掲載します。Chromeブラウザのショートカットを見つけ、ショートカットを右クリックし、プロパティを選択します。ターゲットボックスで、Chrome.exeの後の引用の後、次のコンテンツを追加します。 -ENABLE-WEBGL-IGINORE-GPU-BLACKLIST-ALLOW-FILE-ACCESS-FROM-FILES[OK]をクリックしてChromeを閉じてから、このショートカットを使用してChromeブラウザーを起動します。
いくつかのパラメーターの意味は次のとおりです。
-EnableWebglは、WebGLサポートを有効にすることを意味します。
-ignore-gpu-blackListは、GPUブラックリストを無視することを意味します。つまり、一部のグラフィックカードGPUは、古すぎるためにWebGLを実行することをお勧めしません。このパラメーターにより、ブラウザはこのブラックリストを無視し、強制WebGLを実行できます。
-allow-file-access-from-filesとは、ローカルからリソースの負荷を許可することを意味します。 WebGL開発者ではなく、WebGLを開発およびデバッグする必要がないが、WebGLデモをご覧になりたい場合は、このパラメーターを追加することはできません。
FirefoxブラウザFirefoxユーザー、BROWSERのアドレスバーに構成を入力してください。フィルター（フィルター）でWebGLを検索し、webgl.force-enabledをtrueに設定します。 webgl.disabledをfalseに設定します。 security.fileuri.strict_origin_policyをフィルター（フィルター）で検索し、security.fileuri.strict_origin_policyをfalseに設定します。次に、すべてのFirefox Windowsを閉じて現在開いてFirefoxを再起動します。最初の2つの設定は、WebGLサポートを強制することであり、最後のSecurity.fileuri.strict_origin_policyの設定は、ローカルエリアからのリソースの負荷を許可することです。 WebGL開発者ではなく、WebGLを開発およびデバッグする必要がないが、WebGLデモをご覧になりたい場合は、このアイテムを設定することはできません。
Safariブラウザ[プロパティ]→[[メニュー]を[詳細]を選択し、[開発]メニューを選択し、[開発]メニューに移動し、[WebGL]をオンにする[]を選択します。開発手順次のコードは、関連する概念の簡単な要約にすぎません。これは、リファレンスの中国のチュートリアルに由来し、3Dの多くの知識を伴います。興味のある学生は、実践的な参照で中国のチュートリアルに直接ジャンプすることができます。これは、ここで説明したものよりもはるかに詳細で正確です。楽しみに参加している学生は、コードの各行の意味を掘り下げることなく、ただ見てみることができます。
準備言うまでもなく、レンダリングコンテナとしてページにキャンバス要素を追加することです。例えば：<bodyonload = "start（）">
<canvasid = "glcanvas" width = "640" height = "480">
yourbrowserdoes notappeartosupport thehtml5canvaselement。
</canvas>
</body>
スクリプトを正式に書き始める時です。まず、プログラムの入り口と全体的な構造を見てみましょう。
functionstart（）{
varcanvas = document.getElementById（ "glcanvas"）;
initgl（canvas）;
initshaders（）;
initbuffers（）;
Gl.Clearcolor（0.0,0.0,0.0,1.0）;
gl.enable（gl.depth_test）;
drawscene（）;
}
ここでのいくつかの方法は、典型的なWebGLの描画手順を表しています。
ステップ1：WebGL作業環境の初期化-INITGLこの方法のコードは次のとおりです。vargl;
functionItgl（canvas）{
gl = null;
試す{
//trytograbthestandardcontext.ifitfails、fallbacktoexperimatal。
gl = canvas.getContext（ "webgl"）|| canvas.getContext（ "Experimental-Webgl"）;
}
catch（e）{} // ifwedon'thaveaglcontext、giveupnow
if（！gl）{
alert（ "unabletoinitializewebgl.yourbrowsermaynotsupportit。"）;
}
}
この方法は非常に簡単です。これは、WebGL描画環境を取得するためです。パラメーターWebGLをCanvas.getContextメソッドに渡す必要があります。ただし、現在のWebGL標準は確定していないため、実験段階で使用されるパラメーターは実験的webglです。もちろん、canvas.getContext（Experimental-Webgl）を呼び出すことも問題ありません。標準が設定された後、別のコードを変更できます。
ステップ2：シェーダーの初期化-Initshadersシェーダーシェーダーの概念は比較的簡単です。率直に言うと、グラフィックカード操作コマンドです。 3Dシーンを構築するには、色、位置、その他の情報の計算が多く必要です。これらの計算がソフトウェアによって実行されると、速度は非常に遅くなります。したがって、グラフィックカードにこれらの操作を計算させると、速度は非常に高速です。これらの計算を実行する方法は、シェーダーによって指定されます。シェーダーコードはGLSLと呼ばれるシェーダー言語で記述されており、この言語についてはもう話しません。シェーダーはHTMLで定義し、コードで使用できます。もちろん、プログラムに文字列が付いたシェーダーを定義することも同じです。
最初に定義を見てみましょう：
<ScriptId = "Shader-fs" type = "x-shader/x-fragment">
precisionmediumpfloat;
VaryingVec4VColor;
voidmain（void）{
gl_fragcolor = vcolor;
}
</script>
<scriptid = "shader-vs" type = "x-shader/x-vertex">
astibutevec3avertexposition;
aTtibevec4avertexcolor;
diondermat4umvmatrix;
diondermat4upmatrix;
VaryingVec4VColor;
voidmain（void）{
gl_position = upmatrix*umvmatrix*vec4（avertexposition、1.0）;
vcolor = avertexcolor;
}
</script>
フェイスシェーダーと頂点シェーダーの2つのシェーダーがあります。
これらの2つのシェーダーに関しては、コンピューターの3Dモデルが基本的にトライアングル面と組み合わせたポイントで説明されていることをここで説明する必要があります。頂点シェーダーはこれらの点のデータを処理し、表面シェーダーは補間を通じて三角形のポイントのデータを処理します。
上に定義された頂点シェーダーは、頂点の位置と色の計算方法を定義します。表面シェーダーは、補間されたポイントの色計算方法を定義します。実際のアプリケーションシナリオでは、シェーダーの光やその他の効果を処理することも含まれます。
シェーダーを定義すると、プログラムでそれらを見つけて使用できます。
varshaderprogram;
functionItShaders（）{
varfragmentshader = getshader（gl、 "shader-fs"）;
varvertexshader = getshader（gl、 "shader-vs"）;
shaderprogram = gl.createprogram（）;
Gl.Attachshader（ShaderProgram、Vertexshader）;
Gl.Attachshader（ShaderProgram、FragmentShader）;
gl.linkprogram（shaderprogram）;
if（！gl.getProgramparameter（shaderprogram、gl.link_status））{
Alert（ "Can notinitialiseshaders"）;
}
gl.useprogram（shaderprogram）;
shaderprogram.vertexpositionattribute = gl.getattriblocation（shaderprogram、 "avertexposition"）;
gl.enablevertexattribarray（shaderprogram.vertexpositionattribute）;
shaderprogram.vertexcolorattribute = gl.getattriblocation（shaderprogram、 "avertexcolor"）;
gl.enablevertexattribarray（shaderprogram.vertexcolorattribute）;
shaderprogram.pmatrixuniform = gl.getuniformlocation（shaderprogram、 "upmatrix"）;
shaderprogram.mvmatrixuniform = gl.getuniformlocation（shaderprogram、 "umvmatrix"）;
}
シェーダーがありますが、グラフィックカードを実行する方法は？プログラムはそのような橋です。 WebGLのネイティブバイナリコードです。その機能は、基本的に、グラフィックカードがシェーダーコードを実行して指定されたモデルデータをレンダリングできるようにするためです。
また、補助メソッドのGetshaderもあります。この方法は、HTMLドキュメントを通過し、シェーダーの定義を見つけ、定義を取得した後にシェーダーを作成することです。ここで詳しく説明しません：
functiongetshader（gl、id）{
Varshaderscript、TheSource、CurrentChild、Shader;
ShaderScript = document.getElementById（ID）;
if（！shaderscript）{
returnnull;
}
thesource = "";
currentChild = shaderscript.firstchild;
while（currentChild）{
if（currentChild.nodetype == currentChild.text_node）{
thesource+= currentChild.TextContent;
}
currentChild = currentChild.NextSibling;
}
if（shaderscript.type == "x-shader/x-fragment"）{
Shader = gl.createshader（gl.fragment_shader）;
} elseif（shaderscript.type == "x-shader/x-vertex"）{
Shader = gl.createshader（gl.vertex_shader）;
}それ以外{
//不明なシャダルタイプ
returnnull;
}
Gl.ShaderSource（Shader、TheSource）;
// compiletheshaderprogram
gl.compileshader（Shader）;
// seeifitcompiledsuccessiveして
if（！gl.getshaderparameter（shader、gl.compile_status））{
Alert（ "AnerroroccurredCompingTheShaders："+gl.getShaderInfolog（Shader））;
returnnull;
}
Returnshader;
}
ステップ3：モデルデータの作成/ロード-initbuffersこれらの小さな例では、モデルデータは基本的に直接生成されます。実際のプログラムでは、これらのデータはモデルの読み込みから取得する必要があります。vartrianglevertexpositionBuffer;
vartrianglevertexcolorbuffer;
functionitbuffers（）{
trianglevertexpositionBuffer = gl.createbuffer（）;
gl.bindbuffer（gl.array_buffer、trianglevertexpositionbuffer）;
varvertices = [
0.0,1.0,0.0、
-1.0、-1.0,0.0、
1.0、-1.0,0.0
];
gl.bufferdata（gl.array_buffer、newfloat32Array（vertices）、gl.static_draw）;
trianglevertexpositionBuffer.itemsize = 3;
trianglevertexpositionBuffer.Numitems = 3;
trianglevertexcolorbuffer = gl.createbuffer（）;
gl.bindbuffer（gl.array_buffer、trianglevertexcolorbuffer）;
varcolors = [
1.0,0.0,0.0,1.0、
0.0,1.0,0.0,1.0、
0.0,0.0,1.0,1.0
];
gl.bufferdata（gl.array_buffer、newfloat32array（colors）、gl.static_draw）;
trianglevertexcolorbuffer.itemsize = 4;
trianglevertexcolorbuffer.numitems = 3;
}
上記のコードは、三角形の頂点と色データを作成し、それらをバッファに入れます。
ステップ4：レンダリング - ドローシーンデータを準備した後、レンダリングのためにWebGLに引き渡すだけです。 gl.drawarraysメソッドはここで呼び出されます。コードを見てください：functiondrawscene（）{
gl.Viewport（0,0、gl.viewportwidth、gl.viewportheight）;
gl.clear（gl.color_buffer_bit | gl.depth_buffer_bit）;
pmatrix = okmat4proj（45.0、gl.viewportwidth/gl.viewtheigh、0.1,100.0）;
mvmatrix = okmat4trans（-1.5、0.0、-7.0）;
gl.bindbuffer（gl.array_buffer、trianglevertexpositionbuffer）;
gl.vertexattribpointer（shaderprogram.vertexpositionattribute、trianglevertexpositionBuffer.itemsize、gl.float、false、0,0）;
gl.bindbuffer（gl.array_buffer、trianglevertexcolorbuffer）;
gl.vertexattribpointer（shaderprogram.vertexcolorattribute、trianglevertexcolorbuffer.itemsize、gl.float、false、0,0）;
setMatrixUniforms（）;
gl.drawarrays（gl.triangles、0、trianglevertexpositionbuffer.numitems）;
}
この関数は最初に3Dワールドの背景を黒に設定し、次に投影マトリックスを設定し、描画するオブジェクトの位置を設定し、バッファ内の頂点と色データに従ってオブジェクトを描画します。また、プロジェクションマトリックスとモデルビューの長方形（OAK3Dグラフィックライブラリのマトリックス補助方法を使用）を生成するためのいくつかの補助方法もあります。
基本的には非常に多くのプロセスがあります。これらに基づいて、より複雑なテクスチャ、ライトなどが実装されています。以下の中国のチュートリアルを参照してください。詳細な例が含まれています。
それはどうですか？ネイティブのWebGL開発を使用するのはどんな感じですか？深い3D知識を持っているだけでなく、さまざまな実装の詳細を知る必要もあります。 WebGLは、さまざまなアプリケーションシナリオに柔軟に適応するためにこれを行いますが、私のようなほとんどの非専門家にとっては、多くの詳細を知る必要はありません。これにより、このセクションで使用されているOAK3Dライブラリなど、開発を支援するためのさまざまなクラスライブラリが生まれました（WebGL開発を実証するために、例ではマトリックス支援方法のみが使用されました）。次のセクションでは、より広く使用されている3.JSグラフィックライブラリを紹介します。
実用的なリファレンス：中国のチュートリアル：http：//www.hiwebgl.com/?p=42
開発センター：https：//developer.mozilla.org/en/webgl