Matteo Marson Max Tutorials 29 - My first shader

tags : MSP, Matteo Marson Max Tutorials, Jitter, GLSL

pateron.com, vimeo

まとめ

max のシェーダーの順番は vertext shader > geometry shader > fragment shader で geometry shader は省略できる

jitter で shader を使うには jit.gl.shader オブジェクトを使う

jit.gl.shader を jit.gl.mesh などで使う場合には @name アトリビュートで名前を設定する 例）jit.gl.shader @name MyFirstShader @file MyFirstShader2.jxs

jit.gl.shader で外部 jxs ファイルを読み込みには @file アトリビュートで設定する 例）jit.gl.shader @name MyFirstShader @file MyFirstShader2.jxs

jit.gl.mesh にシェーダーを適用するには @shader アトリビュートに jit.gl.shader の @name アトリビュートで設定した値を記述する 例）jit.gl.mesh @draw_mode tri_grid @gl_color 1 1 1 1 @shader MyFirstShader

OpenGL には ローカル・スペース ワールド・スペース ビュー・スペース クリップ・スペース スクリーン・スペース の5つの空間（スペース, 座標系）が存在する

ローカル・スペースとは、オブジェクトのローカル原点を基準とした座標のことで、オブジェクトの始点となる座標です。

ワールド・スペースとは、ある（世界の）原点を基準とした座標のことで、それを基準に様々なオブジェクトが相対的に配置される

ビュー・スペースとは、カメラやビューワーを基準とした座標のこと

クリップ・スペースとは、近くのものは大きく、遠くのものは小さくなる空間です。実際には、近くのものは大きく、遠くのものは小さくする透視変換、近くのものも、遠くのものも同じ大きさにする正射影変換の2種類があります。透視変換では、目の前にある木の本数は少なく、遠くの山のほうたくさんの木が見えることとなります。この近くが小さく、遠くのほうが大きい台形の形が見える体積＝視体積を、視錐台（しすいだい）と呼びます。この変換を、プロジェクショントランスフォームと呼びます。 クリップ座標は-1.0と1.0の範囲で処理される。

スクリーン・スペースとは、ビューポート変換と呼ぶ処理でクリップ座標をスクリーン座標に変換し、-1.0と1.0の座標を glViewport で定義される座標範囲に変換します。こうしてできた座標はラスタライザに送られ、フラグメントに変換されます。

ローカル・スペースからワールド・スペースに変換するには MODEL_MATRIX を使用する

ワールド・スペースからビュー・スペースに変換するには VIEW_MATRIX を使用する

ビュー・スペースからクリップ・スペースに変換するには PROJECTION_MATRIX を使用する

ローカル・スペースからクリップ・スペースに一気に変換するには MODELVIEW_PROJECTION_MATRIX を使用する

外部から入力する uniform は param タグで定義し、name で名称、type で型を default で初期値定義する 例） <param name=“blurAmount” type=“int” default=“1” />

jitter のビルトイン uniform は param タグの state で記述し、取得する 例） <param name=“MVP” type=“mat4” state=“MODELVIEW_PROJECTION_MATRIX” />

param タグで定義した変数を実際のシェーダーで使うには bind タグで定義し、program タグでどのシェーダーで使うかを定義する 例) <bind param=“MVP” program=“vp” />

実際のシェーダの記述は program タグで定義し、name で名前（bind タグで使用）type で vertex, geometry, fragment のどれかを指定する。外部ファイルを使う場合は source パラメータが使える。

vertex shader では gl_Position を定義し、geometry shader or fragment shader に送る値を決める。次のシェーダーに送る値は out で定義する

fragment sahder では out で定義した変数（通常 color）を最終的に出力する色を定義する

vertext shader から out で値を渡す場合はデフォルトで smooth 修飾子がつき線形補間される

vertext shader から out で値を渡すときには線形補間しない場合は、flat 修飾子をつける

glsl では慣習で他のシェーダーに送る変数の頭に v をつける。これは varying の略。

テクスチャの座標のことを texcoord,UV,UVW と書かれることが多い

テクスチャ座標を vertext shader に渡すのは線形補間させるため

00:52

Hello, guys, and welcome to new tutorials if you weren’t expecting to see the second part of tutorial 28 really sorry about that. But I need to spend some more time to refine the depth of field for the line rendering. So I’ll upload the second part of that video as soon as I can, I promise. But today, I want to see with you something that many of you requested a comprehensive guide to the basics of OpenGL of GLSL. So today, we see how to write some shaders. Starting from the very basics, maybe this video will get quite long about I want to keep everything in a single tutorial. And maybe I’ll create a sort of index so that you can go skip directly to the minutes where we talk about what you’re interested in. So I guess we can start, let’s create a new batch. So when we talk about shaders, what we actually mean is any program written in GLSL, GLSL is an acronym for OpenGL Shading Language. GLSL is a language used to create some applications that use OpenGL API, OpenGL is a series of high level functions that you can use to communicate directly with your graphics card. And this kind of language is used, usually to create something related to computer graphics. But if you want, you can use that for whatever task whatever program that that makes sense to run on the GPU. So shaders are something that is somehow implicit in Max. Let’s take, for example, this object jit.gl mesh, every time you see these two letters GL, it means that that specific objects uses some form of shader. So something written using OpenGL API. So what this boxes do is actually to create automatically some code for you. Let’s write for example, some attributes like draw modes points, and GL color, red. Okay, what we are asking this object is to create automatically a shader that can render some dots on screen with this color. So every time we change these attributes that they get automatically written in a piece of code, you can actually see that if you sent this message, the swan gad GL tree shader. While here, nothing happens, because we need to create a G to word object first. So we create this object.

こんにちは、皆さん、そして新しいチュートリアルへようこそ！もしあなたがチュートリアルの第2部を見ることを期待していなかったのなら、本当に申し訳ありません。しかし、ラインレンダリングの被写界深度を改善するためにもう少し時間をかける必要があります。この動画の後編は、できるだけ早くアップロードする予定です。でも今日は、皆さんから要望の多かった、OpenGL の GLSL の基本についての包括的なガイドをお見せしたいと思います。今日は、シェーダーの書き方を見てみましょう。非常に基本的なことから始めるので、たぶんこのビデオはかなり長くなると思います。そして、あなたが興味を持っていることについて話している部分に直接飛べるように、インデックスのようなものを作ろうかと思います。

それでは、新しいバッチを作りましょう。シェーダーについて話すとき、私たちが実際に意味するのは、GLSL で書かれたあらゆるプログラムのことで、GLSL は OpenGL Shading Language の頭文字をとったものです。GLSL は OpenGL API を使うアプリケーションを作るために使われる言語で、OpenGL はグラフィックスカードと直接通信するために使える一連の高レベル関数です。そして、この種の言語は、通常、コンピュータグラフィックスに関連するものを作成するために使用されます。しかし、必要であれば、GPU 上で実行する意味のあるプログラムであれば、どんなタスクにも使用することができます。ですから、シェーダーは Max に何らかの形で内包されているものです。例えば、このオブジェクト jit.gl.mesh を例にとると、この2つの文字 GL を見るたびに、その特定のオブジェクトが何らかの形のシェーダを使っていることを意味します。つまり、OpenGL API を使って書かれたものです。つまり、このボックスが行うことは、実際にいくつかのコードを自動的に作成することです。たとえば、描画モードはポイント、GL カラーは赤、といった属性を書いてみましょう。このオブジェクトは、この色で画面にいくつかの点をレンダリングするシェーダーを自動的に作成するよう依頼しています。ですから、これらの属性を変更するたびに、それらが自動的にコードの一部に書き込まれます。このメッセージを送信すると、白鳥が GL ツリーシェーダーを作成したことが実際に確認できます。一方、ここでは何も起こりません。なぜなら、まず G to word オブジェクトを作成する必要があるからです。そこで、このオブジェクトを作成します。


03:29

And now if you press this message, you can see face a text file. This one is the shader. Now, maybe it doesn’t make much sense to you. But what this piece of code actually does, it creates some points with a face color. So Max provides a series of objects to automatically compile some GLSL code for you. But sometimes it is useful to write your own shaders, if you need to do something very specific or very optimized for that job. So this byte, the guys that created Max, deeds, and steel do an incredible job. Sometimes you really need to write something specific for your own application. So for this reason, it makes completely sense to write your own shaders. So to create a custom shader in Max, you need this object g.gl dot shader. This one is the sort of container that comes with this text editor, in which you can write your own shader, and you can use that to render anything you want. So before starting to code, our own shader, let’s start to break down the anatomy of any shader shaders are programs that are divided in three sequential steps. First Steps are always these three stages. So first, we have the vertex shader, then the GL To shader and the fragment shader, always in place order. Each one of these steps do something different. So let’s start to understand roughly what each stage does. This first stage, the vertex shader takes some positions in a 3d word, and it applies some operations on face vertices, so that you can take a certain shape and visualize it on your screen. Then we have the geometry shader. This step is optional, so it can be completely skipped. Or at least one can apply further operations on the geometry that the vertex shader elaborated. Then we have the fragment shader. This part is the part of the program where we can apply colors and where we actually control and modify how things appear on screen. So each part of the shader is different, and requires different things. So we start giving a look at this vertex shader.

そして今、このメッセージを押すと、テキストファイルが face を出します。こちらはシェーダーです。さて、あなたにはあまり意味がわからないかもしれませんね。しかし、このコードが実際に行っていることは、face の色を持ついくつかのポイントを作成することです。このように、Max はいくつかの GLSL コードを自動的にコンパイルするための一連のオブジェクトを提供しています。しかし、非常に特殊なことをする必要がある場合や、その仕事に非常に最適化されている場合には、自分でシェーダを書くのが便利なこともあります。だからこのバイト、Max、deeds、steel を作った人たちはすごい仕事をしているんです。時には、自分のアプリケーションのために何か特別なことを書く必要がある場合もあります。そのため、自分でシェーダーを書くことは完全に理にかなっています。ですから、Max でカスタムシェーダを作るには、このオブジェクト jit.gl.shader が必要です。これは、このテキストエディタに付属しているコンテナのようなもので、この中に自分のシェーダを書くことができ、それを使って好きなものをレンダリングすることができます。自作シェーダーのコードを書き始める前に、シェーダーの構造を分解してみましょう。シェーダーは3つの連続したステップに分かれたプログラムです。ファーストステップは常にこの3段階です。つまり、最初に頂点シェーダ、次に ジオメトリシェーダ、フラグメントシェーダがあり、常に場所順になっています。これらのステップでは、それぞれ異なることを行います。では、それぞれの段階が何をするのか、大まかに理解することから始めましょう。 この最初の段階である頂点シェーダは、3D ワードのいくつかの位置を受け取り、面の頂点にいくつかの操作を適用します。 次に、ジオメトリシェーダがあります。このステップはオプションなので、完全に省略することができます。あるいは、少なくとも、バーテックスシェーダが精緻化したジオメトリにさらなる操作を加えることができます。 次に、フラグメントシェーダがあります。この部分は、色を適用したり、画面上での見え方を実際に制御・変更したりする部分です。このように、シェーダーの各部分はそれぞれ異なり、必要なものも異なります。そこで、このバーテックスシェーダーについて見ていきましょう。

But to understand how it works, we need to talk about something else before we need to understand what our OpenGL spaces when we work with OpenGL, we know that we need some coordinates. So coordinates are points in space that can be used to define, for example, the shape of a certain object you want to render. But you must know that there are different sets of coordinates, each one making sense for what it is used to. So coordinates are always something that can be expressed as a three component vector. So a vector containing three different elements, each one standing for the X, Y and Zed position of a certain vertex. But these positions may assume different meanings according to what you’re trying to do. For example, let’s say we want to build a cube. So we know that a cube is a shape that has six faces, defined by eight vertices. So how can we place those vertices so that they are arranged in the shape of a cube, we can assume a coordinate system that has its origin in the point 000, and we can place the face vertices around the origin. So this is an easy way to create a cube right, we place the first vertex at position minus one minus one minus one, the second vertex at one minus one minus one, and so on until we completely create the shape of a cube. So we are placing these coordinates in a 3d space that makes sense for building our shape. This space is called Local space. And it is where we can define the shape of the object we want to render. But then if you want to look at these objects, you need to play seats in a 3d environment in a scene, you know, 3d world if you want. So here, for example, we take this cube in place, it’s here. Now what is here, when I say here, I mean, another set of coordinates that are different from the ones we used in local space, these set of coordinates refer to the word space, so the position of the objects in the word in a 3d word. So to do this operation, we should take these positions and apply some transformations, phase transformations are translation, rotation, and scaling. So if you want to place these cube on the left of our scene, whatever left means, here, let’s take this red axis that I suppose it is, the x axis, we want to place the face cube towards this negative part of the axis.

しかし、それがどのように機能するかを理解するためには、私たちが OpenGL で作業するときに私たちの OpenGL 空間が何であるかを理解する必要がある前に、私たちはいくつかの座標が必要であることを知っている他のことについて話す必要があります。座標とは、例えば、レンダリングしたいある物体の形状を定義するために使用できる、空間上の点のことですね。しかし、座標にはさまざまなセットがあり、それぞれが何に使われるかに応じて意味があることを知っておく必要があります。座標は常に3成分のベクトルで表現されます。つまり、3つの異なる要素を含むベクトルで、それぞれがある頂点の X、Y、Z 方向の位置を表しています。しかし、これらの位置は、何をしようとしているかによって、異なる意味を持つことがあります。例えば、立方体を作りたいとしましょう。立方体とは、6つの面を持ち、8つの頂点で定義される形状であることは分かっている。では、その頂点を立方体の形になるように配置するにはどうしたらよいかというと、点000を原点とする座標系を仮定し、その原点を中心に面の頂点を配置すればよいのです。最初の頂点はマイナス1マイナス1マイナス1の位置に、2番目の頂点はマイナス1マイナス1の位置にと、完全に立方体の形が出来上がるまで配置します。つまり、これらの座標を、形状を構築するのに適した3次元空間に配置するのです。この空間をローカル空間と呼びます。ここでレンダリングするオブジェクトの形状を定義することができます。しかし、これらのオブジェクトを見るには、3D 環境のシーン、つまり3D の世界でシートを再生する必要があります。たとえば、この立方体をここに置いてみましょう。ここで何があるかというと、ローカルスペースで使った座標とは別の座標のセットで、これらの座標のセットはワールドスペースを参照しているので、ワールド内のオブジェクトの位置は3d ワールドになります。この操作を行うには、これらの位置を取り、いくつかの変換を適用する必要があります。位相変換とは、平行移動、回転、拡大縮小のことです。つまり、立方体をシーンの左側に配置したい場合、左側が何を意味するかはともかく、ここでは、この赤い軸、つまり x 軸としましょう、この軸の負の部分に向かって face の立方体を配置したいと思います。


So what we need to do is supply translation. So we take this coordinates that are in local space, and we apply translation so that we can shift this shape on the left. So translation is usually a sum, we sum some values to this set of coordinates, so that we can shift somewhere else in the world our objects, but then we may want to apply some other kinds of transformations. For example, we may want to rotate these objects. So rotation is more complex than translation. And maybe we want to change the size of this cube, we may want to make it bigger or smaller. So we may also want to apply a scaling operation. So this set of coordinates expressed in local space must be somehow transformed to make sense in Word space. This transformation is done through transformation matrices, transformation matrices, are are something that may be scary at first, but consider those as something that automatically let you place in not objet in a 3d scene without worrying about the math behind rotation, translation and scaling. So in Max, we will see that we can retrieve this model matrix that does exactly this takes some coordinates expressed in local space, and transform those to make sense in Word space, so that we can place any object with its own translation rotation, scaling.

そこで必要なのが、平行移動です。つまり局所空間にあるこの座標を取り出し、この形状を左に移動できるように平行移動を適用するのです。通常、平行移動は合計です。この座標のセットにいくつかの値を加算して、世界のどこか別の場所にオブジェクトを移動できるようにします。例えば、オブジェクトを回転させたいと思うかもしれません。回転は移動よりも複雑です。また、この立方体の大きさを変えたいかもしれません。大きくしたり小さくしたりしたいかもしれません。ですから、拡大縮小の操作も必要かもしれません。このように、局所空間で表現された座標系は、何らかの方法で Word 空間での意味をなすように変換されなければならない。この変換は、変換行列によって行われます。変換行列は、最初は怖いかもしれませんが、回転、移動、スケーリングの背後にある数学を気にせずに、3D シーンにオブジェクトを自動的に配置することができるものだと考えてみてください。Max では、ローカルスペースで表現された座標を取得し、ワードスペースで意味をなすように変換することで、任意のオブジェクトを独自の移動、回転、スケーリングで配置できるようにする、まさにこれを行うモデル行列を取り出すことができることを確認します。

And we can express these features in a very simple way. So just expressing the position in the word space, the scaling factors, and the rotation and automatically if this model matrix will do all the job, but then this is not enough, if you want to visualize a scene on our screen, because as you know, the or if you don’t know, it works like this, you have to take a camera virtual camera to create a 2d representation of a certain 3d word. So we assume that we have a camera with an invisible camera operator that is standing somewhere in this 3d world, and it is shooting the scene. So not only we need to define the position of our subjects, so our shapes, but we also need to define the position of our camera. So the cameras well will have a position expressed in workspace, but then this camera captures their scene. So we want to know how to transform these coordinates so that they appear on screen as they were seen, from the camera point of view, we can do the separation using another matrix, the so called view matrix that transforms every position. So every coordinates in words from word space, to view space view space is the first space, you can think about it as what the camera is seen, in theory is coordinates, the position of the camera is always the origin. So all is the point 000. And all the other positions are transformed, as seen from the camera point of view. So as you can see, all these set of coordinates make completely sense. And we will need all this different kind of spaces. If you want to apply certain operations in our shader, then it is almost done, we have a last step, we have this projection matrix. Now look at this in in view space.

そして、これらの特徴を非常にシンプルな方法で表現することができるのです。ワールド空間での位置、スケーリング係数、回転を表現するだけで、このモデル行列があれば自動的にすべての仕事をこなしてくれますが、これでは十分ではありません。あるシーンを画面上で視覚化したい場合、ご存知のように、あるいは知らないかもしれませんが、このように動作します。ある3D のワールドを2次元で表現するために仮想カメラを撮影する必要があります。つまり、この3次元世界のどこかに立っている、目に見えないカメラマンがいるカメラがあって、それがシーンを撮影していると仮定します。そこで、被写体の位置、つまりシェイプを定義するだけでなく、カメラの位置も定義する必要があります。カメラの位置はワークスペースで表現されますが、このカメラはシーンを撮影します。そこで、これらの座標をどのように変換して、カメラの視点から見たのと同じように画面に表示するかを知りたいのですが、それには別の行列、いわゆるビュー行列を使って、すべての位置を変換する分離を行うことができます。つまり、言葉の中のすべての座標は、言葉空間からビュー空間へ、ビュー空間は最初の空間であり、カメラが見ているものと考えることができます、理論的には座標であり、カメラの位置は常に原点となります。つまり、すべてが点000である。そして、他のすべての位置は、カメラの視点から見たものとして、変換されます。このように、これらの座標系はすべて完全に意味をなしています。そして、このような異なる種類の空間がすべて必要になるのです。シェーダで特定の操作を行いたい場合は、ほぼ完了です。最後のステップとして、この射影行列があります。さて、これをビュー空間上で見てみましょう。

