Three.js: Adjusting opacity / size of particles and lines

Created on 27 Jun 2011  ·  11Comments  ·  Source: mrdoob/three.js

I have a particle system and a line. I can easily set the colour of each vertex and edge in my line by creating a colors array and seting VertexColors to true. My question is How can I adjust the a) opacity b) size of each vertex / edge individually in my particle system / line.

Thanks!

Zenna

Question

Most helpful comment

@WestLangley I see. thanks for the info!

on the other hand it would be nice if this can be done in JS, especially for people who are not familiar with the shader language, including me. thanks all the same though!

All 11 comments

I, too, would like to know this.

geometry.colors is an array mapping 1 by 1 the vertices. So if you want to change the color of geometry.vertices[ 1 ] you need to modify geometry.colors[ 1 ].

Hi mrdoob.

geometry.colors[1] would be a Three.color. I can happily change the color, but as far as I know the opacity value is not stored there. So how can I change the opacity of single vertices / lines?

Uh oh...

You cannot do this easily, opacity is specified per material not per element. We dropped alpha from Color some time ago.

One possible way would be via custom attributes and custom MeshShaderMaterial where you would have 4-component colors.

The same thing for sizes, there is currently no way to change them per-particle or per-line with default attributes and materials. You would need another attribute stream for size and then have custom material which would use this.

Now I can't remember why we decided to remove alpha from Color...

I don't remember either, I was able to find this:

https://github.com/mrdoob/three.js/commit/dc6e335dc9f7f38f1c79a5a6c112019d6fcce69d

Seems like hex colors with alphas were making troubles. Now, with more dependencies in asset pipeline, I guess it would be even more painful.

being able to specify opacity per vertex would be very useful for doing particle systems.

is there any plan for supporting this in a future release?

I'm not sure what the technical difficulty is here. intuitively, having something like geometry.opacityValues seems a backward-compatible, non-intrusive way of supporting this. there can also be a global pointsMaterial.vertexOpacityValues flag to disable this support if not needed or causing troubles, just as the case for vertex colors.

@quyin You can do what you want with a custom ShaderMaterial. See stackoverflow if you need help.

@WestLangley I see. thanks for the info!

on the other hand it would be nice if this can be done in JS, especially for people who are not familiar with the shader language, including me. thanks all the same though!

Was this page helpful?
0 / 5 - 0 ratings