Box rotation

[Alby]

Hello,

 

I am learning babylon, very powerful , thank you to the creators!

But my mathematical skill is not on top for 3d, so I meet some "problems", is there any gentle "mathematical " soul who could help me?
 

 

So let's go for the problem presentation...

 

I have my camera eyes at x0,y0,z0 looking at a point x1,y1,z1, a few boxes at x2, y2, z2 / x3,y3,z3 /  and so on...

I wish two possibilities for my boxes

1. All the same faces (possibilities to choose the face of the box) must be  perpendicular to the line (x0,y0,z0 / x1,y1,z1) when x0,y0,z0 change (the position of  the cam), so a rotation must be applied to each box in (x, y, z) to answer to the demand, what shoud be the values in box.rotation.x, box.rotation.y, box.rotation.z, how to calculate them in relation with x0,y0,z0/ x1,y1,z1/ xn, yn, zn (the coordinates of a box)?
2.  All the same faces (possibilities to choose the face of the box) must be  perpendicular to the line (x0,y0,z0 / xn,yn,zn (position of the box)) when x0,y0,z0 change (the position of the cam), so a rotation must be applied to each box in (x, y, z) to answer to the demand, what shoud be the values in box.rotation.x, box.rotation.y,box.rotation.z,... How to calculate them in relation with x0,y0,z0/  xn, yn, zn (the coordinates of a box)... (it shoud be like every choosen face of the boxes look at me when I (the cam) move in space - big brother is watching you!

I would obtain in programming something like that :

           (TabBoxes is an array of objects where the coordinates and the color of the boxes are stored)

            for (var i = 0; i = MaxNumberOfBoxes; i++) {

            var box = BABYLON.Mesh.CreateBox("box"+i, TabBoxes.size, scene);
            box.position = new BABYLON.Vector3(TabBoxes.x, TabBoxes.y, TabBoxes.z);

            var BoxMaterial = new BABYLON.StandardMaterial("kosh", scene)
            BoxMaterial.diffuseTexture = new BABYLON.Texture(TabBoxes.color, scene);
            box.material = BoxMaterial ;

            var FaceNumber = 1; // values possible from 1 to 6

            var TypeRotation =2; // values possible from 1 to 2
            RotateBoxes(i,FaceNumber,TypeRotation,box.position, scene);

            };



            where...

            var RotateBoxes = function(NumberOfBox, FaceNumber, TypeRotation, BoxPosition, scene) {
                ...?
                ...?
                ...?
                box.rotation.x;
                box.rotation.y;
                box.rotation.z;
            }

            So just to know how to calculate the value of x,y,z... any idea?

 

Sorry for my english, it is not my birth language, I speak french, I just hope to have been enough clear in my explanations. So if  a skilly mathematician could help me, I should be forever grateful!

Thank you in advance!

 

Alan


 

[jerome]

https://github.com/BabylonJS/Babylon.js/wiki/How-to-handle-rotations-and-translations

 

box.rotation = vector3Axis(x, y, z);  <= this is your axis

with axis vector : vector3Axis = vector3cam.subtract(vector3Pointx1y1z1);

[Wingnut]

Hi Albruno, welcome to the forum.

 

 

it shoud be like every choosen face of the boxes look at me when I (the cam) move in space

 

   Sorry to interrupt, but, you MIGHT be looking for the mesh.lookAt() method.

mesh.lookAt(targetPoint, yawCor, pitchCor, rollCor)Orients a mesh towards a target point. Mesh must be drawn facing user.Parameters----------targetPoint - Vector3 -The position (must be in same space as current mesh) to look atyawCor - number - optional yaw (y-axis) correction in radianspitchCor - number - optional pitch (x-axis) correction in radiansrollCor - number - optional roll (z-axis) correction in radians

This is not a LOCK-ONTO target.  It is a LOOK NOW at target .

 

I'm not sure what you want to do, but maybe this will help. I have seen some people use this in an animation loop... like this:

// untested animation func to make all boxes constantly "face" the camera...scene.registerBeforeRender(function() {    for (var i = 0; i < ArrayOfBoxes.length; i++) {        ArrayOfBoxes[i].lookAt(camera.position);    }};

Ok, that's all I have.  Maybe useful, maybe not. 

[Alby]

Hi,

 

Thank you for the tips, I learn slowly but surely  

 

I will implement it in an example and put it on the forum so newbies like me will gain from it.

 

Alain

[Alby]

Hello Wingnut,

 

I implement the solution you propose, it works but take a lot of processing in the rendering, of course each time I move It must be recalculated, but why so long, so much to calculate ?

 

http://www.babylonjs-playground.com/#29J6Q8  //Cube Face look at me en boucle

 

if it is just one time calculate, it is perfect

 

http://www.babylonjs-playground.com/#QW7DS  //Cube face look at 0,0,0 one time

 

Could you maybe have a look to tell me how optimize it, if possible and don't take to much of your time!

 

Have a nice week end

 

Thank you a lot!

 

Alain

 

 

PS: I didn't yet implement the solution   of Jerome (thanks Jerome), first I have to understand exactly what i do with his solution.

[iiceman]

Not sure if I understood you right... but I give it a try: http://www.babylonjs-playground.com/#1CBRLH Is that what you want? (I think that's the solution Wingnut suggested)

[Alby]

Hi Iiceman,

 

Thank you for the help, I understand now my mistake, I create each time a newbox at the same positions, so the amount of boxes took very soon an Himalaya  number!

TabCubes[] is not exactly a arrayofboxes because I intend to read it from a database with other inquiries, but I took the necessary inquiries from it to create a true arrayofboxes and it works perfectly.

 

http://www.babylonjs-playground.com/#29J6Q8#2     ( // face look at me ok but rotate)

 

But the problem is that the faces are rotating (poor MonaLiza!) and sometime she upside  down,... I intend too to add a text so if it is upside down It will a little difficult to read!

and I suppose when I will put pictures on the other faces of the cube they will do the same when they will face me, annoying...

 

So if you have any suggestions so that the pictures  never go upside down and stay in the right place, it would be nice

 

Thank you in advance for your suggestions!

 

Alain

[GameMonetize]

Is that better with BILLBOARD?

http://www.babylonjs-playground.com/#29J6Q8#3

[Alby]

Thank you Deltakosh but it seems that the same problem remains (MonaLiza upside down in certain conditions) but I cannot tell you exactly when it happens, just move the cam and you will see,

 

Anyway thank you for the other solution "BILLBOARD", I learn something else!

 

Alain

[jerome]

Sorry for the newbee question, but what is BILLBOARD for ?

 

Just coudn't find this notion in the tutos or in the doc (I found BILLBOARD_MODE in the doc, but don't know its usage).

