WebGL と Three.js の動作原理とプロセスの図解-jsチュートリアル-php.cn

この記事の内容は、WebGL と Three.js の動作原理とプロセスを説明するものであり、必要な友人は参考にしてください。
次の 2 つのことについて話しましょう:

1. WebGL の背後にある動作原理は何ですか?

2. Three.js を例に挙げると、フレームワークは舞台裏でどのような役割を果たしていますか?

2. なぜ原理を理解する必要があるのですか?

あなたはすでに WebGL についてある程度の理解を持っているか、Three.js を使って何かを行ったことがあると想定しています。この時点では、次の問題が発生する可能性があります。

1. まだ多くのことができない、または何もできない。アイデア;

2. バグに遭遇した場合、解決できない、または方向性さえありません。

3. パフォーマンスの問題があり、それを最適化する方法がまったくわかりません。

現時点では、もっと知る必要があります。

3. まずは基本的な概念を理解する

簡単に言えば、以下に示すように、行列は座標変換に使用されます。

2. 以下に示すように、具体的にはどのように変換されますか:

3. たとえば、座標を 2 だけ変換します。、以下に示すように、画像:

この時点でまだ理解できなくても問題ありません。行列が座標変換に使用されることを知っていれば十分です。

4. WebGL の仕組み

4.1、WebGL API

新しいテクノロジーについて学ぶ前に、まずその開発ドキュメントまたは API を見てみましょう。

Canvas の描画 API を見ると、直線、長方形、円、円弧、ベジェ曲線を描画できることがわかります。

そこで、WebGL 描画 API を調べたところ、次のことがわかりました:

点、線、三角形しか理解できないのですか？きっと読み間違えたのでしょう。
いいえ、そのとおりです。

こんな複雑なモデルでも、一つ一つ三角形で描かれています。

4.2. WebGL 描画プロセス

簡単に言えば、WebGL 描画プロセスには次の 3 つのステップが含まれます:
1. 頂点座標の取得
2. グラフ要素のアセンブリ (つまり、三角形を 1 つずつ描画)
3.フラグメント、つまり各ピクセル)

次に、各ステップを順を追って説明します。

4.2.1. 頂点座標の取得

頂点座標はどこから来るのでしょうか?立方体なら大丈夫ですが、ロボットだったらどうでしょうか？
そうです、これらの座標を 1 つずつ書きません。
多くの場合、以下に示すように、3D ソフトウェアのエクスポートまたはフレーム生成から発生します:

書き込みバッファ領域とは何ですか?
そうです、プロセスを簡略化するために、以前は導入していませんでした。
多くの場合、頂点データは数千個あるため、頂点座標を取得した後、GPU がより速く読み取れるように、通常はそれをビデオメモリ、つまりキャッシュ領域に保存します。

4.2.2. グラフ要素のアセンブリ

グラフ要素のアセンブリが頂点からグラフ要素 (つまり、三角形) を生成することはすでにわかっています。このプロセスは自動的に完了しますか?答えは完全ではありません。
より高い制御性、つまり頂点位置を自由に制御できるようにするために、WebGL はこの機能を提供します (理解する必要はありません)。
WebGL では最初に頂点を処理する必要がありますが、どうすればよいでしょうか?下の写真を見てみましょう:

「頂点シェーダー」と呼ばれる新しい用語を導入しました。これは OpenGL ES によって記述され、JavaScript によって文字列形式で定義され、生成のために GPU に渡されます。
たとえば、次は頂点シェーダーのコードです:

りー

attribute修饰符用于声明由浏览器（javascript）传输给顶点着色器的变量值；
position即我们定义的顶点坐标；
gl_Position是一个内建的传出变量。
这段代码什么也没做，如果是绘制2d图形，没问题，但如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，我们则需要转换成屏幕坐标。
比如：v(-0.5, 0.0, 1.0)转换为p(0.2, -0.4)，这个过程类似我们用相机拍照。

4.2.2.1、顶点着色器处理流程

回到刚才的话题，顶点着色器是如何处理顶点坐标的呢？

如上图，顶点着色器会先将坐标转换完毕，然后由GPU进行图元装配，有多少顶点，这段顶点着色器程序就运行了多少次。
你可能留意到，这时候顶点着色器变为：

attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = position * matrix; 
}ログイン後にコピー

这就是应用了矩阵matrix，将三维世界坐标转换成屏幕坐标，这个矩阵叫投影矩阵，由javascript传入，至于这个matrix怎么生成，我们暂且不讨论。

4.2.3、光栅化

和图元装配类似，光栅化也是可控的。

在图元生成完毕之后，我们需要给模型“上色”，而完成这部分工作的，则是运行在GPU的“片元着色器”来完成。
它同样是一段opengl es程序，模型看起来是什么质地（颜色、漫反射贴图等）、灯光等由片元着色器来计算。
如下是一段简单的片元着色器代码：

precision mediump float; 
void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}ログイン後にコピー

gl_FragColor は出力カラー値です。

4.2.3.1. フラグメントシェーダーの処理フロー

フラグメントシェーダーは具体的にどのように色の生成を制御するのでしょうか?

上の図に示すように、頂点シェーダーは頂点の数と実行回数を表し、フラグメントシェーダーは生成するフラグメント (ピクセル) の数と実行回数を表します。

4.3. WebGL の完全なワークフロー

これまで、WebGL は本質的に次の処理フローを経てきました:
1. データの準備段階
この段階では、頂点座標とインデックスを提供する必要があります。三角形の描画順序)、uv (テクスチャ座標を決定)、法線 (照明効果を決定)、およびさまざまな行列 (投影行列など)。
頂点データはバッファ領域に保存され（数が膨大なため）、モディファイア属性で頂点シェーダーに渡されます。
マトリックスはモディファイアユニフォームで頂点シェーダーに渡されます。
2. 頂点シェーダーを生成します
必要に応じて、Javascript で頂点シェーダー (opengl es) プログラムの文字列を定義し、それを生成してシェーダープログラムにコンパイルし、GPU に渡します。
3. グラフ要素の組み立て
GPU は頂点の数に応じて頂点シェーダープログラムを 1 つずつ実行し、頂点の最終座標を生成し、座標変換を完了します。
4. フラグメントシェーダーを生成します
モデルの色、テクスチャの外観、照明効果、影 (プロセスはより複雑で、最初にテクスチャにレンダリングする必要があるため、これを行う必要はありません)まだ注意してください)、すべてがこの段階で処理されます。
5. ラスター化
は、各フラグメントの色を決定し、どのフラグメントがブロックされるかを決定しました。最終的に、フラグメント情報はカラーバッファー領域に保存されます。最後にレンダリング全体が完了します。