So Im quite new to 3d in js, and 3d in general, so please correct me if I get my terminology wrong, etc.
I am trying to figure out the best (or at least an) approach to applying colour to a model. Specifically, I want an end user to be able to draw a line on the XY dimension, creating a plane which serves to contain a colour. I’ve added a picture to illustrate the desired effect.
My question, what is the best approach to this. Im not asking for code, more the theory. Should the plane bisect the model, thus creating two separate shapes? Or should the colour be applied on a UV map, and the plane somehow projected from the 3d space onto the 2d UV map?
Any help is appreciated. Also, any link to resources would be appreciated (I dont want to waste anyones times answering basic questions).
This is quite an interesting problem to solve I think your texture approach would be the better one, because splitting the mesh would take way more time. Another good approach would be a custom shader (either through shader code or Node Material Editor), where you pass the coordinates of the line and it colors the pixels based on the side of the line you’re at. I’m on my phone right now so linking is annoying, but learnopengl.com is a great resource on the maths side of stuff.
I’ve been playing around with the splitting approach today (as what I envisioned the UV projection approach seemed like hell). It seems that clipping the object and cloning it seems to work somewhat decently.
Ive looked into shaders, but that is a can of worms that I intend to kick as far down the road as possible, though it seems the most robust approach. Especially as I intend to have multiple layers like this - visible chunks of the model - and cloning the whole object seems wasteful and not performant.
Another option for you is to use decals. Decals let you take a texture and project it onto a model from a point in space. Think of it as if you pointed a movie projector at an irregular shaped object and that object was then colored with whatever image the projector was projecting.
The Babylon docs on Decals leave a lot to be desired, but they include a Playground example which may make it easier to understand (click anywhere on the cat to place a decal).
It might also help to know what the Decal parameter called “normal” means. This is a Vector3 indicating which direction the decal should face (for example, new Vector3(0, 1, 0) would be facing directly up toward the sky). Often, you would want to use a vector value that matches the “normal” of the mesh’s surface at the point where the center of the decal would be placed. But in your example of the bike frame, you would want a normal that is perpendicular to the general orientation of the whole bike frame. So assuming the bike frame is upright (aligned with the Y axis), then if the bike frame is also aligned with the Z axis you would use the vector x:1, y:0, z:0 or x:-1, y:0, z:0 because those are the two vectors that would be exactly perpendicular (pointed directly to or directly away) from the way the bike frame is oriented.
That said, a texture-based approach would probably be the most versatile and easiest to implement. I don’t really like the idea of breaking the mesh into pieces at all. You’re likely to introduce problems with smoothing and face alignment. Plus, it precludes your users from creating more interesting customization choices like applying color gradients, shapes, etc.
If you want to pursue a texture-based approach, user interactions could draw shapes (lines, filled shapes, text, etc.) to a dynamic texture and that texture can be set as the diffuseTexture (for Standard materials) or albedoTexture (for PBR materials) on your model. As long as the model has a clean set of UVs, this approach should work well.
Although i’ve, as of yet, only explored the model clipping and duplication approach, you’re right that it will handicap certain things like gradients (which I do need).
The decal approach seems to be quite promising, I’ll definitely play around with it soon (just have to defend my thesis next week, then babylon here i come ). Im guessing having the option to mirror a decal is doable too. As in if one applies a decal facing squarely on the XY plane, the decal will also appear on the model when you move the camera 180 around the Y axis.
The dynamic texture approach is also interesting, however I think it may not turn out too well with my current model, as its UV maps are horrendous. However, my production models should be better, so this method will probably be the one.
Again, thank you for your time and the level of detail in the response. Frankly, after being on SO forums for so long, im not used to the lack of vitriol
You are very welcomed here and starting with this kind of relevant and challenging topic already makes us eager to see more of what you can achieve with BJS. I sort of recall some projects from people that might be able to help further with this (drawing on texture). If I find them I shall post them here. Meanwhile, GL with your thesis. We shall send you strength to perform and finish this quickly so you can rejoin the great community of BJS asap. Meanwhile, have a great day
I think your texture approach would be the better one, because splitting the mesh would take way more time. Another good approach would be a custom shader (either through shader code or Node Material Editor), where you pass the coordinates of the line and it colors the pixels based on the side of the line you’re at. I’m on my phone right now so linking is annoying, but 
). Im guessing having the option to mirror a decal is doable too. As in if one applies a decal facing squarely on the XY plane, the decal will also appear on the model when you move the camera 180 around the Y axis.
to perform and finish this quickly so you can rejoin the great community of BJS asap. Meanwhile, have a great day 