Mesh.lookAt

[Snouto]

Hi

Is there something about the Mesh.lookAt method that means it won’t work on imported models?

I have a .babylon file exported from my Unity scene. I can select individual meshes using:

var mesh=scene.getMeshByName(“someMeshName”) 

This works because the exporter maintains the Unity GameObject names.

Yet, if I then try:

box.lookAt(mesh.position); //box is a mesh created with Babylon 

The “box” object’s rotation never changes. If, however, i create a second box object and make it the target of the lookAt() call, the “box” object’s rotation does change.

I’ve checked the position property of the mesh I’m selecting with getMeshByName() and it’s not null, so I feel like I’m missing something here.

Any thoughts?

Cheers!

[RaananW]

hi!

Care to share a playground? it seems like it should work. 

It could be also due to the mesh.position not being what you expect it to be. are you sure mesh.position has the right values? it might be a child and has therefore a different position than you would expect. try using mesh.getAbsolutePosition() just as a test and see if the results are different. 

[Wingnut]

Hi guys!  Also, isn't lookAt() a Quaternion thing? 

Under certain circumstances, mesh.rotationQuaternion would be the property to check for changes in rotation.

AND... just maybe... the mesh/models are exported from Unity... without .rotationQuaternion installed.  (maybe there is a checkbox available during export)

I dunno if .lookAt() automatically installs .rotationQuaternion on mesh, if not yet installed.

Snouto... standard BJS mesh don't have .rotationQuaternion by default.  It is installed by BJS when needed, or can be installed by programmer at any time.

Anyway, I just wanted to point this out... in case Snouto didn't yet know about .rotationQuaternion.

NASA and other spacecraft builders use Quaternions for rotation... to avoid a situation called "gimbal lock".  Certain BJS operations use them for the same reasons. 

[Pryme8]

I bet the "someMeshName" is not returning anything.  

var mesh=scene.getMeshByName(“someMeshName”)
console.log(mesh);

make sure you are getting a return.

[aWeirdo]

In newer versions of babylonJs (3.0+ i think) mesh.lookAt only uses rotationQuaternion if mesh is already using it

[Pryme8]

Just now, aWeirdo said:

In newer versions of babylonJs (3.0+ i think) mesh.lookAt only uses rotationQuaternion if mesh is already using it

Thats good to know, but why would that be? Do you have to feed it a quat cause is not really a look at function then?  Or does it count on both meshes having one?  Im perplexed now when I get to work, there is some research to be had now.

[aWeirdo]

2 minutes ago, Pryme8 said:

Thats good to know, but why would that be? Do you have to feed it a quat cause is not really a look at function then?  Or does it count on both meshes having one?  Im perplexed now when I get to work, there is some research to be had now.

Only thing that changed is that if the mesh is not already using rotationQuarternion,
mesh.lookAt will apply mesh.rotation. 

Previously, it would silently overwrite mesh.rotation and apply mesh.rotationQuarternion,
rendering further changes to mesh.rotation to do nothing,
and incase the dev was unaware of this, cause confusion.  
 

[Snouto]

Thanks for the info guys, I’ll look closer at the mesh I’m selecting and check a few things from this thread. Just to clear up a few things; the mesh is not null because I can inspect it and can see there are values in the position object (haven’t checked rotationQuaternion), and I’m aware of the existence of quaternions having used them in Unity for a while (not that I fully understand them).

I’ll set up a test scene on my website should I not be able to make progress - or is there a convenient way to load external models in the PG that won’t come a cropper to CORS.

[Wingnut]

11 hours ago, Snouto said:

won’t come a cropper to CORS

I'm not sure what "come a cropper" means, but I like it. 

Perhaps... http://www.html5gamedevs.com/search/?&q=free github account&type=forums_topic&nodes=16,28,29,30,31

That's what I do, anyway.  I've told the story of my free github acct MANY times on the forum, so I'll let you read one of those old stories.

(It's not a very exciting story, but it's still better than peeing on your foot.) 

There are also ways of finding CORS-cleared textures from Google Image Search with 'search tools' set for usage rights: labeled for re-use.  They are playground-ready, too.

