Adding a Roof to a House Built from Plans

[tham_kathy]

Can anyone please explain the code here?  I'm really confused with the complex formulas here. Went through the code for days but couldn't understand it properly. Really appreciate this help.

example -> https://www.babylonjs-playground.com/#4GBWI5#110

Thanks

[tham_kathy]

Anyone ??? ?

[Wingnut]

Hi TK.  Everyone is scared to answer.  Reading that vertices-manipulation code... is like trying to read Klingon text, eh?

I think you'll need to be more patient. Possibly, this PG was coded by @JohnK.   I could be wrong - happens often.  He stands pinged, so he'll visit us.

But you must admit... that teaching somebody that code... could be a very time-consuming task.

Let's take a slow start.  Do you understand what happens in lines 170-179? 

It's almost easy to see... that we take the data stored in some arrays on a "vertexData" object, and we apply it to a blank mesh.

The 4 arrays... are positions, indices, normals, and UVs.  Colors is another, but not used there.

A bunch of junk about "plotting"... (shaping your own mesh)... can be learned in this plotting demo... https://www.babylonjs-playground.com/#1UHFAP#60

It is using a colors array instead of a UVs (for texture mappings) array, but you can still learn lots and do experiments.  Tour-around in the entire 1UHFAP series... see all the plottings people have done.  (Yes, I DO wish we had + and - buttons on the playground GUI, to go-to next/previous playgrounds.)

Positions - they are the positions of the vertices in 3D space... always 3 values.... x y z.  Pretend that verts also have a WHICH ONE AM I number.  It's often called an index.

Indices - imaginary lines often used to delineate a "face"... which is a triangle.  Usually/always they are 3 values.  The values are vertex indexes... the WHICH ONE AM I numbers mentioned above.  Indices drawn in ONE clockwise/counterclockwise direction... causes the triangle's "face" to have its "front side" in ONE direction.  Drawn in the other direction, and the face "faces" the other direction.  Used heavily in lighting and "backfaceCulling" ops... performance stuff.  These are all things you can learn-about/experiment-with... in the #60 demo.

Ain't it cool that the #60 demo has a boxify helper func... to display the "WHICH ONE AM I" vertex index number?  Yeah boy!

Normals - are a direction vector3, often used to calculate lights/colors.  Sometimes they are also used for bounce-angles for physics collisions.

Colors - BJS has a color-per-vertex system.  It is well-activated on the #60 demo... showing a nice color-dithering effect.

UV's - UVW is exactly the same as XYZ, except it is for textures.  SO, UV could be thought-of as TEXTURE XY axes, yes?  And that's exactly what it is.  Each is only two values (per vertex) and the values are always between 0 and 1 inclusive.  Textures ALWAYS have their X:0 and Y:0 point... in the lower left corner.  So if you set a 0, 0 UV on some vert, that means that the lower left corner of the texture... will "clamp" there.  If you set it to .3, 0, then the texture would clamp to that vert... 30% of its width inward along X axis.  Textures can stretch, they are latex-ish.  UV's can be thought-of as HOW TO STRETCH and WHERE TO STAPLE IT (clamp it) to a vert location.

With me?  Goooood.  You are rolling into the world of the Vertex Masters.  Most of the (Klingon) code in the #110 playground... is vertexData array manipulations.  One of the most important things for professional vertex wranglers... is knowing how the arrays are formatted.  How to "lookup" the position, normal, indices, UV, colors... of ANY vertex.  Where are the commas in the array data? How are the values stored?  This... takes practice... and some greasy Klingon-looking math-wrangling. 

Ok, from this point onward, I'm just as confused as you are.  I'm far-from being a pro vertex wrangler.  I failed Algebra 1 three years in a row, but I did manage a "D" grade for "Introduction to Algebra" in my freshman year.   

We make webGL frameworks 'round here, and not modellers.  We don't teach modelling, either.  But we got a few demos that can help you teach yourself modelling/plotting... using the BJS vertexData geometry-storage system.  VertexData objects have some powerful tools on them, thanks to the fine core-coders for BJS.  Many of those tools are there to help learn the system.  

Anyway, I hope I didn't accidentally tell you wrong things.  And I hope others will visit and give advice, but be patient... especially with yourself.  There's really no shortcuts to vert-wrangling, other than using a modelling software app.  If you want to grapple great roof-plotter funcs like those seen in #110, ya just GOTTA "grind it out".  The variable names you see in the code... ARE applicable and wise... but are severely abbreviated.  Once you learn the terminology used in plotting, they will make more sense.  It just takes time... and patience.  But I think you can see WHY folks use modelling software.  Plotting-by-math... is certainly no "walk in the park", is it?  Sorry.

You picked a GRUESOME playground to ask about "How does this thing work?".  MANY of us are wondering the very same thing. 

[tham_kathy]

Actually I understood everything clearly except that UV thing. So I just removed that code from my research  project and now there is no texture for the roof. ?

https://www.babylonjs-playground.com/#4GBWI5#120 

Thanks for the help @Wingnut

You guys really helped me during my research project. Thanks again.

[Wingnut]

My pleasure.  https://www.babylonjs-playground.com/#13AEVX#13

I tried some miserable plotting of woodgrain.... on some flat-shaded mesh.  I got a brain tumor. 

Flat-shaded mesh are weird because they have more than one vertex... at the exact same location.  SOMETIMES... 5 of them at the same location (see the stacks of blue boxify markers?)

This is needed so that more "normals" data is available, so light reflections can show that "faceted diamond" type of rendering.  Plotting.  erf. 

UV's can be treated like percentages.   For example, 0.3, 0.8 means... 30% rightward on X-axis ... and 80% upward on Y-axis (starting from lower left 0,0 corner of texture).  Staple/clamp/tack THAT point OF the texture... to THIS vertex.

[JohnK]

Been busy recently so sorry for the delay. You need to be able to understand the data structure of a mesh and particularly for the UV part https://doc.babylonjs.com/how_to/custom#calculating-uvs

If you state a couple of lines at a time that give you the most problem we can work through code a bit at a time.