[Wingnut]

Oh yeah, billboard mode!  I forgot all about that easy method.

 

But yeah...

 

http://www.babylonjs-playground.com/#1CBRLH#1

 

When you drag the camera forward/backward to extremes, the images try to spin/rotate.  Yep, I see it.    Do I know why?  Heck no. 

 

@jerome, you are right about billboard mode not documented.  I think sprites use it regularly.  We could probably use two big fat tutorials, part of the TMI series.

 

TMI#1 - Everything you didn't want to know about "Mesh"

TMI#2 - Everything you didn't want to know about "Scene"

 

Each of those books would be a coffee table crusher, wouldn't they?

 

A search of the BJS github for 'billboard'...

 

https://github.com/BabylonJS/Babylon.js/search?utf8=%E2%9C%93&q=billboard

 

Hey, it's a way to learn about something, even when there is no documentation.  When in doubt, go see how deltakosh uses it, right?

[GameMonetize]

ERf I get it..this is due to camera position (almost perpendicular to mesh).

 

Billboard or LookAt use the same idea: Compensating camera's rotation. But when camera is almost on top of mesh position it is not easy to know where is up and where is down

 

Can you just limit the camera rotation to avoid these side effects?

[Alby]

Thank you, Deltakosh for the inquiries, I will follow your suggestion, just the time to find how to do it... I'm just a beginner!

[JCPalmer]

err, sorry for the hijacking of this thread.  Saw the word BILLBOARDING, and it is something I am contemplating.

 

Have a ,mesh based, Dialog system mid-way done, Fonts (Mesh Factories) completely done .  Label class to hold Letters & as a basis for controls, and Panels to group / organize controls in progress.

 

Problem I think I am going to have is locating / orientating the top level Panel, so it is all  seen, but farther away than it has to be.

 

BILLBOARDING looks like it will handle the orientation end, but what about position?  Also see another feature that has no real documentation, Layers.  Could layers be used.  Might be helpful, if scene "clutter" is in the very same spot as the dialog.

[GameMonetize]

Billboard is about direction (You can find some info here:

http://blogs.msdn.com/b/eternalcoding/archive/2013/06/27/babylon-js-a-complete-javascript-framework-for-building-3d-games-with-html-5-and-webgl.aspx#chap6

(Feel free to contribute to doc my friends:))

 

 

For position the best idea should be to use two cameras. One camera to see and control your scene and another one to only display UI for instance. In this case you can use this to display selective meshes for a camera:

mesh.layerMask = 1;camera.layerMask = 1

A mesh is displayed for a specific camera if mesh.layerMask & camera.layerMask !== 0

[Wingnut]

Cool comments!  Thanks guys.  Jc, can't wait to see your dialog system.  Fonts shapes as 3d mesh?  Yeah, we need that system in certain situations.  A sister to drawText... called renderText.  (maybe)     Dk, a comment full of good info... thx. 

 

Dk, you understand that it is VERY scary to write docs on 'something' without having a good grasp of how that 'something' operates, right?  I love to write, love to over-explain, but I hate when I over-explain something that's blatantly incorrect. 

 

Will you promise to always take action to fix documentation mistakes, should you see them?  Because the truth is... there will always be only one true "authority" for BJS, and that's you, deltakosh.  Others might get into your ballpark... but you still need to proofread all docs, as tedious as that may be.  You da man!

 

So, back to the situation...

 

http://www.babylonjs-playground.com/#1CBRLH#4

 

Here I used a billboard version of the same demo, but I localized BABYLON.AbstractMesh.prototype.computeWorldMatrix into the playground.  That function contains the BJS billboard code, which I have delineated.  Therefore, this playground is a place to experiment with "hacking" the billboard code... to make a work-around.

 

MY theory... was that Albruno needed a new billboard mode setting called... BABYLON.AbstractMesh.BILLBOARDMODE_XY.  My idea was that he needed a BILLBOARDMODE_X combined with a BILLBOARDMODE_Y.

 

http://www.babylonjs-playground.com/#1CBRLH#5

 

In this demo, I made a billboardMode of "alby" (the abbrev of Albruno).  I set alby mode in line 108.  At line 71, I check for "alby" mode, and if so, apply only X and Y things.  THAT idea failed beautifully, and then I got scared and took a nap.  Others may discover things using this demo, though.

 

Don't lose hope, Alby.  I think this can be done, but, probably "hacky".

 

Also, in both of these demos, I put some camera limiter code at lines 7/8.  (currently disabled)  Although limiting arcRotateCam beta-axis... improves the situation, it still began spinning the mesh a small amount... as the limits were approached.  (it still sort-of sucked).  More fun ahead, I suspect!  kbye

[JCPalmer]

For position the best idea should be to use two cameras. One camera to see and control your scene and another one to only display UI for instance. In this case you can use this to display selective meshes for a camera:

mesh.layerMask = 1;camera.layerMask = 1

A mesh is displayed for a specific camera if mesh.layerMask & camera.layerMask !== 0

Interesting, yes Billboarding works as I thought.  With 2 cameras though, it sounds like I do not need to do it.

 

