leechii Posted August 15, 2017 Share Posted August 15, 2017 Hey guys - haven't found what I needed so far so I hope it's not a duplicate. I'd like to create a custom shape in "2D" with a gradient. This playground shows the shape I currently have https://www.babylonjs-playground.com/#E6IX1#122 instead of just having an emissiveColor I wanted to add a gradient. I so far figured out that if I'd use multiple paths to create a sphere for example and omit the z-coordinate the lights would be applied. What is the way to go if I want to have a gradient? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 16, 2017 Share Posted August 16, 2017 Hello! you can add vertex colors to your ribbon by using the MeshBuilder directly: https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L137 (See line #198: https://www.babylonjs-playground.com/#1OZ25Q#1) leechii and JackFalcon 2 Quote Link to comment Share on other sites More sharing options...
jerome Posted August 16, 2017 Share Posted August 16, 2017 yep : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.meshBuilder.ts#L131 http://doc.babylonjs.com/classes/3.0/meshbuilder#static-createribbon-name-options-scene-rarr-mesh-classes-3-0-mesh- I should add this in the ribbon documentation also btw, I like your weird shape... playing with it : https://www.babylonjs-playground.com/#E6IX1#123 the same with 2 paths (so simpler) : https://www.babylonjs-playground.com/#E6IX1#124 the same with colors (and a light) : https://www.babylonjs-playground.com/#E6IX1#125 can't stop playing when it's about geometry ;-D https://www.babylonjs-playground.com/#E6IX1#126 Quote Link to comment Share on other sites More sharing options...
leechii Posted August 16, 2017 Author Share Posted August 16, 2017 thanks already for your answers, I tried that quickly and it seems that I'm missing something.https://www.babylonjs-playground.com/#E6IX1#127 as soon as I add the colors to the options, the mash disappears. I hope you can quickly help me again. What I figured out so far: If I add a second path and scale that to 0 (like in the example below) and therefore add the double amount of colors it works. I guess that's because only like that the vertex outer ring color differs to the inner ring color and therefore a gradient applied (correct me if I'm wrong) But think I have to further specify what I actually want to achieve: I got now how I could do it with the lights applied: https://www.babylonjs-playground.com/#E6IX1#128 but I'd also like to know how I can apply such a gradient without the influence of the light / as if we had an emissiveGradient. thanks again. Quote Link to comment Share on other sites More sharing options...
jerome Posted August 16, 2017 Share Posted August 16, 2017 If you pass a single path in the pathArray, the underlying process cut this path into two half sized paths and build the ribbon with these two paths : https://www.babylonjs-playground.com/#E6IX1#126 The color array must contain exactly the same number of color4 than the ribbon points. I suppose that, in this case, the number of color4 is different than the the number of points. For no light, just apply a white emissive color and the vertex colors will simply be merged to it : https://www.babylonjs-playground.com/#E6IX1#130 Remember also that, if you set the ribbon as DOUBLESIDED, it has then twice more points, so twice more colors to set : https://www.babylonjs-playground.com/#E6IX1#131 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
leechii Posted August 16, 2017 Author Share Posted August 16, 2017 Hm I guess I'm more looking for something like that: https://www.babylonjs-playground.com/#E6IX1#135 but with the API of this: https://www.babylonjs-playground.com/#E6IX1#137 maybe this can be altered so it becomes something like the above (135) - sorry for being a noob - I'll get better soon I guess I'm looking for something like we have in Photoshop for 2D images - different kind of gradients: radial, linear etc. Quote Link to comment Share on other sites More sharing options...
jerome Posted August 16, 2017 Share Posted August 16, 2017 remember also that the colors are updatable like the mesh geometry : https://www.babylonjs-playground.com/#E6IX1#138 (could be fixed for the last remaining points, but it's only as an example purpose) can't stop playing : https://www.babylonjs-playground.com/#E6IX1#139 [EDIT] the gradient material is nice but works only along the Y axis Quote Link to comment Share on other sites More sharing options...
leechii Posted August 16, 2017 Author Share Posted August 16, 2017 a good to know we can also update the colors Quote the gradient material is nice but works only along the Yaxis: how could we create one along the X axis? was just trying to figure that out in my mind but with the ribbons and multiple paths (scaled), I'll always only reach radial gradients. I guess creating the right path might be a solution - instead of just scaling it down I could calc the middle and add the right vertex colors there - but I guess I'm wrong there too since - the color on the outer left part should be more intense and become less intense going to the right. If you have a good approach - I'd be very interested. Quote Link to comment Share on other sites More sharing options...
jerome Posted August 16, 2017 Share Posted August 16, 2017 alpha fun : https://www.babylonjs-playground.com/#E6IX1#141 Quote Link to comment Share on other sites More sharing options...
jerome Posted August 17, 2017 Share Posted August 17, 2017 uvs fun : https://www.babylonjs-playground.com/#E6IX1#149 Quote Link to comment Share on other sites More sharing options...
leechii Posted August 17, 2017 Author Share Posted August 17, 2017 what I actually wanted https://www.babylonjs-playground.com/#QS8RP8#4 Quote Link to comment Share on other sites More sharing options...
jerome Posted August 17, 2017 Share Posted August 17, 2017 q&d simpler attempt : https://www.babylonjs-playground.com/#QS8RP8#5 santarcade 1 Quote Link to comment Share on other sites More sharing options...
santarcade Posted August 17, 2017 Share Posted August 17, 2017 I didn't know too about update-able vertex color and uvs. Lovely discovery that should be added in the docs and tutorials maybe. To achieve something similar, I did write a custom shader! Thank you! leechii 1 Quote Link to comment Share on other sites More sharing options...
jerome Posted August 17, 2017 Share Posted August 17, 2017 A custom shader is probably the best way to go. Playing with UVs is just easier ... other UVs examples : https://www.babylonjs-playground.com/#E6IX1#150 https://www.babylonjs-playground.com/#E6IX1#151 https://www.babylonjs-playground.com/#E6IX1#152 https://www.babylonjs-playground.com/#E6IX1#153 santarcade and leechii 2 Quote Link to comment Share on other sites More sharing options...
leechii Posted August 17, 2017 Author Share Posted August 17, 2017 51 minutes ago, santarcade said: I didn't know too about update-able vertex color and uvs. Lovely discovery that should be added in the docs and tutorials maybe. To achieve something similar, I did write a custom shader! Thank you! do you still have that shader? :} Quote Link to comment Share on other sites More sharing options...
santarcade Posted August 18, 2017 Share Posted August 18, 2017 Hey @leechii, here it is a sample I used on a ribbon, creating a linear gradient via UVs: http://www.babylonjs-playground.com/#1YHPOU#7 It can take an input color or sample the passed texture (for that uncomment lines 67 and 68). Applied to you shape it looks like this: http://www.babylonjs-playground.com/#1YHPOU#9 My goal was to make a fadeout near the head and tail of my shape, probably you will want to adapt the code to blend between two colors. Best, santarcade leechii and jerome 2 Quote Link to comment Share on other sites More sharing options...
leechii Posted August 19, 2017 Author Share Posted August 19, 2017 alright ok - first time writing shaders for me then. it's working but TBH I could copy paste some code around to make it work. What I'm really struggling with is calculating the UVs - do you maybe have a tutorial/ explanation that is a bit more advanced than just mapping a picture on a cube? http://www.babylonjs-playground.com/#1YHPOU#15 Quote Link to comment Share on other sites More sharing options...
JohnK Posted August 19, 2017 Share Posted August 19, 2017 Does these help at all? http://babylonjsguide.github.io/advanced/Custom.html#texture https://www.babylonjs-playground.com/#VKBJN#14 leechii and jerome 2 Quote Link to comment Share on other sites More sharing options...
leechii Posted August 20, 2017 Author Share Posted August 20, 2017 @JohnK that actually did help.... thanks 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.