Cylinder between two points

[captainleighwalker]

Hi Wingnut

But to modify the extrusions every time the user changes the sizes the mesh is never completed. It has to call flat shade after every update.

I'm trying to get a shape like this

      shape = [
                           new BABYLON.Vector3(-50,  -50,0),
                           new BABYLON.Vector3(50,  -50,0),
                           new BABYLON.Vector3(20,  50,0),
                           new BABYLON.Vector3(-20, 50,0)
                    ];

Is there any way of using the ExtrudeShape or similar but keep flat sides?

Thanks

[GameMonetize]

ExtrudeShape can't add flat sides automatically as this is an expensive process

But you can use shaders to do the work for you

https://www.babylonjs-playground.com/#165IV6#166

 

By removing the normals you will force the shaders to compute them and it will do it in flat mode

[captainleighwalker]

Hi Deltakosh

That will probably save a lot of thinking!

I have been going down the PolygonMeshBuilder route as this was making flat sides by default?

I have hacked together this https://www.babylonjs-playground.com/#PTTMVI#21

With a bit of trial and error which seems to let you move one of the original vertex numbers and it modifies the other end of the extrusion.

I need this for resizing the glass that goes between my beams but your method above will work for changing the length of the beams.

Thanks!

[captainleighwalker]

Hi I'm still struggling!

I have tried to use the comments in this thread to make a frame with 4 sides but one side is not working.

I tried swapping the start point for that one side as suggested in one comment but that spins the shape around.

There must be a cleaner approach to this?

http://www.babylonjs-playground.com/#1RWE59#117

Thanks

[JohnK]

Does this method come any closer to what you need? https://www.babylonjs-playground.com/#1RWE59#118

Another way you could try is to extrude shapes without caps and make your own caps with polygonmeshbuilder and merge the results.

[Pryme8]

why not just model this?

[captainleighwalker]

Hi John

Thanks for your reply. The problem is this frame will get a lot more complex so I wanted to work in angles from the corner points to reduce the amount of code later. It might not be a square, it can have 3 to any number of sides and be any shape.

If I use the cylinder the one side seems in the right position if I don't setPivotMatrix

http://www.babylonjs-playground.com/#1RWE59#121

But if setting setPivotMatrix it goes wrong. I don't get it.

http://www.babylonjs-playground.com/#1RWE59#120

 

[JohnK]

I do not think your problem is with the pivot. I have tapered and coloured your cylinders. The first cylinder is red and they get less green as you create them. You can see that the direction of rotation is not consistent. This is because in two case your v1 and v2 are parallel and do the cross product is zero giving a zero axis and so rotation is indeterminate.

https://www.babylonjs-playground.com/#1RWE59#122

Interestingly I have been working on a different problem but there are similarities. It was about drawing a line with width along given points.

https://www.babylonjs-playground.com/#FA2H7X#1

There is likely to be a way of doing this with an extrusion between points though not sure exactly with what will happen at corners. It might be worth you having a play and I will have a look over the next few days.

Good luck

 

[JohnK]

First attempt but you get a twist when you head back on yourself. Will look again next week.

https://www.babylonjs-playground.com/#1RWE59#123

[Pryme8]

1 hour ago, Pryme8 said:

why not just model this?

 

[captainleighwalker]

Hi Pryme

Because this will be dynamic, depending on what dimensions are required.

[JackFalcon]

cool.

[Pryme8]

Someone help me fine the post that I was helping I think @Arte with where we were coming up with functions for making dynamic/parametric cabinets.

I found his demo post, but cant find the discussion we had that lead him to it.

That conversation has all the examples you will need.

[Arte]

@Pryme8 you look younger 

 

???

 

[JohnK]

@captainleighwalker Have had a play around and have made a frameMaker function.

The profile of the frame is given as an array of Vector3s with all zs 0, ie give profile in XoY plane.

The path of the frame is given in terms of its outer edge as an array of Vector3s again in the XoY plane.

The leftmost point(s) of the profile will follow the path so the left hand side of the profile forms the outer edge of the frame.

You need to pass the profile and path as options

var frame = frameMaker("frame", {path: path, profile:profilePoints}, scene);

The direction of the path (clockwise or counter-clockwise) determines the orientation of the profile around the frame.

If it turns out you need to flip the profile then reverse the path array before passing to frameMaker.

myPath.reverse();

Hope this is useful https://www.babylonjs-playground.com/#1RWE59#124

[captainleighwalker]

Thanks @JohnK

I think I can make that work, thanks for your time in helping.

Would you mind adding/explaining how you used the dot and cross of the vectors?

This is new to me.

Thanks again.

[JohnK]

13 minutes ago, captainleighwalker said:

Would you mind adding/explaining how you used the dot and cross of the vectors?

The function was based on work I did last year so whilst at the time I knew exactly what I was doing I cannot remember all the details, for example why I did Math.PI - calculated angle rather than just angle. However the basic idea goes like this.

Given a polygon of lines you need to know the internal angle A between between two lines L and K meeting at a point P. Just using the dot product you do not know if you are getting the internal or external angle at point P. However using a cross product will tell you which.

Just be consistent in moving around the polygon in a clockwise or counter clockwise direction, say K follows L., so always use L before K and find the line normal to L, say N.

As L is in XoY plane one way to find N is to swap the x and y coordinates of L and make one negative (x, y).(y, -x) = xy - xy = 0 so must be perpendicular.

Taking (consistently in order) the cross product of L and N this will give you a vector in the z direction (either positive or negative). Whether it is positive or negative determines whether you have found and internal or external angle.

If P is an outer point of the frame and Q an inner point on the frame with the width between P and Q being we need to project Q onto the line R parallel to L but a distance w from it using angle A.

 

 

[Pryme8]

4 hours ago, Arte said:

@Pryme8 you look younger 

 

???

 

@captainleighwalker if you take a look at this thread, on the second page I have some PG's that will show you how to make custom meshes procedurally.

[iiceman]

Hey guys, long time no see! I have been pretty busy and didn't have time to have fun with BabylonJS, but I had an idea that I wanted to try out. Therefor I need to connect two points with a cylinder,  just as described in this thread, but for some reason all the playgrounds seem broken. I remember it worked just fine back then but now the cylinder is always off and doesn't connect the sphere (here for example: http://www.babylonjs-playground.com/#1RWE59#12).

Anybody got an idea whats causing the behavior? Is it a bug, a fixed bug or a feature?  And even more important: how do I get the desired result nowadays? Hope somebody can help, thanks in advance!  

[captainleighwalker]

Hi @iiceman

I guess its a bug - if you set version to stable in the playground it works.

I have been using @JohnK 's method above where you don't rotate the mesh but position the vertices.

This is how far I've got with mine so far : http://www.windowsoftware.co.uk/windowcad7/

Regards

[JohnK]

Its a breaking change for v3.2.  For previous behavior add a second parameter `false` in setPivotMatrix

https://www.babylonjs-playground.com/#1RWE59#129

reasons in this topic

[iiceman]

I see I see, so a fixed bug it, thanks alot for the quick reply guys!  

[iiceman]

Dang, somehow I still can't get it to work: https://www.babylonjs-playground.com/#1RWE59#131

It's always off. Any idea what I am doing wrong? 

Edit: happens with the original playground, too, if I change the values: https://www.babylonjs-playground.com/#1RWE59#132

 

Edit 2: Never mind, I think I got it now: https://www.babylonjs-playground.com/#1RWE59#133

Seems like the calculation of the angle was not quite correct. I now use acos of the dot product and then the negative angle. I have no idea if that's really correct, but it passed my tests

var angle = Math.acos(BABYLON.Vector3.Dot(v1, v2));
cylinder.rotationQuaternion = BABYLON.Quaternion.RotationAxis(axis, -angle);

I read something about the arc cos here http://www.euclideanspace.com/maths/algebra/vectors/angleBetween/index.htm, and then did the rest by some old fashioned trail and error. Let me know if I did it wrong and just got lucky somehow  

Edit 3: that those things look like penises is totally unintended!

[JohnK]

15 hours ago, iiceman said:

Seems like the calculation of the angle was not quite correct. I now use acos of the dot product and then the negative angle.

Looking at a previous example http://playground.babylonjs.com/#191SVM#6 the vstart was at the extremity and vend the centre point which would explain the need to make the angle negative in your case  which is the reverse of this.

[iiceman]

Here the fixed version (setPivotMatrix with the new optional parameter postMultiplyPivotMatrix set to false) of the  example that JohnK mentioned: http://playground.babylonjs.com/#191SVM#12

And here my fixed playground, with no more need for negative angle: https://www.babylonjs-playground.com/#1RWE59#134

@JohnK I compared the two playgrounds and realized I had used the wrong order when calculating the cross product. Thanks for the hint!