What is missing here, here is missing perspective. So objects do not tend to converge with the distance from the camera. So here we apply another matrix called projection matrix that does exactly this, it applies perspective. So we project the objects on screen so that they appear affected by perspective, we can also decide to skip this passage or to use an orthographic projection. But that’s something really for another day. So these are the three magic matrices, the model matrix, the view matrix and the projection matrix. Each one allows the passage from the locker space for the word space from the word to view space, and from view space to clip space. That is our final scene, our screen. Actually, we need another transformation that is anyway automatic that is called viewport transform. But here you can see this scene already built. So hope this was clear enough. Remember this for names are by their five names, local word, view, clip and screen space together with these matrix transformations, because we will find the same in our shader. Okay, so let’s go back to max and let’s try to see what is inside HT a default shader. Now we discussed about spaces. Let’s create the shader and let’s see what it contains. So to create a shader we already said that we need this object GL shader. But we also need to do something else, we need to decide the name for our shader, like my first shader. And of course, sorry, this is not an attribute we need to write at name, followed by the name we just decided. And then we also need to specify a file because this shader are stored on your computer with this format, name of the shader dot j access. So these are a sort of text files stored with this format. So to create a shader, we also need to set here the attributes at file followed by the name that may be different from the name of the shader. But to keep it simple. Let’s name it the same way. So my first shader dot j access, it is important to express here, the file extension.

ここに欠けているもの、それは遠近感が欠けていることです。つまり、オブジェクトはカメラからの距離によって収束する傾向がないのです。そこで、ここでは投影行列と呼ばれる別の行列を適用して、まさに遠近法を適用します。つまり、スクリーン上のオブジェクトを投影して、パースペクティブの影響を受けているように見せるのです。しかし、それはまた別の日にしましょう。以上、3つのマジックマトリックス、モデルマトリックス、ビューマトリックス、プロジェクションマトリックスを紹介しました。それぞれ、ロッカースペースからワードスペースへ、ワードからビュースペースへ、ビュースペースからクリップスペースへの通過を可能にします。これが最終的なシーンであり、スクリーンである。実は、もう1つ自動的な変換が必要で、それはビューポート変換と呼ばれます。しかし、ここではこのシーンがすでに出来上がっているのがわかります。これで、十分に理解できたでしょうか。名前は、ローカルワード、ビュー、クリップ、スクリーンスペースという5つの名前と、これらのマトリックス変換を覚えておいてください。それでは、max に戻って、HT デフォルトシェーダの中身を見てみましょ う。さて、スペースについて説明しました。シェーダを作成し、何が含まれているか見てみましょう。シェーダを作成するには、このオブジェクト GL シェーダが必要であることはすでに述べました。しかし、もうひとつ必要なことがあります。シェーダーの名前を決める必要があります、私の最初のシェーダーのように。もちろん、申し訳ありませんが、これは属性ではありませんので、name と、その後に今決めた名前を書く必要があります。それから、ファイルを指定する必要があります。このシェーダーは、シェーダー名ドット j アクセスというフォーマットでコンピュータに保存されるからです。つまり、このフォーマットで保存されたテキストファイルのようなものです。ですから、シェーダーを作成するには、ここで属性となるファイルを指定し、その後にシェーダーの名前と異なる名前を指定する必要があります。しかし、シンプルにするためです。しかし、シンプルにするために、同じように名前を付けましょう。最初のシェーダーは jxs ですが、ここで重要なのは、ファイルの拡張子を表すことです。

14:59

So now, here in the max window, we should have have an error, we should get an error like can’t find my first shader dot j access, of course, because we didn’t save the shader anywhere. So usually what I do is something like this. First of all, I save the patch. So save, I go to this folder, let’s create a new one. Patches. Okay, let’s call this one tutorial 29. Okay, and then I save the patch. Then I double click this GL shader objects, face text editor pops up. And what to do is simply File Save As, and then I save the file using the same name. So my first shader dot j access, save. Now if you let’s clean the max window, if you delete and create again, these objects, now Max should not complain again, because the shader name exists, and it is in the same path of the main patch. Okay, great. Now, if I double click the shader, again, it is open inside this external text editor. Now, there are many reasons to do that. First of all, because the native editor provided by Max is not that great. While if you use something external, like I’m, like I am right now. I’m here I’m using Sublime text that is a free text editor, you can highlight the syntax, do some operations, like find the names of the variable, change multiple lines at the same time, and stuff like that. So I recommend you to get an external editor, you can use Sublime Text Atim, you can use Visual Studio Code, whatever you want, Xcode really doesn’t matter. But if you want to open directly of these shader files using a text editor, you can go here, under Options, Preferences. Here you have a voice that is external text editor. Here, you simply need to search in your harddrive. For the for the program you want to open the shader with. So this is the reason why you are not seeing the default text editor. Okay, let’s give a look at this default shader. First of all, let’s indentify the three stages we were talking about before. So the vertex shader, the geometry shader and the fragment shader, you can see those here, here we have the vertex shader that starts with this string program name, VP, type vertex V P stands for vertex program, it starts here and ends, sorry, here with this closing tag, then we have the geometry program that starts here and ends here. And then we have the fragment program can starts here and ends here. All the rest is just stuff that Jeter needs to know in order to open and close the shader has a hole. But these are the three main programs. Now we said before that the geometry program is something optional. So we can for the moment, take it and get rid of it. So I select it from the start to the end and simply remove it. Okay, so this is our shader now, vertex and fragment shader. Okay, we can save. As soon as we save, the shader is updated in the max window. So if we have any sort of error, this is something that is shown here in the max console. Now something we are missing is we didn’t tell jit.gl mesh, not to use a its native shader but instead to use the one we are writing right now. もちろん、シェーダーをどこにも保存していないので、MyFirstShader.jxs が見つからないというエラーが出るはずです。ですから、通常私が行うのは次のようなことです。まず最初に、パッチを保存します。保存して、このフォルダに移動して、新しいフォルダを作りましょう。Patches です。よし、これをチュートリアル29と呼ぶことにしよう。そして、パッチを保存します。それから、この GL シェーダーオブジェクトをダブルクリックすると、フェイステキストエディタがポップアップ表示されます。そして、単純に File Save As で、同じ名前でファイルを保存します。最初のシェーダーはドットジェイでアクセスし、保存します。これで、MAX ウィンドウをきれいにして、これらのオブジェクトを削除してもう一度作成すれば、Max は文句を言わないはずです。なぜなら、シェーダー名が存在し、それがメインパッチと同じパスにあるからです。OK、素晴らしい。さて、シェーダをダブルクリックすると、再び、この外部テキストエディタ内に開かれます。さて、このようなことをする理由はたくさんあります。まず第一に、Max が提供するネイティブエディタはそれほど優れたものではないためです。一方、外部のものを使う場合は、私が今やっているように、です。Sublime text はフリーのテキストエディタで、構文をハイライトしたり、変数名を探したり、複数行を同時に変更したり、そういうことができるんだ。Sublime Text Atim でもいいし、Visual Studio Code でもいいし、Xcode でもかまわない。しかし、テキストエディタを使ってシェーダーファイルを直接開きたい場合は、「Options」の「Preferences」から行えます。ここに、外部テキスト・エディターという音声があります。ここで、あなたのハードドライブ内を検索する必要があるだけです。シェーダを開きたいプログラムを探します。これが、デフォルトのテキストエディターが表示されない理由です。さて、このデフォルトのシェーダーを見てみましょう。 まず最初に、前に話した 3 つのステージを確認しましょう。

頂点シェーダはプログラム名、VP、タイプバーテックス V P は頂点プログラムの略で、ここから始まり、この終了タグで終わります。

そしてフラグメントプログラムはここから始まってここで終わります。

残りはすべて、シェーダーに穴を開けたり閉じたりするために Jeter が知っておく必要があるものばかりです。しかし、これらは3つの主要なプログラムです。

さて、 ジオメトリプログラムはオプションであると前述しました。ですから、とりあえず、これを取り除いておくことができます。 そこで、このプログラムを最初から最後まで選択し、単純に削除します。

さて、これで頂点およびフラグメントシェーダのシェーダが完成しました。さて、保存しましょう。保存するとすぐに、シェーダは max ウィンドウで更新されます。そのため、何らかのエラーが発生した場合、MAX コンソールに表示されます。今、私たちが見逃していることは、jit.gl.mesh に対して、ネイティブシェーダーを使用するのではなく、今書いているシェーダーを使用するように指示していないことです。そこで、add shader というアトリビュートを指定する必要があります。


memo

geometry は省略できる

19:10

So what we need to do is to specify an attribute called add shader, followed by the name of the shader, we decided here. So after its name, so here we have ADD shader, my first shader, Max is not complaining. So everything is right. Let’s go back to the shader and let’s give a look. Okay, we said before that the main goal of a vertex program is to take some coordinates, and transform those so that they make sense displayed on screen. But where do the vertex shader takes these coordinates, so the starting coordinates, we can decide that up here, this is a part of the shader that does not belong to any of the three programs, but that can be used to take something from the main patch. That can be a matrix that can Be a control parameter, a texture or whatever is needed. But we also can ask directly GLSL to give us something like the transformation matrices. So up here, we will need to write what we need to create our shader. And give a look at this here we have this string that says params name, position, type of factory state position. So let’s understand what this means. First of all, we have params name equals, so we are defining a parameter parameter with this name, the name position, then we specify that this parameter is a factory. So it is a vector containing three elements. And how can we feel these parameter position, we do that asking the shader to give us the position. So this word state in a way means Hey, shader, give me what it needs. And fees is what they need position, then down here, we should do something else. We have now our parameter that is full of positions, but we need to specify in which part of the program we want to use it. So we can decide to use it in the vertex shader in the geometry shader or in the fragment shader. And we do that like this, we say, bind puram position, so which puram the puram position, and we want to bind it to which program the program called VP that stands for vertex program, we know that VP is our vertex program, because here as we start, as we begin face, vertex shader, we decided that the name of this program would be VP. So we can also change this one, you can call this one and no Michael, if you want and change this VP to Michael, if you want. So here are the three for the parameter, we define its name, what is what it contains, then we decide where to use this parameter, in this case in the vertex program. So this is the part of the shader where where we retrieve what we need, then we now define this parameter called position, and we should take that and place it in the vertex program. So here in the vertex program, we need to write this string that is in vektory position. This means that we are expecting to receive in this instructor so where the inlets if you want of the vertex program are we expect to receive a parameter called position that contains three elements. And if you see we do exactly the same with color, up here, we have param name color type of vac for because the color is defined by RGB alpha, and then we we ask for the states color, then we decide to use that color here in the vertex program. And here we set in vac for a variable called color. If you can see each line is then closed by a semicolon. This is something very important, each line should be closed like this, apart from here, this sort of declaration stage, and these parentheses, but this is something that we will see later. So here, it doesn’t matter really the order in which row you write this things, you can also write that like this first, in fact, for color, then in factory position. And you can also change the names like either no position is a variable name too long for me. So right pause. So instead of position, I simply write pause, you can do that as well. Okay, so let’s move a step further. Let’s ignore this line for the moment as well as this strange thing. Let’s move down here, here we have something colored in a different way, that is called main. Now, this is the part where actually we write to what the vertex shader should, so inside this main function, we should write everything we need. And let’s see what we have here. Here, we have this strange thing, we will talk about in a second, and then here we have position. So, we know that we are taking this variable called position and we are applying some sort of transformation on it. And we are assigning the result to this other variable that that is gL underscore position. So what is the face variable? As you can see, it is also colored differently. And Edie it has this it’s Alec font faces a built in variable. So it is something that you cannot, nor create nor destroy. そこで、 @shader というアトリビュートを指定し、その後にシェーダーの名前を指定する必要があるのですが、ここではそのようにしました。 つまり、名前の後に、

@shader MyFirstShader

、Max が文句を言わないようにしたわけです。つまり、すべてが正しいということです。

シェーダに戻り、見てみましょう。さて、頂点プログラムの主な目的は、ある座標を取得し、それを画面に表示されるように変換することである、と前に述べました。しかし、頂点シェーダはこの座標をどこで取るのか、つまり、開始座標は、ここで決めることができます。それはマトリックスであったり、コントロールパラメータであったり、テクスチャであったり、必要なものであれば何でも構いません。しかし、私たちは GLSL に直接、変換行列のようなものを与えるように頼むこともできます。ですから、ここでは、シェーダを作成するために必要なものを書く必要があります。これを見てください。ここには、

<param name=“position” type=“vec3” state=“POSITION” />

と書かれた文字列があります。これが何を意味するのか理解しましょう。まず、 params name= とあるので、この名前と position という名前でパラメータを定義し、このパラメータがファクトリであることを指定しています。つまり、3つの要素を含むベクトルです。 そして、これらのパラメータの位置をどのように感じるかというと、シェーダに位置を教えてもらうのです。つまり、このステートという言葉は、ある意味、「おい、シェーダー、必要なものをよこせ」という意味なのです。そして、シェーダーが必要としているのは位置であり、その下にあるのは別のことです。

これで位置を表すパラメータができましたが、これをプログラムのどの部分で使うかを指定する必要があります。

<bind param=“position” program=“vp” />

つまり、頂点シェーダで使うか、ジオメトリシェーダで使うか、フラグメントシェーダで使うかを決めることができるのです。VP は頂点プログラムです。なぜなら、フェースシェーダ、バーテックスシェーダを始めるときに、このプログラムの名前を VP と決めたからです。ですから、これを変更することもできます。必要であれば、これをマイケルと呼ばず、この VP をマイケルに変更することもできます。

次に、このパラメータをどこで使うか、この場合は頂点プログラムの中で使います。これはシェーダの一部で、必要なものを取得します。次に、位置というパラメータを定義し、これを頂点プログラムに配置します。頂点プログラムでは、この文字列を vec3 position に書く必要があります。つまり、このインストラクターは、頂点プログラムのインレットで、3つの要素を含む position というパラメータを受け取ることを期待しているわけです。 そして、我々は色で全く同じことを行うことがわかります、ここで、我々は、色は RGB のアルファで定義されているので、我々は、状態の色を要求し、その後、我々はここで頂点プログラムでその色を使用することを決定するための vac のパラメータ名カラータイプを持っています。そして、ここでは color という変数に vec4 をセットしています。

各行がセミコロンで閉じられているのがわかると思います。これは非常に重要なことで、各行はこのように閉じるべきです。ここと、この宣言段階と、この括弧は別ですが、これは後で見ることになります。ここで、どの行に何を書いてもいいのですが、まずこのように書くこともできます。

また、 position は長すぎる変数名なので、名前を変更することもできます。 position の代わりに pos と書いていますが、これも同じようにできます。

さて、もう一歩進めてみましょう。この行も、この変なものも、とりあえず無視しましょう。この下に移動しましょう。

ここには別の色で塗られたものがあり、これは main と呼ばれています。 この関数は頂点シェーダーが何をすべきかを書き込む部分なので、 この main 関数の中に必要なものをすべて書き込む必要があります。 では、どんなものがあるか見てみましょう。 ここには奇妙なものがありますが、これについては後ほど説明します。 つまり、この position という変数にある種の変換を施していることがわかります。 そしてその結果をもうひとつの変数、 gl_Position に代入しています。では、gl_Position 変数とは何でしょうか？見てわかるように、これもエディタの色が違っています。そして Edie には、この Alec font faces という変数が組み込まれています。つまり、作ることも壊すこともできないものなのだ（組み込み変数）。頂点に常に存在するもので、頂点シェーダーから出て、ジオメトリシェーダーに行く位置を表します。

25:07

It is something that exists always in the vertex either, and that represents the position that comes out from the vertex shader, and then goes to the geometry shader, if it exists, otherwise, it goes to the fragment shader. So this is the outlet if you want of our vertex shader, and we are sending out from here, the position, the variable position with certain transformations applied. So now, apart from this transformation, where do we take this position, we know how to ask it from the shader now, but we didn’t know what what are these positions. So this positions, let’s go into main patch. fixed positions are exactly what you can set in the first inlet. If you over your mouse on the first inlet here, you can read vertex array, this is the inlet in which you should provide a matrix containing the positions of the vertices. So you can do that using an object like the no cheat noise. Let’s create some positions randomly. So jet noise, three planes, float certitude 10 elements. Now, if I send a bang to this objects, we can output a face matrix that goes inside jit.gl mesh, and now from within the shader, these positions are called position. So now the shader rates first state position, that is phase one, retrieve the content and assign it to the internal variable name its position. So this is how we pass some coordinates to the vertex shader. But now let’s talk about what our face coordinates. These coordinates are in model space. So they refer to how we want to build the shape of the object we want to render. So we saw previously that we need to apply some transformations to this set of coordinates if you want to visualize it. To visualize those on screen, let’s go back to the scheme about spaces here, we started from this set of coordinates. Okay, in local space, we need to apply three matrices. So we need to pass from local to word space, from word to view, and then from view to clip space. How can we do that? So in other words, how can we retrieve these three matrices? Well, here in the shader up here, where we ask for things, we can ask for these matrices, so we can write puram name. So we need something called model matrix type, what is the type of this variable, it is a mat for? So this is a matrix. So the kind of variable is met, it contains four rows and four columns therfore, the kinds of data is a metaphor, and then what is the name so that the state what we what do we need to ask for, what we need to ask for is the word matrix. And then we close face line with a slash and greater than. So these may be confusing, but the word space is actually that the model matrix, they decided to call this in respect to how the coordinates get transformed. So they will become in worldspace. But this is actually what is referred to usually as the model metrics, then we need another metrics, that is the view matrix. So we can do the same puram name view matrix type again, and this is a matrix made of four columns, four rows, state, the name of the view matrix is view matrix. View underscore metrics. Here, what I’m writing on the right are some comments you can do that wherever you want in the code, you can also you can always place two slashes and then write whatever you want this will not be evaluated as code, but it is it is something precious and useful. If you want to leave some comments for someone else or for your future self, then we need the third matrix. So the other matrix is a ram name, projection matrix type, you guessed it. State projection matrix. So again, another comment projection matrix perfect. As for the other parameters, such as position and color, we need to use these matrices in a specific program. So again, we need to write binds puram equals model matrix program VP.

これは頂点に常に存在するもので、頂点シェーダから出力された位置を表し、ジオメトリシェーダがあればそこに行き、なければフラグメントシェーダに行くというものです。 つまり、これは頂点シェーダーの出口であり、ここから位置、つまり特定の変換を適用した可変位置を送信しているのです。 シェーダーからどのように位置を取得するかはわかりましたが、これらの位置が何であるかはわかっていませんでした。 固定位置は、まさに最初のインレットで設定できるものです。 この最初のインレットにマウスを乗せると、頂点の配列を読むことができます。 これは、頂点の位置を含む行列を提供するインレットです。 そのためには、noise のようなオブジェクトを使用します。 ランダムに位置を作ってみましょう。 jit.noise 、3面、浮動小数点数10要素ですね。 このオブジェクトに bang を送ると、jit.gl.mesh の中に入る面行列を出力することができ、シェーダの中では、これらの位置は position と呼ばれます。


つまり、シェーダーのレートは最初の状態であるポジションを取得し、その内容を内部変数であるポジションに代入します。 このようにして頂点シェーダーに座標を渡しているわけです。 しかし、ここで face の座標について説明しましょう。 この座標はモデル空間でのものです。 つまり、レンダリングしたいオブジェクトの形状をどのように構築したいかを示しています。 この座標を視覚化するには、この座標のセットに何らかの変換を施す必要があることは、前回説明したとおりです。 それらを画面上で視覚化するために、ここで空間に関するスキームに戻りましょう。 さて、局所的な空間では、3つの行列を適用する必要があります。

つまり、 ローカル空間からワールド空間へ、 ワールドからビューへ、 そしてビューからクリップ空間へ渡す必要があるのです。

どうすればいいのでしょう？つまり、これらの 3 つの行列をどのように取得すればよいのでしょうか。 さて、このシェーダの中の、何かを要求するところで、これらの行列を要求することができますので、param name と書きます。 この変数の型は何でしょうか？これは行列なんですね。 だから変数の種類は満たされている、それは4つの行と4つの列を含んでいる thrfore、データの種類は比喩です、そして次に名前は何ですそうすれば状態我々は何を求める必要があるか、我々は何を求める必要があるのはワールドの行列です。 そして、スラッシュと greater than でフェイスラインを閉じます。 ですから、これらは分かりにくいかもしれませんが、空間という言葉は、実はモデル行列のことで、座標がどのように変換されるかに関して、こう呼ぶことにしたのです。 つまり、ワールドスペースになるわけです。 しかし，これは通常 MODEL_MATRIX と呼ばれるもので，次に別の MATRIX が必要です．これは4つの列、4つの行、状態からなる行列で、ビュー行列の名前はビュー行列です。 VIEW_MATRIX です。 ここに、私が右側に書いているのはコメントです。 コードのどこにでも書くことができます。 もし、誰かや将来の自分のためにコメントを残したいなら、3つ目のマトリックスが必要です。 もう一つの行列は、ラムという名前ですが、投影行列のタイプです、ご明察。 状態の投影マトリックスです。 つまり、もう一つのコメント投影行列は完璧です。 他のパラメータ、例えば位置や色については、これらの行列を特定のプログラムで使用する必要があります。 だから、再び、我々は

