Imitating StandardMaterial lights in ShaderMaterial

Hello,

Is there a thorough guide on how to make lights work on ShaderMaterial? I’ve been searching and found quite many topics on it but none of them actually achieve anything useful since topics were old and threejs is changed much since.

I want to imitate how StandardMaterials work but want to do it in my own shader, I do some texture mixing and coloring in there but the end result is just plan texture and colors.

I read about adding THREE.UniformsLib['lights'] to uniforms and setting lights: true in ShaderMaterial. Did those, but still I cannot observe any changes as if I have no lights added to the scene.

I’d be glad if someone could lead me to a working example that I could not find out about yet, thank you!

2 Likes

Many existing resources in the web do not respect the relatively new Material.onBeforeCompile(). This method allows you to overwrite/enhance existing materials. In many use cases it’s the easiest way to implement a custom shader that should utilize library features like lighting. Especially if only minor additions are necessary. The official example for this API looks like so:

https://threejs.org/examples/webgl_materials_modified

Could you imagine to work with this approach?

1 Like

Thank you so much! This might actually be the solution for me, once tested i’ll post an update here.

1 Like

I tried including a uniform texture to the shader using shader.uniforms.texture_a = { type: "t", value: textureLoader.load( 'assets/images/texture.jpg' ) }; however it appears not to be in the final shader and I get compile error since I tried using it in the shader. I guess the example edits already existing time value.

EDIT: My bad, expected it to include the added uniform to shader itself.

Hi, i wrote an article on this topic a while ago that you might find useful. I’m having trouble sharing the link, but googling extending threejs materials glsl should yield it as the first result.

edit

4 Likes