-
Notifications
You must be signed in to change notification settings - Fork 379
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vertex Colors #34
Comments
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 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!
The text was updated successfully, but these errors were encountered: