Overwrite PhysicalMaterial´s color fragment include

Questions
1

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

2

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
3

Thanks @prisoner849! That´s exactly what I needed…

4

@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?

5

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