HTML5 での WebGL 3D の概要 (パート 1) - WebGL ネイティブ開発が Web ページの新時代を切り開く 3D レンダリング

WebGL は、Web ページでの 3D レンダリングの新時代を開き、プラグインを使用せずに 3D コンテンツをキャンバスに直接レンダリングできるようになります。 WebGL はキャンバス 2D API と同じであり、スクリプトを通じてオブジェクトを操作するため、作業コンテキストの準備、データの準備、キャンバスへのオブジェクトの描画、レンダリングという手順は基本的に似ています。 2D との違いは、3D にはワールド、ライト、テクスチャ、カメラ、マトリックス、その他の専門知識など、より多くの知識が必要となることです。 WebGL には優れた中国語チュートリアルがあり、これは以下の使用方法のリファレンスの最初のリンクにあるため、ここでは何もしません。以下の内容は学習内容の簡単な概要にすぎません。

ブラウザのサポート
Microsoft は独自のグラフィックス開発計画を持っており、WebGL をサポートしていないため、IE は現在、プラグインをインストールする以外に WebGL を実行できません。 Chrome、FireFox、Safari、Opera などの他の主流ブラウザの場合は、最新バージョンをインストールするだけです。最新のブラウザをインストールすることに加えて、グラフィックカードドライバーも最新であることを確認する必要があります。
これらをインストールした後、ブラウザを開いて次の URL を入力して、ブラウザの WebGL サポートを確認できます: http://webglreport.sourceforge.net/。

上記のブラウザを正常にインストールした後も WebGL を実行できない場合は、WebGL サポートを強制的にオンにしてみてください。開く方法は次のとおりです:
Chrome ブラウザ
次の具体的な手順では、Windows オペレーティングシステムを例に挙げます。 Chrome のショートカットを見つけます。ブラウザでショートカットメソッドを右クリックし、ターゲットボックスでプロパティを選択し、chrome.exe の後ろの引用符の後に次の内容を追加します。 --enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files

[OK] をクリックして Chrome を閉じ、このショートカットを使用して Chrome ブラウザを起動します。

いくつかのパラメータの意味は次のとおりです:
--enable-webgl は WebGL サポートを有効にすることを意味します。
--ignore-gpu-blacklist は GPU ブラックリストを無視することを意味します。これは、グラフィックスが存在することを意味します。カードと GPU が古すぎるなどの理由から、WebGL を実行することはお勧めできません。このパラメータを使用すると、ブラウザはこのブラックリストを無視して、WebGL を強制的に実行できます。リソースをローカルにロードできるようにするため、WebGL 開発者ではなく、WebGL の開発やデバッグを行う必要はないが、WebGL デモを見てみたいだけの場合は、このパラメータを追加する必要はありません。

Firefox ブラウザ

Firefox ユーザーは、ブラウザのアドレスバーに「about:config」と入力し、Enter キーを押して、フィルター (フィルター) で「webgl」を検索し、webgl を置き換えてください。 .force-enabled を true に設定し、webgl.disabled を false に設定します。フィルターで「security.fileuri.strict_origin_policy」を検索し、security.fileuri.strict_origin_policy を false に設定します。その後、現在開いている Firefox ウィンドウをすべて閉じ、Firefox を再起動します。
最初の 2 つの設定は WebGL サポートを強制的にオンにするもので、最後の security.fileuri.strict_origin_policy 設定はローカルソースからのリソースのロードを許可するものです。WebGL 開発者でない場合は、その必要はありません。 WebGL の開発やデバッグを行うが、WebGL のデモを確認したいだけの場合は、この項目を設定する必要はありません。

Safari ブラウザ

メニューで「プロパティ」→「詳細設定」を見つけ、「開発メニューを表示」を選択し、「開発」メニューに移動して「WebGL を有効にする」を選択します。

開発ステップ

次のコードは、関連する概念を簡単に要約したもので、リファレンスの中国語チュートリアルからのものであり、より多くの 3D 知識が必要です。興味のある学生は、実践リファレンスの中国語チュートリアルに直接ジャンプできます。ここで説明する内容よりもはるかに詳細で正確です。この楽しみに参加した生徒は、コードの各行の意味を深く掘り下げることなく、ただ見るだけで済みます。

準備
言うまでもなく、これはレンダリングコンテナとしてページに Canvas 要素を追加するためです。例:

コードをコピーコードは次のとおりです:

お使いのブラウザは HTML5 キャンバス要素をサポートしていないようです。

< /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;
functioninitGL(canvas) {
gl=null;
try{
//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.
gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");
}
catch(e){} //GLcontext がない場合は、今すぐにあげてください
if(!gl){
alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");
}
}

