One of the most common questions when working with PBR materials is: "If my Base Color is a PNG, do I still need an Opacity Map?"
The short answer is: not always. Let's make it simple.
Every image is made of channels
Most images contain three color channels:
- 🔴 Red
- 🟢 Green
- 🔵 Blue
Together, these create the colors you see (RGB).
PNG can have one more channel
Unlike JPG, a PNG can also store a fourth channel called Alpha (RGBA):
- R = Red
- G = Green
- B = Blue
- A = Alpha (transparency)
The alpha channel controls how visible each pixel is:
- ⚪ 255 → fully visible
- ⚫ 0 → completely transparent
- 🔘 between 0 and 255 → semi-transparent
Think of alpha as an invisible mask that tells the renderer which pixels should appear and which should disappear.
Do I need a separate Opacity Map?
It depends.
✅ Case 1 — Base Color PNG already contains alpha
A file like leaf_baseColor.png already contains RGB + alpha. In this case you usually don't need a separate opacity map. In Three.js, simply enable transparency:
const material = new THREE.MeshStandardMaterial({
map: texture,
transparent: true,
});Three.js will automatically use the alpha channel stored inside the PNG.
✅ Case 2 — Base Color is a JPG
A file like wood_baseColor.jpg can't store transparency, so you need a separate opacity map such as wood_opacity.png. In Three.js, assign it to alphaMap:
const material = new THREE.MeshStandardMaterial({
map: baseColor,
alphaMap: opacityMap,
transparent: true,
});What about glTF?
Here's an interesting fact: the glTF 2.0 specification doesn't define a separate opacity texture. Transparency is stored in the alpha channel of the Base Color texture. So most modern glTF assets use a single Base Color (RGBA) texture instead of Base Color + Opacity Map.
A simple way to remember
Think of a texture like a sheet of paper:
- 🎨 RGB decides what color to paint.
- 👻 Alpha decides which parts of the paper actually exist.
Color answers "What does this pixel look like?" Alpha answers "Should this pixel exist at all?"
Understanding this small detail makes it much easier to work with PBR materials, Three.js, Blender and glTF. Sometimes the transparency you're looking for is already hidden inside your Base Color texture.