But yeah, once we get stuff into a playground, we can all really kick-butt on any issues.  Lots of minds thinking, keyboards plinking, and Colonels Klinking, then. 

Good to hear that you have some Quaternion experience.  They are ugly and beautiful all at the same time.  heh. 

Someone once described them to me as... 3 numbers to aim/direction an arrow-shaft, and a 4th number to set mesh rotation AROUND that arrow-shaft. *shrug* 

I think we also have Quaternion.toEulerAngles(), too... pretty handy.  We have a mesh/transformNode .rotate(whichAxis, amount, whichSpace) that is made for setting "Quat-rots".  And, there are also some yaw/pitch/roll aircraft-like ways to set Quats.  It's all good pain. 

[Snouto]

Hey @Wingnut thanks for the information. I've went about setting up a misc folder on my git and then created a BJS here:

https://www.babylonjs-playground.com/indexstable#E3CPCA#2

However as you'll see, there's some sort of issue loading the scene - in the console I get "BJS - [15:57:27]: Unable to load from https://cdn.rawgit.com/snout-o/misc/master/Demo_scene_mobile_sml.babylon". The link to the babylon file itself is fine though as you'll see by trying it in the browser. Does the fact it's 1.8MB make a difference?

I have some other questions besides lookAt in the scene so would be great to get this thing up and running. If you can suggest any changes to get the ball rolling that'd be great.

Cheers!

 

p.s. I should probably create new posts for the other questions I have but in the interests of brevity, if anyone can get the scene to load I've the following issues that I'd love some input on:
1) sometimes the scene loads with the camera at the wrong angle, pointing to the bottom left of the scene and with an odd fov. 
2) the image I'm loading on to the box inside the stadium shows the image on all faces it seems, but I'm trying to only show that on the forward facing face.
3) when I load that image and apply to a texture then load to the box, its initial position is upside down.
4) I've added code to try to trap click/tap events, but this never fires.
5) finally, for lookAt, if you set the camera target to be stadiumMesh you'll see the camera never actually looks at anything.

[Wingnut]

Hi S.  Well, that is certainly a "busy" playground scene. 

Let's start simple.  https://www.babylonjs-playground.com/indexstable#E3CPCA#4

Alright, that's working fine.  Nice looking model!

Much of the code in your #2 demo... is over my head.  (sorry)  Rarely do I see scene-loading that is THAT complex.  SO, I'm not sure what to do next. 

Your PG scares me.    I don't think I'm quite the coder that you are, but smarter people than I... are nearby.

I suppose you can slowly re-add your "toys" and try to figure out what caused the load-failure in #2.  Re-add in small-steps, perhaps.

Others may have more thoughts - stay tuned.   Let me take a quick attempt at #1-5...

1.  Often caused by not waiting for assetManager.onFinish, (or some other loading onSuccess system) to complete...  before setting camera.target.  Or, using incorrect camera.  Set camera.target LATE in the code, when possible.  Other causes, too.  We'll talk.

2.  http://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

3.  There is a late/optional boolean parameter to invertY for Babylon.Textures.  See this PG, line 31  (inverts left plane texture).  Speaking of planes, you COULD place a plane in-front-of the box (for #2 issue).  It would be like putting a poster on one side of the box.  Perhaps parent the poster plane... to the box.  Later, play a movie on that plane, too.  It would APPEAR to be playing on one-side of the box.  I bet you are thinking 'scoreboard'.    Yep... Babylon GUI on the top 1/3 of the scoreboard plane, and big screen TV on the bottom 2/3 of the plane-placed-atop-one-side-of-a-box.  Perfect.  Hope I'm not being "forward".  (ar ar, "forward" = sports position)

4.  The best way to get interactive with mesh... is with the Babylon Action Manager.  It totally rocks, and is quite easy, but a bit scary, at first.  Generally, 3 steps.  Add an ActionManager to mesh (sometimes to the Scene).  Then register a trigger, and then an action (often in same line).  When using its ExecuteCodeAction, ActionManagers automatically send an EVENT object (in arg[0]) to onHandler funcs... which is somewhat similar to DOM event objects.  So, you can send ALL scene click/pick-events... to a central onAnyClick(actionEvent) func.  Then, inside that func... you can determine what was clicked (discriminate), and "order" what should be done to the scene.  SOME people LIKE all-in-one-func scene event-handling, and some like discrete/separate handlers for each mesh.  ActionManagers allow both/either, AND actionManagers have some interpolation power, too... power to slowly turn knobs across a time span.  Handy for click-to-animate.

5.  Perhaps same problem as #1.  Camera.target trying to be set too early... in scene-load sequence, perhaps.  Often, camera target-setting is done late in the code... to ensure that the wanted target has been rendered into the scene.  Minor issue... you'll have this mastered in no-time.     Your project might require some camera functions, though.  Things like moveCamToScoreboard(), moveCamToStands(), moveCamToGoal1(), Goal2(), Centerfield(), etc.  Later, when you start using actionManagers, and Babylon GUI buttons, those functions will be handy.  Also, you can use multiple cameras, no problems.  Want to watch MANY cameras at same time, on different 'viewports' upon the single canvas?  Can do.  Babylon Beef.  We got the goods.  Meet Our Meat!      (that sounds gross... heh)

 As you re-add features, some of those issues may answer themselves, too.  Hope I've been helpful.  Stay in touch, party on!

[Pryme8]

About the CORS thing... if you do some searching on the forums I can promise you I posted a work around...

With some PHP and and some AJAX any file can be CORS, you just need a host for the php file and have cross origin ajax requests from the playground be enabled.

So basically what you do is you have the php file pull the cross origin file as text, propagate that into a xhr response and parse it how ever you need.

[Snouto]

5 hours ago, Pryme8 said:

About the CORS thing... if you do some searching on the forums I can promise you I posted a work around...

With some PHP and and some AJAX any file can be CORS, you just need a host for the php file and have cross origin ajax requests from the playground be enabled.

So basically what you do is you have the php file pull the cross origin file as text, propagate that into a xhr response and parse it how ever you need.

Indeed that would be something I'd try if I had the time to set it up, but I was being lazy and looking for a quicker alternative. If I can get GIT to work it'll be a non-issue anyway. Thanks for the reply.

[Snouto]

13 hours ago, Wingnut said:

Hi S.  Well, that is certainly a "busy" playground scene. 

Let's start simple.  https://www.babylonjs-playground.com/indexstable#E3CPCA#4

Alright, that's working fine.  Nice looking model!

Much of the code in your #2 demo... is over my head.  (sorry)  Rarely do I see scene-loading that is THAT complex.  SO, I'm not sure what to do next. 

Your PG scares me.    I don't think I'm quite the coder that you are, but smarter people than I... are nearby.

I suppose you can slowly re-add your "toys" and try to figure out what caused the load-failure in #2.  Re-add in small-steps, perhaps.

Others may have more thoughts - stay tuned.   Let me take a quick attempt at #1-5...

1.  Often caused by not waiting for assetManager.onFinish, (or some other loading onSuccess system) to complete...  before setting camera.target.  Or, using incorrect camera.  Set camera.target LATE in the code, when possible.  Other causes, too.  We'll talk.

2.  http://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

3.  There is a late/optional boolean parameter to invertY for Babylon.Textures.  See this PG, line 31  (inverts left plane texture).  Speaking of planes, you COULD place a plane in-front-of the box (for #2 issue).  It would be like putting a poster on one side of the box.  Perhaps parent the poster plane... to the box.  Later, play a movie on that plane, too.  It would APPEAR to be playing on one-side of the box.  I bet you are thinking 'scoreboard'.    Yep... Babylon GUI on the top 1/3 of the scoreboard plane, and big screen TV on the bottom 2/3 of the plane-placed-atop-one-side-of-a-box.  Perfect.  Hope I'm not being "forward".  (ar ar, "forward" = sports position)

4.  The best way to get interactive with mesh... is with the Babylon Action Manager.  It totally rocks, and is quite easy, but a bit scary, at first.  Generally, 3 steps.  Add an ActionManager to mesh (sometimes to the Scene).  Then register a trigger, and then an action (often in same line).  When using its ExecuteCodeAction, ActionManagers automatically send an EVENT object (in arg[0]) to onHandler funcs... which is somewhat similar to DOM event objects.  So, you can send ALL scene click/pick-events... to a central onAnyClick(actionEvent) func.  Then, inside that func... you can determine what was clicked (discriminate), and "order" what should be done to the scene.  SOME people LIKE all-in-one-func scene event-handling, and some like discrete/separate handlers for each mesh.  ActionManagers allow both/either, AND actionManagers have some interpolation power, too... power to slowly turn knobs across a time span.  Handy for click-to-animate.

5.  Perhaps same problem as #1.  Camera.target trying to be set too early... in scene-load sequence, perhaps.  Often, camera target-setting is done late in the code... to ensure that the wanted target has been rendered into the scene.  Minor issue... you'll have this mastered in no-time.     Your project might require some camera functions, though.  Things like moveCamToScoreboard(), moveCamToStands(), moveCamToGoal1(), Goal2(), Centerfield(), etc.  Later, when you start using actionManagers, and Babylon GUI buttons, those functions will be handy.  Also, you can use multiple cameras, no problems.  Want to watch MANY cameras at same time, on different 'viewports' upon the single canvas?  Can do.  Babylon Beef.  We got the goods.  Meet Our Meat!      (that sounds gross... heh)

 As you re-add features, some of those issues may answer themselves, too.  Hope I've been helpful.  Stay in touch, party on!

Wow, what a tremendous post. Thank you very much for the effort you've put in to my issues here, very much appreciated.

To begin with I can't claim credit for the complexity (!) of the code I shared, I lifted most of that structure from a BJS example. I took it to be the best practice, although to be quite honest since ES6 support in IE11 is terrible I'll probably have to change the code to something more akin to your PG example anyway.

It's strange how I can't even get the call to BABYLON.SceneLoader.Load to work in the first instance. If I could at least move beyond that issue i'd be able to provide a better PG for analysis.

Anyway with regards to the points you address above, 

1) yeah my thought was something to do with timing, however in my code I'm only creating and activating the camera after the scene calls "executeWhenReady". So if nothing else the actual scene itself should be present and correct. I'll experiment moving the camera around and see if it helps.

2) I've already followed that document but I still can't get it to work. Not by setting the diffuse colour in the material, or by creating a faceUV array and setting all faces to white. If I make the colour black, it appears black, so perhaps the light bounce or reflections or something is causing the blue tinge and it's not the image I load on to one face after all? Just a coincidence the colours are almost exactly the same? See here:

