Open rankinstudio opened 7 years ago
There could be vertex colors, yes. I'm adding it to the enhancements list.
Is there some quick fix, workaround?
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.
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.
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();
}
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.
FYI, I resolved my issue with map and alpha map. Thanks for this great library!
@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?
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!