この API は実験中です
p5.js の将来のバージョンで動作が変更される可能性があります。
このシェーダーで利用可能なフックとその現在の実装をログに記録します。
各シェーダーでは、その動作の一部を上書きすることができます。各部分は フックと呼ばれます。フックは、頂点の位置に影響を与える場合は頂点シェーダー用、 ピクセルの色に影響を与える場合はフラグメントシェーダー用です。 このメソッドはそれらの値をコンソールに記録し、 modify()
の呼び出しで 使用できるものを知ることができます。
例えば、このシェーダーは以下の出力を生成します:
myShader = baseMaterialShader().modify({
declarations: 'uniform float time;',
'vec3 getWorldPosition': `(vec3 pos) {
pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
return pos;
}`
});
myShader.inspectHooks();
==== 頂点シェーダーフック: ====
void beforeVertex() {}
vec3 getLocalPosition(vec3 position) { return position; }
[MODIFIED] vec3 getWorldPosition(vec3 pos) {
pos.y += 20. * sin(time * 0.001 + pos.x * 0.05);
return pos;
}
vec3 getLocalNormal(vec3 normal) { return normal; }
vec3 getWorldNormal(vec3 normal) { return normal; }
vec2 getUV(vec2 uv) { return uv; }
vec4 getVertexColor(vec4 color) { return color; }
void afterVertex() {}
==== フラグメントシェーダーフック: ====
void beforeFragment() {}
Inputs getPixelInputs(Inputs inputs) { return inputs; }
vec4 combineColors(ColorComponents components) {
vec4 color = vec4(0.);
color.rgb += components.diffuse * components.baseColor;
color.rgb += components.ambient * components.ambientColor;
color.rgb += components.specular * components.specularColor;
color.rgb += components.emissive;
color.a = components.opacity;
return color;
}
vec4 getFinalColor(vec4 color) { return color; }
void afterFragment() {}
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/p5.Shader.js and open a pull request!