THREE.JS入門チュートリアル(2)シェーダー編その1_基礎知識

翻訳
Three.js は、優れたオープンソース WebGL ライブラリです。WebGL を使用すると、JavaScript が GPU を操作してブラウザ側で真の 3D を実現できます。ただし、このテクノロジーはまだ開発段階にあり、情報が非常に少ないため、愛好家は基本的にデモのソース コードや Three.js 自体のソース コードを通じて学ぶ必要があります。

0. はじめに
以前に「Three.js を使い始める」という記事をあげました。まだ読んでいない場合は、この記事の基礎をそのチュートリアルに基づいて読んでください。

シェーダーについて説明したいと思います。 Three.js が多くの手間を省くまでは、ネイティブ WebGL は素晴らしかったです。場合によっては、特定の効果を実現したい場合や、画面に表示されている内容をもう少し深く掘り下げたい場合、シェーダーが確実に視界に入ります。あなたも私と同じなら、前回のチュートリアルの基本よりもさらに興味深いものを実装したいと考えているでしょう。このチュートリアルでは、実際には多くの退屈な作業を実行してくれる Three.js の基本について説明します。
始める前に、このチュートリアルではシェーダー コードの説明にかなりの時間を費やします。この後、シェーダー コードに基づいてさらに詳しく説明し、何かを行うためのシェーダ。シェーダーは一見すると理解しにくいため、説明が必要になるからです。
1. 2 つのシェーダー
WebGL には固定レンダリング パイプラインがなく、ブラック ボックス シェーダーを直接使用することはできません (翻訳者注: 前世紀のグラフィック カードは基本的に固定レンダリング パイプラインのみをサポートしています) ); WebGL はプログラム可能なパイプラインを提供しますが、これはより強力ですが、理解と使用が難しくなります。簡単に言うと、プログラム可能なレンダリング パイプラインとは、プログラマが頂点を取得して画面に描画する責任があることを意味します。シェーダーはレンダリング パイプラインの一部です:
1. 頂点シェーダー
2. フラグメント シェーダー
知っておくべきことは、これらのシェーダーは両方ともグラフィックス カード上で完全に実行されるということです。 GPUでは、処理が必要なデータをCPUからオフロードしてGPUにロードすることで、CPUの負担を軽減します。最新の GPU は、シェーダーが呼び出す必要がある操作の種類を大幅に最適化しているため、そうする価値があります。
2. 頂点シェーダー
球などのプリミティブ形状は頂点で構成されていますよね。頂点シェーダーはこれらの頂点の 1 つを順番に渡して処理します。各頂点の処理方法は自由にカスタマイズできますが、頂点シェーダーが行う必要があることの 1 つは、画面上の頂点の最終位置を表す 4 次元配列である gl_Position という名前の変数に値を割り当てることです。これ自体は興味深いプロセスです。実際に、3 次元座標 (x、y、z 値を持つ頂点) を 2 次元スクリーンに変換する方法、または 2 次元スクリーンに投影する方法について話しているからです。ありがたいことに、Three.js のようなツールを使用すると、gl_Position に簡単にアクセスできます。
3. フラグメント シェーダー
頂点を含む 3 次元のオブジェクトができたので、そのオブジェクトを 2 次元のスクリーンに投影する必要がありますが、色はどこに行くのでしょうか?テクスチャや照明についてはどうですか?これはフラグメント シェーダが処理するものです。
頂点シェーダーと同様に、フラグメント シェーダーには、フラグメント ポイントの最終色である別の 4 次元浮動小数点変数である変数 gl_FragColor を設定または削除するという、完了する必要があるタスクがあります。ピースとは何ですか？ 3 つの頂点を持つ三角形を想像してください。フラグメントはすべて、これら 3 つの頂点から計算された三角形内の点です。したがって、フラグメント値は頂点値から補間されます。 1 つの頂点の色が赤、隣接する頂点の色が青の場合、赤の頂点付近から赤、紫、最後に青の頂点付近の青への色のグラデーションが観察できます。
4. シェーダー変数
シェーダー変数には、Uniforma、Attributes、Varying の 3 つのタイプがあります。この 3 つの単語を初めて聞いたとき、これまでに使った言葉と一致しなかったので混乱しました。しかし、今では次のように理解できます:
1. ユニフォーム変数は、頂点シェーダーまたはフラグメント シェーダーのいずれかに渡すことができます。これらには、ポイント ライトの位置など、レンダリング プロセス全体を通じて変更されない変数が含まれています。ソース。
2.Attributes 変数は各頂点に対応し、頂点シェーダーにのみ渡すことができます。たとえば、各頂点には色があります。アトリビュート変数と頂点の関係は 1 対 1 に対応します。
3.Varyings 変数は、頂点シェーダーで定義され、フラグメント シェーダーに渡されるように準備された変数です。これを確実に行うには、変数の型と名前が両方のシェーダーでまったく同じであることを確認する必要があります。照明を計算するときに法線が必要になるため、古典的なアプリケーションは法線ベクトルです。
次のチュートリアルでは、これら 3 つの変数を使用します。また、これら 3 つの変数が実際にどのように使用されるかについても学習します。
ここまで、頂点シェーダー、フラグメント シェーダー、および 3 つのシェーダー変数について説明しました。作成できる最も単純なシェーダーを見てみましょう。
5. Hello World (Translator Tucao: Can you please stop showing French)
Here is the simplest vertex shader:

