リファレンス baseStrokeShader()

baseStrokeShader()

この API は実験中です

p5.js の将来のバージョンで動作が変更される可能性があります。

図形のストロークを描画する際に使用されるシェーダーを取得します。

baseStrokeShader().modify() を呼び出して、以下のフックのいずれかを変更できます:

フック説明

void beforeVertex

頂点シェーダーの開始時に呼び出されます。

vec3 getLocalPosition

変換が適用される前に頂点の位置を更新します。vec3 positionを受け取り、 修正されたバージョンを返す必要があります。

vec3 getWorldPosition

変換が適用された後に頂点の位置を更新します。vec3 positionを受け取り、 修正されたバージョンを返す必要があります。

float getStrokeWeight

ストロークの太さを更新します。float weightを受け取り、 修正されたバージョンを返す必要があります。

vec2 getLineCenter

線の中心を更新します。vec2 centerを受け取り、 修正されたバージョンを返す必要があります。

vec2 getLinePosition

線の端にある各頂点の位置を更新します。vec2 positionを受け取り、 修正されたバージョンを返す必要があります。

vec4 getVertexColor

各頂点の色を更新します。vec4 colorを受け取り、 修正されたバージョンを返す必要があります。

void afterVertex

頂点シェーダーの終了時に呼び出されます。

void beforeFragment

フラグメントシェーダーの開始時に呼び出されます。

Inputs getPixelInputs

シェーダーへの入力を更新します。構造体Inputs inputsを受け取ります。 これには以下が含まれます:

  • vec4 color、ストロークの色
  • vec2 tangent、スクリーン空間でのストロークの方向
  • vec2 center、スクリーン空間のp5.jsピクセルでのストロークの中心座標
  • vec2 position、スクリーン空間のp5.jsピクセルでの現在のピクセルの座標
  • float strokeWeight、p5.jsピクセルでのストロークの太さ

bool shouldDiscard

キャップとジョインは、フラグメントシェーダーで不要な領域を削除するために破棄されたピクセルによって作成されます。 この論理を変更するには、これを使用します。bool willDiscardを受け取り、 修正されたバージョンを返す必要があります。

vec4 getFinalColor

ミキシング後の最終的な色を更新します。vec4 colorを受け取り、 修正されたバージョンを返す必要があります。

void afterFragment

フラグメントシェーダーの終了時に呼び出されます。

ほとんどの場合、フックはGLSL ESバージョン300で記述する必要があります。 WebGL 2の代わりにWebGL 1を使用している場合は、代わりにGLSL ES 100でフックを記述してください。

baseStrokeShader().inspectHooks()を呼び出すと、可能なすべてのフックと それらのデフォルト実装を確認できます。

実例

リターン

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!

関連するリファレンス