WebGLのは何ですか？
WebGLのは、JavaScriptをベースのグラフィカル仕様言語のセットのセットを提供するWeb開発者のための仕様のこのセットに実装され、ブラウザ・ベンダーである3D图形関連のAPIを。
Web開発者が直接通信するためにJavaScript言語とグラフィックカード（GPU）を使用することができますこれらのAPI。もちろん、GPU WebGLの部分は、対応するプログラミング言語を参照しましたGLSL。私たちは、GPU上で実行中のシェーダプログラムを書くためにそれを使用します。シェーダプログラムのニーズは、データを介して送信CPU（WebGLのJavaScriptを使用して）受信するように、これらのデータは、最終的に画面に表示されるパイプラインを処理し、そして従ってそのような3Dグラフィックス、ウェブゲームなどの3Dアプリケーション、種々の実現、3D等、WebVRをマッピング。
WebGLの作品
画面上の最終的な表示に出生から3Dモデルデータ、我々は想像することができる流水线製造方法、確立された手順に従って処理するための原料のパイプラインを、現在のステップのみ処理のために前のステップの結果とは、処理の結果を渡します次のステップは、最終的には完全な製品に原料を生成します。WebGLの作品とラインと同様に、パイプラインは、データが2D画面上で3Dモデルをレンダリングする方法に従っており、業界では、と呼ばれ、このレンダリングを置きます图形管线か渲染管线。
WebGLのは描くことができ点、线段、三角形三つの基本的な要素を、私たちはしばしば、WebGLのプログラムは立方体、球、円柱およびその他の定期的なフォームが含まれ、さらに多くの複雑かつ現実的なモデル不規則参照し、WebGLのは、それらを描画する方法でありますそれは？実際には、これらのモデルは、本質的にのいずれかで形成されている点組成物、点とGPUは、三角形图元3次元モデルの多種多様を構成するように、プレーン1分、これらの面の間の相互接続をプロットしました。
したがって、私たちの主な仕事は、これらのモデルからなる頂点データを作成することです。
一般的に、最初の頂点座標は相対的なもの模型中心とシェーダに直接転送することができない、我々はする必要がある顶点坐标一連のステップに従う模型转换、视图转换、投影转换変換が許容座標た後、すなわち、座標のWebGL 裁剪空间坐标。我々は終了变换矩阵と原始顶点坐标に渡されたGPUそれらの上に、GPUレンダリングパイプライン実行パイプライン動作。
次のようにGPUレンダリングパイプラインの主プロセスは、次のとおりです。
- 最初は、GPU上で並列コンピューティングの利点を利用して頂点によって座標変換、頂点シェーダステージに入ります。
- 次いで、プリミティブ組み立て段階に、頂点は、エンティティタイプのパターンに組み立てられます。
- ラスタライズ段、グラフィックピクセルを充填したラスタライズ段へ次色情報が含まれていません。
- ピクセルシェーダであるフラグメントシェーダステージを入力した後、最終的に画面に表示されます。
GLSLとは何ですか？
GLSL中国では、それは、OpenGLシェーディング言語を意味し、英語名は、OpenGL書か中で使用されているOpenGLのシェーディング言語、ある着色器程序言語。
シェーダプログラム：シェーダプログラムは、私たちはGPUプログラミングによってレンダリング制御することができます
だから、描画処理GPUのどの部分の開発者がそれを制御することができますか？以下は、WebGLのレンダリングパイプラインの簡単なデモは、次のとおりです。
図は、レンダリングプロセス上の簡単なWebGLの赤い三角形を示し、緑色の部分があること、開発者ができ、プログラム制御部：
- JavaScriptプログラム
シェーダの処理が必要で顶点坐标、法向量、颜色、纹理およびその他の情報、およびする責任があり着色器、プレゼンテーションの便宜のために数字、これらのデータを提供し、唯一の三角形の頂点データの位置を提供します。 - 頂点シェーダは、
上を通過するためにJavaScriptを受信顶点信息図面に対応する頂点座標。 - 图元装配阶段
将三个顶点装配成指定图元类型，上图采用的是三角形图元。 - 光栅化阶段 将三角形内部区域用空像素进行填充。
- 片元着色器 为三角形内部的像素填充颜色信息，上图为暗红色。
实际上，对顶点信息的变换操作既可以在 JavaScript 中进行，也可以在着色器程序中进行。通常我们都是在 JavaScript 中生成一个包含了所有变换的最终变换矩阵，然后将该矩阵传递给着色器，利用 GPU 并行计算优势对所有顶点执行变换。