Copy code The code is as follows:

/**
* Each vertex coordinate is multiplied by the model view matrix and then multiplied by the projection matrix
* to obtain the coordinates on the 2D screen
*/
void main() {
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position,1.0);
}

A simplest fragment shader:

Copy code The code is as follows:

/**
* Set any pixel color to pink
*/
void main() {
gl_FragColor = vec4(1.0, / / R
0.0, // G
1.0, // B
1.0); // A
}

That’s all. If you run it directly now, you can see a "matte" pink shape on the screen. Not very complicated, is it?

In the vertex shader, we pass in some uniforms variables through Three.js. There are two 4×4 matrix uniforms variables: the modelview matrix and the projection matrix. You don't need to know much about how these two matrices work. Simply put, these two matrices describe how three-dimensional point coordinates are projected into coordinates on a two-dimensional screen.

In fact, I only covered these two short snippets. Three.js adds them in before your own shader code, so you don't have to worry. To be honest, Three.js also adds a lot of things in front of your code, such as lighting data, node colors, node normal vectors, etc. Without Three.js you would have to create and set these objects yourself, really.
6. Use shader material

Copy the code The code is as follows:

/**
* Suppose we can use JQuery
* to extract the shader code text from the DOM
*/
var vShader = $('vertexshader');
var fShader = $('fragmentshader');
var shaderMaterial =
new THREE.ShaderMaterial ({
vertexShader: vShader.text(),
fragmentShader: fShader.text()
});

From here, Three.js will compile and run Your shader, connect it to the material you created, and the material is attached to the mesh you created. It doesn't get any easier than it really is. Maybe so, but we're thinking about browser 3D programming, and I think you should expect that there's a certain complexity to this topic.

We can also add two other attributes like shader materials: uniforms and attributes. They can be vectors, integers, or floats, but as I said before, uniforms variables remain constant across all points, so they are more likely to be a single value, while attributes variables are per vertex. , so they should be arrays. In a mesh, attribute variables and vertices should have a one-to-one correspondence.
7. Summary
That’s it for this tutorial. In fact, I have talked about a lot, but in many aspects I have only skimmed over it. In the next tutorial I will provide a complex shader, through which I will pass in some attributes variables and uniforms variables to simulate some lighting effects.
I have packaged the source code of this tutorial, you can download it for reference