https://www.babylonjs-playground.com/indexstable#E3CPCA#6

3) thanks for that. Seems like the material was already flipped and I had to unflip it. Weird, but in the above link you can see the image is now loading correctly. Aww yeah.

4) will check that out thanks

5) I'm not so sure about that. I've had the whole scene loaded, and then tried my camera rig animation with a click of a button, so everything was definitely loaded before I tried to set the camera target and it didnt work. 

 

[Snouto]

2 minutes ago, Pryme8 said:

Math.prototype.Deg2Rad = function(angle){
    return angle * (Math.PI / 180);
}

Number.prototype.Deg2Rad = function(){
    return this * (Math.PI / 180);
}

Might be of some help to you: adds support for

Math.Deg2Rad(Number);

and Number.Deg2Rad();

Thanks dude, I already tried doing that a while back but every time I ran the code I got an "undefined" error. Maybe I was putting that code in the wrong place or something but even now, having just tried your code, same issue. Just putting that right after the opening script tag still throws the error:

TypeError: undefined is not an object (evaluating 'Math.prototype.Deg2Rad = function(angle){
				    return angle * (Math.PI / 180);
				}')

 

[Pryme8]

Just now, Snouto said:

Thanks dude, I already tried doing that a while back but every time I ran the code I got an "undefined" error. Maybe I was putting that code in the wrong place or something but even now, having just tried your code, same issue. Just putting that right after the opening script tag still throws the error:

TypeError: undefined is not an object (evaluating 'Math.prototype.Deg2Rad = function(angle){
				    return angle * (Math.PI / 180);
				}')

 

Yeah, I spoke too quick...  My bad ignore my post!

There are ways of extending built in methods, but there is a whole can of worms I was opening without really thinking about following through

[Snouto]

Just now, Pryme8 said:

Yeah, I spoke too quick...  My bad ignore my post!

There are ways of extending built in methods, but there is a whole can of worms I was opening without really thinking about following through

No worries like I said I had the exact same thought initially, just for a moment there I thought i was being a spaz  

[Pryme8]

Math.toRadians = function(angle){

return angle * (Math.PI / 180);

}

Add that to the top of the file and you wont need the Math2 Object anymore.

Now for the

Number.prototype.toRadians = function(){

return this * (Math.PI / 180);

}

It should work if you do like:
var value = 120;

value.toRadians();

and that should also be chain-able.

Sorry, for the quick post earlier I sometimes rush responses while Im at work.
https://www.babylonjs-playground.com/indexstable#E3CPCA#7

[Snouto]

3 minutes ago, Pryme8 said:

Math.toRadians = function(angle){

return angle * (Math.PI / 180);

}

Oh I see, no need for the prototype reference. Interesting, thanks for the tip it works on your previous code too. 

[Pryme8]

 yeah, I just had not fully explained it and felt like I was opening a can of worms cause most people flip as soon as you define a new prototype on an inherent method.

The reason we don't need to prototype the Math object, is there is no scope that is passed with the function.  Math is just a container for return functions. vs a number it is asking for the value of the this object so it needs to be prototype otherwise it would effectively be the same as the Math function.

[Snouto]

57 minutes ago, Pryme8 said:

 yeah, I just had not fully explained it and felt like I was opening a can of worms cause most people flip as soon as you define a new prototype on an inherent method.

The reason we don't need to prototype the Math object, is there is no scope that is passed with the function.  Math is just a container for return functions. vs a number it is asking for the value of the this object so it needs to be prototype otherwise it would effectively be the same as the Math function.

I really should have known that already anyway tbh, I've been doing this job long enough to know better. I just dont think i've ever needed to extend Math or objects like it!

okay so this simplified PG should be working:

https://www.babylonjs-playground.com/indexstable#E3CPCA#15

Right now though it isnt, and the previous PGs aren't either. So either I've got an issue locally or something's borked at the BJS servers.

[Pryme8]

Explain to me in simple terms so I don't have to scroll back and read a bunch. 

Whats going on/wrong?

[Snouto]

1 minute ago, Pryme8 said:

Explain to me in simple terms so I don't have to scroll back and read a bunch. 

Whats going on/wrong?

Initially I had trouble getting my camera rig to lookAt a model in the scene I was loading. That problem still remains afaik, but in the meantime I muddied the waters by mentioning a few other issues. Those that remain are:
1) sometimes the camera loads at a weird angle not at all like I want. Possibly a timing issue.
2) even though I'm setting a box to be white, it's appearing blue. Possibly reflection from the surrounding stadium seats?
3) still to check: changing how tap/click events work because my previous implementation failed.

Everything else has been addressed I think.

[Pryme8]

Which one is your most recent PG the one https://www.babylonjs-playground.com/indexstable#E3CPCA#15, I do not think is it?
https://www.babylonjs-playground.com/indexstable#E3CPCA#7 <- is the one I got, where is the "white" box?
 

[Snouto]

Just now, Pryme8 said:

Which one is your most recent PG the one https://www.babylonjs-playground.com/indexstable#E3CPCA#15, I do not think is it?
https://www.babylonjs-playground.com/indexstable#E3CPCA#7 <- is the one I got, where is the "white" box?
 

15 is the most recent but I can't get it to work on my machine. That said I think my machine is having a meltdown because even local stuff isn't running, so gonna have to reboot