How to color mesh vertices with (r,g,b,a)?

[georgeneil]

THREE.Geometry.colors are accepting only (r,g,b). I really need to render vertices with color in the format (r,g,b,a), where a = alpha/transparancy component.

Is there any workaround ?

What i need is, in the following example is it possible to make few of the balls fully transparent ?
http://mrdoob.github.com/three.js/examples/webgl_particles_billboards_colors.html

[mrdoob]

It's not supported at the moment, but I've heard of other people needing RGBA vertex colors. I guess we'll have to tackle this eventually.

[alteredq]

You can do this using custom attributes and custom ShaderMaterial, just use Vector4 instead of Color.

[georgeneil]

@alteredq , can you please provide us a jsfiddle, how to modify the following example to use Vector4 instead of Color
http://mrdoob.github.com/three.js/examples/webgl_particles_billboards_colors.html

[alteredq]

Just check this example:

http://mrdoob.github.com/three.js/examples/webgl_custom_attributes_particles.html
https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes_particles.html

and change customColor attribute to use Vector4 in JavaScript side:

attributes = {

   // ...

    customColor: { type: 'v4', value: [] }

   // ...

};

var values_color = attributes.customColor.value;

for( var v = 0; v < vertices.length; v++ ) {

    // ...

    values_color[ v ] = new THREE.Vector4();

    // ...

}

It's up you how you want to fill-in these Vector4 values with RGBA, you could do it directly, or you could for example have some temp Color variable and set first three components from it (if you need Color API for something).

And on shader side just replace vec3 with vec4:

// vertex shader

attribute vec4 customColor;

varying vec4 vColor;

// fragment shader

varying vec4 vColor;

void main() {

    gl_FragColor = vColor;

    // ...

}

[pavelvasev]

Why did you close this? Still good feature..

[zfedoran]

+1 This should be supported through THREE.Color

[WestLangley]

There is a long history here. See #6014 and follow the links.

[DarrenCook]

+1
I was hoping to do something like: http://jsfiddle.net/FtML5/3/ but using vertexColor (which I'm already using) instead of having to make a canvas texture for just this case.
Would the shader hacks, described by alteredq still work?

(BTW, my use case is minor: mainly to see if it can be done - I have a 3D chart demo, done years ago in Flash, that uses an opacity gradient. So if supporting this feature increased CPU or memory requirements for everyone else, then I think it is not worth it.)