<bind param=“model_matrix” program=“vp” />

を書く必要があります。

30:04 And the same for the other two matrices. So here a base the same line and change the name of the variable. So from model to view matrix, and then here to projection matrix. Now this way, we asked to the shader to retrieve a val model matrix, the view matrix and the projection matrix. So all the transformation matrices we need to start from points belonging to model space, and two ends up with points belonging to screen space. Now, look at this here for color and position we use this structure so, use the word in referring to the fact that is something coming in from outside, we should do something similar but this time for mattresses we should not use the word in, but instead the word uniform. So, why the word uniform? This is something that comes in the vertex shader, right. But it is somehow different because this matrix is always the same for each vertex, it does never change. So, for this reason, this is called uniform because it stays uniform for all the vertices, it is something different from for example, the position of each vertex or the color of each vertex. So uniform followed by the kind of variable we want to input that is a metaphor, and then the name. So, let’s start with the first one model matrix, then we need the view matrix and then the projection matrix. Okay, so this way we have all two matrices to transform our coordinates from local space. So, from model space to screen space. Now, how can we apply those, let’s go down here, where we have our outlets. So, our GL position, let’s get rid of all this. And let’s change the definition of this variable, we know that we should start from our positions, right, that are currently stored in a variable called position. But before sending them out, we need to apply some transformations. So how do we transform using math, this positions face coordinates in something else, we need to multiply the matrix by the position. So let’s start moving from model space to workspace, we can then use the model matrix times for position. So now our our positions are transformed in workspace. Now we want to transform them again, so that they are appear as seen from the camera point of view. So we should use now the view matrix that multiplies the rest. And then we need to take into account the projection. So the perspective and to do so we need to use the projection matrix times for view matrix times the motto matrix times the position. So these are the three matrices we need to multiply in order to get to screen space positions. But there’s something else we are missing. Now, these positions are a factory, right? They are expressed by x, y and Zed components, right 3d coordinates, but we are missing something to make this transformation. Right? We are missing a fourth coordinate, this is something weird. I mean, we are trying to create some shapes that should appear as inside a 3d word.

そして、他の2つの行列も同じです。 ここで同じ行をベースにして、変数名を変更します。 つまり、モデルからビューマトリックスに、そしてここでは投影マトリックスに変更します。 このようにして、シェーダにモデル行列、ビュー行列、投影行列を取得するよう依頼しました。 つまり、すべての変換行列は、モデル空間に属する点から始まり、2つはスクリーン空間に属する点で終わる必要があります。

さて、色と位置については、このような構造を使っています。 外から入ってくるものについては、inという単語を使います。 同じようなことをしますが、今度は mat4 については、in という単語を使わず、uniform という単語を使います。 では、なぜ uniform という単語を使うのでしょうか？これはバーテックスシェーダーに含まれるものですね。 しかし、この行列は各頂点に対して常に同じであり、決して変化しないので、どこか違うのです。 このため、すべての頂点に対して一様であることから一様と呼ばれ、例えば各頂点の位置や各頂点の色とは異なるものなのです。 ですから、uniform の後に、入力したい変数の種類、つまりメタファー、そして名前が続きます。

それでは、まず最初のモデル行列、次にビュー行列、そして投影行列が必要です。 このようにして、ローカル空間から座標を変換するための2つの行列がすべて揃いました。 つまり、モデル空間からスクリーン空間への変換です。 さて、どのようにそれらを適用するかですが、ここにアウトレットがあります。 つまり、GL の位置ですが、これをすべて取り除きましょう。 この変数の定義を変更しましょう。 現在 position という変数に格納されている位置から始めるべきことは分かっています。 しかし、それらを送り出す前に、いくつかの変換を適用する必要があります。 では、数学を使ってどのように変換するかというと、この位置の face の座標を別のものに変換するために、行列に位置を掛ける必要があるのです。 そこで、モデル空間からワークスペースに移動し、モデル行列を位置のために使用することができます。 これで、私たちの位置はワークスペース上で変換されました。 ここで、カメラの視点から見たように見えるように、再度変換したいと思います。 そこで、残りの部分を乗算したビュー行列を使用する必要があります。 そして、投影を考慮する必要があります。 そのためには、投影行列にビュー行列を掛け、モト行列に位置を掛け合わせる必要があります。 つまり、これら3つの行列を掛け合わせることで、スクリーン空間の位置が得られるのです。 しかし、もうひとつ足りないものがあります。 さて、この位置は工場ですよね？x、y、Zed の成分で表現される、正しい3次元座標ですが、この変換をするために何かが足りません。 そうでしょう？第4の座標が足りないのです。 これは何か変ですね。 つまり、私たちは3次元の言葉の中に現れるべき図形を作ろうとしているのです。

33:58 Why the hell should we use a fourth dimension? It doesn’t even make sense for our minds. Well, there is a reason why, if you think about face transformations, there are always made of scaling, rotation and translations. They may be applied using two different mathematical operations scaling is applied using multiplications. You multiply a certain value by a constant, you can increase or decrease its value about rotation, that’s the same, you multiply it by the result of a trigonometric function. But about translation, you cannot use multiplication, you should use a sum because if you need to take a position, let’s say at the origin, you need to move it to the right, you need to sum a certain offset. These operations could be done in 3d, right? You simply have to use multiplications and sum but from a computational point of view, this is a sort of bottleneck so if you want to speed up things, it is better to use a for so called homogeneous coordinates, that are coordinates not made of three elements, but made of four elements. The reason for this is that we consider the shape as fourth dimensional, that 3d appearance of it is just a 3d shadow of a fourth dimensional shape. Okay, it is weird, it is strange, I’ll send you a link in the description to this video. If you want to understand better why the reason why, but what you need to do is actually that you don’t have to think about it, what you need to write is vac for, open this parenthesis and write comma one. So what’s the meaning of this here, we take fifth position variable, that is a victory. But we want to create a VAC four, so a variable containing four elements. This way, we can create a vec4 placing in the first three positions to refer the word play was not intended the variable position, then we filled the last element with the value one, these are called homogeneous coordinates, the coordinates that are if you want a 3d with a fourth element, that is always one. But this is all you need to do really be strange, but it works like this. Oh, after all this, we should manage to pass from, we should be able to pass from model space to screen space through all these transformations, then we assign these positions to the built in variable named position. Okay, are you still with me? It was stressful, I know. But all done. And let’s move to the next step. So now the vertex shader did its job, right. But we want to save this points. And we want to color those on screen. So how can we do that we should pass something from the vertex shader to the to the sorry, to the fragment shader. This is something that happens in an implicit way. So this variable GL position is always best from the vertex shader to what follows. So automatically, we pass the face coordinates to the fragment shader. So let’s go down here. These, as we said before, it’s our fragment program. Now we know that everything that really matters is inside this function called main. Here we are doing something simple, we are designing that from here comes out something that is a variable called color. And here we can assign a value to this variable. Now, let’s comment out this line. We talk. We’ll talk later, what is this gteen dot something and Let’s now create a custom color. So how can we create a color, we can use the same technique we used here. So we know that colors are represented by four components, so we are expecting to have a VAC four. So to create a VAC four, we need to write something inside this parenthesis. Now we can express the value of the of the four components of this color. So if you want to call this points red, let’s say we can place here, one for the first component, followed by zero, then zero than one, we don’t want the points to be transparent. So completely opaque the alpha channel is now 1/5 way we defined the color of our points. Now to see if everything works, what you need to do is to save so command S or Ctrl S, go out here, send the points, send the coordinates again and give a look here, okay, I can see something there very small. Let’s try to increase the number of points. Let’s go for 1000.

なぜ4次元を使わなければならないのか？私たちの頭脳にとっても意味がない。 さて、face の変形を考えると、必ず拡大縮小、回転、平行移動がなされているのには理由がある。 これらは2つの異なる数学的操作で適用されることがあります。 スケーリングは乗算で適用されます。 ある値に定数を掛けると、その値を増減させることができます。 回転も同じで、三角関数の結果を掛けます。 なぜなら、ある位置、たとえば原点で、それを右に移動する必要がある場合、あるオフセットを合計する必要があるからです。 これらの操作は3D でできますよね？乗算と和算を使えばいいだけですが、計算の観点からはこれがある種のボトルネックになるので、高速化したいのであれば、いわゆる同次座標、つまり3要素からなる座標ではなく、4要素からなる座標を使った方がいいのです。 これは、形状を4次元と見なすためで、3次元に見えるのは4次元の形状の3次元の影に過ぎないのです。 なるほど、不思議ですね、不思議ですね、このビデオの説明文にリンクを貼って送りますね。 もしあなたが、その理由をもっと理解したいのであれば、しかし、あなたがすべきことは、実は考える必要はないのです、あなたが書くべきことは、 vec4(position, 1.) を書くことです。 では、ここでどういうことかというと、5番目の位置の変数を取る、これは勝利なんです。 しかし、私たちは vec4 を作りたいので、4つの要素を含む変数を作りたいのです。 このように、我々は最初の3つの位置に配置するための VAC を作成することができます言葉遊びは、変数の位置を意図していなかった参照し、我々は値1で最後の要素を埋め、これらは均質な座標と呼ばれ、あなたが4番目の要素で3D をしたい場合である座標、それは常に1である。 しかし、これはあなたが本当に奇妙なことをする必要があるすべてですが、それはこのように動作します。 これらの変換を経て、モデル空間からスクリーン空間へと移動することができます。 そして、これらの位置を position という内蔵変数に代入します。 さて、まだ付き合ってくれますか？ストレスフルだったでしょう？でも、すべて完了しました。 そして次のステップに進みましょう。 これで頂点シェーダが仕事をしたことになりますね。 しかし、このポイントを保存したいのです。 そして、それを画面上で色付けしたいのです。 そのためには、頂点シェーダからフラグメントシェーダへ何かを渡さなければなりません。 これは暗黙のうちに行われることです。 つまり、この可変の GL 位置は、頂点シェーダーから後続のものに常に最適なのです。 ですから、自動的に、face 座標をフラグメントシェーダーに渡します。 では、ここに降りてみましょう。 先程も言ったように、これはフラグメントプログラムです。 本当に重要なことはすべて、この main という関数の中にあることはおわかりでしょう。 ここでは簡単なことをやっています。 ここから color という変数が出てくるように設計しています。 そして、この変数に値を代入することができます。 さて、この行をコメントアウトしてみましょう。 私たちは話をします。 この gteen dot 何とかというのは何なのか、後で話しましょう。 さて、カスタムカラーを作りましょう。 では、どうやって色を作るかというと、ここで使ったのと同じテクニックを使うことができます。 色は4つの成分で表されることが分かっているので、vec4を期待するわけです。 ですから、vec4を作るには、この括弧の中に何かを書く必要があります。 これで、この色を構成する4つの成分の値を表現することができます。 つまり、この点を赤と呼びたい場合、ここに置くことができます。 最初のコンポーネントは1、次に0、そして1より0ですが、この点を透明にしたくありません。 そのため、アルファチャンネルは完全に不透明となり、点の色を定義した方法の1/5となります。 さて、すべてがうまくいくかどうかを確認するには、保存する必要があります。 コマンド S または Ctrl S で、ここに出て、ポイントを送信し、もう一度座標を送信して、ここを見てみてください、OK、そこにとても小さなものが見えるでしょう。 ポイント数を増やしてみましょう。 1000点にしてみましょう。

38:54 Okay, here they are, so we get no error. We have something displayed on screen, the right color, the color we decided, let’s try to make them green, red channel equals zero green channel equals one and then zero for the blue one for the Alpha. Save again and now they are green. Perfect. Let’s set here at floating one. So we can always see face window. Now if you use something like jit.gl handle for example, you should be able to move manually this mesh Okay, so things are working exactly as usual. Right? But this time we wrote our shader and that’s something great. Okay, let’s go back to the shader and let’s see something else. First of all, let’s say I wrote something wrong. First for example, here some thing wrong. Okay, save. Okay, I know that I wrote something wrong because for Max console tells that to me, I recognize profile specifier something wrong. Okay, so these way you can debug everything you write. So if something is not working, Max will always tell you that. Okay, so let’s go up here. And let’s think about all these transformations. Now passing from the model space to the screen space is something very, very common. So he usually you quite always concatenate these three matrices. So the model matrix, the view matrix, and the projection matrix. So for this specific reason, there is a matrix that already combines everything packs together, everything. This one is called model view projection matrix. So instead of writing the three separate matrices, you can directly write only this one model view projection matrix, and use that instead of face three separate matrices. So model view projection matrix face should lead to the same result. Let’s try to save. Okay, that’s exactly the same, right? Let’s claim the max window, this error was from before. Okay, that’s exactly the same thing. So I explained in detail all this passages, because there are many different situations in which you need to apply certain operations in a different space. So not in model space, not in screen space. But for example, in Word space, or view space. So you must know how to pass exactly from one space to the other. And this is the correct way. But if you need directly to jump from the model space to the screen space, you can use the model view projection matrix. So in this context, we can get rid of this three separate matrices. So we don’t don’t need them anymore here. And we then don’t need to assign those to the vertex program. As well as up here, we don’t need to expect these matrices to come in the vertex shader. The only thing we need is this model view projection matrix that was already there by default. So I always hate to face name model view projection matrix. I know that that’s self explanatory, but it is confusing to say. So what I usually do is to change its name from model view projection matrix to MVP model view projection. So we need to change it here as well. Then here, and then here, where we use it, we should right MVP times the homogeneous coordinates, or something important, I forgot to mention. Look at this matrices, they are multiplied in this precise order. So from right to left model, then view then projection, you can not screw up this order, because you’re not multiplying a scalar values or vectors, you’re multiplying matrices. So the order matters. Always multiply those in this order, if you ever need to. Okay, so let’s go back to the model view, projection matrix. Save. And everything seems right.

さて、これでエラーは出なくなりました。 画面上に何かが表示されています。 正しい色、決めた色、緑にしてみましょう。 赤チャンネルは0に等しく、緑チャンネルは1に等しく、そして青は0、アルファは1です。 もう一度保存すると、今度は緑になります。 完璧です。 ここでフローティング1に設定しましょう。 これで、常にフェイス・ウィンドウを見ることができます。 これで、たとえば jit.gl ハンドルのようなものを使えば、このメッシュを手動で動かすことができるようになります。 そうでしょう？でも今回はシェーダを書いたので、これは素晴らしいことです。 さて、シェーダーに戻り、他のものを見てみましょう。 まず最初に、私が何か間違ったことを書いたとしましょう。 まず最初に、例えばここに何か間違ったことを書いたとします。 OK、保存してください。 というのも、Max のコンソールが、プロファイル指定子が何か間違っていると教えてくれるからです。 このようにして、書いたものすべてをデバッグすることができるわけです。 だから、もし何かがうまくいっていないなら、Max はいつもそれを教えてくれる。

さて、ではここに上がってみましょう。 そして、これらのすべての変換について考えてみましょう。 さて、モデル空間からスクリーン空間への受け渡しは、とてもとても一般的なものです。 そのため、通常はこれら3つの行列を連結して使用します。 つまり，モデル行列，ビュー行列，そして投影行列です．この特別な理由のために、すでにすべてのパックを一緒に結合するマトリックスがあるのです。 これは MODELVIEW_PROJECTION_MATRIX と呼ばれるものです。 ですから、3つの別々の行列を書く代わりに、この1つのモデルビュー投影行列だけを直接書いて、3つの別々の行列に直面する代わりにそれを使うことができます。 つまり、モデルビュー投影行列の face は同じ結果になるはずです。 試しに保存してみましょう。 よし、まったく同じだろう？このエラーは以前のものです。 OK、まったく同じです。 というのも、ある操作を別の空間で行う必要がある場合、さまざまな状況が考えられるからです。 つまり、モデル空間でもなく、スクリーン空間でもない。 例えば、ワードスペースやビュースペースのようなものです。 ですから、ある空間から別の空間へ正確に移動する方法を知っておく必要があります。 そしてこれが正しい方法です。 しかし、モデル空間からスクリーン空間へ直接ジャンプする必要がある場合は、モデルビューの投影行列を使用することができます。 つまり、この文脈では、この3つの別々の行列を取り除くことができるのです。 つまり、ここではもう必要ないのです。 そして、それらを頂点プログラムに割り当てる必要もありません。 この上と同様に、これらの行列が頂点シェーダに来ることを期待する必要もありません。 必要なのはこのモデルビュープロジェクションマトリックスだけで、これはデフォルトですでに存在していました。 ですから、私はいつもモデルビュープロジェクションマトリックスという名前に直面するのが嫌なのです。 それは自明のことなのですが、言い方が紛らわしいのです。 そこで私がいつもやっているのは、モデルビュープロジェクションマトリックスから MVP モデルビュープロジェクションに名前を変更することです。 ですから、ここも変える必要があります。 それから、ここと、ここで使うところは、MVP を均質座標の倍、とか大事なことを言い忘れましたので、右にしてください。 この行列を見てください、この正確な順序で掛け合わされています。 右から左へモデル、ビュー、投影、この順番を間違えてはいけません。 スカラー値やベクターを掛けているのではなく、行列を掛けているのです。 つまり、順番が重要なのです。 もし必要なら、常にこの順序で掛け合わせましょう。 それでは、モデルビューに戻り、投影行列を作成しましょう。 保存します。 すべてうまくいったようですね。

43:48 Now before moving on a couple of simple things. Here, there are two other lines we didn’t commence. The first one is jeeter shader name. Now, this is something that really doesn’t matter. But, you know, if you open up an old file a, you immediately want to read the name of this shader, you can write the name up here. So my first shader, this is something that doesn’t affect how the program is compiled. But that’s just for you for the user, as well as these other second line here between these two description tags. You can write what this shader does. This is the gray test shader of old time. Okay, so you can remember that this is the greatest shader of all time. Let’s say I am tired of seeing green points. I want to color each points differently. So how can we do that? Let’s think about how we can do that way doubt writing our own custom shader. What we need to do is to go out here, check for the corresponding color inlet, the fourth one, and we provide here a color so let’s go for something random. We love randomness. So we provide this color means that writes inlets. So like this, now we cannot see anything any change. Because we are not taking into account this variable color in order to see our points color differently. Let’s go back to the shader. Now up here we are doing the right thing. So we are expecting to receive some colors from outside. So in correspondence of the fourth inland, the one responsible for the color, so we can, so we asked for the parameter called color, that is a four component vector, and we can get it from the fourth outlet. So the outlet sorry from the fourth inlet, so the inletting which are coming in the colors, then we want to use this color in the vertex program. And then here, we create these sort of inlets that can host a vec4 variable. Now, how can we apply this color? We know that everything related to coloring the image must be done in the fragment program. Okay, so we need somehow to take this color in the vertex program and pass it to the vertex program. How can we do that? Since color is a variable that may or may not exist, it doesn’t work like this position. This is a built in variable that always exists. So we are always passing positions from the vertex shader to the fragment shader or to the geometry shader. If it exists. This time we are passing something else something related to color, and we don’t always need to do that. But since we want to do that, we need to explicitly express that a variable must be passed from the vertex shader to the geometry shader. So the way to do that is to use fees other piece of code. This part is called out structure. As you can see, we have this word out, followed by this magic word that is GTE underscore per vertex, then we have this reference to the variable color. And then we close the structure with a face other magical word GL underscore out. You don’t have to worry about remembering all this stuff, you can take it from the default shader, and it is already there for you. But what we know is that we need to pass a color variable from the vertex shader to the geometry shader. So this is where we should do that. So here we create a variable, an output variable to send out from the vertex shader. Let’s use another name, because I don’t want to create confusion with this other variable color. Let’s call this one out. Color. Okay, so I’m expecting to send out a variable named out color. Now how can we do that? Let’s go down here in the main program. Here we have our our variable color, that is the color coming in from the main patch. But since we want to send it out from the vertex shader, we need to use this structure, we need to call gtes underscore out, dot the name of the variable we want to pass. So out color, okay, so every time you have something starting with G to underscore out, dot, this means that it refers to the variables we want to pass from the vertex shader to the following stage of our shader.

