Use alpha value from vertex colors in LineMaterial and LineGeometry

[albert-schilling]

Why

Ability to pass an alpha value as fourth vector component to vertex colors in order to paint a line with varying opacity per vertex.

What

Allowed to set the item size for vertex colors in LineGeomtry and LineSegmentsGeometry. Extended the shaders in LineMaterial to be able to use the alpha value from the vertex colors.

Checklist

• [ ] Documentation updated
• [x] Storybook entry added
• [ ] Ready to be merged

There are still some minor issues that should be improved and for which I need some help. E. g. I used a varying vAlpha to pass the alpha value from the vertex shader to the fragment shader. It should be possible to just use the fourth component from the varying vColor as alpha value. But somehow the size of vColor does not properly adapt. It should be a 4 component vector if USE_COLOR_ALPHA is defined, but somehow it isn't.

Any help would be much appreciated.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/three-stdlib/B7wAERGMCY5beH63G381DuoBtwEU
✅ Preview: https://three-stdlib-git-fork-albert-schilling-feat-verte-79e2f7-pmndrs.vercel.app

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e39eb680e5eacc2e7479c66f3d72f996d2db5c55:

Sandbox	Source
Vanilla	Configuration

[CodyJasonBennett]

I think I'll have to rebase this and use an alpha define. three.js built-in defines and shader magic are very much internal and unstable, the defines in question come from:

• https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLPrograms.js#L276

[albert-schilling]

@CodyJasonBennett Thanks for reviewing the PR (after it sat there for a long time untouched and sad ;) ) Have you reimplemented the feature in another way?

[CodyJasonBennett]

None other than https://github.com/pmndrs/meshline no. The above USE_COLOR_ALPHA defines only apply to vertexColors which three now automatically enables if colors have a length of four or greater. We can't leverage this with custom instanced attributes and have to do so manually.

[albert-schilling]

Okay, thanks for the explanation!

[CodyJasonBennett]

Implemented in #335.