XTender

Assign different materials to different parts of RIbbon

Recommended Posts

I generate a Ribbon from a path array which looks like in the attached image.

I assign a single color material to the mesh, now I would like to add an another material/color to the center "strip".

How can I achieve it. or did I have to create 3 separate paths (left , center, right) ?

 

trackwireframe.png

Share this post


Link to post
Share on other sites

You can use different parts of a same texture ans assign them manually to the ribbon vertices with the parameter uvs what is a flat array of Vector2 (one doublet (u,v) per vertex) : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L130

You can also set different colors to each ribbon vertex with the parameter colors what is a flat array of Color4 (one color4 per ribbon vertex) :

https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L131 

Share this post


Link to post
Share on other sites

We didn't use a Texture just plain colors.

I tried the second approach, did I have to predefine the VertexColor for every vertex?

So i have to "precalculate" how many vertices I will get?

Also didn't I get unwanted "gradients" from the center stripe to the outer vertices?

Share this post


Link to post
Share on other sites

Ok I think i got it. but it would be nice to know if it is possible to get rid of the "gradient" I know that it's just a vertex color which affects all surrounding faces but maybe there is a solution which is not too complicated :)

 

Bildschirmfoto 2017-10-31 um 15.08.23.png

Share this post


Link to post
Share on other sites

Actually the triangle (facet) colors are interpolated between two vertices, that why you've got this gradient between the grey vertex and the next red one. If you don't wan't this gradient, well, just add the required paths (vertices) each holding the grey and the red colors on the same positions.

Share this post


Link to post
Share on other sites

yep about the polycount although it might be not that important ... If you care about this, you could also keep in memory the whole path data, then create a smaller ribbon (say, the visible part only) and update it from the data with the camera movement

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.