Insert glsl inside material shaders [phong, lambert, standard, ...]

[sasha240100]

Just an idea that I would love to see in three.js. Let's say I want to slightly edit MeshPhongMaterial and apply that changes.

What I need to do now:

1. Go to three.js github
2. Search for vertexShader & fragmentShader in ShaderChunk. Find this
   • Make a copy of fragmentShader into my shader.
   • ...or even vertexShader
3. Search for uniforms in ShaderLib. like this
4. Make a new ShaderMaterial and apply those uniforms, vertexShader & fragmentShader...
5. Finally edit my copied vertexShader/fragmentShader.
6. Even more: I need to enable fog/lights as it is on Phong material.
7. If I want to use map: I need to define USE_MAP for my new shader material.

Those things require copying/modifying existing .glsl, copying and filling uniforms and finally setting such uncommon things (6, 7).

And my question is what if we could make this process less complex? How about making "key" parts in shaders (those which we often modify/add something). And a way to fill them with some other glsl through material constructor like this or just make those chunks replacable:

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  map: texture,

  parts: {
    frag: {
      map_pars_fragment: `
        uniform sampler2D map;
        uniform sampler2D map2;
     `,

      map_fragment: `
        vec4 texelColor = texture2D( map, vUv );
        vec4 texelColor2 = texture2D( map2, vUv );

	texelColor = mapTexelToLinear( 
          mix( texelColor, texelColor2, progress)
        );

	diffuseColor *= texelColor;
      `
    }
  }
});

material.uniforms.progress = {value: 1};
material.uniforms.map2 = {value: texture2};

Three.js version

• Dev
• r85
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[mrdoob]

Isn't this the same as #11475?

[sasha240100]

@mrdoob lol, haven't seen it yet. Same idea:D, different concept

[sasha240100]

@mrdoob onBeforeCompile can be powerful, but replaceable chunks are easier to use, not?

[mrdoob]

Lets move the conversation there then 🙂

[sasha240100]

@mrdoob Okay, I'll post my concept to that issue. Feel free to close this one now as it is a duplicate.