Guide to migrating shaders from Blender to Three.js

Hey everyone!

I’ve just posted an article about some recent work I did to migrate shader materials from Blender to three.js. You can read it here,

Hope it’s of use to somebody out there!

Very keen to also hear constructive feedback on the article. Did I miss anything? Get anything wrong? I tried to balance useful info without waffling on about stuff you can easily Google.

Cheers!

5 Likes

This is awesome.

I think the title doesn’t do it justice: “How to implement Blender Principled BSDF Materials”
since the blender GLTF exporter handles the minimum Principled BSDF by default, but what you’re doing is more advanced/involved.

Maybe something more like… “How to translate Blender node materials to THREEJS Shader Materials.” ?

Article was pretty well written. It drifted a bit towards the end where you were talking more about the modelling process.

I was also left wondering if some of this could be adapted to modifying the built in materials themselves, like standard/basic/physical materials, via shader injection?

You could write a side export that exported the material graphs… myModel.shaders.json or something…
Then a loader that loaded that graph and applied them to an existing material like MeshStandardMaterial? That way you inherit the full functionality of those materials like shadowmapping and all the extra stuff they do, and could possibly save yourself a bunch of the boilerplate code you need for ShaderMaterial?

Overall thought, great resource and good work… has my gears spinning. These techniques could unlock a lot of power between blender/threejs.

Plz don’t take my advice as criticism! It’s all just got me thinking. :slight_smile:

3 Likes

Thank you @manthrax! I kinda wrote the title for SEO as well, tried to think what I would search for if I wanted info on this topic.

Really good idea making the materials configuration exportable from Blender and then importing it on the other side, definitely something to look into when the material library starts to grow!

If I end up writing a separate article on procedurally generating mesh geometry I might split off that extra bit of content about CSG etc, but I’m happy with it in this article for now as it was part of the story, so to speak hehe.

1 Like

Thanks, that’s an interesting article - unfortunately difficult to read on the page (font too small, light font dark background).

Thanks for the feedback @agrafikr!

I’m on 4K and agree the font is definitely on the smaller side.

Haven’t thought about offering a light mode but if it helps accessibility I’ll definitely look into it.