Connecting BabylonJS to NodeJS server through Socket.io

[Abdullah]

Hello Everyone, I hope you all are fine..
Actually i am new to Babylon and creating my first game on it. I need help regarding the connection of BabylonJS with NodeJS server. 
Actually i want to receive some raw data from NodeJS server through Socket.io. And then i want to move my object according to that data. This data contains x,y,z coordinates. 

So kindly help me regarding this that how can i connect to server and receive data in a efficient manner. 

Any help will be appreciated..

[getzel]

Hello,

I think that you have to do something like this in your server.js :

 

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {

var vector = {x: 10, y: 0, z:0};

  socket.emit('newPos', vector);
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

 

And on your client :

 

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect();

// integrate babylon and create your scene with a mesh 

  socket.on('newPos', function (data) {
    mesh.position = BABYLON.Vector3(data.x, data.y, data.z);

    socket.emit('my other event', { my: 'data' });
  });

// you can use a Lerp function or something else to move depending on your need 

</script>

[Abdullah]

thanx @getzel ..... sorryy for replying very late...
your answer helped me and now i am able to receive data....
and now i have another query for you.. 

Actually i am making a Table Tennis game and the working of the game is like i want to receive the readings of gyroscope from my mobile through socket.io(And this is done and i am receiving the data). now the problem is that the data is coming very fast like in nanoseconds. i have a confusion.

should i limit the data and apply simple rotation function on my racket...

mesh.rotation = new babylon.vector3(x,y,z).

OR there is some other special functions available for real time rotation??? 

because values are coming very fast and racket is also moving very fast., 

And i have tried one more thing.... i am sending a static value of (1,1,1). but still racket is rotating but the values are constant,...what is this???

So basically i want to rotate my racket with my mobile at real time through its gyroscope readings..

So kindly reply me as soon as possible. And also tell me if you want more description. 

Thanx..!!!

@Wingnut @Deltakosh .... any help will be appreciated form you guys..

[Wingnut]

Hi A!  Boy, I'm not very experienced with device orientation streams, sorry.

I DID do a quick test to make sure CannonJS meshImpostors react to standard .rotation.

http://playground.babylonjs.com/#2H9MHN#5

It appears that they do. 

But yes, you will likely need to "tame" the orientation stream, a bit.  Soften it.  Perhaps this is best done... by mathematical "rounding" the stream values.

In other words, not every tiny device orientation (dev-or) change... is reacted-to by the racket.  Maybe... only every 100 units of dev-or change... cause ONE unit of racket rotation change.

I don't know what the incoming values from a dev-or (gyro) device... look like.  Are they values between -1 and +1?  (Is that called "scalar" values?)

But it is likely... you will need to "massage" (adjust) the incoming device orientation values... on-the-fly (in real time) ...BEFORE applying them to racket (racquet) .rotation.  Maybe you need a deviceOrientationValueToRacketRotation() function (a converter).

That's about all I can help-with... and I could easily be wrong, too.  Sorry. 

I think YOU will become the helper/teacher, here.  You will become the expert, and you can teach me/us. 

Good luck.  Hopefully, more experienced users will comment soon.

[Abdullah]

thanx @Wingnut for the help and also for the complement...  

now i have another question.... Actually i am now able to rotate the racket according to mobile. but the issue that i am facing now is that when continuously rotating the racket then i guess it is changing its pivot position on which it is rotating. 

Now i wan to set the pivot or Origin at the centre of the racket. i code it in this way.. 

 

 BABYLON.SceneLoader.ImportMesh("", "./", "racket3.babylon", scene, function (newMeshes, particlesystems) {

                    // console.log(newMeshes);
                    r2 = newMeshes[0];
                    // console.log(r2);

                    r2.position = new BABYLON.Vector3(0, 1, 2);
                    r2.scaling = new BABYLON.Vector3(0.3, 0.3, 0.3);
                    r2.rotation.y = r1.rotation.y + .1;
                    r2.rotation.z = r1.rotation.z + 3;
                    r2.rotation.x = r1.rotation.x + 4.7;
                    // set pivot
                    //currentMesh.setPivotMatrix(BABYLON.Matrix.Translation(10, 0, 10));
                    //temp.position = new BABYLON.Vector3(-0.1,1,2.2);
                    r2.setPivotMatrix(BABYLON.Matrix.Translation(-0.1, 1, 2));
                    // compensate shifting
                    r2.position = currentMesh.r2.add(new BABYLON.Vector3(0.1, -1, -2));
                    r2.physicsImpostor = new BABYLON.PhysicsImpostor(r2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.8 }, scene);
                    // camera.target = r2
                });

 

but it just moved the racket up.  i don't know the reason but i was just changing the pivot position according to my need..

And also tell me what is the default pivot position of a mesh or object.
So kindly do help me if you understand what i am saying and reply me... 

Thanx..

[Wingnut]

Hi A!

   This is normal behavior (for mesh to change position after moving pivot point).  It is because mesh pivot point == mesh origin, by default.  In other words... the pivot point is ALSO the point which mesh.position uses... for placing the mesh in a BJS scene.

So when you move pivot point up, mesh will go down.  BJS thinks it didn't move the mesh... because mesh origin is still the same. Also, future rotation will happen around the new pivot point.

SO, really, setPivotMatrix does NOT move the pivot point.  It actually moves the mesh SHAPE (vertex points), and leaves the pivot point in the very same place.  Understand?

Generally speaking, first do setPivotPoint, then re-position the mesh shape to original place.

http://playground.babylonjs.com/#2H9MHN#6

The white sphere is a "pivot gizmo" I added... to show where the pivot point/origin/center-of-rotation is located.

Let's tour:

Line 93 - move the paddle upward a bit more.
Line 94 - set the mesh vertices -2 Y from the pivot point.
Lines 96-99 - create the white pivot-point indicator gizmo.
Line 100 - set the gizmo position == r1 position.  See how r1.position is actually NOT at the center of the mesh shape?  The white sphere is well above the physical paddle shape.  But BJS thinks the paddle position is at the white sphere... and it IS.  It is AS IF the paddle shape... has been offset from its brains, eh?    Brain in one place, body in another place.    SetPivotMatrix actually moves the body, not the brain.  heh.

Perhaps setPivotMatrix should be named... OffsetMeshbodyFromMeshbrain() 

NOTE:  Be sure you do all pivot adjusting... BEFORE you setPhysicsState, or else the physics impostor will be in the OLD pre-pivot-move position.  (It will stay at meshbrain instead of moving with meshbody.)

You can see... by the rocking of the paddle... that the pivot point is indeed located at the white sphere.  The paddle .position needed to be moved-up, to compensate (to bring the physical paddle back up to normal height).

I hope you understand.  Experiment with pivot points, and you will become an expert.  Let's look-at where your "natural" pivot point is set... from/by your modeling software...

http://playground.babylonjs.com/#2H9MHN#7

Easy to see.  I have done no pivot changes and no paddle height changes (disabled lines 93-94).  Also, I have TWO "cosine paddle rockers" active in lines 279/280 (one on X axis, one on Y axis).  The white sphere shows the default pivot point of YOUR paddle, and can be adjusted in your modeling software, if you wish.

I hope this helps.  Party on!

[Abdullah]

Helloo Everyone again....  
hope you all are fine.....
First of all thanx alot @Wingnut for your answer... your answers always helped me...
so now i am here for some more help..   

Actually i want to add the sound in my game ... till now i have decided to add two sounds.. 
first whenever ball bounce. so i want to add the sound of bouncing ball. 
and second whenever ball collides with racket. Basically i want to add the sound of the collision of ball with racket or table. 

so kindly help me... and also suggest me if you think that some other sounds should also be in my game. 

Thanx for your time and replies...  

[Wingnut]

Thanks for nice words, Abdullah... and for fun post.  Your project is interesting and fun, too.

I don't know how many people have tried synchronizing sound... with physics collisions (ball sounds... for impact with table, floor, and racquets).

You might be an "early explorer" of triggering sounds with physics engine.

http://playground.babylonjs.com/#2H9MHN#8

Here is a playground where I test sphere.impostor.onCollide() event (lines 51-56).  When triggered, I send console.log report, and change sphere to random color.

As you can see, there are problems.  Sometimes, onCollide triggers as ball rolls on racquet, sometimes NO onCollide when ball hits table or floor.  So far, not useful for triggering sounds.  Too inconsistent. 

I will study more... when I have time.  I am currently looking-at the addEventListener method seen on Cannon physics body.  (see blue properties/methods list at the bottom)  I have never used it, and I am not sure HOW. 

Other forum users... feel free to help us find a good physics-impact trigger, if you wish.  Thanks!

[Abdullah]

thanx @Wingnut .... i am also searching on it... hope so i will find something good.... and i will show you if i get something....  

And any help from any member will be appreciated....

So kindly do replies if you have any knowledge regarding this..  

[Abdullah]

hey @Wingnut ... why your collisions function is not working on my Visual Studio..?? 
 

not just this one infact no collision function is working.... i am just stucked.. 
 

please help me out... 

i have used these functions.. 

1) var onCollide = function (evt) {
                sphere.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
                var music = new BABYLON.Sound("Music", "Bouncing Ball.wav", scene, null, {autoplay: true });
                console.log(evt)
            };
            sphere.physicsImpostor.onCollide = onCollide;

 

2) sphere.physicsImpostor.registerOnPhysicsCollide(surface.physicsImpostor, function (main, collided) {
                sphere.material.diffuseColor = new BABYLON.Color3(Math.random(), Math.random(), Math.random());
            });

 

3) if (sphere.intersectsMesh(surface, true))
            {
                music.play();
            }

i have tried all these three.... but none of these is working... but it is working fine on playground. why is it so..????? 

 

[getzel]

I didn't try but I have simple thoughts :

Don't load your sound in the onCollide function but in global space :
                var music = new BABYLON.Sound("Music", "Bouncing Ball.wav", scene, null, {autoplay: true });

Then, try in the onCollide function to do : music.play()

       

[Dad72]

I had created a topic a long time ago, about creating a powerful server with cluster that I had to share to the community.

The example is complete: client server, installation of nodeJS. . . (I give an example for a chat and for moving a character)

 

[BitOfGold]

@Dad72 Which is the latest version of this code, the one at the first comment is updated? There are several other versions on gitm in other comments, but which is the latest one?

 

[Dad72]

It seems to me that it is: v0.10.22 (stable) => The last one is I think : v0.10.35 (stable) &  v0.10.38 (maintenance)

But this can be updated easily I think. The base remains the same normally. (I do not have time to do it right away)

If someone is interested in updating the code with the latest version and sharing it, it would be cool.

[RaananW]

Hi,

Wanted to share two things:

1) https://github.com/endel/babylonjs-multiplayer-boilerplate - a client-server connection made by @endel (for the multiplayer game dev challenge)

2) Babylon's physics system has an internal event handling that can be used to trigger sound when two objects collide. As it is not yet fully documented, here is a quick demo:

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

Hope this helps!