Vertex Colors

[rankinstudio]

Does this support vertexColors? I have a circle that uses vertexColors to assign different colors based on if z is positive or negative. Is this possible using MeshLine?

Thanks!

[spite]

There could be vertex colors, yes. I'm adding it to the enhancements list.

[skotin]

Is there some quick fix, workaround?

[spite]

Well, it's basically adding a new BufferAttribute, like the others, and reading it in the shader. What I need is time to code it. I'm pretty swamped right now, will try to do it ASAP.

[Clotoo]

I made a quick and dirty solution for myself, if you want.

I'm not familiar enough (yet) with ThreeJS and shaders stuff to make a proper implementation and pull request, so I'll just post a diff here.

It uses two arrays from the passed Geometry object : colors and vertexAlpha. Geometry.colors already exists but geometry.vertexAlpha is a custom one to add. Both are mandatory and must be the same length as vertices array. Using setGeometry with an array (instead of a geometry) isn't supported. As mentioned, it was just a quick and dirty solution for myself. But it shouldn't be too hard to rework for a slightly different use case.

$ diff THREE.MeshLine.org.js THREE.MeshLine.js
23a24,25
>       this.colors = [];
>       this.alphas = [];
35a38,39
>       this.colors = [];
>       this.alphas = [];
44a49,52
>                       this.colors.push(g.colors[j].r, g.colors[j].g, g.colors[j].b);
>                       this.colors.push(g.colors[j].r, g.colors[j].g, g.colors[j].b);
>                       this.alphas.push(g.vertexAlpha[j]);
>                       this.alphas.push(g.vertexAlpha[j]);
154c162,164
<                       counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 )
---
>                       counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 ),
>                       colors: new THREE.BufferAttribute( new Float32Array( this.colors ), 3 ),
>                       alphas: new THREE.BufferAttribute( new Float32Array( this.alphas ), 1 ),
179a190,191
>       this.geometry.addAttribute( 'colors', this.attributes.colors );
>       this.geometry.addAttribute( 'alphas', this.attributes.alphas );
257a270,271
> 'attribute vec3 colors;',
> 'attribute float alphas;',
287c301,303
< '    vColor = vec4( color, opacity );',
---
> //'    vColor = vec4( color, opacity );',
> '    vColor = vec4( color*colors, opacity );',
> '    vColor.a *= alphas;',

NOTE: I don't think alpha actually works as float opacity. I use the alpha myself only with 0 or 1 values, to make a segment either visible or invisible. It also requires setting alphaTest=0.5 (or so) in MeshLineMaterial options.

[jjxtra]

Performance boost...

MeshLine.prototype.addSegment = function( p, c, a ) {
	
	this.positions.push( p.x, p.y, p.z );
	this.positions.push( p.x, p.y, p.z );
	this.colors.push(c.r, c.g, c.b);
	this.colors.push(c.r, c.g, c.b);
	this.alphas.push(a);
	this.alphas.push(a);

}


MeshLine.prototype.finishSegments = function() {
	
	let end = this.positions.length / 2;
	for( var j = 0; j < end; j++ ) {
		var c = j / end;
		this.counters.push(c);
		this.counters.push(c);
	}
	this.process();
	
}

[cihadturhan]

Just wanted to ping this because vertexColors is what I needed.

I tried to use line2 but it creates instanced material and for every vertex color it creates excessive number of array attributes which I can't use to animate easily. I have 300 points, and it creates colorsStart with 1800 items = 300 * 3 (rgb) * 2 (don't know why) and colorsEnd with 1800 items = 3600 items so it's animatable for every frame.

I know it's better to create material and animate on the gpu but it's fairly time-consuming at the moment so I'll try the update above.

[cihadturhan]

FYI, I resolved my issue with map and alpha map. Thanks for this great library!

[AndrewJSchoen]

@RenaudRohlinger, given that you have a working fork of this that is maintained (#140), would it still be possible to add such a capability as described above, or would these changes be incompatible with your version?