# Creating a Gradually Transparent Texture in Blender using Color Ramp for gLTF

**URL:** <https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [January 29, 2024, 11:03am UTC](https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845 "2024-01-29T11:03:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Herant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/herant/32/44258_2.png) [@Herant](https://discourse.threejs.org/u/Herant)\
**Post date:** [January 29, 2024, 11:03am UTC](https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845/1 "2024-01-29T11:03:00Z")

</div>

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:

 ![Skjermbilde 2024-01-29 114933](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/f/cf3d6788e3c73f8d09e508aace160cc325294646.jpeg)

Model shading:

 ![Skjermbilde 2024-01-29 115012](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/2/2239ad15aa81d31c95bfda8e9cf0cb7aea82acc4.png)

Three.js editor output:

 ![Skjermbilde 2024-01-29 115500](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/b/eba3c657daa28d14e80fc86d12d3659eaadae578.png)

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?

---

<div class="post-metadata">

**Author:** ![Arthur](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/arthur/32/22954_2.png) [@Arthur](https://discourse.threejs.org/u/Arthur)\
**Post date:** [January 29, 2024, 3:44pm UTC](https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845/2 "2024-01-29T15:44:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [January 29, 2024, 5:21pm UTC](https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845/3 "2024-01-29T17:21:58Z")

</div>

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](https://blendermarket.com/products/simplebake---simple-pbr-and-other-baking-in-blender-2). 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](https://threejs.org/docs/index.html?q=material#api/en/materials/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](https://docs.blender.org/manual/en/latest/addons/import_export/scene_gltf2.html), it’s not going to export outside of Blender. That page is well worth reading in detail.

---

<div class="post-metadata">

**Author:** ![Herant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/herant/32/44258_2.png) [@Herant](https://discourse.threejs.org/u/Herant)\
**Post date:** [January 29, 2024, 10:24pm UTC](https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845/4 "2024-01-29T22:24:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [January 29, 2024, 10:54pm UTC](https://discourse.threejs.org/t/creating-a-gradually-transparent-texture-in-blender-using-color-ramp-for-gltf/60845/5 "2024-01-29T22:54:07Z")

</div>

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.