Hi, I want to overwrite Threejs´s PhysicalMaterial color_fragment #include, well, theoretically that´s the plan. But…
If I do:
console.log( THREE.ShaderLib.physical.fragmentShader )
I see the physical-material´s fragmentShader, correct?
Reading the console.log, I see then #include <color_fragment>
This part I 1.) want to see what´s written/included there and 2.) overwrite…
Somehow I´m stuck here of how to do that.
Any help/tipps is/are highly appreciated!
Thanks
b
Hi!
What’s written there: three.js/color_fragment.glsl.js at 0c5b9b7e4caffa17765e242f4dacfd191f58cb3d · mrdoob/three.js · GitHub (the other shader chunks are in the same folder).
How to overwrite:
material.onBeforeCompile = shader => {
shader.fragmentShader = shader.fragmentShader.replace(
`#include <color_fragment>`,
` _your_shader_code_here_ `
);
}
Also, a very useful addon: Chainable onBeforeCompile + Uniforms per Mesh
1 Like
Thanks @prisoner849! That´s exactly what I needed…
@prisoner849 one additional question, if I want to add some functions before material´s fragment "void main() {"
, how to achieve that with the onBeforeCompile as well?
Do the same with .replace()
material.onBeforeCompile = shader => {
shader.fragmentShader = shader.fragmentShader
.replace(
`void main() {`,
`
float some_function (){
// do something
}
void main() {
`
)
.replace(
`#include <color_fragment>`,
` _your_shader_code_here_ `
);
}
1 Like