さて、次に進む前に簡単なことを2つほど。 ここでは、開始しなかった他の2つの行があります。 1つ目は jittershader name です。 さて、これは本当に重要なことではありません。 でも、古いファイルを開いてすぐにこのシェーダの名前を読みたくなったら、ここに名前を書いておけばいいんです。 ですから、私の最初のシェーダーは、これはプログラムのコンパイル方法には影響しないものです。 しかし、これはユーザーであるあなたのためだけのものです。 また、この2つの description タグの間にある2行目も同様です。 このシェーダーが何をするのか書くことができます。 これは昔のグレーテストシェーダーです。 なるほど、これは史上最高のシェーダーだと覚えておけばいいんですね。

例えば、緑の点は見飽きたとしましょう。 各ポイントに異なる色をつけたい。 では、どうすればいいのでしょうか？自作のカスタムシェーダを書くことを疑って、その方法を考えてみましょう。 必要なのは、ここに行って、対応する色のインレットをチェックすること、4番目のインレット、そしてここに色を提供します。 私たちはランダムなものが大好きです。 この色は、インレットを書き込むという意味です。 このように、何の変化も見られないようにします。 なぜなら、ポイントの色を変えて見るために、この可変色を考慮に入れていないからです。

シェーダーに戻りましょう。 ここでは、正しいことを行っています。 つまり、外から何らかの色を受け取ることを期待しているのです。 そこで、4番目の内陸に対応する、色を担当するもの、つまり、4成分のベクトルである color というパラメータを要求し、4番目の出口からそれを得ることができるわけです。 つまり、4番目のインレットから申し訳ないのですが、カラーで来るインレットは、頂点プログラムでこのカラーを使いたいのです。 そして、このようなインレットを作成して、可変の VAC をホストできるようにします。 さて、この色はどのように適用すればいいのでしょうか？画像の色付けに関わることは、すべてフラグメントプログラムで行わなければならないことは分かっています。 では、この色を頂点プログラムで受け取り、頂点プログラムに渡す必要があります。 どうすればいいのでしょう？色は存在するかしないかわからない変数なので、この位置のようにはいきません。 これは常に存在するビルトイン変数です。 ですから、頂点シェーダからフラグメントシェーダ、あるいはジオメトリシェーダには常に位置を渡しているのです。 もしそれが存在すれば。 今回は色に関連する別の何かを渡していますが、これは常に必要なわけではありません。 しかし、そうしたいので、変数を頂点シェーダーからジオメトリーシェーダーに渡さなければならないことを明示的に表現する必要があります。 そのためには、他のコード片を使用する必要があります。 この部分をアウトストラクチャと呼びます。 ご覧のように、この out という単語と、頂点ごとに jit_PerVertext マジックワード、そして変数 color への参照という構成になっています。 そして、もうひとつの魔法の言葉 jit_out で構造を閉じています。 このようなものをすべて覚える心配はありません。 デフォルトのシェーダーから取得すれば、すでにそこにあるものです。 しかし、私たちが知っているのは、頂点シェーダからジオメトリシェーダにカラー変数を渡す必要があることです。 そこで、ここでそれを行う必要があります。 ここでは変数を作成し、頂点シェーダから送信する出力変数を作成します。 この他の変数 color と混同しないように、別の名前を使いましょう。 これを呼び出すことにしましょう。 色です。 さて、outColor という名前の変数を送り出すことを期待しているわけですが。 さて、どうすればいいのでしょう？メインプログラムのここに行ってみましょう。 ここには変数 color があり、これはメインパッチから入ってくる色です。 しかし、頂点シェーダからそれを送りたいので、この構造を使う必要があります。 jit_out を呼び出し、渡したい変数の名前をドットで囲みます。 つまり、outColor, okay, だから、jit_out. になるたびに、これは頂点シェーダから次の段階のシェーダに渡したい変数を参照していることを意味します。

48:47 For example, if we had another variable, like I don’t know, factory called pizza, we may have something like jit_out, dot pizza equals whatever you want. So back three made up 01 0.5. Okay, so for every output variable, we will have this starting word, then dot and then the name of the variable take care about the amount of elements inside this variable. As you can see, here, we are passing a color. So it contains four elements if he’s back four, but since we’re sending out here a victory variable, we must specify that in this output structure, so here we need to write back three, but we don’t need to send out pizza for today so we can get rid of it. And let’s stick with our color. Okay, so now we know that we are passing some positions in screen space, as well as some colors. But how can we take those from the fragment shader? Where you go down here, and here you can see that we have something complementor we have these in Good structure. So here we express exactly the same variables we wrote up here. So if you want to take this very same variable, you need to write here, out color. So we retrieve this way, the variable from the vertex shader, so we pass it. And here we take it. Now, if you want to use it, instead of writing this back for manually, let’s go back to what was there by default, give a look at this. If you want to use something coming in from this Instructure, you need to write JIT underscore in dot, and then the name of the variable that is out color that gets assigned to the output variable of our fragment shader. So to sum up briefly, what is the path that our colors follow? First of all, we asked to get them from the main patch. So we asked for the state color, we put that value in a parameter called color that is a VAC four, then we decide to use that parameter in the vertex program. And here we create this sort of inlet to receive it, then we want to pass this variable color to the fragment shader because we want to color the shape. And that is, and this is something that we do in the fragment shader. So we take it, and we assign it to an output variable, first one, G dot, dot out color that we must express here, and we can get it from the instructor of the fragment shader, and then we can use it to color our dots. So let’s save and let’s check if it works. Okay, now the points are color differently. Let’s create some lines instead of points, maybe, hopefully, you can see that better. So what does it draw modes lines, okay, now our lines are colored. Gray. Great. Now let’s keep this lines because I want to show you something else related to colors. Let’s go back to the shader. And let’s check these last word we left out a face word is flats. So we you can see that we have these word flats, before the name of the variable in the out structure of the vertex program, as well as in the instructor of the fragment program. So what is flat flat means that I’m passing in these values to the fragment shader. But I’m not expecting the fragment shader to interpolate between these values. Let’s make an example. Here we are taking some positions and we are designing to draw these positions as connected through line segments. Now we assign a color not to each line but to each vertex. So maybe we may want to gradually color our lines so that they pass from the color of one vertex to the color of the other one, the other one constituting the line. So this way, this is not happening, because we are not expecting the fragment shader to interpolate this value. But instead of using flat, we may use smoooth. So we need to specify it here in the out structure, as well as here in the instructor smoooth. Let’s save and let’s see what we get. Okay, we cannot see that very well with lines. Let’s try with something else. Let’s go with triangles.

例えば、ピザという工場のような変数があったとして、jit_out.pizza equals whatever you want というようなことができる。 だから、vec3 は 0., 1, 0.5 を構成しています。 では、すべての出力変数について、この開始単語、ドット、そして変数名が、この変数の中の要素の量に気を配ることになります。 見てわかるように、ここでは色を渡しています。 しかし、ここでは勝利の変数を送信しているので、この出力構造でそれを指定する必要があります。 そして、色にこだわってみましょう。

さて、これで画面空間での位置と色を渡すことがわかりました。 しかし、フラグメントシェーダーからそれらをどのように取得できるでしょうか？ここで下に降りていくと、補完するものがあるのがわかりますが、これらは Good 構造になっています。 つまり、ここで書いたのとまったく同じ変数を表現しているのです。 ですから、これとまったく同じ変数を取り出したい場合は、ここに out color と書く必要があります。 このように、頂点シェーダーから変数を取り出して、それを渡すわけです。 そして、ここでそれを受け取ります。

さて、これを使いたいのであれば、手動でこれを書き戻す代わりに、デフォルトでそこにあったものに戻って、これを見てみてください。 この Instructure から入ってくるものを使いたい場合は、ドットで JIT アンダースコアを書き、次に、フラグメントシェーダーの出力変数に割り当てられる outColor の変数名を書く必要があります。

では、簡単にまとめると、私たちの色はどのような経路をたどっているのでしょうか？まず第一に、私たちはメインパッチからそれらを取得するよう依頼しました。 つまり、状態の色を要求し、その値を color というパラメータ（vec4）に入れ、次にそのパラメータを頂点プログラムで使用することにしました。 そして、このパラメータを受け取るためにこのようなインレットを作成し、この変数 color をフラグメントシェーダに渡すことにします。 これは、フラグメントシェーダで行うことです。 これを出力変数に代入します。 まず、G ドット、ドットアウトの色をここで表現する必要がありますが、フラグメントシェーダのインストラクターからこれを取得し、それを使ってドットに色をつけることができます。 では、保存して、うまくいくかどうか確認してみましょう。 さて、これで点の色が変わりました。 点の代わりに線を作ってみましょう。 たぶん、うまくいけば、もっとよく見えると思います。 このモードではどのような線が描かれるのでしょうか。 さて、今度は線に色がつきました。 素晴らしい。


さて、この線はそのままにしておきましょう。 色に関連する他のものをお見せしたいと思います。 シェーダーに戻りましょう。 そして、私たちが最後に言い残した、face の単語「flat」を確認してみましょう。 頂点プログラムのアウト構造にも、フラグメントプログラムのインストラクターにも、変数名の前に flat という単語があるのがわかると思います。 つまり、flat とは、これらの値をフラグメントシェーダーに渡すことを意味します。 しかし、フラグメントシェーダがこれらの値の間を補間することを期待しているわけではありません。

例を見てみましょう。 ここでは、いくつかの位置を取り、これらの位置が線分によって接続されるように描画するように設計しています。 ここで、各線分ではなく、各頂点に色を割り当てています。 そこで、線に徐々に色をつけていき、ある頂点の色から他の頂点の色に変わるようにしたいと思うかもしれません（他の頂点の色が線を構成している）。 この方法では、フラグメントシェーダがこの値を補間することを期待していないため、このようなことは起こりません。 しかし、flat を使う代わりに、smoooth を使うこともできます。 そのため、out の構成で指定するとともに、smoooth のインストラクターで指定する必要があります。 保存して、何が得られるか見てみましょう。 さて、線ではよく見えませんね。 他のもので試してみましょう。 三角形でやってみましょう。


53:49 Let’s reduce the amount of vertices let’s go down to 10. Let’s send a bank again. Okay, give a look at this shape. Here we have some gradients right. So the color is gradually changing from vertex to vertex. Each vertex contains its own specific color. But in the fragment shader, where we are coloring our shape, we are is explicitly asking for an interpolation using these word smooth. Let’s go back to flat. So here are right flats, and here flat as well. Save emphasis the difference. Now the colors are no longer interpolated, so we don’t have these gradients. This is something that you cannot do in Mac’s without writing your own shader. So this is something very simple but as you can see, even a simple gradient of color may require a custom shader. So let’s go back through smooth

54:57 Okay, let’s do something fun. That’s hopefully can give you a better idea of why it makes sense to pass a variable that is used in the fragment shader through the vertex shader. Let’s draw again some lines. And let’s throw many more. So let’s go back to 1000. Okay, so let’s send it back again. And now let’s reset this one. Now, all these lines are, are not centered because they are drawn between zero and one. So to center those, let’s use G Gen. To make a simple calculation, like minus 0.5. So this way, we, we end up with coordinates ranging from minus 0.5 to plus 0.5. Let’s send the bag again. Okay, now, the shape is centered. Okay, what we want to do now is to make the vertices at close to the center darker than the vertices that are far from the center. So in a way, we put in relation, the color of the lines with their relative position. So let’s go to the shader. And this is something that we can do here in the vertex shader. So despite we are coloring the shape in the fragment in the fragment program, we can affect this variable color here in the vertex shader. So how can we do that? Well, we said that we need to know the distance of a certain points to the center, right. So what we can do is to use a variable. So let’s see how to create a variable, you can create a variable, simply specifying two things. The first one is the kind of variable you want to create, we need to compute a distance. So distance is a single value scalar value that can be contained in a variable that is of the kinds float. So these one contains values that are float to 32 bits floating point values, then after float, we need to set here a name for this variable. So this one will be called distance. And then we can assign of a value to this variable. Now how can we know the distance of a certain points from the origin, we know that the origin is located exactly in position 000. So what we need to do is to simply compute the length of the vector position this way is like you know the Pythagoras theorem, only in three dimensions, we can know exactly the distance of each point to the center. So to do that, we have a built in function that is called length length needs something like this needs a parenthesis. And this is something common to all the functions in GLSL, you need to write the name of the function and then open and close the parenthesis and inside here, right? What is the material on which face function will be applied. So in this case, it is position. Okay, so this way, we compute the distance of each point to the center. So I’m expecting this value to be zero exactly at the center and go towards infinity as we move far away from the origin. So what we can do is now take this variable distance and multiply it by the variable color. And then we pass this color from the vertex shader to the fragment shader. Okay, let’s save. Okay, you can see that the lines close to the middle close to the center are now darker. Let’s try something else. Let’s try to increase these value even more. Now we know that the positions are between minus 0.5 and plus 0.5. So the maximum distance will not be very great. Let’s try to increase its multiplying it by a constant like 10. Yeah, 10 may paste too much. Let’s go for two. Okay, okay. Let’s try to change again. This factor. I don’t like it.

さて、面白いことをやってみましょう。 これで、なぜフラグメントシェーダで使われる変数をバーテックスシェーダに渡すことが理にかなっているのか、よりよく理解していただけると思います。 もう一度、線を描いてみましょう。 そして、もっとたくさん投げてみましょう。 では、1000 に戻りましょう。 さて、それではもう一度送ってみましょう。 そして今度はこれをリセットしてみましょう。

さて、これらの線はすべて、0と1の間に描かれているため、中心がありません。 そこで、これらをセンタリングするために、jit.gen を使いましょう。 簡単な計算で、マイナス0.5のように。 そうすると、マイナス0.5からプラス0.5までの座標が出来上がります。 もう一度、バッグを送信してみましょう。 さて、今度はシェイプが中央に配置されました。

さて、ここでやりたいことは、中心に近い頂点を、中心から遠い頂点よりも暗くすることです。 つまり、線の色とその相対的な位置を関連付けるのです。 では、シェーダーに移りましょう。 これは頂点シェーダでできることです。 つまり、フラグメントプログラムでフラグメント内の形状に色を付けているにもかかわらず、頂点シェーダでこの可変カラーに影響を与えることができるのです。 では、どうすればいいのでしょうか？さて、ある点の中心からの距離を知る必要があると言いましたね。 そこでできることは、変数を使うことです。 では、どうやって変数を作るか見てみましょう。 まず1つ目は、作りたい変数の種類です。 ここでは距離を計算する必要があります。 距離は1つのスカラー値で、float のような種類の変数に入れることができます。 そして、float の後に、この変数の名前を設定する必要があります。 これは distance と呼ばれます。 そして、この変数に値を代入することができます。 さて、原点からのある点の距離を知るにはどうしたらよいでしょう。 原点はちょうど000の位置にあることが分かっています。 この方法はピタゴラスの定理と同じで、3次元の場合のみ、各点の中心までの距離を正確に知ることができるのです。 そのために、length length と呼ばれる関数が組み込まれています。 これは GLSL のすべての関数に共通することですが、関数名を書いてから括弧を開いたり閉じたりする必要があり、この中にありますよね？面関数を適用するマテリアルは何ですか？この場合、位置ですね。 なるほど、こうすると各点の中心からの距離が計算されますね。 この値は、ちょうど中心でゼロになり、原点から遠ざかるにつれて無限大になることを期待しています。 そこで、この距離という変数に色という変数を掛け合わせます。 そして、この色をバーテックスシェーダーからフラグメントシェーダーに渡します。 さて、保存しましょう。 さて、中央に近い線がより濃くなったのがわかると思います。 他のことも試してみましょう。 この値をさらに大きくしてみましょう。 ここで、位置はマイナス0.5からプラス0.5の間であることがわかりました。 ですから、最大距離はあまり大きくはならないでしょう。 10のような定数をかけて、その値を大きくしてみましょう。 そうですね、10は貼りすぎかもしれませんね。 2にしよう。 オーケー、オーケー。 もう一度変えてみよう。 この係数。 気に入らんなあ


59:40 Let’s go for four. Yeah, we cannot see that as well as I intended. But you know, something you can do. Could be this thing. Let’s take an object. Let’s take GTE multiplex What it does it interleaves two matrices. So it takes one element from the first matrix and one element from the second and so on. What I want to do is to generate here half the amount of points needed. And then so that you can take the first one from here, and the second one from these invisible metrics, that is by default zero. So it will, so it keeps connecting these coordinates to the center. Let’s try that. Okay. Now you can see that better. Here in the center, we have a black color, because here the distance is zero, therefore, we multiply this color by zero. Instead for all the other points, so points that are far from the center the color is multiplied by a positive value, we can also skip this factor now and we should be able to see the effects even better. Okay, so black in the middle and colored in the rest of the shape. Now I want to do something else.

4でいこう。 ええ、意図したように見ることができません。 でもね、何かできることはないかな。 これかもしれない。 ある物を取り上げてみましょう。 jit.multiplex これは2つのマトリックスをインターリーブする。 最初の行列から1つの要素を取り、2番目の行列から1つの要素を取り…といった具合だ。 ここでやりたいことは、必要な点の数の半分を生成することです。 そして、1つ目の点はここから、2つ目の点はこれらの見えないメトリクスから取ることができるように、デフォルトではゼロになっています。 そうすると、これらの座標を中心に接続し続けることができます。 試してみましょう。 オーケー。 これでもっとよく見えるようになりました。 中心では黒色になっています。 なぜなら、ここでは距離がゼロだからです。 したがって、この色にゼロをかけます。 代わりに、他のすべての点、つまり中心から遠い点には、色に正の値を掛けます。 この要素を今スキップすることもできますし、効果をよりよく見ることができるはずです。 さて、真ん中が黒で、残りのシェイプに色がつきました。


今度は別のことをやってみたいと思います。

1:01:06 Here we are generating some random colors, right? What I want to do now is according to the position of these points, I want to affect just the amount of red color. So we can get rid of this trick to have all the lines pointing to the center. Let’s go back to the original dimension of this matrix. So now we should have again, our messy group of lines. Now, let’s hop into the shader. Let’s say that all the points that are on the right, for example, yeah, should contain less color red, so we need to break down some concepts here. First of all, we know that any color is defined by four components, RGB, and then alpha, what we need to do is to retrieve a single channel from face vac for containing the color variable. And we need to affect just the first element that is for red color. So we need to establish a relation between the position of our points and the color, but not the whole color, like we are doing here. So multiplying everything by constant, but instead, we want to multiply a value just for the first component of this variable color. So let’s see how we can do that. Let’s get rid of this calculation of the distance. We don’t need that anymore. But what we can do is to consider this position. We said before that we want to color the red channel as a function of position on all of our points. And we said before that for the points that are on the right, we want to have, let’s say more reds more red color. So we need to retrieve first of all this, the x component of this position variable and apply it in a way that affects only the red components of our variable color. So let’s see how we can do that. First of all, how to retrieve a single element out of a vector. We can use a variable for example, like floats. So we declare a floating point variable called rightness. Okay, rightness equals the first element of the vector named position. So to retrieve debts, we can write position, dot x phase means that we take the vector position, and we retrieve just the first element. If you need to retrieve the second one you write dot y. If you need to retrieve the third one you write dot Zed, okay, so X, Y and Zed so X, Y and Zed refer to the element to each single elements of a vector 3x, the first y the second set the third. So here we retrieve the not Zed, but x. So the first element of this vector and we assigned it to the variable called rightness. Now given this rightness, we want to affect just the first channel of this variable color. So just the first element of this back for just to see if it works. Let’s try to assign it directly. So to change the color of the whole shape, so rightness, save, and let’s check what we have. Okay, so you can see that here we have x positions that are negative, so everything gets multiplied by a negative value becomes black because we don’t have any color information with negative values. While here here, the points are close to 0.5. So we have half of The intensity of the original color. If you go here, and instead of having something going from minus 0.5 to zero to five, if you multiply this by two, we should have positions going from minus one to one, as well as the colors are now more intense, because they get multiplied by one.

