p5.Shader

シェーダープログラムを記述するクラスです。

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

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

注意:createShader()createFilterShader()loadShader()が、このクラスの インスタンスを作成する推奨される方法です。

実例

シンタックス

p5.Shader(renderer, vertSrc, fragSrc)

パラメーター

renderer
p5.RendererGL:

このシェーダーのWebGLコンテキスト。

vertSrc
String:

頂点シェーダープログラムのソースコード。

fragSrc
String:

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

メソッド

copyToContext

シェーダーを一つの描画コンテキストから別のコンテキストにコピーします。

p5.Shaderオブジェクトは、実行前に shader()を呼び出してコンパイルする必要が あります。コンパイルは通常、メインキャンバスまたは p5.Graphicsのインスタンスである 描画コンテキストで行われます。シェーダーはコンパイルされたコンテキストでのみ 使用できます。copyToContext()メソッドはシェーダーを再度コンパイルし、 再利用可能な別の描画コンテキストにコピーします。

パラメータcontextは、シェーダーが使用される描画コンテキストです。 シェーダーはp5.Graphicsのインスタンスに コピーできます。例えば、myShader.copyToContext(pg)のようにします。 また、シェーダーをp5.Graphicsオブジェクトから メインキャンバスにコピーする場合は、window変数を使用します。 例えば、myShader.copyToContext(window)のようにします。

注意:createShader()createFilterShader()、または loadShader()で作成された p5.Shaderオブジェクトは、 createFramebuffer()で作成された p5.Framebufferオブジェクトと 直接使用できます。両オブジェクトはメインキャンバスと同じコンテキストを持ちます。

setUniform

シェーダーのuniform(グローバル)変数を設定します。

シェーダープログラムはコンピューターのグラフィックス処理ユニット(GPU)上で 実行されます。シェーダーはスケッチを実行するメモリとは完全に分離された コンピューターのメモリ部分に存在します。uniformはシェーダープログラム内の グローバル変数です。uniformは、CPU上で実行されているスケッチからGPU上で 実行されているシェーダープログラムに値を渡す方法を提供します。

最初のパラメータuniformNameは、uniformの名前を含む文字列です。 上記のシェーダーの場合、uniformName'r'となります。

2番目のパラメータdataは、uniformを設定するために使用される値です。 例えば、myShader.setUniform('r', 0.5)を呼び出すと、上記のシェーダーの r uniformが0.5に設定されます。dataはuniformの型と 一致する必要があります。数値、文字列、ブール値、配列、および多くの種類の画像を setUniform()を使用してシェーダーに渡すことができます。

Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/p5.Shader.js and open a pull request!

関連するリファレンス