BabylonJS / Babylon.js

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
http://www.babylonjs.com
Apache License 2.0
23.05k stars 3.41k forks source link

Model growing after rotation #61

Closed ethr closed 11 years ago

ethr commented 11 years ago

Hi guys,

Thanks for your work on BabylonJS it looks really cool :)

I was playing around with some of the examples which are available, trying to merge the "heightMap" and model loading bits together.

So I got a model of a dog from a blender art repository and imported it, then tried experimenting with some animation. As the model got rotated, it grew and grew and grew in size exponentially when using the following statement in the animation loop:

dog.rotation.y += 0.001;

When using applyTransform() the dog models got replaced by 2 spheres which was very bizarre.

var transform = BABYLON.Matrix.RotationY(0.001);
dog.applyTransform(transform);

I might be doing this "animation" wrong, after all I'm still trying to learn the framework, but I didn't expect the model to grow like this. Perhaps there's some calculation gone wrong in the object's transformation matrix.

I can send the full code if required but I guess this is the relevant bit for now. I'll try to find some time to go through the Babylon code myself and see if I can work out what's going on.

Thanks guys

capture capture2

                camera.attachControl(canvas);
                var dog;
                var time = new Date().getTime();
                // Import dog model
                BABYLON.SceneLoader.ImportMesh("Cube", "", "scene.babylon", scene, function (newMeshes, particleSystems) {
                        console.log(newMeshes);
                        dog = newMeshes[0];
                        dog.position = new BABYLON.Vector3(10, 10, 50);
                        dog.scaling = new BABYLON.Vector3(4.0, 4.0, 4.0);

                        var dog2 = newMeshes[0].clone();
                        dog2.position = new BABYLON.Vector3(-100, 20, 50);

                        if (scene.activeCamera.keysUp) {
                                scene.activeCamera.keysUp.push(90); // Z
                                scene.activeCamera.keysUp.push(87); // W
                                scene.activeCamera.keysDown.push(83); // S
                                scene.activeCamera.keysLeft.push(65); // A
                                scene.activeCamera.keysLeft.push(81); // Q
                                scene.activeCamera.keysRight.push(69); // E
                                scene.activeCamera.keysRight.push(68); // D
                        }

                        scene.registerBeforeRender(beforeRenderFunction);

                        scene.registerBeforeRender(function() {
                                var newTime = new Date().getTime();
                                dog.rotation.y += 0.001;

                                //var transform = BABYLON.Matrix.RotationY(0.001);
                                //dog.applyTransform(transform);

                                /**
                                if (dog.rotation.y > Math.PI) {
                                        dog.rotation.y = 0.0;
                                }**/
                                time = newTime;
                        });

                        engine.runRenderLoop(function () {
                                scene.render();
                        });
                        engine.switchFullscreen(true);
                });
deltakosh commented 11 years ago

Uhm... looks strange, could you share your project?

ethr commented 11 years ago

Oh I forgot to say, the model seems to float away too. I'll make the whole project available when I get home from work.

ethr commented 11 years ago

See https://github.com/ethr/bug61

javascript code in /js/customEnv.js

Sorry about the messy state of the code... like I said I was experimenting.

ethr commented 11 years ago

I got some of your source code up and running and noticed in "babylon.mesh.js" there is a different code path when the rotation property of a mesh is a BABYLON.Quaternion. My mesh was using that class, so I changed it to a Vector3 and the problem went away i.e. the code looked like:

 var y = 0.00;
 scene.registerBeforeRender(function() {
    y += 0.001;
    dog.rotation = new BABYLON.Vector3(0, y , 0);
 });
deltakosh commented 11 years ago

Actually, the blender exporter uses quaternion for rotations instead of euler angles. You did the right thing if you want to use euler angles:)

ethr commented 11 years ago

Well I thought i might be doing something wrong when I made my first post... :)

Could argue there is something wrong with API though because the rotation property is ambiguous. You would have to do some instanceof check everytime you used it....


   if (mesh.rotation instanceof BABYLON.Quaternion) {
         // Do one thing
    }  else {
         // Do another
    }

Perhaps it would be good to have a function to handle Euler or Quaternion rotation changes rather than allowing access to a property that can be of multiple types. i.e.


  mesh.setEulerRotation(new BABYLON.Vector3(0, Math.PI/2, 0));
  mesh.setQuaterionRotation(.....)

Or even better just have on method that can take objects of both types and knows what to do with them:


   BABYLON.Mesh.setRotation = function(input) {
      if (input instanceof BABYLON.Quaternion) {
         // Do one thing
      }  else {
         // Do another
       }
       // Internal representation of the rotation is sorted out now
       // perhaps store as a Quaternion internally
   }

  mesh.setRotation(new BABYLON.Vector3(0, Math.PI/2, 0));

Anyway thanks for your help :)

deltakosh commented 11 years ago

You're right I will rename the property to rotationQuaternion and let the rotation property for euler