Hello,
I’m attempting to achieve a specific visual effect in Blender. However, upon exporting the file to gLTF and importing the model into Three.js, the intended effect appears differently during rendering.
Blender model:
Model shading:
Three.js editor output:
The intended effect is meant to start as transparent at the bottom and gradually transition into a solid appearance with a kind of noisy texture. Any suggestions on how I can achieve this?
Simplest solution would be to create a texture and apply it to the material instead of using nodes, which cannot be exported to GLTF. You can create it in Photoshop / other software, add it to the material in Blender, and it should then be exported properly. Or you can create a CanvasTexture or DataTexture by code, draw the colors and alpha that you want, and assign that texture to your material.
Else you would need to write some shader code to achieve that effect.
Agreed with Arthur. Blender’s node graphs don’t export to anything else, so unfortunately there’s little point in making them unless you’re baking to textures. You can also bake them to textures within Blender, lots of youtube tutorials on this. The easiest way (but requires a paid addon) is probably using SimpleBake. Or you can recreate the shader using custom shaders or the node material system in three.js.
In addition to the texture, it looks like you’re using the Alpha Hashed transparency in Blender maybe? If so you’ll need to enable material.alphaHash in three.js, that’s another property that cannot be exported.
In general — if something isn’t documented in Blender’s glTF addon documentation, it’s not going to export outside of Blender. That page is well worth reading in detail.
Thanks both for the good suggestions, I’ll try texture baking to begin with. Btw, is texture baking also beneficial in terms of performance for larger models?
Could go either way on performance — depending on whether your shader is very complex, or the baked texture is huge. Mostly it’s simply unavoidable, if you want to use artist-friendly tools like Blender, which many people understandably do, then materials created there will have to be baked.
Creating procedural materials directly in three.js can reduce download sizes a lot — there are no textures to download! — but it’s more advanced. That’s a tradeoff you’ll have to weigh against what makes you productive, and whether you have enough textures for their size to be a bottleneck.
