Create a dice with babylon.js and oimo.js

[kenta88]

Hi guys,

I hope this is the right way to ask this question:

I would to create a dice to launch and discover the results. I started with this code:

 

//GUI: dice for launch
'use strict';

brainCrashGameFactories

    .factory('Dice', ['$rootScope','GameObject', function($rootScope,GameObject){
    
        var Dice = function(game)
        {
            GameObject.call(this,"dice",game);
            this.game=game;
            this.position = new BABYLON.Vector3(3,3,3);
            this.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(0,Math.PI/8,0);
            
            var vertexData = BABYLON.VertexData.CreateBox(0.3,BABYLON.Mesh.DEFAULTSIDE);
            vertexData.applyToMesh(this);
            
            this.game.shadows.getShadowMap().renderList.push(this);
            
            var material = new BABYLON.StandardMaterial('groundMaterial',this.game.scene);
            material.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1);
            this.material = material;
            this.checkCollisions = true;

            this.setPhysicsState({impostor: BABYLON.PhysicsEngine.BoxImpostor, mass:1, friction:0.3, restitution:1});
            
            this.applyImpulse(new BABYLON.Vector3(0.5,0.5,0), this.position);

            var localPosition = this.getPositionExpressedInLocalSpace();

            var that=this;

            setInterval(function(){ console.log(that.rotationQuaternion);},1000);



            /*var mq = this.rotationQuaternion;
            var q = BABYLON.Quaternion.RotationAxis(BABYLON.Axis.Y, s);
            this.rotationQuaternion = q.multiply(mq);
            this.body.body.setQuaternion(this.rotationQuaternion);
            this.body.body.sleeping = false;*/


        }
        
        Dice.prototype = Object.create(GameObject.prototype);

        Dice.prototype.constructor = Dice;
        
        return Dice;
        
    }]);

 

I would know if is possibile to understand when the dice stop to roll and understand the result. I would to know which face of the cube look up!

Do you know any way to do this?

Thanks a lot

[GameMonetize]

Hello, can you please provide a sample on the playground?

[kenta88]

Hi detlakosh! Thanks, I posted here a very simple example:

http://babylonjs-playground.com/#JXJ2I#1

When the cube stop rotating I would to recognize which face look up. Just to simulate a dice's launch. 

Thanks a lot

[jerome]

Hi, 

I don't know anything about the physics engine so far. I just added some random values to applyImpulse() to change a little the initial trajectory (I suppose) : http://babylonjs-playground.com/#JXJ2I#5

but I don't understand the bouncing of the cube regarding the initial trajectory then... seems weird

[Wingnut]

hehe.  Poor Turin isn't getting any good ideas, yet.    Turin, I have a few ideas, but they are likely bad ideas.  BJS has a thing called a pickingRay.  You can think of them as laser range finders, and you COULD fire 6 of those (one in each direction from the cube)... AFTER the cube has stopped tumbling.  One of the pickingRays will report an intersection with the ground.  Once you determine which pickingRay has hit the ground, you can deduce that the opposite side... is UP.

I'm not very experienced with rays... but, look here:  http://playground.babylonjs.com/#21FIRD

Lines 154 - 165... here the author uses a ray to check for intersection with the ground.  I believe line 157 is the ray target direction (it is a direction vector).  It has a -1 in the Y slot, which means the direction vector is straight down.  You don't necessarily need 6 of them shooting from the cube.  Maybe you could shoot just one... 6 different directions... in sequence.  When you get a hit, stop firing rays, take notice of the ray direction at the time of the hit, and use a simple formula to fig which way is up.  Simple, eh?  heh

BUT... I suspect that a good matrix transformation expert... could do worldMatrix divided by localMatrix = blah blah.  That stuff just scares me, so, I won't try talking about that.   

Turin, you can also remove lines 7 and 26.  "Collision" code lines are used in the BJS built-in collision/intersect system (which is not a full physics engine), but not used with our two external physics engines.  Line 5 enables the external physics engine, and since you did not specify OimoJS or CannonJS, OimoJS is the one being used (it's the default).

One of the issues you will encounter... is determining WHEN the cube has stopped tumbling.  You will need to wait for the physics rigidBody to "sleep".

Let's start this way.  In your demo line 31, put var cubeBody =    ...at the beginning of that line... like this...

var cubeBody = cube.setPhysicsState({ impostor: BABYLON.PhysicsEngine.BoxImpostor, mass: 1, friction: 0.3, restitution: 1 });

The cubeBody variable is not so important, but cubeBody.body    ...IS.  It is the physics "RigidBody" for your cube.

The OimoJS API (what funcs/properties it has)... has never been written, as far as I know.  I assembled a crappy one.  It is here...

http://urbanproductions.com/wingy/babylon/misc/j2h02.htm

Search that document for... com.element.oimo.physics.dynamics... notice the term "RigidBody" nearby.  That begins a list of funcs and properties on an OimoJS RigidBody... or in other words... on cubeBody.body.  Notice item 27... a Boolean flag property called sleeping.  That could be a handy flag for you to do testing.

How about a fresh playground, now....

http://playground.babylonjs.com/#JXJ2I#8

Open and watch your console.  It reports when the cubeBody.body has gone to sleep (when it has stopped tumbling).  Yay!  Notice line 37... that is where the "which way is up" testing will be put.  Look through the list of items for OimoJS RigidBody, and see what's there.  Notice item #9, #11, and #14.  All three of those... might be handy for testing which way is up.  Hopefully, some experts will add more comments and help us with that part of the challenge/adventure.  Party on!

@jerome ... you are only randomizing a tiny amount... +/-  less than 1... to the +x and +y impulse... not very noticeable.  In my latest version, I just used standard rotation to rotate the cube to its corner point (before setPhysicsState, a must), and dropped it.  (no impulse).  It would be nice if it was random tumble BECAUSE OF landing on a corner... but it is still predictable and repeating.

A way to get a random tumble would be to shoot an impulse upwardly into the down-facing corner of the cube... and randomly vary the upward angle just a little.  Think of the impulse as a jet of air from beneath.  Adjusting its upward direction even slightly... will make the cube tumble differently.  (I just got a mental image of a trained seal... balancing a ball on its nose, for some strange reason.) 

But you can also get random tumble by slightly and randomly adjusting the rotations done in line 25 of PG #8.  Math.PI/4 is about what... .707?  So, if each Math.PI/4 in line 25... was replaced with a random value between .705 and .709, that would do it.

And, guys, I could be wrong on ALL of this... but maybe not.  (phew, I'm pooped)    Be well. 

Edit:  It is probably wise to do scene.unregisterBeforeRender(sleepcheck); just after line 36.  The "it's asleep!" notifications in the console could get to be a BIG pile, and might fall over and hurt the dog. 

[Temechon]

It's better without collisions: http://babylonjs-playground.com/#JXJ2I#9

[Wingnut]

hehe.  Sorry Temechon.    Motor-mouth Wingy... getting in your way again.  Figs.

[kenta88]

Hey guys! Here Turin  !!! 

 

First of all I want to regards you for the support! I will regard especially  wingnut about the event to understand how to use event "when the cube sleep" .

My mate, that works in this project with me, find that solution:

 

var matrix = self.getWorldMatrix();
                matrix = matrix.clone();
                matrix.setTranslation(new BABYLON.Vector3(0,0,0));
                var vx = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(1,0,0), matrix).normalize();
                var vy = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,1,0), matrix).normalize();
                var vz = BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(0,0,1), matrix).normalize();
                console.log(vx.x + " " + vx.y + " " + vx.z );
                console.log(vy.x + " " + vy.y + " " + vy.z );
                console.log(vz.x + " " + vz.y + " " + vz.z );

 

But I'm waiting to understand how this could works

I hope that it could be for you a little help.

here the playground:

 

http://babylonjs-playground.com/#JXJ2I#10

[kenta88]

Ok guys! My friend find the solutions:

http://babylonjs-playground.com/#JXJ2I#14

Thanks a lot for the support ^^

 

[Wingnut]

Nice Nice Nice!  Well done!  Thanks to your friend, too.    And thanks for the nice words.  Cooooool!  Party on!