ここで、ランダムな色を生成していますね。 今やりたいことは、これらの点の位置に応じて、赤色の量だけに影響を与えたいのです。 そうすれば、すべての線が中心を向くというトリックから解放されます。 この行列の元の次元に戻りましょう。 これでまた、ごちゃごちゃした線の集まりになるはずです。 さて、シェーダに飛び込んでみましょう。 例えば、右側にあるすべての点で、赤の色を少なくする必要があるとします。 そこで、いくつかの概念を分解する必要があります。 まず、どんな色も4つの要素、RGB、そしてアルファで定義されることが分かっています。 そして、赤色を表す最初の要素にのみ影響を与える必要があります。 つまり、ポイントの位置と色の関係を確立する必要がありますが、ここでやっているように、色全体ではありません。 そのため、すべてを定数倍していますが、その代わりに、この変数 color の最初の要素にだけ値を掛けたいのです。 では、どうすればいいのか見てみましょう。 この距離の計算をなくしてしまいましょう。 それはもう必要ありません。 しかし、できることは、この位置を考慮することです。 先ほど、すべての点における位置の関数として赤チャンネルに色をつけたいと言いました。 そして、右側にあるポイントには、より多くの赤を、より多くの赤色にしたいと言いました。 そこで、まずこの位置変数の x 成分を取得し、変数 color の赤成分にのみ影響を与える方法で適用する必要があります。 では、どのようにそれを行うか見てみましょう。 まず、ベクトルから1つの要素を取り出す方法です。 例えば floats のような変数を使うことができます。 そこで、rightness という浮動小数点数の変数を宣言します。 さて、rightness は position というベクトルの最初の要素に等しい。 つまり、position, dot x phase と書くと、ベクトルの位置を取得して、最初の要素だけを取得することができます。 2番目のものを取得する必要がある場合はドット y を書き、3番目のものを取得する必要がある場合はドット Zed を書く、大丈夫、だから X、Y、Zed は、X、Y、Zed はベクトル3x のそれぞれの単一の要素に要素を参照して、最初の y は2番目のセット3番目。 ここでは Zed ではなく x を取り出します。 つまりこのベクトルの最初の要素を取り出し、rightness という変数に代入しています。 さて、この rightness が与えられたら、この変数 color の最初のチャンネルにだけ影響を与えたいと思います。 そのため、このベクトルの最初の要素だけを使って、それがうまくいくかどうかを確認します。 直接代入してみましょう。 形状全体の色を変更するために、rightness, save, and let’s check what we have. 負の値を持つ色情報がないため、負の値を掛け合わせたものはすべて黒になります。 一方、ここではポイントが0.5に近くなっています。 つまり、元の色の半分の濃さになっています。 ここに行ってみると マイナス0.5から0～5までがあるのではなく これを2倍すると マイナス1から1までがあるはずです 色も1倍されるので より強くなっていますね。

Okay, so if this is our situation, now, I want to affect not the whole color, but just the Reds components. So let’s go back to the shader. And let’s see how to do that we already did something similar. Here, we have a VAC four that is made of another vector three, followed by a single element. So we have three elements, plus one, together, they make a vector for, we should do something similar, but with color this time, so get rid of this previous declaration of the variable color. And let’s create a fac four. And let’s think about what should be contained in here. Here, we know that we need to affect the red channel using this variable rightness, but then we will have the green to blue and the alpha channels that will be exactly the same of the original. So we now know how to retrieve something out vector. In this case, we have the variable color that is made of four components. So how can we refer to the first the second, the third and the fourth element of this vector, we can use the same exact syntax. So color X would be the red plane, if you want the red channel, color white, the green color Zed the blue and then for the fourth plane, we use W. So color dot w will be the alpha channel. Now, of course, x y Zed and W are letters that are usually referred to positions right. So for this specific reason, we can also write a phase letters differently, we can directly write dots are dot g, dots B and dots A, that’s exactly the same thing. So writing X, Y, Zed W, or RGB A is exactly the same thing. It’s just clear what you are retrieving from the original vector. So we said that we need to take the first element, right, so color dots are these will take only the red plane, and then we can multiply it by rightness. Okay. But this is not the whole story. Because this way, we define just one element of the veck for we want to create, because now we need to write comma, and write the rest of the color. So the G, the B NDA, how can we do that? We can write color dot G, B, A, this means that here, we retrieve from original vac for we retrieve a tree component vector made of the G channel, the B channel and the alpha channel. Okay, so this index dot O, R, G, B, A, etc, can be used this way as well. So if you concatenate G, B, A, you retrieve the second, the third and the fourth elements of this vector. So this way we end up with a four component vector, the first element if is this one, and then these are the last three elements. So let’s see what we get. Now. Let’s save. Okay, you can see that here, let me reset the position. Okay, here on the right, we have something red ish, right? While here on the left, we cannot see anything, right because it gets multiplied by zero in the middle, or even negative values on the left. So this way, we affected only one channel. So this was just a stupid example to show you how to use this syntax and how to build vectors. So to sum up, and to say things more properly, every time you need to create a vector that can be defined face way. Let’s comment out this line so we can read right in front of it.

さて、このような状況であれば、今度は色全体ではなく、Red の成分だけに影響を与えたいと思います。 そこで、シェーダーに戻りましょう。 そして、私たちはすでに似たようなことをやっているので、その方法を見てみましょう。 ここでは、別のベクトル3からなる vec4と、それに続く1つの要素を持っています。 同じようなことを、今度は色を使ってやってみましょう。 そこで、変数 color の以前の宣言を削除します。 そして、vec4 を作りましょう。 そして、ここに何が含まれるべきかを考えてみましょう。 ここでは、この変数 rightness を使って赤チャンネルに影響を与える必要があることは分かっていますが、緑から青、そしてアルファチャンネルはオリジナルと全く同じになります。 これで、ベクトルから何かを取り出す方法がわかりました。 この場合、4つの成分からなる変数 color があります。 このベクトルの最初の要素、2番目の要素、3番目の要素、4番目の要素を参照するには、まったく同じ構文を使用します。 つまり、カラーX は赤のプレーン、赤のチャンネルが必要ならカラーホワイト、緑のカラーZed は青、そして4番目のプレーンには W を使用します。 さて、もちろん、x y Zed と W は、通常、右の位置を指す文字です。 そのため、位相の文字を変えて書くこともできます。 ドットはドット g、ドット B、ドット A と直接書くことができますが、これはまったく同じことです。 だから、X、Y、ゼット W、RGB A と書いてもまったく同じことなんです。 元のベクトルから何を取り出すかが明確なだけです。 つまり、最初の要素を取る必要があると言いましたね。 カラードットは、これらは赤い平面だけを取って、それに正しさを掛ければいいわけです。 しかし、これがすべてではありません。 というのも、この方法では、作りたいベクターの要素を1つだけ定義しています。 では、G と B の NDA はどうすればいいのでしょうか？これは、G チャンネル、B チャンネル、アルファチャンネルからなる木成分ベクトルを元の Vac から取得することを意味します。 さて、このインデックスドット O、R、G、B、A などは、このように使うこともできます。 つまり、G、B、A を連結すると、このベクトルの2番目、3番目、4番目の要素が取り出せるわけです。 つまり、この方法では4成分のベクトルができあがり、最初の要素がこれであれば、これが最後の3要素になります。 では、どんなものができるか見てみましょう。 さて。 保存しましょう。 OK、ここで見ることができますね、位置をリセットしてみましょう。 右側には赤いものがありますね？一方、左側は何も見えませんね。 中央ではゼロが掛けられ、左側では負の値も掛けられるからです。 このように、1つのチャンネルにしか影響を与えなかったのです。


これは、この構文の使い方とベクトルの作り方を紹介するための、くだらない例でしたね。 つまり、要約すると、もっときちんと言うと、フェース・ウェイで定義できるベクトルを作る必要があるたびに この行をコメントアウトして、すぐ前を読めるようにしましょう。

1:09:35 Let’s say we want to color these lines manually, we can write back for 1111. So one for the red one for the blue one for the green, sorry, green and blue and one for the alpha. So this way the lines should be white, save, and let’s check okay, but to create a vector You can also implicitly encapsulate another vector, like we did here, you know, we took a factory, and we just added the last element that was missing. Here, we did the same, we take the first element of this vector color. So color dot are we affected by multiplying it by devalue Rachna, ripeness, and then we concatenate we append the last three planes. So G BA, there is also another way we can define these variables. So maybe this line is a bit complex rates. So instead of using this, we can also define the content of each elements of the vector individually. For example, we can also write Jeet out dot out color dot r equals color, R, times ripeness. And then jet underscore out dot out color g equals color dot g, let’s call this line, this one becomes B. And this one becomes a. So we can define this variable, layer by layer. So elements by element, their results should be the same. Let’s try to save. Okay, and here we have the same exact result. This may be useful. If you want to be sure about what you’re writing, you don’t want to write something very, very long. So a string never ending or something like that. And here as well, you can also pack these three planes together. So you can write G B A equals color dot GBA, and the result is the same. So through X, Y, Zed, W, or RGB A, you can retrieve single elements of a certain vector. And you can write single elements of a certain vector, like we did right here. Let’s now try to do something different. I don’t want to create random colors anymore. And I don’t want to create some lines. So what I want to do instead is to take less elements, so like, two by two matrix, and I want to create a shape made of two triangles. Okay, like this. So we are still interpolating between these colors. Now they are color just because we it’s still as in memory, the colors we pass previously. Or maybe now because I didn’t remove everything we wrote here. So let me get rid of it. Let’s go back to the definition of this variable as it was before. So out color equals color, and we can get rid of this rightness variable. Okay, save. And now Now okay, I can confirm that the color depends on the matrix that is still stored inside here. So you can do something like delete, create again, and change again, this draw mode attribute to three grid. Okay, now it is red. That is the color we specified here, by the way. So to make it white, let’s go like this three grade again. Okay, so now we have our shape, again made of two triangles. That’s because I selected here draw mode three grid, like we usually do with Max. Now what I want to do here is to apply a texture to this shape. So a texture is an image that is stored directly on the memory of your GPU. And there is a way to take a certain image and apply it to any shape you want. So to do that, probably you already work with textures in other contexts. So I’ll make that quick. You need jit.gl texture. So this object is filled using a GS matrix that can load any image so in Port movie, comma bank, okay, here we take an image. Okay, let’s take the image of this cat.

例えば、これらの線に手動で色をつけたい場合、1111で書き戻すことができます。 つまり、1つは赤、もう1つは青、もう1つは緑、すみません、緑と青、そしてもう1つはアルファです。 このようにすると線は白になります。 保存して、OK を確認しましょう。 しかし、ベクターを作るには、別のベクターを暗黙的にカプセル化することもできます。 ここでも同じように、ベクターの最初の要素 color を取り出します。 色のドットに、Rachna、ripeness の値を掛けて、最後の3つの平面を追加して、連結します。 G BA では、この変数を別の方法で定義することもできます。 この行は少し複雑なレートかもしれません。 そこで、これを使う代わりに、ベクトルの各要素の内容を個別に定義することもできます。 例えば、Jeet out dot out color dot r は color, R, times ripeness に等しいと書くこともできます。 そして、ジェットアンダースコア out ドット out カラーg はカラードット g に等しい、この行を呼ぶことにしましょう、これは B になり、これは a になります。 だから、この変数を層ごとに定義することができます。 つまり、要素ごとに、その結果は同じになるはずです。 保存してみましょう。 OK、ここで全く同じ結果が得られました。 これは便利かもしれません。 もしあなたが書いているものについて確かめたいなら、とてもとても長いものを書きたくはないでしょう。 つまり、決して終わらない文字列とか、そんな感じです。 そしてここでも同様に、これら3つのプレーンを一緒にパックすることができます。 だから、G B A イコールカラードット GBA と書いても、結果は同じです。 つまり、X、Y、Zed、W、または RGB A を通して、あるベクターの単一要素を取り出すことができます。 そして、ここでやったように、あるベクターの単一要素を書き込むことができます。

----------------- ここまで patch1.maxpat -----------------------

では、ちょっと違うことをやってみましょう。 もうランダムな色を作りたくはありません。 線も作りたくありません。 そこで代わりにやりたいことは、要素を少なくして、例えば2×2の行列を作り、2つの三角形でできた形を作りたいのです。 そう、こんな感じです。 つまり、まだこれらの色の間を補間しているのです。 今、この色になっているのは、以前に渡した色がまだ記憶の中に残っているからです。 あるいは、ここに書いたものをすべて削除していないからかもしれません。 というわけで、これを削除してみましょう。 この変数の定義を以前のものに戻してみよう。 つまり、out color は color に等しく、この rightness 変数を取り除くことができる。 OK、保存。 さて、これで OK、色はまだこの中に格納されているマトリックスに依存していることが確認できました。 そこで、削除してもう一度作成し、この描画モード属性を3グリッドに変更するようなことができます。 さて、今度は赤です。 ところで、これは私たちがここで指定した色です。 白にするには、もう一度このように3階調にしましょう。 さて、これで2つの三角形で構成された図形ができました。 これは、Max で通常行うように、ここで描画モード tri_grid を選択したからです。 さて、ここでやりたいことは、このシェイプにテクスチャを適用することです。 テクスチャとは、GPU のメモリ上に直接保存される画像のことです。 そして、ある画像を取り出して、それを好きなシェイプに適用する方法があります。 そのために、おそらくあなたはすでに他の文脈でテクスチャを扱っていることでしょう。 だから、それを手短に説明します。 jit.gl.texture が必要です。 このオブジェクトは、任意の画像を読み込むことができる jit.matrix を使って塗りつぶされるため、importmovie,bang、ここで画像を取り込みます。 では、この猫の画像を取り込んでみましょう。


1:14:37 Let me show you that this video is going online so I cannot do something without showing cats. And now this matrix is sorted this texture should be filled with the same image. Okay? If you want to read that from the shader, you need to prefer something else. First of all, you need to assign a name to this texture. Let’s go Let’s go through the attributes. Let’s name, cat. And let’s stop here for the moment, we can take face variable cat, and use that here in jit.gl mesh. Here we need to specify through the attributes at texture, we need to set here the name of the texture we want to retrieve from the shader. So the texture named cats. Now the cat is forever bounded to this GL mesh objects. Perfect. But now we need of course, to read that texture from within the shader. So let’s see how to do that. Let’s open the text editor. And let’s go up here, we know that we need something else from outside, right. So since we need something else from outside, probably we should write something here. And that’s true. So what we need is another parameter parameter name. Why do we need another parameter because a texture is considered as a parameter. So something variable that is not a vector is not a floating value is a sort of entity. But nonetheless, it is a parameter. So we still need to use the params params. Let’s call this one cats type. Okay, about the type of these is something that may look weird. The correct type for a texture is int, y int? Well, we know that a texture contains some colors, right? So you were expecting to have something like vac four, but in reality, we are not referring to the content of the texture, but the index of the texture. So this index corresponds to the location of the name of the texture in this list, you know, that’s me, you may have multiple textures, right? This one may be my other cat. And maybe you want to use both cats in your shader. So you can do something like this, you can write these attribute texture followed by two different names. So what you’re really caring about is not the name nor the content of the texture, but the location of these names. So these first one will be textures zero, this one will be texture one. So with that in mind, let’s get rid of my other cat. And let’s go back to the shader. So this is refers to the index of the texture. And how can we specify the index, we should not use the word state because this is a word we need to use when we are asking for something. But now here we are defining the index. So the position of this texture, and so we should use another word that is default equals quotes 00 Because this is the first texture in this list of textures, perfect. Again, we shouldn’t need this texture somewhere, right, but where should we use it? Here we are just processing vertices, but we want to color the whole triangle. So this is something that we should use in the fragment shader, not in the vertex shader. So here we can write, binds puram, use the texture named cat in the program called fragment program. Okay, so that’s exactly the same as before. And note that the name of the texture by no means should correspond to the name you are using in the main patch. So if you want, you can call this one I don’t know, blah, blah, blah.

このビデオはオンラインで公開されるので、猫を見せずに何かをすることはできませんので、お見せします。 そして今、このマトリックスはソートされ、このテクスチャは同じ画像で満たされるはずです。 いいですか？シェーダからそれを読み取るには、別のものを好む必要があります。 まず最初に、このテクスチャに名前を割り当てる必要があります。 レッツゴー！属性を調べてみましょう。 名前をつけましょう、@name cat。 ここで一旦停止して、face の変数 cat を取り、それを jit.gl メッシュで使用することができます。 ここで、テクスチャの属性を通して、シェーダーから取得したいテクスチャの名前をここに設定する必要があります。 ここでは、cats という名前のテクスチャを指定しています。 これで、猫は永遠にこの GL メッシュオブジェクトに束縛されることになります。 完璧です。 しかし、今度はもちろん、シェーダ内からそのテクスチャを読み取る必要があります。 では、その方法について見ていきましょう。 テキストエディターを開きましょう。 そして、ここに行ってみましょう。 外から何か必要なものがあることは分かっていますよね。 外から何か必要なのですから、おそらくここに何か書くべきでしょう。 そのとおりです。 つまり、必要なのはもうひとつのパラメータであるパラメータ名です。 なぜ別のパラメータが必要かというと、テクスチャはパラメータとして扱われるからです。 つまり、ベクトルでもなく、浮動値でもない、ある種の実体のある変数です。 しかし、それにもかかわらず、それはパラメータです。 だから、やはりパラメータ params を使う必要がある。 これは cat 型と呼ぶことにしよう。 さて、これらの型についてですが、何か変に見えるかもしれません。 テクスチャの正しい型は int ですが、y は int ですか？さて、テクスチャにはいくつかの色が含まれていますよね？ですから、vec 4のようなものを期待していたのですが、実際には、テクスチャの内容ではなく、テクスチャのインデックスを参照しているのです。 このインデックスが、このリストの中のテクスチャの名前の位置に対応しているわけです。 ほら、これは私ですが、複数のテクスチャを持っている場合がありますよね？こちらは私のもう一匹の猫かもしれません。 そして、両方の猫をシェーダで使いたいかもしれません。 このように、attribute texture の後に2つの異なる名前を記述することができます。

jit.gl.mesh @draw_mode tri_grid @gl_color 1 1 1 1 @shader MyFirstShader @texture cat cat2

つまり、本当に重要なのはテクスチャの名前でも内容でもなく、これらの名前の位置なのです。 つまり、最初の1つはテクスチャ・0、もう1つはテクスチャ・1になります。 このことを念頭に置いて、もう一匹の猫を追い出しましょう。 そして、シェーダーに戻りましょう。 これは、テクスチャのインデックスを参照しています。 インデックスをどのように指定するかというと、状態という言葉を使うべきではありません。 なぜなら、これは何かを要求するときに使う言葉だからです。 しかし、ここではインデックスを定義しています。 このテクスチャの位置は、デフォルトで引用符で囲まれている別の単語を使う必要があります。 繰り返しますが、このテクスチャはどこかに必要なはずではありませんよね、でもどこで使うべきでしょうか？ここでは頂点を処理しているだけですが、三角形全体に色をつけたいのです。 ですから、これは頂点シェーダではなく、フラグメントシェーダで使うべきものです。 そこで、ここでは bind puram と書いて、fragment program というプログラムの中で cat というテクスチャを使用します。 さて、これで前と全く同じですね。 テクスチャの名前は、決してメインパッチで使っている名前と同じであってはならないことに注意してください。 ですから、もしあなたが望むなら、これを cat 以外の名前にすることができます。

