Using VisualShaders

VisualScriptがコーディングにグラフィカルなアプローチを好むユーザーの代替手段であるように、VisualShadersはシェーダーを作成するための視覚的な代替手段です。

シェーダーは本質的にビジュアルにリンクされているため、テクスチャ、マテリアルなどのプレビューを使用したグラフベースのアプローチは、純粋にスクリプトベースのシェーダーと比較してさらに多くの利便性を提供します。一方、VisualShaderはシェーダースクリプトのすべての機能を公開するわけではなく、特定の効果のために両方を同時に使用する必要がある場合があります。

注釈

If you are not familiar with shaders, start by reading Introduction to shaders.

VisualShader(ビジュアルシェーダー)の作成

VisualShaderは、任意の ShaderMaterial で作成できます。 VisualShaderの使用を開始するには、選択したオブジェクトに新しい ShaderMaterial を作成します。

../../_images/shader_material_create_mesh.png

次に、VisualShader リソースを Shader プロパティに割り当てます。

../../_images/visual_shader_create.png

新しい VisualShader リソースをクリックすると、ビジュアルシェーダーエディタが自動的に開きます。ビジュアルシェーダーエディタのレイアウトは、上部のツールバーとグラフ自体の2つの部分で構成されています。

../../_images/visual_shader_editor2.png

ツールバーの左から右へ:

  • ノードを追加... ボタンは、シェーダーグラフにノードを追加できるポップアップメニューを表示します。

  • ドロップダウンメニューは、シェーダータイプ(頂点、フラグメント、Light)です。スクリプトシェーダーの場合と同様に、使用可能なビルトインノードを定義します。

  • 次のボタンと数値入力は、ズームレベル、グリッドスナップ、グリッドライン間の距離(ピクセル単位)を制御します。

  • 最後のアイコンは、グラフに対応する生成されたシェーダーコードを示しています。

注釈

VisualShaderはコーディングを必要としませんが、スクリプトシェーダーと同じロジックを共有します。シェーディングパイプラインを十分に理解するために、両方の基本を学ぶことをお勧めします。

ビジュアルシェーダーグラフは、背後でスクリプトシェーダーに変換されます。ツールバーの最後のボタンを押すと、このコードを表示できます。これは、特定のノードが何をするか、スクリプトでそれを再現する方法を理解するのに便利です。

ビジュアルシェーダーエディタの使用

デフォルトでは、すべての新しい VisualShader には出力ノードがあります。すべてのノード接続は、出力ノードのソケットの1つで終了します。ノードは、シェーダーを作成するための基本単位です。新しいノードを追加するには、左上隅の[ノードの追加]ボタンをクリックするか、グラフ内の空の場所を右クリックすると、メニューがポップアップ表示されます。

../../_images/vs_popup.png

このポップアップには次のプロパティがあります。

  • グラフを右クリックすると、このメニューがカーソル位置で呼び出され、作成されたノードもその場合、その位置の下に配置されます。それ以外の場合は、グラフの中心に作成されます。

  • 水平および垂直にサイズを変更して、より多くのコンテンツを表示できます。サイズ変換とツリーコンテンツの位置は呼び出し間で保存されるため、ポップアップを突然閉じた場合は、以前の状態を簡単に復元できます。

  • ドロップダウンオプションメニューの[すべて展開]および[すべて折りたたむ]オプションを使用して、使用可能なノードを簡単にリストできます。

  • また、ポップアップからグラフにノードをドラッグアンドドロップすることもできます。

ポップアップにはカテゴリに分類されたノードがありますが、最初は圧倒されるように見えます。いくつかのノードを追加し、それらを出力ソケットに接続して、何が起こるかを観察してください。

いずれかの scalar 出力を vector 入力に接続すると、ベクトルのすべての要素がスカラーの値を取ります。

vector 出力を scalar 入力に接続すると、スカラーの値はベクトルの要素の平均になります。

ビジュアルシェーダーノード

以下は、知っておく価値のある特別なノードです。このリストは完全なものではなく、より多くのノードと例で展開される場合があります。

式ノード(Expression Node)

Expression ノードを使用すると、ビジュアルシェーダー内にGodot Shading Language(GLSLのような)式を記述できます。ノードには、必要な量の入力ポートと出力ポートを追加するボタンがあり、サイズを変更できます。各ポートの名前とタイプを設定することもできます。入力した式は、すぐにマテリアルに適用されます(フォーカスが式テキストボックスを離れると)。解析エラーまたはコンパイルエラーは、[出力]タブに出力されます。出力はデフォルトでゼロ値に初期化されます。このノードは[Special]タブの下にあり、すべてのシェーダーモードで使用できます。

../../_images/vs_expression.gif

このノードの可能性はほとんど無限です。複雑な手順を記述し、ループ、discard キーワード、拡張タイプなどのテキストベースのシェーダーのすべての機能を使用できます。次に例を示します:

../../_images/vs_expression2.png

フレネルノード

Fresnel ノードは、法線ベクトルとビューベクトルを受け入れ、それらの間の飽和ドット積であるスカラーを生成するように設計されています。さらに、反転と方程式の力を設定できます。``Fresnel``ノードは、オブジェクトに縁取りのような照明効果を追加するのに最適です。

../../_images/vs_fresnel.png

ブール型ノード

Boolean ノードは Scalar または Vector に変換して 0 または 1 および '0, 0, 0) または (1, 1, 1, ) を表すことができます。このプロパティを使用すると、一部のエフェクトパーツをワンクリックで有効または無効にできます。

../../_images/vs_boolean.gif

ifノード

If ノードを使用すると、a と b の比較結果を返すベクトルを設定できます。返される可能性のあるベクトルは3つあります: a == b (この場合、許容範囲パラメーターは比較のしきい値として提供されます - デフォルトでは最小値、つまり 0.00001``に等しい)、\ ``a> b および a <b です。

../../_images/vs_if.png

スイッチノード(Switch node)

Switch ノードは、ブール条件が true または false の場合にベクトルを返します。Boolean は、上記で導入されました。ベクトルを真(true)のブール値に変換する場合、ベクトルのすべての要素はゼロより上でなければなりません。

../../_images/vs_switch.png

注釈

Switch ノードは、GLES3でのみ使用可能です。 GLES2デバイスをターゲットにしている場合、switch ステートメントは使用できません。