physics with jiglibjs about three.js HOT 16 CLOSED

I care ;)

This seems to work:

if ( links[i].type != "fixed" )
{
    var object = links[i].threejs, jig = links[i].jig,
    position = jig.get_currentState().position,
    orientation = jig.get_currentState().get_orientation().glmatrix;

    object.matrix.identity();
    object.matrix.multiplySelf( THREE.Matrix4.translationMatrix( position[ 0 ], position[ 1 ], position[ 2 ] ) );
    object.matrix.multiplySelf( new THREE.Matrix4(
                        orientation[ 0 ], orientation[ 1 ], orientation[ 2 ], orientation[ 3 ],
                        orientation[ 4 ], orientation[ 5 ], orientation[ 6 ], orientation[ 7 ],
                        orientation[ 8 ], orientation[ 9 ], orientation[ 10 ], orientation[ 11 ],
                        orientation[ 12 ], orientation[ 13 ], orientation[ 14 ], orientation[ 15 ]
                    ) );

}

You'll need to grab the new three.js build though. I've just changed the Matrix4 a bit to be able to send the matrix values in the constructor.

Also, after creating the mesh you'll need to do this cubemesh.autoUpdateMatrix = false;.

from three.js.

It works!
http://fabricasapiens.nl/projecten/threejs/physics/collisions_similar.htm (you could include this in the examples if you like. I will keep the URL stable)

I've also added the Spheres (not the cylinders, since these don't work on the JigLib side). I still find it hard to grasp all their functions though, and have currently no idea how to do for instance a simple collision detection...

It would already help if I understood your above fix :-)
Could you elaborate a bit on the code? What does the identity() function do? What is multiplySelf? What does the large THREE.Matrix4(n,...,-n15) stand for, and its individual nx values?
Oh, and why should the autoUpdateMatrix be set to false?

I understand if you don't have time for this, but it would surely help me a lot. If you post it in the wiki, everyone benefits :-)

from three.js.

The core of the engine is matrix-based. Having autoUpdateMatrix enabled means that every time you render a scene, the engine calculates the matrix for each object (every frame).

If you check out this class, you'll find the updateMatrix that gets executed:

https://github.com/mrdoob/three.js/blob/master/src/objects/Object3D.js

Usually you don't have to deal with this stuff, because you would just use position.x or rotation.x and the engine does the rest. But in some specific scenarios (like this one) you need to switch off that system and create the matrices directly yourself.

You don't have to fully understand all this, but taking a brief look to the Matrix wikipedia entry may be of some help:

http://en.wikipedia.org/wiki/Matrix_(mathematics)

from three.js.

can you add a stats.js to it I want to see how performant it is ??

from three.js.

@mrdoob: thanks! Will check it out :)
@gero3: added stats. It gets slower and slower when there are more elements. But I guess that's due to the physics and not due to the renderer, because I get the same results on their project page at http://jiglibjs.org.

from three.js.

I understand the Matrix-based system now (partially).

Basically, the object.matrix describes the orientation/position in space for any object. Depending on the mesh of the object, the renderer translates this matrix into the desired cube, cylinder etc. If there is any movement/rotation etc, the matrix will update, and the renderer will update the mesh on the canvas.

The plus of the matrix-based approach is that one can easily transformate/multiply the matrix with any other matrix (which can be a change in direction/position/scale) but the downside for me is that it makes things abstract :) I for example can still not really grasp what every value in the matrix stands for, and how they are affected with every transformation.

Anyways, I wonder why the rotation has both an x and a z component: they are essentially in the same plane, right?
And why is this:

this.rotationMatrix = THREE.Matrix4.rotationXMatrix( this.rotation.x );
this.rotationMatrix.multiplySelf( THREE.Matrix4.rotationYMatrix( this.rotation.y ) );
this.rotationMatrix.multiplySelf( THREE.Matrix4.rotationZMatrix( this.rotation.z ) );

separated out? I understand that they are essentially three transformations, but rotation in the X and rotation in the Y do not influence each other (I think?) and so they could be integrated?

from three.js.

... but rotation in the X and rotation in the Y do not influence each other (I think?)

The do, and that's why :)

from three.js.

hmm... will have to think about this ;-)

from three.js.

Okay, I have been profiling the physics simulation at http://fabricasapiens.nl/projecten/threejs/physics/collisions_similar.htm

but the slowdown is not only due to the physics, but also a lot due to the renderer.

I tested it with pressing 'Start' and waiting until there were 50 spheres on the scene. The FPS stabilized around 30. Then, I resized the window until only the stats part was visible so that the scene canvas was not updated anymore. The FPS rose to 60 again. In other words: the rendering makes a difference of 30 FPS? That means that drawing some 50 spheres or cubes brings WebGL to its knees?

from three.js.

That doesn't sound right. In my current tests I'm using 1000 spheres and it's about 15-30 fps.

from three.js.

could you upload that script so that I can see what I get? Maybe it's the Chromium/Ubuntu combi...

from three.js.

It's the examples/webglrenderer2_sandbox.html one.

from three.js.

Runs with 10fps here (Geforce 9600M GT 512 Mb RAM though) but yeah, it should be able to handle 50 spheres with no problem. Will have to investigate this when I have time. I don't have a clue what the problem can be, currently.

from three.js.

Does this not work in the latest version? I get this error:
Uncaught TypeError: Object function (b,c,e,f,h,m,k,n,u,p,v,t,x,w,z,y){this.set(b||1,c||0,e||0,f||0,h||0,m||1,k||0,n||0,u||0,p||0,v||1,t||0,x||0,w||0,z||0,y||1);this.flat=Array(16);this.m33=new THREE.Matrix3} has no method 'translationMatrix'

from three.js.

You probably need to use new THREE.Matrix4().setTranslation() instead.

from three.js.

Actually it won't work. The old implementation:

          THREE.Matrix4.translationMatrix = function (a,b,d) {
                var e = new THREE.Matrix4;
                e.n14=a;
                e.n24=b;
                e.n34=d;
                return e
            }

I've uploaded the gist here: https://gist.github.com/1314782

Three.js is the latest stable, and jig is the one found here

from three.js.