1:18:46 And that’s exactly the same, it will anyway be the cat texture because this is the first one. So this is just the name of the internal variable, not the name of the texture of site. But usually, to make things concise, you should use the name of the texture in the main patch, but that’s completely up to you. Now, as we did previously, every time we use something coming from up here, we needed to create some sort of inlets write, phase one for color and position, these one for the transformation matrix. Now we need to do something similar but this time not in the vertex program because we are using that in the fragment shader. So let’s move down here. Here we take some space to create our sort of inlets and this time, we should use again a uniform. Why uniform because the texture is always the same is never changing is always the same cat texture, but this time the kind of variable is different. We are not using a VAC 342 Whatever. We are not using a floats we are not using a mat for but this time we are using another specific kind of variable that is called sampler to D. Okay, note that the D should be uppercase, sampler 2d and then followed by the name of the texture. So the name we decided up here, cats perfect. So this texture is now inside our fragment shader. But of course, we need to read from it in order to apply it to the variable color. So to see that applied on the shape, but to do that, as for G Gen, or jit.gl pics, we need some coordinates to read from our texture. Here things are not different, we need some coordinates again, where do we take these coordinates from? Well, we should provide those here from the main patch. And specifically, we need to work on the secondary letter tax chord array inside here should be placed a two plane matrix that contains the coordinates used to read from our texture. So let’s do that jet matrix. Two planes floats 32. And the same dimension of the amount of vertices we are creating. Now, I usually do something like this to create the coordinates, first of all the coordinates are ranging by default from zero to one. So we are always dealing with normalized coordinates unless specific cases. So what I usually do is to pass these metrics through a G Jen objects. And here, I use D object norm. So these want to create normalized coordinates. So that’s perfect, almost perfect, as we will see later, but let’s stick with this one for the moment. Okay, so we are again passing something from here. So you probably already understood that we need to write something else up here, we need another parameter, parameter, name, tax court, these text coordinates have S type vector, because are just two components x and y, right to know how to map or UV if you prefer, how to map the texture on our shape. And this time, we have a state that is tax court. So this state refers to the second inlet and what is coming in the second inlet. And this coordinates? Well, let’s think about it, we have just four coordinates, right, because we are setting here, a matrix that contains only four elements, right, two columns and two rows, but we need to map a whole shape with the image. So we need to sample for multiple location much, many more than just four. So what we can do is to pass this texture coordinates to the vertex program, and then pass out them from the vertex program to the fragment program interpolating. So this way, we will have a gradient of texture coordinates that we can use to sample from the texture cats, and completely covered the whole image. So from here, we still need to decide where to use this variable Tax Court puram name equals Tax Court, we should use that we said in the program named VB, so in the vertex program here is coming in a vac to named Tax Court. Okay. And what we need to do is simply to take these coordinates, and pass those from the vertex shader to the fragment shader. So since we need to send out something, we need to add another voice to this out structure. And since we need to interpolate between these values, we should use the smooth mode.

そしてそれは全く同じで、これは最初のものなので、いずれにせよ猫のテクスチャになります。 つまり、これは内部変数の名前であり、サイトのテクスチャの名前ではありません。 しかし、通常、物事を簡潔にするために、メインパッチではテクスチャの名前を使うべきですが、それは完全にあなた次第です。 さて、以前行ったように、ここから来る何かを使用するたびに、ある種のインレット書き込みを作成する必要がありました、フェーズ1は色と位置のために、これらの1つは変換マトリックスのために。 今度は似たようなことをする必要がありますが、今回は頂点プログラムではなく、フラグメントシェーダで使用するためです。 それでは、この下に移動しましょう。 ここでは、いくつかのスペースをとって、インレットを作成します。 今回は、再びユニフォームを使用します。 なぜユニフォームかというと、テクスチャは常に同じで、変化することはなく、常に同じ猫のテクスチャを使用しているからです。 VAC 342 Whatever を使うわけではありません。 D は大文字で、sampler2D、そしてその後にテクスチャの名前が続くことに注意してください。 ここで決めた名前は、cat です。 このテクスチャは、フラグメントシェーダの中に入っています。 しかしもちろん、変数カラーに適用するためには、このテクスチャを読み込む必要があります。 そのため、シェーダに適用された色を見るには、Gen や jit.gl の写真と同様に、テクスチャから読み取る座標が必要です。 ここでも状況は変わらず、また座標が必要です。 この座標は、メインパッチから提供されるべきものです。 具体的には、secondary letter tax chord array を操作する必要があり、この中にテクスチャから読み取るための座標を含む2平面マトリックスを配置します。 では、そのジェットマトリクスをやってみましょう。 2つのプレーンは、32を浮動小数点数。 そして、作成する頂点の量と同じ次元のものです。 まず、座標はデフォルトで0から1の範囲になっています。 ですから、特別な場合を除き、常に正規化された座標を扱います。 そこで私が通常行うのは、これらの matrix を jit.gen オブジェクトに渡すことです。 ここでは、jit.gen オブジェクトの norm を使用しています。 つまり、正規化された座標を作りたいのです。 後で見るように、これで完璧です、ほとんど完璧ですが、とりあえずこれにこだわってみましょう。 さて、ここからも何かを渡すことになります。 このテキスト座標は S 型のベクトルで、x と y の2つの要素だけです。 そして今回は、州が租税裁判所であることを表しています。 つまり、この状態は2番目の入口を指しており、2番目の入口に何が入ってくるかを示しています。 そしてこの座標は？ここでは4つの要素、つまり2列と2行の行列を設定していますが、画像で形状全体をマッピングする必要があります。 そのため、4つだけでなく、もっともっと多くの位置のサンプルを取得する必要があります。 そこで、このテクスチャ座標を頂点プログラムに渡し、頂点プログラムからフラグメントプログラムに渡して補間することができるのです。 こうすることで、テクスチャ座標のグラデーションができ、それを使ってテクスチャキャットからサンプリングし、画像全体を完全にカバーすることができます。 ここからはまだ、この変数 Tax Court puram name equals Tax Court をどこで使うかを決める必要がありますが、私たちは VB というプログラムで言ったことを使うべきで、ここの頂点プログラムでは Tax Court という名前の Vac に入ってきています。 なるほど。 この座標をバーテックスシェーダからフラグメントシェーダに渡すだけです。 つまり、何かを送信する必要があるので、この送信構造に別の音声を追加する必要があります。 そして、これらの値の間を補間する必要があるため、smooth を使用する必要があります。

Now what we need to send out is a vector, we can call this variable out tax court. Now here in the main program, we should assign something to this variable, so DT underscore out, dot out tax court equals tax court, that is a face variable coming in, okay, then we should use the same variable in the fragment shader, so we pass it from the vertex to the fragment shader. And for this reason, we should add that as well in the instructor, okay. And now we should have all the ingredients we need to read from this texture cat, okay, to visualize this texture, we of course need to assign it to the variable color. So we will not need this variable anymore. But instead we will need a function a specific function to read from a texture this function is called texture. So texture means read from a texture simply and it takes two elements it takes first the name of the texture we want to read from and second, it receives a vector containing the coordinates, the reading coordinates. So the name of the texture is cat that should be looked up in position GTE underscore in dot out tax court. So GTE underscore in because now it is it in variable is common in the fragment shader and out tax code because that’s the name we assigned to this variable. If you want you can also skip this out thing that is confusing and simply call this one tax court. So Tax Court, but this one down tax code is not tax court is a different variable, okay. This one is specific for the output structure. So if if you find this confusing, still give another name to this one. But you you must know that you can also use this same exact name. And here I’m doing that okay. So we read using the function texture from the texture named cat that is a sampler to D kind of data in correspondence of face set of positions defined by the variable. GTIN Tax Court. So safe sandbank again. And here I have an error. It says Name cat in us. Oh, okay. Yeah, because I duplicated the texture, send the bank again. And I cannot see anything, right, because I created again, these objects. And now we should change again, the draw mode attribute to three grades. Okay, it’s not working. Let’s check the shader. Yeah, here was something stupid. This is not puram name, but it is bind puram. Okay, save. Let’s see. Okay, we still cannot see anything. And yes, I know why. Here we are using a coordinate system that is normalized. So we are providing coordinates that range from zero to one in both the x and y direction. But here we are using a texture that is supposed to be rectangular. So we can decide from the list of attributes of the object jit.gl texture, the kind of sampling, we want it to be more specific the kinds of sampling coordinates we need to provide. And we can do that using the attributes at rectangle that is by default to one. This means that this texture is going to be sampled not using normalized coordinates, but instead using unnormalized coordinates, so exactly the position of each pixel. But since we want to use normalized ones, we need to change these attributes from rectangles, one to rectangle zero, let’s send again the texture, but you can already see that now things look better. Okay. And here we have our cats pre deformed embryo. Nice. Okay, perfect. And this is our cats dancing, the usual Cat Dance, you know, okay, let’s say you said you don’t want to have normalized coordinates, you can switch this one back to one. And you should know the dimension of this texture. So you can do something like gtes FPS. So this way, you can know the dimension of this matrix. Okay, it is 253 by 186. So what you can do is to go up here and multiply this one by 253186, or better minus one, because the first pixel top left is zero, and five, okay, let’s send a bank here, and Abang up here. Now you cannot see the results because apart from changing of these attributes at rectangle, we also need to change the kinds of variable we declared in the fragment program. So instead of simpler 2d, we should write similar to direct.

さて、送信する必要があるのはベクトルです。 この変数を out tax court と呼ぶことができます。 次に、同じ変数をフラグメントシェーダで使用します。 つまり、頂点からフラグメントシェーダに渡します。 このため、インストラクターはこれを追加する必要があります。 これで、このテクスチャキャットから読み取るのに必要な材料はすべて揃ったはずです。 さて、このテクスチャを視覚化するには、もちろん、変数 color に代入する必要があります。 ですから、この変数はもう必要ありません。 その代わり、テクスチャを読み取るための特別な関数が必要になります。 texture はテクスチャから読み取るという意味で、単純に2つの要素を取ります。 まず、読み取りたいテクスチャの名前を取り、次に、読み取り座標を含むベクトルを受け取ります。 テクスチャの名前は cat で、GTE underscore in dot out tax court の位置で検索されるはずです。 GTE アンダースコア in はフラグメントシェーダでよく使われる変数で、out tax code はこの変数に割り当てた名前だからです。 もし必要であれば、紛らわしいこの out を飛ばして、単純に tax court と呼ぶこともできます。 タックスコートですが、このタックスコードはタックスコートではなく、別の変数です。 これは出力構造に特化したものです。 ですから、もしこれが分かりにくいと感じたら、別の名前を付けてください。 でも、これと全く同じ名前を使うこともできるんですよ。 ここではそうしています。 だから我々は、変数によって定義された位置の顔のセットの対応でデータの D 種類にサンプラである猫という名前のテクスチャから関数テクスチャを使用して読み取ります。 GTIN 税務裁判所。 だから、再び安全な砂浜。 そしてここで私はエラーを持っています。 猫という名前をつけてくださいということです。 ああ、大丈夫です。 そう、テクスチャを複製して、もう一度銀行を送信したからです。 何も見えないのは、これらのオブジェクトを再び作成したからです。 今度は、描画モード属性を3階調に変更します。 OK、うまくいきませんね。 シェーダをチェックしてみましょう。 そう、ここで何か馬鹿なことがありました。 これは param という名前ではなく、bind param という名前です。 よし、保存。 見てみよう。 さて、まだ何も見えませんね。 そう、その理由はわかっている。 ここでは正規化された座標系を使っているのです。 つまり、x 方向と y 方向ともに0から1までの座標を与えています。 しかし、ここでは長方形を想定したテクスチャを使っています。 そこで、オブジェクトである jit.gl テクスチャの属性のリストから、どのようなサンプリングを行うか、より具体的にどのようなサンプリング座標を提供する必要があるかを決定することができます。 そして、矩形の属性を使ってそれを行うことができ、デフォルトでは1になっています。 つまり、このテクスチャは正規化座標ではなく、非正規化座標でサンプリングされることになり、各ピクセルの位置が正確にわかります。 しかし、正規化された座標を使用したいので、これらの属性を矩形1から矩形0に変更する必要があります。 なるほど。 そしてここに、変形前の猫の胚があります。 いい感じです。 OK、完璧です。 これは猫が踊っているところです。 いつもの猫のダンスです。 そして、このテクスチャの次元を知る必要があります。 だから、jit.fpsgui のようなことができるのです。 このようにして、このマトリックスの次元を知ることができます。 さて、これは253×186です。 左上の最初のピクセルはゼロなので、マイナス1して、5。 というのも、矩形の属性を変更するだけでなく、フラグメントプログラムで宣言した変数の種類を変更する必要があるからです。 というわけで、単純な2D ではなく、direct と同じような書き方をする必要があります。

1:29:16 Save. And here it is again. So that’s exactly the same thing, but you change the kind of coordinates you’re setting. If rectangle zero is selected here and here we have uniform sampler 2d, then we should use normalized coordinates. Instead, if you want unnormalized coordinates, you should set here to direct sampler to direct pay attention to the R that must be uppercase, and then at the rectangle one. Okay, now I’d like to spend a couple of minutes talking about the variables, what kinds of variables are available in GLSL. So let’s go back to the shader. Okay, up to this point, we so sorry, kinds of variables, right, we sell these vectors, we sell Entwistle floats. So let’s list those just to have a better picture of what is available. So I’d say the first family of variables we met are these vac vac may be back for factory or back to back for our variables that are made of four different floating values. So a vector made of four elements. Usually vac four variables are used for colors that are defined, as you know, by RGB and alpha, but also for positions. In case you’re dealing with homogeneous coordinates, like, like in this situation, then we have vector three, back three usually are used to represent positions as they come in, in the shader like this, or for normals or for directions anyway, for usually, for things that refer to a position or an orientation in space. Of course, that’s not a role, sometimes you can define a color just using three elements, it really depends. Anyway, these are variables made of three different floating values, then you have vac two, again, they can represent whatever you want, but usually they’re used to store some coordinates, like we did here with the tax court. So, let me write those down, we have back four back three back to then we have float these variables can contain values with some decimal places with a 32 bits floating point precision, these can be used to represent single parameters or values that you may want to pack into vectors. It depends of course, on the situation, then we have int, these values are whole numbers, so numbers without any decimal place. And then we have another kind, we didn’t see yet, that is bool. Now bool is a kind of variable that can contain a boolean value, a boolean value is a value that may assume just two values zero and one. So, usually, it is used in conditionals or anytime you need to decide something boolean values in GLSL do not assume the value zero or one, but instead assume a textual value if you want to state that may be false or true. Let’s try for example, to declare a variable like Am I handsome okay, this is the variable and of course, the state of this boolean value is true.

保存する。 そして、ここに再び表示されます。 つまり、これはまったく同じことですが、設定する座標の種類を変えているのです。 ここで @rectangle 0 が選択され、ここで均一 sampler2D がある場合、正規化された座標を使用する必要があります。 その代わり、正規化されていない座標が必要な場合は、ここで sampler を直接設定する必要があります。 さて、ここからは変数について、GLSL でどのような変数が利用できるのか、2分ほどお話したいと思います。 では、シェーダーに戻りましょう。 さて、ここまでは、変数の種類、つまり、ベクトルや Entwistle 浮動小数点数の販売です。 そこで、何が利用できるかをよりよく把握するために、これらをリストアップしてみましょう。 私たちが最初に出会った変数の種類は、4つの異なる浮動小数点数で構成された、工場出荷時または背中合わせの真空変数です。 つまり、4つの要素からなるベクトルです。 通常、vec の4つの変数は、ご存知のように、RGB とアルファで定義される色に使われますが、位置にも使われます。 このような状況で均質な座標を扱っている場合、ベクトル3があります。 vec3は通常、このようにシェーダーに入力された位置を表すために使用されます。 もちろん、これは役割ではなく、3つの要素だけで色を定義できる場合もあります。 とにかく、これらは3つの異なるフローティング値からなる変数です。 これらを書き出してみましょう。 back four back three back to それから float これらの変数は32ビットの浮動小数点精度で小数点以下の値を格納できます。 これらは単一のパラメータやベクターに詰め込む値を表すのに使用できます。 もちろん、状況によって異なりますが、次に int があり、これらの値は整数であり、小数点以下の桁数はありません。 そして、もう一つの種類は、まだ見ていないのですが、bool です。 bool はブール値を格納できる変数で、ブール値とは0と1の2つの値を仮定することができる値です。 ブール値は0と1の2つの値しか取らないので、通常は条件式や何かを決定する必要があるときに使われます。 GLSL のブール値は0か1かの値を取らず、代わりにテキスト値を取ります。 例えば、Am I♡のような変数を宣言してみよう。 これが変数で、もちろんこのブール値の状態は真である。

----------------- これ以降、基本的な繰り返し、条件分岐の話（for, if, 三項演算子） -----------------

1:32:54 For sure, otherwise, if I must be honest, maybe it is false. But anyway, these are the two values that these boolean variable may assume. So, that said, these are the kinds of variables you may have access to in GLSL. Now, we discussed about the kinds of variables available. Let’s talk about conditionals. So, let me get rid of what we wrote here. I think you already met conditionals in programming in other environments, even Max conditionals are something used when you want to execute or not a certain part of the program, and you evaluate if a certain condition is true or false. And therefore you decide what to do. So conditionals usually are written in GLSL as follows, you need the word if and then between parenthesis you need to write the condition you want to test, let’s make a real life example. Let’s say I want to change this color testing if this position or better the x component of this position variable is above or below zero. So, what we can do is something like this, if position, then I want to take just the x components or position dot x is greater than zero, then I use this parenthesis and inside here I write the branch of the program I want to execute if this condition is true. So for example, I might do something like this I want to assign to this out variable out color I want to assign the value red 1001 And then another kind of conditional you may want to use is else else works like this. If this condition is not verified, then this part of the program is skipped. And then the shader enters these other branch and here you can do something different like GTE out dot out color equals green. So back for 0101. Okay, we can get rid of this one, something you can do to get rid of stuff you know that you need later is just to comment out this line. So this line becomes a comment and it’s not executed anymore, but it stays there if you need to test something, or you need to use that later. So let’s try to save, we get no error that something fine, but I’m only thinking about it, we are not using down here the variable color anymore because now here we are reading from a texture. So something we can do is again to comment this line and create domineer another definition of the output variable color. And we can say that equals Jade underscore in dot out color, that is the variable we are passing from the vertex shader to the fragment shader. Okay, now, if we save, we should be able to see something. Okay. As you can see, now the points of which the x components is above zero are colored red, otherwise, so else, they are colored green. So this is how you can test a certain condition. In this context, if you want to skip these else branch, that is not more efficient, by the way, but just to show you, you can remove this else and place here jit_out dot out color equals green. So 0101 and this is the basic color and then just if the position, the exposition is above zero is greater than zero, then change the value of this variable. I will say this is not more efficient, because anyway, this way, you need to assign the color once, at least, or twice if this condition is verified. But anyway, this is how conditional works. Let’s now see how to write the same exact thing using Boolean values.

