XTender Posted October 31, 2017 Share Posted October 31, 2017 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) ? Quote Link to comment Share on other sites More sharing options...
jerome Posted October 31, 2017 Share Posted October 31, 2017 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 Quote Link to comment Share on other sites More sharing options...
XTender Posted October 31, 2017 Author Share Posted October 31, 2017 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? Quote Link to comment Share on other sites More sharing options...
XTender Posted October 31, 2017 Author Share Posted October 31, 2017 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 Quote Link to comment Share on other sites More sharing options...
jerome Posted October 31, 2017 Share Posted October 31, 2017 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. Quote Link to comment Share on other sites More sharing options...
XTender Posted October 31, 2017 Author Share Posted October 31, 2017 That's an idea. But that would bump up the polycount. Actually our designer ment that he kinda like the gradient.so everybody is happy. Thanks for the solution. Quote Link to comment Share on other sites More sharing options...
jerome Posted October 31, 2017 Share Posted October 31, 2017 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.