The 2 cameras approach does need some clarification.  Sounds like to bring up a dialog, the game could instance the panel hierarchy & pass it to a static DialogSys.displayPanel(panel).  This switches:

• the activeCamera to the Dialog system's, right?
• changes the mesh.layerMask.  Do I need to recursively do this?

  Only the Panel hierarchy will then be visible, so no worries about stuff getting in front of panel.

 

If yes, I could position the Dialog system's camera at a very convienent spot, like (0,0,0).  I think I saw an old thread on changing a meshes origin for rotation purposes (I only know how to do that in Blender).  Assuming, I XY can center the top level panel's origin, I could just position it at (0,0, z).

 

The big question, is what is Z, such that no sides are cut off? 

 

Is this close to what you are saying?

[JCPalmer]

Ok, talking to myself again.  From another thread, I see there are 2 cameras in DebugLayer.  Both seem active at the same time, but as there are no meshes, things are bound to be different.  Still I will dissect this.

 

Wingnut:  Yes 3d & 2d typeface meshes (Blender doing 95% of the work, the rest my font generation .blend, & TOB 2.0).  I need  a pure webGL solution (not 2D canvas / DOM).  Also want this for marketing reasons, where no input is being taken.  Things like animated 3d credits / descriptions (using POV 1.1 which will have sound effects).

 

The font generator .blend can also be used to generate signs,  multiple letters grouped as a single mesh.  Signs can also be exported using the .babylon exporter, if wanted.  I used the .blend to generate the signs for this https://googledrive.com/host/0B6-s6ZjHyEwUflhfdFFnNGJQXzc1U3I4YjZ5b1FMWW16ZHNWd2JVbE9abTRDN2tEWWgwclk

 

BTW, it someone could paste any non-english vowels they might need in a reply,  I'll see if I can get meshes in the font for them.

 

If someone can also get me a .blend with these 3d meshes, that would be great:

• check box
• check box, checked
• radio button
• radio button, selected

[Alby]

@Wingnut

 

Wow, thank you for the perceptiveness about my question, the  method of display you describe is exactely the first method of display I wish!

 

It's a little hard to follow you demo for the newbye that I am, but I don't despair , I think in a few months I will be able to do it.

It just two weeks I navigate in the ocean of 3d and babylon.js seems to be a very good boat, especially when there are some skilly captains who escort us (thanks to all)!

 

I continue my self to investigate, and another question come to me, with dynamic structure. I try to apply a minimum alpha so it is nearly "transparent",  but I saw that drawtext herits from the same  alpha , annoying because I want to write a plain text on a transparent plane, idem for the scalingPlane:  drawtext herits too from that propriety... is it possible  to dissociate drawtext from those "parent" proprieties?

 

Hope that I am enough clear in my explanation!

 

And of course thank you  for the future help!

 

 

Alby (Well found Wingnut!)

[GameMonetize]

I promise to fix any issues I will find in doc. I'm here for that:)

[GameMonetize]

@JCPalmer: I was more thinking about two simultaneous cameras with scene.activeCameras like here:

http://www.babylonjs-playground.com/#1IG874#7

[iiceman]

I want to make a little editor for my bomberman game where you can build your own maps.. and I thought about an interface that previews the different building blocks in 3D, too.... so that might be how I should do it - work in progress (no 3D preview yet ) http://p215008.mittwaldserver.info/mapEditor/

 

Bonus question for those that want an A+  - why is the light/shadow thing in my editor messed up until I place the first object on the ground? After that it works perfectly fine.

[GameMonetize]

I want a A+!!!

 

I think this is a bug Can you try without varianceShadowMap ?

[iiceman]

It was already turned off, I checked again turning it on and off but no difference.

// Shadowsvar shadowGenerator = new BABYLON.ShadowGenerator(4096, light);shadowGenerator.useVarianceShadowMap = false;shadowGenerator.usePoissonSampling = true;

[GameMonetize]

are you able to reproduce it on the playground?