Vertex Colors about three.meshline HOT 8 OPEN

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.

from three.meshline.

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

from three.meshline.

Is there some quick fix, workaround?

from three.meshline.

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.

from three.meshline.

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();
	
}

from three.meshline.

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.

from three.meshline.

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

from three.meshline.

@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?

from three.meshline.