リファレンス createShader()

createShader()

新しいp5.Shaderオブジェクトを作成します。

シェーダーはグラフィックス処理ユニット(GPU)上で実行されるプログラムです。多くの ピクセルを同時に処理できるため、多くのグラフィックスタスクに対して高速です。 GLSLと呼ばれる言語で書かれ、 スケッチの他のコードと一緒に実行されます。

p5.Shaderオブジェクトが作成されると、 shader()関数で使用できます。例えば、 shader(myShader)のようにです。シェーダープログラムは2つの部分、頂点 シェーダーとフラグメントシェーダーで構成されます。頂点シェーダーは3Dジオメトリが 画面上のどこに描画されるかに影響し、フラグメントシェーダーは色に影響します。

最初のパラメータvertSrcは頂点シェーダーを設定します。これはGLSLで 書かれた頂点シェーダープログラムを含む文字列です。

2番目のパラメータfragSrcはフラグメントシェーダーを設定します。これは GLSLで書かれたフラグメントシェーダープログラムを含む文字列です。

シェーダーはオプションでフックを記述できます。これはGLSLの関数で、 ユーザーがp5.Shadermodify()メソッドを使用して シェーダーの動作をカスタマイズするために提供することを選択できます。これらは 3番目のパラメータoptionsでフックを記述し、vertSrcまたはfragSrcで フックを参照することで追加されます。頂点またはフラグメントシェーダーのフックは optionsvertexおよびfragmentキーの下で記述されます。それぞれがオブジェクトで、 各キーはフック関数の型と名前であり、各値はフックのパラメータリストと デフォルトの実装を含む文字列です。例えば、ユーザーが頂点シェーダーの開始時に オプションでコードを実行できるようにするには、optionsオブジェクトに 以下を含めることができます:

{
  vertex: {
    'void beforeVertex': '() {}'
  }
}

そして、頂点シェーダーソースで、同じ名前にHOOK_というプレフィックスを付けた 関数を呼び出すことでフックを実行できます。デフォルトのフックが置き換えられたかどうかを チェックしたい場合、おそらく余分なオーバーヘッドを避けるために、同じ名前に AUGMENTED_HOOK_というプレフィックスが定義されているかどうかをチェックできます:

void main() {
  // ほとんどの場合、単にフックを呼び出すだけで十分です:
  HOOK_beforeVertex();

  // あるいは、より効率的に:
  #ifdef AUGMENTED_HOOK_beforeVertex
  HOOK_beforeVertex();
  #endif

  // ここに残りのシェーダーコードを追加してください!
}

注意:2Dモードではフィルターシェーダーのみが使用できます。WebGLモードでは すべてのシェーダーを使用できます。

実例

シンタックス

createShader(vertSrc, fragSrc, [options])

パラメーター

vertSrc
String:

頂点シェーダーのソースコード。

fragSrc
String:

フラグメントシェーダーのソースコード。

options
Object:

このシェーダーがフックで拡張される方法を記述するオプションのオブジェクト。 以下を含むことができます:

  • vertex: 利用可能な頂点シェーダーフックを記述するオブジェクト。
  • fragment: 利用可能なフラグメントシェーダーフックを記述するオブジェクト。

リターン

p5.Shader: 頂点シェーダーとフラグメントシェーダーから 作成された新しいシェーダーオブジェクト。
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!

関連するリファレンス