そうでなければ、正直に言えば、「偽」かもしれません。 いずれにせよ、このブール変数がとりうる値はこの2つである。 つまり、これが GLSL で利用可能な変数の種類です。 さて、利用可能な変数の種類については説明しました。 では、条件分岐について説明します。 ということで、ここで書いたことを整理しておきます。 Max でも条件文は、プログラムのある部分を実行するかしないかを決めるときに使うもので、ある条件が真か偽かを評価するものです。 そして、その結果、何をすべきかを決定する。 GLSL では通常、条件文は次のように書かれます。 if という単語が必要で、括弧の間にテストしたい条件を書きます。 例えば、この位置、あるいは位置変数の x 成分が0より上か下かで色を変えたいとします。 そこで、このようにします。 もし位置が0より大きいなら、x 成分だけを取り出したい、あるいは位置のドット x が0より大きいなら、この括弧を使って、この条件が真の場合に実行したいプログラムの分岐をこの中に書きます。 たとえば、次のようにします。 out 変数に outColor を代入し、vec4(1., 0., 0., 1.) という値を代入します。 この条件が満たされないと、プログラムのこの部分はスキップされます。 そしてシェーダは他の分岐に入り、ここで jit_out.outColor = vec4(0., 1., 0., 1.); のような異なる処理を行うことができます。 というわけで、戻ります。 この行をコメントアウトすることで、後で必要なものを取り除くことができます。 この行はコメントになってもう実行されませんが、何かテストする必要があるときや、後で使う必要があるときはそこに残ります。 保存してみましょう。 エラーは出ませんでしたから、問題はないのですが、ここで考えているのは、ここではもう変数 color を使っていないということです。 そこで、この行をコメントアウトして、出力変数 color の別の定義を作成することができます。 これは、バーテックスシェーダからフラグメントシェーダに渡す変数です。 さて、保存すると、何かが見えるはずです。 なるほど。 ご覧のとおり、x 成分が0以上の点は赤色に、そうでない点は緑色に着色されています。 このように、ある条件をテストすることができます。 この文脈では、もしこれらの else 分岐をスキップしたい場合、それはより効率的ではありませんが、一応、この else を削除して、ここに jit_out dot out color equal green を配置することができます。 つまり0101で、これが基本色です。 そして、もし位置が0より上にあれば、つまり露出が0より大きければ、この変数の値を変更します。 というのも、この方法では、少なくとも1回、あるいはこの条件が成立した場合には2回、色を代入する必要があるからです。 しかし、とにかく、これが条件分岐の仕組みなのです。 では、まったく同じことをブール値を使って書く方法を見てみよう。

1:37:16 So we can create a boolean variable called greater than zero, that equals position dot x. So only the first components greater than zero. So what happens here is that now we test this condition, and we store the result of this test inside this boolean value that can contain two states that may contain two states false or true, then if you want to use this one, as the condition, that must be true, in order to execute this part of the program, what you need to write inside here is no longer this stuff, but instead greater than zero, that is our variable. Here, I forgot an hour, okay, greater than zero. And that’s it without any kind of comparison. So if this condition is true, then enter this branch. Otherwise, move on and ignore this part. So let’s see if that works. Save. And it seems. So this is another way you may test conditions. Let’s go back to the to this test. And let’s remove this boolean variable we just created. Now let’s say I want to test multiple conditions. At the same time, we have two ways to do that, we can decide to test if two conditions are true at the same time, or if one of the two conditions is true, or whether if at least one of the two conditions is true. So if you want to test if two conditions are true at the same time, you need to write this this commercial ie two times. And then you write the the other condition you want to test. For example, it may be position dot y greater than zero. Okay, this way this part of the program is entered if and only if both conditions are true. So let’s save and let’s see what we get safe. Okay, this red part must be greater than zero in the X and the Y axis. Let’s try to generate different positions. Okay, if here for example, none of the two conditions is verified, so the shape is completely green. Otherwise, if you want to test if at least one of the two conditions is true, you need to use these kinds of slashes twice again. So let’s save. Now if at least one of the two components x or y are greater than zero then the shape becomes red

つまり、ゼロより大きいというブーリアン変数を作って、位置のドット x に等しくします。 ここで起こることは、この条件をテストし、このテストの結果をこのブール値の中に格納します。 このブール値は2つの状態を含み、偽または真の2つの状態を含む可能性があります。 これは変数です。 といった具合に、比較することなく、これだけです。 この条件が真であれば、この分岐に入るわけです。 そうでなければ、この部分を無視して先に進みます。 では、うまくいくか見てみましょう。 保存します。 という感じです。 つまり、これは条件をテストするもうひとつの方法です。 このテストに戻りましょう。 そして、先ほど作ったこのブーリアン変数を削除してみましょう。 さて、複数の条件をテストしたいとします。 同時に2つの条件が真であるかどうか、2つの条件のうち1つが真であるかどうか、2つの条件のうち少なくとも1つが真であるかどうかをテストすることにすることができるのです。 つまり、2つの条件が同時に真であるかどうかをテストしたい場合は、この CM の ie を2回書く必要があるのです。 そして、もう一方のテストしたい条件を書きます。 例えば、position dot y greater than zero といった具合です。 さて、こうすると、この部分は両方の条件が真である場合にのみ入力されます。 では、保存して、何がセーフになるか見てみましょう。 さて、この赤い部分は X 軸と Y 軸でゼロより大きくなければなりません。 いろいろな位置を生成してみましょう。 さて、例えばここで、2つの条件のいずれも検証されなかった場合、形状は完全に緑になります。 そうでない場合、2つの条件のうち少なくとも1つが真であるかどうかをテストしたい場合は、この種のスラッシュをもう一度2回使用する必要があります。 それでは、保存してみましょう。 さて、2つの成分のうち少なくとも1つ x か y が0より大きい場合、図形は赤になる

1:40:00 Okay, so this is how you can test multiple conditions at the same time, the results another way, you can write conditionals in GLSL, that sometimes is better than this way, it works like this. Here, we are trying to define the color of this output variable. So let’s get rid of all this stuff. And let’s work adjusts on a single line, what we can do is something like this. Between parenthesis we can write position dot x greater than zero, this is the condition that we need to verify. Then we write question mark that stays for okay, this is the question I’m asking, Is this condition true. And then we provide two different behaviors corresponding to the condition being true or the condition being false. The first behavior is to assign the color red to these output variables. So we can write back for 1001. And this is the true part. So if this condition is verified, then we take these values otherwise. And we can write that using columns, vac four, and green color. Okay, so this is the same thing, question. Question mark, answer true on this side, or column false. Let’s see what we get. Save, okay. And that’s the same thing. So sometimes it’s better to write everything on a single line. Of course, let’s say this condition is verified, and you need to do multiple things. It’s much better to write if and everything between parenthesis. Otherwise, if it is something simple, like choosing between two colors, or two variables, two values, that this may be a good idea. So to sort of keep everything on the same line, and easy to read and write. Just to show you this, here, we are testing this position that is in local space, right, these refers to the coordinates in local space. And, in fact, if we rotate the shape, the colors never change, because the points of these coordinates in local space remain the same, we are rotating the objects in the world, therefore what is changing are the coordinates in worldspace. And in screen space. In fact, if we use this that of this position variable, this one GL position, we will get something different in return. In fact, here we’re taking these coordinates in local space, we are transforming those in screen space. And then if you apply these tests on these coordinates, multiplied by the multi projection matrix, who you should see colored in red, all the vertices there that are on the right of your screen. So let’s try to save let’s move these points. As you can see, they change color as the vertices are greater than the middle. So in, of course, in the x direction, okay, so this thesis, for example, this may be in use of different spaces. That’s enough for conditionals. Let’s move on to the next topic. Now, I want to talk about four cycles. So let’s go back to what we have before.

さて、このように複数の条件を同時にテストすることができます。 結果は別の方法で、GLSL で条件式を書くことができ、それはこの方法よりも良い場合があります、それは次のように動作します。 ここでは、この出力変数の色を定義しようとしています。 そこで、このようなものをすべて取り除いてしまいましょう。 そして、1行で調整できるようにしましょう。 括弧の間に、位置ドット x が0より大きいことを書きますが、これは検証する必要がある条件です。 それからクエスチョンマークを書いて、これは「この条件は正しいか」という質問です。 そして、この条件が真であるか偽であるかに応じて、2つの異なる動作を提供します。 1つ目の動作は、出力変数に赤色を割り当てることです。 つまり、1001を書き戻すことができるのです。 そして、これが真の部分です。 つまり、この条件が成立すれば、それ以外の値を取るということです。 そして、列、空白4、緑色を使って書くことができます。 さて、これは同じことです、質問です。 クエスチョンマーク、こちら側の答えは真、または列は偽です。 何が出てくるか見てみましょう。 保存、オーケー。 これと同じことです。 だから、すべてを1行で書いたほうがいい場合もあります。 もちろん、この条件が検証され、複数のことをする必要があるとしましょう。 その場合は、if とすべてを括弧で囲んで書いたほうがずっといい。 そうでなくても、2つの色から選ぶとか、2つの変数、2つの値から選ぶとか、そういう単純なことであれば、これはいいアイデアかもしれません。 このように、すべてを同じ行にまとめて、読みやすく、書きやすくするのです。 これは、ローカル空間での位置をテストしているところです。 実際、形状を回転させても色は変わりません。 なぜなら、ローカル空間におけるこれらの座標のポイントは同じままであり、私たちは世界のオブジェクトを回転させているのですから、変わるのは世界空間における座標です。 そして、スクリーン空間での座標です。 実際、この位置変数、つまりこの GL ポジションを使うと、何か違うものが返ってきます。 実際、ローカル空間での座標をスクリーン空間に変換しているのです。 そして、これらの座標にこれらのテストを適用し、マルチプロジェクションマトリックスを掛けると、画面の右側にあるすべての頂点が赤く塗られているのが見えるはずです。 では、これらの点を保存して動かしてみましょう。 見ての通り、頂点が真ん中より大きくなると、色が変わります。 つまり、もちろん x 方向には、OK、この論文は、例えば、これは異なる空間を使用している可能性があります。 条件分岐はこれで十分です。 次のトピックに移りましょう。 さて、4つのサイクルについてお話したいと思います。 では、前にあったものに戻りましょう。

1:43:36 So like this, we are sending out again, these color variable as it comes from the patch up sites. And here, let’s get rid of this line. And let’s go back to face texture. So now if we save, we should have again, okay, if this image of decades, perfect. Now, I want to discuss about four cycles. A four cycle in general in programming is the structure that is used if you want to repeat a certain operation multiple times, but you don’t want to write that operation on a single line. So let’s say you need to do, you need to repeat an operation 100 times 1000 times you don’t need to write 1000 lines of code, you simply write a four cycle that will execute that operation and times. So up to tests on how to write a four cycle let’s do something in the fragment shader. Now, what we want to do is something like this, right now, here we are taking these coordinates, and we are fishing from our texture, the corresponding pixel and we are assigning that the variable color to the output variable color. What we want to do now is to create a four cycle where I don’t only read from this position, but I read from multiple positions close to this central one. If you once and then I compute the mean between all the values I retrieved from the texture. So this is an operation that may be potentially long to write. So what I want to do instead is to create a four cycle. So to create a fourth cycle, the first thing you need is a sort of counter. So a variable in which you may store the number of iterations that has occurred. To do so you need to declare an int variable int. Let’s call this one simple i That stands for index, then, as you can see, here, I’m not assigning any value to this variable, this is something common that can be done, you simply declare that these variable exists. And then after, you may want to assign a value a value, like I didn’t know I can, I could write one equals 10. Okay, so like this, we declare this variable, we create it, and then afterwards we assign a value. This is something pretty common. But anyway, what I’m going to do here is to create a for cycle. So for parenthesis, this is how it starts. Between this parenthesis, we need to specify some things, actually three different things we need to specify is the variable we intend to use as our counter. In this case, it is i and we need to assign a start a starting value. So I equals zero, okay, then we write a semicolon, and then we need to specify something else. What is the limit for this for cycle we need, we know that we need to execute this four cycle multiple times. And the strategy is to increase this value for each iteration of this cycle. But then we need to end it to make it stop. So we need to set a limit for this index. And we can say i less than five. This means that as we increase this value, these codes that follows a phase four cycle will be executed until I will reach the value of five, and then we need to write something else. That is i plus plus, this means that we take this variable i and we increase it by one unit for each iteration. So starting from Isaiah zero, the first iteration after it’s done, we take AI and we sum one, then another iteration, we take AI and we sum one until we reach this limit. So when AI reaches the value four, that’s the last cycle, we evaluate because after I gets increased again, it reaches the value five, and then I is no longer less than five, so we quit the cycle. So these are the three things you need to write, then we can use again, this parenthesis, and inside here, we write what we need to create our cycle.

このように、パッチアップの現場から送られてきたものをそのままカラーバリエーションとして、再び発信しているわけです。 そして、ここで、この線を取り除きましょう。 そして、顔のテクスチャに戻りましょう。 これで、保存すれば、また、何十年もの間、この画像が完璧であれば、OK です。 さて、ここで4サイクルについて説明したいと思います。 プログラミングにおける4サイクルとは、ある操作を複数回繰り返したいけれども、その操作を1行に書きたくない場合に使用する構造です。 例えば、ある操作を100回、1000回繰り返す必要がある場合、1000行のコードを書く必要はなく、単にその操作を何回も実行する4サイクルを書けばいいのです。 では、4サイクルの書き方に関するテストまで、フラグメントシェーダで何かをしてみましょう。 今やりたいことは次のようなことです。 今、私たちはこれらの座標を取り、テクスチャから対応するピクセルを取り出して、その変数色を出力変数色に代入しているところです。 今やりたいことは、この位置からだけでなく、この中央の位置に近い複数の位置から読み取るという、4つのサイクルを作ることです。 一度だけならまだしも、テクスチャから取得したすべての値の間の平均を計算します。 ですから、これは書くと長くなる可能性のある操作です。 そこで、代わりにやりたいのは、4つのサイクルを作ることです。 4番目のサイクルを作るには、まずカウンターのようなものが必要です。 つまり、発生した反復回数を格納するための変数です。 そのためには、int 型変数 int を宣言する必要があります。 これは単純に i と呼ぶことにしましょう。 これは index の略で、見ての通り、この変数に値を代入していません。 そして、その後、値を代入することができます。 例えば、私は知らなかったのですが、one equals 10と書くことができます。 このように、この変数を宣言し、作成し、そしてその後で値を代入します。 これはよくあることです。 でもとにかく、ここでやることは、for サイクルを作ることです。 つまり、for 括弧、これが始まりです。 この括弧の間に、あるものを指定する必要があります。 実際には3つの異なるものを指定する必要があり、カウンタとして使用する予定の変数です。 この場合、それは i で、開始値を指定する必要があります。 I はゼロに等しいので、セミコロンを書き、次に何かを指定する必要があります。 この4つのサイクルを何度も実行する必要があることは分かっています。 そして、このサイクルの各反復に対してこの値を増加させるという戦略です。 しかし、それを停止させるために終了させる必要があります。 そこで、このインデックスに制限を設定する必要があります。 ここでは i を5未満とします。 これは、この値を増加させると、フェーズ4のサイクルに従うこれらのコードが、I が5の値に達するまで実行され、その後、別のものを書く必要があることを意味します。 i プラス・プラスです。 これは、この変数 i を、反復するたびに1単位ずつ増やしていくことを意味します。 つまり、イザヤ・ゼロから始まって、それが終わった後の最初の反復では、AI を取って1を足し、さらに別の反復では、AI を取って1を足し、この限界に達するまで足し続けるのです。 AI が値4に達したときが最後のサイクルで、I が再び増加した後、値5に達したので評価し、I はもはや5未満ではないので、サイクルを終了します。 この3つを書き、この括弧を使い、この中にサイクルを作るのに必要なものを書きます。

So we said that we want to sample multiple times this texture, oh, what you can do is something like this, let’s create another variable, these should be a vec4, let’s call this one temp color. That stands for temporary color, we can also leave it as it is. So without assigning any value, then we start building our cycle. So inside here, we say that temp, color equals first thing. But then this is not a smart move, because if you simply write this thing, it will be executed five times exactly the same. And that’s not a clever move. What you could do instead is to change for example, these sampling coordinates. So if you want to sample the texture in different locations, you need to increase this value so that you can move the coordinates for each iteration of this for cycle. So we can do something like this. Let’s write a vector variable called tamp chord. Okay, inside here, I want to place these GTIN tax code variable by their face value, but then I want to keep updating its contents according to the iterations we reached. So what I can do is something like this temp court equals GT underscore in dot Tex CT plus back to eye zero. Okay, let me explain this to you. Here we take this variable we assign this value that comes from the vertex shader. But then for each iteration, we also some something different with some an offset that is a vector. So two elements The second element is always zero because I’m going to sample things on the same line not on the same column. But then here I’m moving these offsets for every cycle, the first time we entered this for cycle I equals zero. So this will be GTIN tax code plus effect two made of 00, then at the next cycle, it will be i equals one. Therefore, you can offset these coordinates by a vector made of one zero, then to zero, then three, zero, then four, zero, and then we are done. So if you use this one, these coordinates to sample from the texture, we can repeatedly shift our sampling coordinates. So we are almost done. What we need now is something else, our variable temp color this way gets continuously updated. But we don’t keep track of what was assigned there. At the previous cycle, consider this we entered the first cycle, we sample from the texture we are we assign that value to this variable, then we enter the second iteration. And we do the same we overwrite what was there. So instead, what we need to do is to conserve what was written inside this variable. And to sum the new value. To do so you can do it in two different ways. You can do something temp color equals temp color plus these value. Keep in mind that these equal is not a mathematical equal, it means assign the value on the right to the variable on the left. So this is completely legit, we can take the value of this the current value of this variable that is temp color, and some something that gets stored again in the variable temp color. Now at the next iteration, we take again what is inside temp color. And we sum again, something else and we stored the result again in temp color. Another way you can write phase same expression is like this. Instead of using equals use plus equals, that’s exactly the same thing. It means take whatever is the value, the current value office variable and some sweet face other value and stored the result again in tamp color. So to do so we need to initialize this variable temp color through the value zero, so equals vat for 0000. Okay, so keep in mind that we start from zero first iteration, we get the sampling coordinates, we sum to the value, the current value that is zero, the color taken from the texture, then we move on next step, we update the value of this variable summing to it in other sampling in another location from our texture. And we keep going until we until we complete five cycles of this thing. Then after we have done, we can exit this four cycle and move on with the rest of the coat.

このテクスチャを複数回サンプリングしたいのですが、そのためにできることは、次のようなことです。 別の変数を作成しましょう。 これはテンポラリーカラーの略で、そのままにしておくこともできます。 何も値を代入せずに、サイクルの構築を開始します。 つまり、この内部では、temp と color は等しいと言うのです。 しかし、これは賢いやり方ではありません。 なぜなら、単にこのようなことを書くと、まったく同じように5回実行されることになるからです。 これは賢いやり方とは言えません。 代わりにできることは、たとえば、このサンプリング座標を変更することです。 つまり、テクスチャをさまざまな場所でサンプリングしたい場合は、この値を増やして、この for サイクルの繰り返しごとに座標を移動できるようにする必要があります。 そこで、次のようなことができます。 tamp chord というベクトル変数を書いてみましょう。 さて、この内部には額面通りの GTIN 税コード変数を配置したいのですが、到達した反復に応じてその内容を更新し続けたいのです。 だから私が行うことができますこのようなものです テンプコート等しい GT のアンダースコアでドットテックス CT プラスバック目ゼロに。 さて、私はあなたにこれを説明しましょう。 ここでは、この変数にバーテックス・シェーダから来た値を代入しています。 しかし、各反復のために、我々はまた、いくつかの異なる何かを持っています いくつかのオフセットで、それはベクトルです。 2番目の要素は常に0です。 なぜなら、同じ列ではなく、同じ行にあるものをサンプリングするつもりだからです。 しかし、ここでは、サイクルごとにこれらのオフセットを動かしています。 サイクル I の最初の入力はゼロに等しいです。 だから、これは GTIN 税コードプラス00で作られた効果2になります、そして次のサイクルで、それは i が1に等しくなります。 したがって、これらの座標を1つのゼロで作られたベクトルでオフセットし、次にゼロに、そして3つのゼロ、4つのゼロ、そして私たちは完了です。 つまり、この1、この座標を使ってテクスチャからサンプリングすれば、サンプリング座標を繰り返しずらすことができるわけです。 というわけで、ほぼ完成です。 今必要なのは別のもので、この方法で変数 temp color は継続的に更新されます。 しかし、そこに何が代入されたかを追跡することはできません。 前のサイクルでは、最初のサイクルに入り、テクスチャからサンプリングし、その値をこの変数に代入して、2回目の反復に入ります。 そして、同じようにそこにあったものを上書きします。 そこで、代わりに必要なのは、この変数に書き込まれたものを保存することです。 そして、新しい値を合計することです。 そのためには、2つの異なる方法があります。 あなたは、temp color イコール temp color プラスこれらの値を行うことができます。 これらの等しいは、数学的な等しさではないことに注意してください、それは左の変数に右の値を割り当てることを意味します。 つまり、これは完全に合法的なもので、temp color という変数の現在の値を取り、その値を temp color という変数に再び格納することができるのです。 そして次の繰り返しで、temp color の中にあるものを再び取り出します。 そして、また何か他のものを合計し、その結果を再び temp color に格納します。 同じような式を書く別の方法として、次のようなものがある。 イコールの代わりにプラスイコールを使っても、まったく同じことができます。 これは、値が何であれ、現在の値オフィス変数といくつかの甘い顔他の値を取り、その結果を再び tamp の色に格納することを意味します。 だからそうするために我々は値ゼロを介してこの変数 temp の色を初期化する必要がありますので、0000のためにバットを等しくします。 さて、私たちはゼロから始まることを覚えておいてください最初の繰り返し、我々はサンプリング座標を取得し、我々は値、ゼロである現在の値、テクスチャから取得した色に合計し、我々は次のステップに移動し、私たちの質感から別の場所に他のサンプリングでそれに合計し、この変数の値を更新します。 そして、この処理を5サイクル繰り返すまで続けます。 そして、それが終わったら、この4サイクルを終了して、残りのコートに移ります。

