# Add opacity to vertice colors and instanced geometry

**URL:** <https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298>\
**Category:** Resources\
**Tags:** materials, instanced-mesh, geometry\
**Created:** [May 16, 2021, 5:46am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298 "2021-05-16T05:46:36Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [May 16, 2021, 5:46am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/1 "2021-05-16T05:46:36Z")

</div>

Changing these snippets in the library code:

```
var color_fragment = "#ifdef USE_COLOR\n\tdiffuseColor.rgb *= vColor;\n#endif";

var color_pars_fragment = "#ifdef USE_COLOR\n\tvarying vec3 vColor;\n#endif";

var color_pars_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvarying vec3 vColor;\n#endif";

var color_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvColor = vec3( 1.0 );\n#endif\n#ifdef USE_COLOR\n\tvColor.xyz *= color.xyz;\n#endif\n#ifdef USE_INSTANCING_COLOR\n\tvColor.xyz *= instanceColor.xyz;\n#endif";
....
gl.vertexAttribPointer( programAttribute, 3, type, false, 12, 0 );
....
'	attribute vec3 instanceColor;',
'	attribute vec3 color;',

```

to

```
var color_fragment = "#ifdef USE_COLOR\n\tdiffuseColor *= vColor;\n#endif";

var color_pars_fragment = "#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif";

var color_pars_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvarying vec4 vColor;\n#endif";

var color_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvColor = vec4( 1.0 );\n#endif\n#ifdef USE_COLOR\n\tvColor *= color;\n#endif\n#ifdef USE_INSTANCING_COLOR\n\tvColor *= instanceColor;\n#endif";
....
gl.vertexAttribPointer( programAttribute, 4, type, false, 16, 0 );
....
'	attribute vec4 instanceColor;',
'	attribute vec4 color;',

```

makes it possible to use per vertex transparency in meshes (where vertexColor is used) and also apply opacity per instance in instanced meshes.

I haven’t checked all materials but there is an example of instanced and simple mesh:

![opacity_test](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/8/18c21473802a237be9667f54051ce4ae23e31328.jpeg)

[https://jsfiddle.net/tfoller/kyam29g5/12/](https://jsfiddle.net/tfoller/kyam29g5/12/)

With the abovementioned changes made, this is how to provide full color for instanced geometry:

```
mat.transparent = true;
stars.instanceColor = new THREE.BufferAttribute(new Float32Array(color), 4);

```

and for normal geometry:

```
geo2.setAttribute('color', new THREE.Float32BufferAttribute(color2, 4));
mat2.vertexColors = true;
```

---

<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:** [May 16, 2021, 5:30pm UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/2 "2021-05-16T17:30:34Z")

</div>

FYI: Vertex colors with alpha channel for non-instanced geometries was added with `r127`:

> <https://github.com/mrdoob/three.js/pull/20975>
>
> Related issue: Fixed #16403.
> 
> \*\*Description\*\*
> 
> A new shader macro \`USE\_VERTE…X\_OPACITY\` is added to control if the attribute \`color\` is a \`vec3\` or \`vec4\`.
> 
> Corresponding flag in \`Material\` is \`.vertexOpacities\`.
> 
> Does this need a new example? @donmccurdy @mrdoob @Mugen87

However, `InstancedMesh` does not support instanced color attributes with alpha yet.

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [May 16, 2021, 11:14pm UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/3 "2021-05-16T23:14:18Z")

</div>

Oh nice, I’m using 126 and I wasn’t aware of that, even less work left for instances then.

Personally, I’d go with “color” being RGBA and enable/disable the whole shebang, otherwise it’s confusing that `vertexAlphas` actually enables not just alpha on top of `vertexColors` but all the channels and there is no need to use both parameters together. Also less variables and logic required.

---

<div class="post-metadata">

**Author:** ![Displee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/displee/32/32196_2.png) [@Displee](https://discourse.threejs.org/u/Displee)\
**Post date:** [December 31, 2022, 9:28pm UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/4 "2022-12-31T21:28:06Z")

</div>

I’ve created a PR for this: [Add alphas channel for instanced meshes. Update example. by Displee · Pull Request #25211 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/pull/25211)

However, I’m also interested in color per vertex per mesh in an instanced mesh. Am currently figuring out how I will model that…

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [January 1, 2023, 7:47am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/5 "2023-01-01T07:47:45Z")

</div>

> [@Displee](#):
>
> color per vertex per mesh in an instanced mesh

Good question, I have a feeling you can’t use InstancedBufferAttribute and BufferAttribute together, I never tried.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 14, 2023, 2:23am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/6 "2023-01-14T02:23:15Z")

</div>

Vertex alphas are not documented yet at time of writing this. I also didn’t see any example that uses the feature (unless I missed it).

I looked in the source and realized itemSize 4 allows passing RGB for the vertexColors feature.

Here’s an unofficial documentation I just posted:

> <https://stackoverflow.com/questions/24670679/apply-color-to-each-face-vertex-with-opacity-alpha-using-shader-material-three/75115342#75115342>

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [January 14, 2023, 3:14am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/7 "2023-01-14T03:14:19Z")

</div>

@trusktr: And how your documentation is different from what I already posted here?

> [@tfoller](#):
>
> and for normal geometry:
> 
> ```javascript
> geo2.setAttribute('color', new THREE.Float32BufferAttribute(color2, 4));
> mat2.vertexColors = true;
> 
> ```

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 14, 2023, 4:00am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/8 "2023-01-14T04:00:05Z")

</div>

- it is on StackOverflow
- doesn’t instruct to make a custom shader

---

<div class="post-metadata">

**Author:** ![tfoller](https://avatars.discourse-cdn.com/v4/letter/t/3e96dc/32.png) [@tfoller](https://discourse.threejs.org/u/tfoller)\
**Post date:** [January 14, 2023, 4:12am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/9 "2023-01-14T04:12:02Z")

</div>

The solution that I just quoted is exactly your “unofficial documentation” and doesn’t require a custom shader either.

I don’t see any point in copy/pasting my solution back to me in the thread that I opened a year ago.

Posting it on SO doesn’t make it different and I think it’ll be helpful if you linked this thread as the original source there.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 14, 2023, 4:31am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/10 "2023-01-14T04:31:16Z")

</div>

My comment was more-so about mentioning that three.js/docs does not include this information (and a reminder for my self or someone to eventually add them).

---

<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:** [January 14, 2023, 9:35am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/11 "2023-01-14T09:35:03Z")

</div>

> [@trusktr](#):
>
> I also didn’t see any example that uses the feature (unless I missed it).

[webgl\_buffergeometry](https://threejs.org/examples/#webgl_buffergeometry) generates RGBA vertex colors.

Regarding the documentation: Would you guys be okay when we enhance the description for [Material.vertexColors](https://threejs.org/docs/index.html#api/en/materials/Material.vertexColors) like so:

> The engine support RGB and RGBA vertex colors by using a three (RGB) or four component (RGBA) buffer attribute.

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [January 16, 2023, 4:43am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/12 "2023-01-16T04:43:10Z")

</div>

> [@Mugen87](#):
>
> The engine support RGB and RGBA vertex colors by using a three (RGB) or four component (RGBA) buffer attribute.

Sounds nice!

Here’s an alternative:

> The engine supports RGB and RGBA vertex colors depending on whether a three (RGB) or four (RGBA) component buffer attribute is used.

---

<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:** [January 16, 2023, 9:46am UTC](https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and-instanced-geometry/26298/13 "2023-01-16T09:46:17Z")

</div>

> <https://github.com/mrdoob/three.js/pull/25289>
>
> Related issue: https://discourse.threejs.org/t/add-opacity-to-vertice-colors-and…-instanced-geometry/26298/11
> 
> \*\*Description\*\*
> 
> It was suggested in the forum to improve the documentation of vertex colors so it becomes more clear that vertex colors with alphas are supported.