このメソッドは WebGL の描画環境を取得するためのものですが、現在の WebGL の標準ではサポートされていないため、canvas.getContext メソッドにパラメータ「webgl」を渡す必要があります。最終的には、実験段階で使用されるパラメータはすべて「experimental-webgl」です。もちろん、標準が設定された後に、canvas.getContext("experimental-webgl") を直接呼び出すこともできます。

ステップ 2: シェーダーの初期化 - initShaders
シェーダーの概念は、率直に言って、グラフィックスカードの操作命令です。 3D シーンを構築するには、色や位置などの情報を大量に計算する必要があり、これらの計算をソフトウェアで実行すると、速度が非常に遅くなります。したがって、グラフィックスカードにこれらの操作を計算させると、これらの計算の実行方法がシェーダーによって指定され、非常に高速になります。シェーダコードは GLSL と呼ばれるシェーダ言語で記述されますが、ここでは説明しません。
シェーダーは HTML で定義し、コードで使用できます。もちろん、プログラム内で文字列を使用してシェーダーを定義する場合にも同じことが当てはまります。
最初に定義部分を見てみましょう:

コードをコピーします

コードは次のとおりです:

precisionmediumpfloat;
varyingvec4vColor;
voidmain(void){
gl_FragColor =vColor;
}

attributevec3aVertexPosition;
attributevec4aVertexColor;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void){
gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
< /script>

ここには、フェイスシェーダーと頂点シェーダーの 2 つのシェーダーがあります。
これら 2 つのシェーダーについて、ここで説明する必要がありますが、コンピューターの 3D モデルは基本的に三角形のパッチを組み合わせた点によって記述され、頂点シェーダーはこれらの点のデータを処理し、サーフェスシェーダーは補間によって処理されます。三角パッチ上の点のデータを処理します。
上で定義した頂点シェーダーは頂点の位置と色の計算方法を定義し、サーフェスシェーダーは補間点の色の計算方法を定義します。実際のアプリケーションシナリオでは、シェーダーでのライトの処理などのエフェクトも関係します。
シェーダーを定義します。プログラム内でシェーダーを見つけて使用できます。

コードをコピー

コードは次のとおりです。

varshaderProgram;
functioninitShaders(){
varfragmentShader=getShader(gl,"shader-fs");
varvertexShader=getShader(gl,"shader-vs " );
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram, flagmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){
alert("Couldnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=gl.getAttribLocation ( shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram, "aVertexColor");
shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}

シェーダーはありますが、どうすればグラフィックカードに実行させることができますか? プログラムはこの種のブリッジであり、その機能は基本的にグラフィックカードにシェーダーコードを実行させることです。指定されたモデルデータ。
ここでは補助メソッド 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);
}else{
//Unknownshadertype
returnnull;
}
gl .shaderSource(shader,theSource);
//シェーダープログラムをコンパイルします
gl.compileShader(shader);
//コンパイルが成功したかどうかを確認します
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){
alert("Anerroroccurredcompilingtheshaders:" gl.getShaderInfoLog(shader));
returnnull;
}
returnshader;
}

ステップ 3: 作成/モデルデータのロード - initBuffers
これらの小さな例では、モデルデータは基本的に直接生成されます。実際のプログラムでは、これらのデータはモデルからロードされる必要があります:

。コードをコピーします

コードは次のとおりです:

vartriangleVertexPositionBuffer;
vartriangleVertexColorBuffer;
functioninitBuffers(){
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: レンダリング -drawScene
データを準備したら、レンダリングのために 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.viewportHeight ,0.1,100.0);
mvMatrix=okMat4Trans(-1.5,0.0,-7.0);
gl.bindBuffer(gl.ARRAY_BUFFER, TriangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram) .vertexPositionAttribute,triangleVertexPositionBuffer.ite mSize ,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 グラフィックスライブラリの行列補助メソッドを使用) もいくつかありますが、これらはトピックとはほとんど関係がないため、ここでは詳しく説明しません。
基本的にはこれですべてのプロセスです。より複雑なテクスチャやライトなどはすべて、これらに基づいていくつかの WegGL 機能を追加することによって実装されます。詳細な例については、次の中国語のチュートリアルを参照してください。

どうですか？ネイティブ WebGL を使用して開発するのはどのような感じですか? 3D に関する深い知識が必要なだけでなく、さまざまな実装の詳細についても知る必要があります。 WebGL は、さまざまなアプリケーションシナリオに柔軟に適応するためにこれを実行しますが、私のようなほとんどの非専門家にとって、多くの詳細を知る必要はありません。これにより、このセクションで使用される Oak3D ライブラリなど、開発を支援するさまざまなクラスライブラリが誕生しました (WebGL 開発を示すために、この例では行列補助メソッドのみが使用されています)。次のセクションでは、一般的に使用される Three.js グラフィックスライブラリを紹介します。

実用的なリファレンス:
中国語チュートリアル: http://www.hiwebgl.com/?p=42

開発センター: https://developer.mozilla.org/en/WebGL