1:53:24 Now what you can do is something like this, take this variable that is temp, color and divide that by five. Why do you need to divide that by five? Well, because we we kept summing values on values five times. So if you want to compute the exact algebraic mean of the colors, we sample from the texture, you need to sum and then divide by n. That’s the reason why here I’m dividing by five. So let’s save and let’s see if everything works. Save. Okay, you can see that the image gets blurred horizontally, let’s try to increase the amount of iterations. Let’s go for 55. Save out. Sure. Now it’s almost completely white, because here we need to divide by 55, of course, sum and divide by n. So okay, and now the credit is completely blurred in the horizontal dimension. So this way, you can repeat a piece of codes multiple times, and times. And you just need to keep in mind how to update the value of this variables. So that’s what you need to know about four cycles in GLSL. Now let’s talk about something else. What it wants to do now is to control the amount of iterations. So if you wanted the amount of blurring the blurriness of our cats using an external parameter, so something that can be set from the main patch. How can we do that? We now know that if we need to retrieve something from outside, probably we need to write that up here. And this makes no sense So to take a parameter from outside, we need to write again params name equals, followed by the name of the parameter we want to use inside our shader. Let’s call this one blur amount, that should be a type int, y type in because here we are using an integer value to define the limits for this for cycle, but this is just the in this case, these any parameter can be a float value can be a vec4 a vector factory, whatever it really whatever you want. But right now we need this input variable. And then we need to define a default value for this parameter. So default, equals, and then here you can set whatever you want, you can set 13, you can set too you can set really, whatever whatever you want. This is just take this as a sort of load mess object here, we load inside this parameter named blur amount, the value too, as we start the rendering, then we can change and update its contents from outside. But this is the first the default starting value. Now we need to use these parameters somewhere. And we need to use that in the fragment shader because that’s the program in which we are creating the blurring effect. So bind, RM equals blur amount, program, FP. Okay, the usual stuff what we saw previously, then we move down to the fragment shader, and here we need to declare the inlet for this parameter. So again, we should use uniform here, because the face values provided from outside from the main patch are uniform are all the same for all the instances of the shader, each instance that takes into account a different vertex or a different fragments in the fragment shader, we will all share the same value for face variable for this parameter. So for this reason, this is a uniform, then we need to set here the kind of parameter so int, followed by the name, and the name is blur. Amount, semicolon.

ここでできることは、temp と color という変数を取って、それを5で割るということです。 なぜ5で割る必要があるのでしょうか？それは、値に対して値の和を5回とり続けたからです。 つまり、テクスチャからサンプリングした色の正確な代数的平均を計算したい場合は、合計してから n で割る必要があります。 これが5で割っている理由です。 では、保存して、すべてがうまくいくか見てみましょう。 保存してください。 さて、画像が水平方向にぼやけているのがわかりますね。 55回にしてみましょう。 保存してください。 もちろん、55で割って、合計して n で割る必要があるからです。 このように、1つのコードを何度も何度も繰り返すことができるのです。 そして、この変数の値をどのように更新するかを覚えておくだけでよいのです。 これが GLSL の4サイクルについての知識です。 さて、次は別の話をしましょう。 今やりたいことは、反復の量を制御することです。 つまり、猫のぼかしの量を外部パラメータで設定したい場合、メインパッチから設定できるものになります。 どうすればいいのでしょう？外部から何かを取得する必要がある場合、おそらくそれをここに書き込む必要があることは分かっています。 つまり、外部からパラメータを取得するには、もう一度 params name equals と書き、その後にシェーダの内部で使用したいパラメータの名前を書く必要があります。 このパラメータを blur amount と呼ぶことにしましょう。 int 型、y 型にすべきです。 なぜなら、ここではサイクルに対する制限を定義するために整数値を使用していますが、これはこの場合だけで、他のパラメータは float 値であったり、ベクトル工場に対する VAC であったり、本当に何でもいいのです。 しかし、今はこの入力変数が必要です。 そして、このパラメータにデフォルト値を定義する必要があります。 デフォルト、イコール、そしてここに好きなものを設定することができます。 13でもいいし、あまりにも好きなものを設定してもいいし、本当に好きなものを設定してください。 レンダリングを開始すると、この blur amount というパラメータとその値が読み込まれます。 しかし、これは最初のデフォルトの開始値です。 さて、これらのパラメータをどこかで使用する必要があります。 このパラメータはフラグメントシェーダで使用する必要があります。 なぜなら、フラグメントシェーダはぼかし効果を作成するプログラムだからです。 つまり、バインド、RM イコールブラー量、プログラム、FP です。 次に、フラグメントシェーダーに移動して、このパラメータのインレットを宣言する必要があります。 なぜなら、メインパッチから外部に提供されるフェース値は均一であり、シェーダのすべてのインスタンスに対して同じだからです。 このため、これは統一されたものです。 では、ここでパラメータの種類を設定する必要があり、int、その後に名前が続きます。 量、セミコロン。

1:57:22 Okay, so everything is ready to use this parameter. Now what we need to do is just to take it and use it where we need. So instead of this roof value, we said here, blur amount, as well as down here as the divisor for the stamp color variable. So save, and thinks seems to work. Okay, now, let’s say you want to change dynamically face value, what should I do? Here, you should use, you should create a list a message made of the word parameter, that’s mandatory, then the name of the parameter that is blur amount, followed by any value you want to apply, like this, if you connect this message to the shader, now you should be able to control the amount of blurring, aha, you reverse. So from outside from the main patch, we can pass any value we want. In this case, this is a named value, but it could be a floating value could be a vector. All that changes is that in for example, if that’s a vector three, for example, you need to pass you could do something like this back parameter, name of the parameter, and then three floating values. Okay, so you simply need to concatenate as floating values as you need according to the type of variables you need to pass. So the thesis phase could be an example of a VAC three parameter. And this is it you just need to use Bahram the name of the parameter followed by the amount of values units. Now I’d like to conclude our introduction to shaders talking about another thing, I want to talk about functions, we already use some functions here there, we use, for example, this one texture, this is a built in function. So a function that is provided by GLSL itself. Or I didn’t know another one we used before is the function length. Okay, this one that takes any vector and computes the length of that vector. All these functions are called built in functions. You can find a line the whole list of functions available in GLSL. You just need to know what are their names and what they do. There are a lot of those and if you check the other tutorials, We use them a lot. For example, I didn’t know the function mix, or the functions smooth step, function, main function, Max. Okay, I don’t want to get into the details about these functions. But these are all built in functions, you may have access, function, stack, and so on.

さて、これでこのパラメータを使用する準備がすべて整いました。 あとは、このパラメータを必要な場所で使用するだけです。 つまり、この屋根の値の代わりに、ここに、ぼかしの量と、この下に、スタンプカラー変数の除数を指定しました。 保存して、うまくいきそうです。 さて、次に、額面を動的に変更したい場合、どうすればよいでしょうか。 ここで、parameter という単語でできたメッセージのリストを作る必要があります。 これは必須で、次に blur amount というパラメータ名、その後に適用したい任意の値、こんな感じです。 このメッセージをシェーダに接続すると、ぼかしの量をコントロールできるようになるはずです、ああ、逆ですね。 つまり、メインパッチの外から、好きな値を渡すことができるわけです。 今回は名前付きの値ですが、浮動小数点数でもベクトルでもかまいません。 例えばベクトルであれば3つ、例えばバックパラメータ、パラメータ名、そして3つの浮動値を渡す必要があります。 つまり、渡すべき変数の種類に応じて、必要なだけの浮動小数点数を連結する必要があるわけです。 つまり、論文段階では、VAC の3つのパラメータが例として挙げられます。 パラメータ名を Bahram とし、その後に値の単位を指定するだけです。 さて、シェーダー入門の締めくくりとして、もう一つ関数についてお話したいと思います。 GLSL 自体が提供する機能ですね。 もうひとつ、以前使ったことのある関数に length があります。 これは任意のベクトルを受け取って、そのベクトルの長さを計算するものです。 これらの関数はすべてビルトイン関数と呼ばれています。 GLSL で利用可能な関数の全リストを一行で見ることができます。 ただ、その名前が何なのか、何をするものなのかを知っておく必要があります。 他のチュートリアルを見ると、これらの関数がたくさん使われています。 例えば、私は mix という関数や、smoothstep, main, max といった関数を知りませんでした。 これらの関数の詳細には触れたくありません。 しかし、これらはすべて組み込み関数で、あなたはアクセス、関数、スタックなどを持つかもしれません。

2:00:26 I’ll leave you in the description a link to a list of all these available functions. But what I want to discuss now with you is how to create custom functions. Let’s say you have a certain tasks you need, for example, to repeat multiple times, but you don’t want every time to write the same code that may be potentially very long, exactly as you do with the usual Max programming. Sometimes, if you need to repeat multiple times, for the same piece of codes, you create sub batches or abstractions simpler, that’s faster, and that that’s easier to write reads, correct and debug, the same happens in GLSL, you have the possibility to create your own custom functions that you can consider as sub batches or abstractions. So the way to do that is pretty simple. First of all, let’s think about something that could be done using a function. Let’s say I want to create a function that takes a certain color expressed as a vec4 and inverts the red plane and the green plane. So let’s see how to do that. To create a function you need, first of all, to decide where to locate that function. So in the vertex shader in the fragment shader, or in the in the geometry shader. This is important because the functions you define are not shared by the three programs you need. If the function is the same, you need to write that again for each part of the shader. So that’s the first thing to decide. Here, I want to operate on colors and from colors taken from this texture. So I know that the function I want to create must be assigned here in the Vert index or in the fragment shader. So how to create a function, you need to consider what is the kind of data you want to have in return from your function. So in this case, since I want to swap the reds in the grip lanes, I know that I need to take a color and I need to return another color. So the kinds of outputs the function my function should have is evac four, because that’s the color. So the first thing you need to write is fac four. Also, note this, I’m writing this function not in this main part, but before it, because even this main part is a function. But what I want to do is define another function, then that then I’ll be able to recall inside the main program, so that four is the kind of data I want to have in return for my function, then I need to decide the name for my function, let’s call this one swap, then parenthesis, and here, I need to set what what are going to be my input parameters. So I need first of all to define the kinds of parameter so the kinds of variable I need to get in a color, so it will be a VAC four, and then I need to invent a name for this variable. These can be really any name can even be a name you already use somewhere else, because these name is not shared with any other part of the program. It’s just something internal. So for example, if I named this one color, this variable color will not conflict with anything else inside my program, it makes sense only within this function. So let’s leave color then we need as we did for, for cycles and conditionals we need to start everything with these parenthesis and close it at the end. So this function must do something very simple, it should take a color and swap the red and the ugly and the green channels. So we could do something like create another variable fac for called like this that equals a vec4 made of color dot green, then color dots red and then color dots below and color dots a so no, notice that I swapped these two elements of the veck for coming in the function if you want you can also write instead of two separate elements B and A equals right colored dots B A.

これらの利用可能な関数の一覧へのリンクは、説明の中に残しておきます。 しかし、今お話したいのは、カスタム関数を作成する方法です。 例えば、あるタスクを何度も繰り返す必要がある場合、通常の Max プログラミングのように、毎回、非常に長くなる可能性のある同じコードを書きたくはないとします。 同じコードを何度も繰り返す必要がある場合、より単純なサブバッチや抽象化を作成したほうが速く、読み込みや修正、デバッグを簡単に行えることがあります。 というわけで、その方法はとても簡単です。 まず最初に、関数を使ってできることを考えましょう。 ある色を vec4で表現して、赤の平面と緑の平面を反転させるような関数を作りたいとします。 では、どうすればいいか見てみましょう。 関数を作成するには、まず、その関数をどこに置くかを決める必要があります。 つまり、バーテックスシェーダ、フラグメントシェーダ、またはジオメトリシェーダの中です。 これは重要なことで、定義した関数は、必要な 3 つのプログラムで共有されるわけではありません。 もし関数が同じであれば、シェーダーの各部分ごとにそれを書き直す必要があります。 だから、最初に決めるべきはそこなんです。 ここでは、このテクスチャから取り出した色と、色から演算したい。 だから、作りたい関数は、ここの Vert インデックスかフラグメントシェーダの中で割り当てる必要があることは分かっています。 関数を作るには、関数からどのようなデータを返してもらいたいかを考える必要があります。 今回のケースでは、グリップレーンの赤を入れ替えたいので、ある色を受け取って別の色を返す必要があることがわかります。 ということは、この関数が持つべき出力は避難4色ということになります。 ですから、最初に書く必要があるのは fac four です。 また、このことに注意してください、私はこの関数をこのメイン部分の中ではなく、その前に書いています、なぜならこのメイン部分さえも関数だからです。 なぜなら、このメインパートでさえも関数だからです。 しかし、私がやりたいのは別の関数を定義して、それをメインプログラムの中で呼び出せるようにすることです。 まず最初に、パラメータの種類を定義する必要があります。 つまり、色で取得する必要がある変数の種類は、vec4とします。 この名前はプログラムの他の部分と共有されるものではないので、本当にどんな名前でもいいし、すでにどこかで使っている名前でもかまいません。 なぜなら、この名前はプログラムの他の部分と共有されるものではなく、内部的なものだからです。 例えば、私がこの変数に color という名前を付けたとしたら、この変数 color はプログラムの他の部分と衝突することはなく、この関数の中だけで意味をなすものです。 では、color を残すとして、サイクルや条件文では、すべてをこの括弧で始めて、最後に閉じる必要があります。 この関数は非常に単純なことをしなければなりません。 色を受け取って、赤と青と緑のチャンネルを入れ替えるのです。 だから我々はこのように呼ばれるための別の変数 fac を作成するようなことを行うことができ、それはカラードット緑、次にカラードット赤、そしてカラードット下とカラードット A で作られたための VAC に等しいので、いや、私は関数に来るための VEC のこれらの二つの要素を交換したことに気づくあなたがしたい場合は、代わりに二つの別々の要素 B と A が右カラードット B A に等しい書くこともできます。

2:04:53 That’s the same as we saw previously. Now I need to send out from if you want the out Let’s have this function these variable here. So the magic word to do that is the word return. Return is a way to output something from a function. So return followed by what you need to output. In my case, it is just this variable. And that’s it. Without any sign, like equals no, no, just return and what you need to return. So safe, and Max is not complaining. Perfect. Now we created our function. But if you want to apply it, you need to go down here and decide where to apply. It’s now to call to use a function, you need to write, swap, so the name of the function, and then between parenthesis put in what are the inputs to my function, in my case, that face color, then what I get in return is the result of a separation that gets assigned to the variable color. So if I need, for example, to use this variable multiple times across the shader, this is something that I can call over and over and over and defend, ever need to change something I just need to go up here, where, where there’s the definition of this function ain’t change all the little details, and it’s so safe. And you can see that now the eyes of the cat are green, because the colors are changed. Okay, so it works. If you want, you don’t need to pass through this intermediate variable. Here, you could also take this part, so copy and paste it here. So a function may also contain just one line. So return back four followed by face operation, save. And that’s the same. If you, for example, need multiple inputs, you can write, comma, followed by whatever else you need, for example, back to court. If that’s the case, you can take as you call this function, you need to first understand the these elements of the first one in the list, and then comma, followed by the second element, that must be a vector, because here we wrote back to now I’m not doing anything with this function and the second variable, but it was just to show you how to pass multiple inputs to a single function. So we can go back to what it was before. Okay, I guess this concludes all the basic stuff you need to know to start coding your own shaders. Okay, I think I’m gonna leave you with this weird looking cat. So it was a long journey, but I kept track of all the topics I talked about. So everything will be listed in a sort of index. And if you ever want to go back to some basic concepts, and you just want to explore how to do a specific thing, check the index, and it should be simpler for you to pick from the video the information you need. So thank you very much for your support, as always, and I hope I’ll be able to create the second part of tutorial 28 I really hope so. So see you next time.

これは以前見たのと同じですね。 さて、out が必要な場合から送信する必要があります この関数は、これらの変数をここに持ってみましょう。 そのためのマジックワードは return という言葉です。 return は関数から何かを出力する方法です。 つまり、return の後に出力したいものを続けるのです。 私の場合、それはこの変数だけです。 そして、それだけです。 イコール、ノー、ノーといった記号は一切使わず、return と返すべきものだけです。 だから安全だし、Max も文句を言わない。 完璧だ。 これで、関数を作りました。 しかし、それを適用したいのなら、ここに降りてきて、適用する場所を決めなければならない。 関数を使うために呼び出すには、関数の名前を書いて、それから括弧の間に、私の関数への入力は何か、私の場合は顔の色、それから戻り値は、変数 color に割り当てられる分離の結果である、と入れ替える必要があります。 例えばこの変数をシェーダ全体で何度も使う必要がある場合、これは何度も呼び出して守ることができるもので、何かを変更する必要があれば、この関数の定義があるここに行くだけで、細かい部分まで変更することはありませんし、とても安全です。 猫の目が緑色になっているのがわかると思います。 色が変更されているからです。 さて、これでうまくいきました。 もし必要なら、この中間変数を通過させる必要はありません。 ここで、この部分をコピーして、ここに貼り付けることもできます。 というわけで、関数は1行で済むこともあります。 つまり、return back 4の後に face operation、save と続きます。 これも同じです。 例えば、複数の入力が必要な場合は、コンマの後に、例えば back to court のように必要なものを書きます。 その場合は、この関数を呼び出すように取ることができます。 まず、リストの最初のもののこれらの要素を理解する必要があります。 そして、コンマ、2番目の要素に続いて、それはベクトルでなければなりません。 ここでは、今はこの関数と2番目の変数で何もしていませんが、それはちょうど1つの関数に複数の入力を渡す方法を示すために書いたのです。 というわけで、前の状態に戻すことができます。 さて、これで自作シェーダーのコーディングを始めるために知っておくべき基本的な事柄はすべて終了したと思います。 さて、この変な猫でお別れすることにしましょうか。 長旅でしたが、話した内容はすべて記録しておきました。 そのため、すべての内容は索引のようなものに記載されています。 基本的な概念に戻りたいと思ったときや、特定のことを行う方法を探りたいときは、索引をチェックすれば、必要な情報をビデオの中から選ぶのが簡単になるはずです。 そして、チュートリアルの第2部を作ることができることを願っています。 それでは、次回お会いしましょう。

2:08:13 Ciao.

Transcribed by https://otter.ai