MeshNormalMaterial with lighting and shadow?

normal-material
lights
materials

#1

Is there a MeshNormalMaterial somewhere that shines with light and receives shadow? That’d be cool to use for nice-looking defaults. I tried Three’s MeshNormalMaterial but it doesn’t receive lighting (unless I did something wrong).


#2

No, you did everything correct :blush:. MeshNormalMaterial does not react on lights. It just maps normal vectors to RGB colors. But you can apply the effect to your custom materials with this code.

// assuming normal is vec3
vec3 rgb = normalize( normal ) * 0.5 + 0.5;

Or include the shader chunk packing in your fragment shader and use the function packNormalToRGB().


#3

Thanks @Mugen87. I have no experience modifying or making custom shaders in Three. How would I apply vec3 rgb = normalize( normal ) * 0.5 + 0.5;? How would I include the packing chunk? Which is easier? Do you have a small example?


#4

Maybe this shader is a good example. You see in the fragment shader how the chunk common is included. After that, it’s possible to use the function linearToRelativeLuminance() in the code.

Let’s say you have developed your shader program. If you want to use it in your three.js app as a material, you have to create an instance of ShaderMaterial or RawShaderMaterial with your shader code. The following official example illustrates this workflow:

https://threejs.org/examples/#webgl_shader

Also check the docs for more information.


#5

Okay, maybe later I’ll try this. I don’t have my own shader program. Which seems easier? Copying MeshNormalMaterial’s shader and adding the lighting/shadow bits, or copying another shader (phong?) and adding the packing bits?


#6

Try the latter approach first.