p5.js shader スタート 4 シェーダーの設定

本稿は「Setting up shaders in p5.js」ページを翻訳したものです。

シェーダーのセットアップ

シェーダーとはどのようなもので、p5 スケッチとは書き方の異なるものだということが分かったので、簡単な例を見ていきましょう。まずはp5.jsコードからです。

まず、p5スケッチでシェーダーを保持する変数を作成します。

let theShader;

次に、シェーダーファイルをプリロードし、シェーダー変数に保持します。スケッチがsetup()とdraw()関数を実行する前にロードする必要があります。シェーダーにはファイルが2つ必要です。これについては後で見ていきます。

function preload() {
    theShader = loadShader('shader.vert', 'shader.frag');
}

そしてsetup()でキャンバスを作成します。p5.jsのシェーダーはWebGLを使ってレンダリングされるので、createCanvas()関数の3つめのパラメータでWEBGLを指定する必要があります。

また次の例のようにnoStroke()を指定すると、シェーダーの枠線がなくなります。

function setup() {
    createCanvas(200, 200, WEBGL);
    noStroke();
}

最後、draw()内で、ビルトインのshader()関数を使ってアクティブなシェーダーを設定し、シェーダーを適用する矩形を作成します(シェーダーはどのシェイプにも適用できます。シェーダーは、コードでシェイプを指定しない限り動作しません)。

function draw() {
    shader(theShader);
    rect(0, 0, width, height);
}
コード全体
// シェーダー用の変数
let theShader;

function preload() {
    // シェーダーをロード
    theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
    // シェーダーはWEBGLモードで動作する
    createCanvas(windowWidth, windowHeight, WEBGL);
    noStroke();
}

function draw() {
    // shader()関数でアクティブなシェーダーをtheShaderに設定する
    shader(theShader);
    // rect()で画面にジオメトリを与える
    rect(0, 0, width, height);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

p5.jsコードは以上です。シェーダーをp5に読み込む方法が分かりました。次はシェーダーの書き方を見ていきます。

リファレンスメモ
loadShader()

カスタムシェーダーを、指定された頂点シェーダーとフラグメントシェーダのパスからロードする。シェーダーファイルはバックグラウンドで非同期でロードされるので、この関数はpreload()内に置くようにする。

現時点で、シェーダーには主に3つのタイプがある。シェーダーに定義されたパラメータと名前が一致する場合、p5は自動的に頂点と法線、カラー、ライト属性を提供する。
シンタックス
loadShader(vertFilename, fragFilename, [callback], [errorCallback])
パラメータ
vertFilename 文字列: 頂点シェーダーソースコードを含むファイルへのパス
fragFilename 文字列: フラグメントシェーダーソースコードを含むファイルへのパス
callback 関数: loadShader()の完了後に実行されるコールバック。成功した場合、最初の引数としてp5.Shaderオブジェクトが渡される(オプション)
errorCallback 関数: loadShader()内のエラー発生時に実行されるコールバック。エラー時には、最初の引数としてエラーがが渡される(オプション)
戻り
p5.Shader: 与えられた頂点シェーダーとフラグメントシェーダファイルから作成されたシェーダーオブジェクト

shader()

shader()関数によって、ユーザーは、WEBGLモードでのシェイプの塗りに使用するカスタムシェーダーが得られる。ユーザーは、頂点とフラグメントのシェーダをloadShader()でロードすることで、独自のシェーダーが作成できる。
シンタックス
shader([s])
パラメータ
s p5.Shader: シェイプのレンダリングに使用するp5.Shader(オプション)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA