Vectors!

[OMAR]

Check this piece of code I've written in VS:

Basically, what I'm trying to accomplish is when the user presses a key (W or S or A or D) the cube that is on the scene smoothly changes its position from its original position (like an animation) to the movementMatrix which is the 2-dimensional array containing the predefined positions for the Cube.

Below is the movementMatrix

.

Of course it does not produce the result I want, mainly because I don't know how this Vector-lerping stuff works

So if someone explained how to fix it it would be great! 

[GameMonetize]

Hello!

do you mind creating a tiny playground to illustrate your issue?

 

[OMAR]

Yes here it is: http://www.babylonjs-playground.com/#1HXNQM#5

Before you look at the code:

• I wrote the code in different files, so I put really long /****/ comments to distinguish between them
• When you open the editor, it will give a weird compilation error, but it will work anyways so just ignore it (But if it doesn't please notify me)\

 

Compilation error is really weird though, it's about createScene() where it says it should return something (I think this could be a bug in Playground)

[JohnK]

Not able to help with your problem but if you check Basic Scene from the drop down menu top right of playground you can see that the function createScene should return scene.

[JohnK]

Perhaps I can give a little help after all _ a matrix is not just any matrix it is a Babylon matrix. Just like vector3 matrix is a Babylon object, you cannot use your own matrix structure.

 

EDIT Misread meaning in code re matrix

Edited March 23, 2016 by JohnK
Misread meaning in code re matrix

[Wingnut]

Hi Omar!  Hi Deltakosh!  Hi JohnK!

I made a playground, too.

http://playground.babylonjs.com/#1R1EAY#3

This works, somewhat.  WASD keys move the box around (to 4 hard-coded positions).  Omar... I am not very experienced in these things, but notice that I have many more things happening inside of each keypress handler.  Let's look at the 'W' area... lines 51-77.  Particularly, let's look at lines 59-61.  This is a "custom" vector3InterpolateFunction function.  See the scene.beginAnimation in line 76?  That line runs anyVector3Animation.vector3InterpolateFunction() automatically. 

So, by setting the 'custom' function in lines 59-61, we are telling scene.beginAnimation to use OUR CUSTOM function, and not the normal default anyVector3Animation.vector3InterpolateFunction().

Look at line 87.  That is the "default" thing that happens during a scene.beginAnimation on a vector3-type animation.  Line 87 IS a custom func, but it is an exact copy of the function that BJS uses normally... so you don't notice anything special when you press 's'.  It is doing a standard vector3InterpolateFunction() run.

But now go back to line 60.  Notice that IT looks different.  It is special.  It does NOT start at box.position.  It starts at 0, 0, 0 origin (mid-ground).  And because of this 'custom' vector3InterpolateFunction(), the 'w' keypress does something 'special'.  Scene.beginAnimation (in line 76) is using YOUR CUSTOM vector3InterpolateFunction() and not the standard default version.  Every time you press 'w', the box starts at 0,0,0... and travels to its target.  The other keys (A,S,D) start at box.position, and travel to their targets.

With me?  You may not need a custom vector3InterpolateFunction().  It is rare that users need one.

SO, here is the same playground, but WITHOUT any custom vector3InterpolateFunction at all.  We're now letting BJS use only its NORMAL, DEFAULT, non-custom version of vector3InterpolateFunction... which is built-into the BJS framework's animation system.

http://playground.babylonjs.com/#1R1EAY#4

Works pretty good.  No custom funcs, all 4 keypresses cause animation.  Perhaps you could study my playgrounds, and get your version to work.  I hope this helps.  I hope I haven't said incorrect things. 

[Pryme8]

I was gonna ask about lerping here at somepoint thanks!

[Wingnut]

http://playground.babylonjs.com/#1R1EAY#5

Here's another.  I am outputting the lerps... to the console... for each keypress.

Notice that the sequence doesn't always end in 20's.  For example, alternating between 'a' and 's'... shows outputs whose last number is sometimes in the 16's, 17's, 18's, 19's.  Sometimes, even as low as 14's.  I don't know if this indicates that we have a sloppy lerp or not.  Considering I have set X and Z animation target values in the 20's range, I would not expect to see the final values of a lerp.... to ever end lower than 19.xxxx... but we ARE seeing ending lerp values in the 14's sometimes.  Not sure why.  *shrug*

It COULD be that the browser console cannot write output fast enough to keep up with the lerp values.  Maybe.  hmm.

Update:  I closed the 20 other playgrounds I had running in 20 other browser windows, and now the lerp values are looking more correct, always ending in the 19's.  Yep, I had myself bogged, I did.    It was Wingnut that had the "sloppy lerp".  heh

[GameMonetize]

@Omar: this is not a bug in playground  your createScene should return...a scene

I simplified your PG as you don't need to setup all the variables (the playground does it for you): http://www.babylonjs-playground.com/#1HXNQM#9

For WSAD, @Wingnut already provided a great bunch of good hints

 

[OMAR]

UPDATE

I found a better solution for this "Vector-Lerping problem", I will explain it how I did it step by step:

 

1) First, I declared my global variables. Basically, these variables are accessible everywhere

2) I created my player which is a box

 

3) This is where I did interesting stuff. I declared movement matrix as a property of player.

player.movementMatrix is a multidimensional array which will hold 9 predefined positions for the player. These positions are of type BABYLON.Vector3

 

4) Below is the code that initializes movementMatrix with predefined positions. Nothing special.

By looking at this code you can see that movementMatrix[1][1] contains BABYLON.Vector3(0, 0, 0) -> which is the center of the scene;

movementMatrix[0][1] is BABYLON.Vector3(-4, 0, 0) which is at the left

All these predefined positions are calculated using this loop

5) Here's another interesting stuff:

Notice that I added X and Z as properties of player. X represents the "i" and Z represents "j" in movementMatrix [ i ] [ j ]

Then of course, in the beginning of the game player has to start in the center that's why I wrote the 2nd line:

 

6) Here what I do basically is check what key the user pressed the relevant key and then I change the position of the player (cube) accordingly.

But I want to change the position using smooth Lerping animation and that's what I exactly did on Step 7

7) Check scene.getRenderDuration(). This is exactly what gives us a nice Vector-Lerping animation.

Here 0.5 is used as a smoothing factor. If you give it value of 1.0 it will change position instantly, whereas the lower value results in an animated transition

 

There is a reason why I've written all these here and did not put Babylon Playground link. Well it is simply because it does not compile in the Playground and again gives that same stupid "createScene() must return value" and I swear to God and I didn't write any return statements there. If you want to check the code you can see it in github it is open source here's the link: https://github.com/omarhuseynov011/NeoTrap

 

@Deltakosh I wrote the exact same code to Babylon Playground and now I totally believe that Playground has a bug. If you don't believe me you can go to my github, download all the code and then paste it to Playground you will see it will fail. Yet the code actually runs perfectly when I open index.html in my browser without any errors.

The reason why I've written this big boring reply is to show that Vector-Lerping animations can be done very simply without even using Animation classes of BABYLON

[GameMonetize]

are we agree about this:  http://www.babylonjs-playground.com/#1HXNQM#9

It is working? Correct?

Please provide a buggy playground link and I'll fix it or explain you what you are doing wrong

[GameMonetize]

Interesting read about PG by the way: http://doc.babylonjs.com/generals/The_Playground_Tutorial

[OMAR]

Here it is: http://www.babylonjs-playground.com/#1PZLHW#0

And here's the code that works perfectly in my browser https://github.com/omarhuseynov011/NeoTrap/blob/master/game/scene.js

And they are the same

[OMAR]

@Deltakosh I believe Playground has a built in createScene() function that has to return something which collides with my own createScene() function which does not have to return value

That's what I've understood

[GameMonetize]

Ok I already fixed your PG: http://www.babylonjs-playground.com/#1PZLHW#1

I already mentioned that the PG expect the createScene to return a scene...Can you please read my response before calling it a bug??

[Sebavan]

Hello,

createScene needs to return a scene as you can see clicking the new button in PG:

// You have to create a function called createScene. This function must return a BABYLON.Scene object
// You can reference the following variables: scene, canvas
// You must at least define a camera
// More info here: https://github.com/BabylonJS/Babylon.js/wiki/The-Playground

In doubt, you can even look at the unminified sources here: http://www.babylonjs-playground.com/index.js or press F12 and see line 220 how the scene creation is used. So yes you need to return a scene.

Also, Vector0 is a function not a constructor so no need for new. So now, at least you do not have errors on launch:

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

And fixing the other issues from your migration to playground gives this:

http://www.babylonjs-playground.com/#1HXNQM#8 (moving almost work apart from lerping...)

Playground is not a plain html free file by design (else jsFiddle would have been enough)  It helps providing the recurrent "wiring" and focusing on real functionalities. This is the main added value.

Then you have got two issues:

- First lerping should be implemented differently, basicallly, either you use animation (and start, stop, reset them accordingly) or lerp manually but this needs to occur on every frame up to the point you reached your destination....

- The second and bigger one, you are not trusting Deltakosh who is one of the most patient and helpful guy on the forum also main author of all of it :-) I personally think this is the bigger one.

Hope it will help you understanding the issues and sort out your application.

 

[Wingnut]

Hi again, guys.  I believe there is a mis-communication, here.  (duh, wingy?)

Omar, main thing... playground scenes are always different from HTML-launched non-playground scenes.  They should NOT be "the exact same code".  Playground scenes have a special format that is different from non-playground scenes.

When Deltakosh asked to see a "tiny" playground scene of your issue, he DID NOT want you to paste your entire scene into the playground editor.  Instead, he wanted you to make a playground scene similar-to the many built-in playground scenes at the playground link.  You should start with something that looks like this:  http://playground.babylonjs.com/#1MKHST#0

In the "your code here" section, put ONE of your lerp-without-Animation tests.  Don't put lots of code in there.  Just a tiny amount.  Just enough code to show us a lerp that is not acting correctly.  No more.  Just barely enough code... to show the problem.

Don't remove the 'return scene' at the bottom of your code.  Leave it there.  The playground NEEDS it to stay there.  Don't add a renderLOOP call, or a resize event handler.

When you do as I have stated, it makes it easy for all of us to look at your SIMPLE, TINY, lerp issue. 

After that, we can ALL concentrate on HOW and WHY your lerp action is not working, and we can forget the part about the playground acting strange and causing errors. 

If you can show us your lerp issue exactly within the "your code here" section. then you/we will have no more "needs to return a scene" issues... and we can then fully focus-upon "Why won't my box do lerp-positioning correctly?".  We want a very small "test jig"... that shows the problem in a simple, easy way.

The folks around here are TRYING to get you to make a very very simple, tiny playground... with NO extra code in it.  Let's look at 5 built-into-playground demos:

http://playground.babylonjs.com/?0
http://playground.babylonjs.com/?1
http://playground.babylonjs.com/?2
http://playground.babylonjs.com/?3
http://playground.babylonjs.com/?4

All of them... are SIMPLE createScene() functions that end with return scene;  The playground NEEDS this special format, and not an exact copy of your non-playground scene/project.  (Sorry for so much repeating)    And there is no need to call the createScene() function.  The playground will call/run it FOR us.

Ok, I thought I would try to repair a possible misunderstanding that is likely happening here.    We'll get this darned communications radio interference cleared-up, even if we need to erect a 1000 meter antenna.   

[OMAR]

@Wingnut thank you I guess I didn't know how Playground actually works. Thank you all for your patience and kind answers

[Wingnut]

It's our pleasure, Omar.  I wrote the docs for the playground, and I was in a hurry at the time.  I don't think I did a very good job at it.

The playground DOES have the abilities to contain larger projects, but they must have a certain format... or else the playground will generate errors.

I think many forum users are VERY interested in your lerp discoveries, and we would love to see a playground version of your full project, someday, soon.  But at THIS moment, we need something smaller... to help us see the exact problem area... clearly and easily. 

I think SOME people call a bare-bones test of a theory/idea... a "Proof of Concept".

When I first used the playground, I was totally confused by it.  But, in time, it became my best friend.  I hope the same thing will happen for you.  I'm sure it will.

Not many BJS users have studied interpolation.  It is used in our animation and easing functions, and in our fantastic ActionManager.  That's why so many of us are interested in your ideas about it.  Maybe later, you can start a forum thread... perhaps "Fun With Lerp"... and you can show us all the cool stuff that you have discovered about lerp.

THANKS Omar!  You have shown great patience and kindness with our playground's "special requirements".  Ask more questions about the playground, if you wish.  Try some playground experiments with the demo scenes found in a pull-down selector menu at the playground.  Modify them and RUN them repeatedly, if you wish.  SAVE the good ones, bookmark them, download ZIPs... have some fun.  You cannot accidentally over-write our built-in demos, or damage ANYTHING whatsoever.  Our playground has many "help me program" features, too. 

If you insert a line into all your playground saves... like this :  // huseynov   ...then later, you can use our nifty playgrounds searcher... to find/view all the playgrounds that you have ever saved in our playgrounds database.  Handy.

Okay, good luck, Omar.  We look forward to seeing some proof-of-concept tests of your lerp ideas (when you aren't busy doing something else).  Personally, I think you are correct about using lerp to animate without the need for an Animation object.  Likely, you will want to use the lerp that is built-into BJS vector3 objects. 

I built a little playground that uses it... and sends its output to console.  http://playground.babylonjs.com/#1HJSOF

You might use the handy function scene.registerBeforeRender(function() { do something at each render frame }); ... to "meter" the position changes to the box.  For example, you might want to apply a new lerp position to the box... every 10th frame, and end when the box has reached the final target.  Be well.

[Sebavan]

Hello,

I do think it would be easier with to use the simple BJS animation system:

http://www.babylonjs-playground.com/#1HXNQM#11

This basically is equivalent and handles the interpolation for you internally.

I use a keyframe 100 and ends at 50 to simulate your 0.5 in the interpolation but I would recommend you to correctly choose the values upfront.

 

[Wingnut]

Omar might be inventing his own animation system. I'm thinkin' that Omar is thinkin'.  He's got some new inventions in his mind.  Inventions are fun and good... unless it causes a volcano to erupt.

[OMAR]

@Sebavan Your technique works well too but it doesn't exactly do what I want it to do.

Here's an example I did to illustrate my idea: http://www.babylonjs-playground.com/#IKETR#1 (It has Color lerping as well)

It's very simple and does exactly what I meant.

@Wingnut thanks Playground works perfect it was just me who messed it up (sorry ) and blamed it as a bug which was wrong @Deltakosh I apologize