Simplest way to apply lambert shading to custom shader?

Questions
1

I have my own ShaderMaterial which currently has flat shading. I would like to apply the same shading as the one THREE’s MeshLamberMaterial uses on top of my custom shader.

What is the simplest way to achieve this? I did some search on SO and the provided “solutions” seem too complicated or not robust enough for me to try in my own setting.

If there is a way to simply “plug-n-play” lamber shading on top of a custom shader, please let me know!!

Thank you

Edit 1:

I am currently initializing my ShaderMaterial like below

const myVertexShader = `
 // some vertex shader code
`;

const myFragShader = `
  // some frag shader code
`;

const myUniforms = THREE.UniformUtils.merge([
  THREE.UniformsLib['lights'], // does this include lambert shading..?
  {
    // some custom uniforms
  },
]);

const myAwesomeMaterial = new THREE.ShaderMaterial({
  vertexShader: myVertexShader,
  fragmentShader: myFragShader,
  uniforms: myUniforms,
  lights: true,
});
2

The answer of this SO question provides a good overview about different approaches you can use.

It’s important to know that the three.js material system was not designed for easy enhancements of custom shader code. Meaning you have to study the system, the respective shader chunks and their semantics so you are able to enhance a custom material with shader code from the built-in materials. There is no simple “plug and play” mechanism.

2 Likes
3

@Mugen87 Thank you for the reply!