リファレンス baseMaterialShader()

baseMaterialShader()

この API は実験中です

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

ライト、マテリアル、テクスチャで使用されるデフォルトのシェーダーを取得します。

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

フック説明

void beforeVertex

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

vec3 getLocalPosition

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

vec3 getWorldPosition

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

vec3 getLocalNormal

変換が適用される前に法線を更新します。vec3 normalを受け取り、 修正されたバージョンを返す必要があります。

vec3 getWorldNormal

変換が適用された後に法線を更新します。vec3 normalを受け取り、 修正されたバージョンを返す必要があります。

vec2 getUV

テクスチャ座標を更新します。vec2 uvを受け取り、 修正されたバージョンを返す必要があります。

vec4 getVertexColor

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

void afterVertex

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

void beforeFragment

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

Inputs getPixelInputs

マテリアルのピクセルごとの入力を更新します。Inputs構造体を受け取ります。 これには以下が含まれます:

  • vec3 normal、表面から外向きに指す方向
  • vec2 texCoordxyが0から1の間の値で、 ピクセルがマッピングされるテクスチャ上の位置をテクスチャサイズの割合として表すベクトル
  • vec3 ambientLight、頂点の環境光の色
  • vec4 color、ピクセルの基本マテリアル色
  • vec3 ambientMaterial、環境光の影響を受けた時のピクセルの色
  • vec3 specularMaterial、鏡面ハイライトを反射する時のピクセルの色
  • vec3 emissiveMaterial、ピクセルが発する光の色
  • float shininess、鏡面反射がどれだけ鋭くなるべきかを表す1から無限大までの数値
  • float metalness、マテリアルがどれだけ鏡のようであるべきかを表す0から1までの数値 構造体は修正して返すことができます。

vec4 combineColors

光の異なる成分をすべて含むColorComponents構造体を受け取り、 それらを1つの最終的な色に結合します。構造体には以下が含まれます:

  • vec3 baseColor、ピクセルの基本色
  • float opacity、描画される不透明度(0から1の間)
  • vec3 ambientColor、環境光の影響を受けた時のピクセルの色
  • vec3 specularColor、鏡面反射の影響を受けた時のピクセルの色
  • vec3 diffuse、ピクセルに当たる拡散光の量
  • vec3 ambient、ピクセルに当たる環境光の量
  • vec3 specular、ピクセルに当たる鏡面反射の量
  • vec3 emissive、ピクセルが発する光の量

vec4 getFinalColor

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

void afterFragment

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

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

baseMaterialShader().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!

関連するリファレンス