Using a shader as procedural normal map

Questions
, ,
1

Hey everyone, to my knowledge you can only use normal maps in threejs by loading an image, and then using the normalMap attribute inside any texture you like.

You can also load shader textures using the ShaderMaterial.

Is there a way to load a shader as a normal map, or otherwise use it as some form of displacement? I’ve seen examples on stack overflow and the forums of using shaders to calculate tangents, but they don’t seem to directly execute shaders and use the output as normal maps.

2

You can use a custom shader to render a normal map into a render target and then use renderTarget.texture as the input for the material’s normal map property.

3 Likes
3

Hmmmm… so if my shader is animated (changing with time) and I wanted my normal/height maps to change, I would have to render the shader to a target and then change my material’s map in the animation frame? Hopefully that doesn’t make my animation really slow…