# How to make transparent texture light effect?

**URL:** <https://discourse.threejs.org/t/how-to-make-transparent-texture-light-effect/37067>\
**Category:** Questions\
**Tags:** textures, materials, shaders\
**Created:** [April 14, 2022, 10:39am UTC](https://discourse.threejs.org/t/how-to-make-transparent-texture-light-effect/37067 "2022-04-14T10:39:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alibaverkahraman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alibaverkahraman/32/25381_2.png) [@alibaverkahraman](https://discourse.threejs.org/u/alibaverkahraman)\
**Post date:** [April 14, 2022, 10:39am UTC](https://discourse.threejs.org/t/how-to-make-transparent-texture-light-effect/37067/1 "2022-04-14T10:39:47Z")

</div>

Hello to everyone. I want to give light effect to my transparent texture. I researched this subject and i found solution. i decided to use shader material. But vertex shader and fragment shader is more complicate for me. Can you help me?

**my texture:**

 ![Ekran Resmi 2022-04-14 13.16.33](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/6/b61bc50361137d93a2deb7a9da7c802f1a542f6e.jpeg)

**the effect thats what i want to show you:**

 ![Ekran Resmi 2022-04-14 13.18.00](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/d/6db9300e0632ecf86d7fbad3098ece9169e95923.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 15, 2022, 7:07pm UTC](https://discourse.threejs.org/t/how-to-make-transparent-texture-light-effect/37067/2 "2022-04-15T19:07:21Z")

</div>

Have you considered to place a textured sprite right over the circle and use `AdditiveBlending` to create a simple bloom effect? In this way, you don’t have to implement shader code. The map should be a grayscale, semi-transparent texture. Stuff like that is often used to fake light shafts or rays.

---

<div class="post-metadata">

**Author:** ![alibaverkahraman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alibaverkahraman/32/25381_2.png) [@alibaverkahraman](https://discourse.threejs.org/u/alibaverkahraman)\
**Post date:** [April 17, 2022, 12:17pm UTC](https://discourse.threejs.org/t/how-to-make-transparent-texture-light-effect/37067/3 "2022-04-17T12:17:06Z")

</div>

Firstly, thanks for your answer. But i am new to three.js and i don’t know how can i do this. Can you share me a little code.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [February 28, 2026, 1:43am UTC](https://discourse.threejs.org/t/how-to-make-transparent-texture-light-effect/37067/4 "2026-02-28T01:43:31Z")

</div>

You can actually keep this simple and avoid custom shaders.

It can be done with two parts:

First, a plane (or sprite) that sits flat on the ground using a grayscale, semi-transparent texture. Use **`THREE.SpriteMaterial`** or a **`PlaneGeometry`** with **`transparent: true`** and **`blending: THREE.AdditiveBlending`**. This gives you the soft glow source on the surface.

Second, a cylinder that uses a transparent gradient texture. The gradient should fade from bright at the bottom to fully transparent at the top. Apply it to a **`CylinderGeometry`** with **`transparent: true`** , **`depthWrite: false`** , and **`AdditiveBlending`**. This will look like light being cast upward from the plane sprite.

So visually:

- The plane sprite = the light source glow on the ground

- The transparent gradient cylinder = the vertical light beam

Because both use additive blending and semi-transparent grayscale textures, you get that light effect without writing vertex or fragment shaders.