Three-extended-material - extend native threejs material with modular effects

Resources
, , ,
1

Hi all, thought I’d share this little library I wrote and used for a couple production projects: https://github.com/leoncvlt/three-extended-material

Sometimes I 'm happy with the appearance / functionality of a default three.js material, but need some additional effects (for example dithered transparency or a fresnel-based glow). This library allows me to define these “extensions” as modular units, and add them to a three.js material as needed.

A quick demo: Extended Material

I know there’s already a couple of “material extensions” library out there, but they seem to do a lot of heavy lifting by using a completely custom ShaderMaterial and copying all relevant properties over. My approach extends the original Material class and patches the shader, so everything should “just work”. Happy to hear feedback from any three.js expert about the potential disadvantages of this approach :slight_smile:

12 Likes
2

Great work leoncvlt. This is awesome and will help a lot to make the code cleaner and help the community. Congratulation :clap::clap::clap:

My actual challenge is to modify the meshPhysicalMaterial to suport a wave animation like a ocean. I found one, but it is using react three fiber.https://0lg38.sse.codesandbox.io/

I dont know where to insert the injection because I want the animation and vertex distortion, but also want to keep all the properties from default physical material, creating custom colors for wave high.

I think your extended material will help particularly on this. I only need to find were I need to modify it.

Thanks a lot for sharing it :v::clap: