Question

I am using these two functions in order to rotate my objects in my three.js scenes

    // Rotate an object around an arbitrary axis in object space
    function rotateAroundObjectAxis(object, axis, radians) {
        rotationMatrix = new THREE.Matrix4();
        rotationMatrix.makeRotationAxis(axis.normalize(), radians);
        object.matrix.multiplySelf(rotationMatrix);  // post-multiply
        object.rotation.getRotationFromMatrix(object.matrix, object.scale);
        delete rotationMatrix;
    }

    // Rotate an object around an arbitrary axis in world space      
    function rotateAroundWorldAxis(object, axis, radians) {
        rotationMatrix = new THREE.Matrix4();
        rotationMatrix.makeRotationAxis(axis.normalize(), radians);
        rotationMatrix.multiplySelf(object.matrix);        // pre-multiply
        object.matrix = rotationMatrix;
        object.rotation.getRotationFromMatrix(object.matrix, object.scale);
        delete rotationMatrix;
    }

where rotationMatrix is a global variable. I am unexperienced with Javascript and web app development, but I talked to someone who seemed to convey to me that because sometimes I call these functions once a frame I should be concerned about the fact that it creates new objects each call. This has not given me problems so far, but should I be concerned that the garbage collector will not be able to keep up eventually? I understand that the delete keyword here unlike in C++ only deletes the reference. Does this help when I call it at the end of each function? Also is there anything I can do other than that to make this function more efficient so that it can be called as many times as possible without slowing things down or eventually making the browser take up too much memory.

Answer 1

After fiddling with this a bit further I have learned a lot about how to use the Chrome Developer Tools. Also I have rewritten these functions to be what I feel could be slightly more efficient. I will have to see how it scales, but the profiling tools seem to show that these are a bit better on memory and the garbage collector.

The function for rotating in world space however requires a copy in order not to create a new matrix. In short if we do not create a new matrix each call, we cannot simply copy the reference, we must copy the matrix. Basically it comes down to whether or not this copy or the garbage collector overhead is going to be more expensive.

// Rotate an object around an arbitrary axis in object space
var rotObjectMatrix= new THREE.Matrix4();
function rotateAroundObjectAxis(object, axis, radians) {
    rotObjectMatrix.makeRotationAxis(axis.normalize(), radians);
    object.matrix.multiplySelf(rotObjectMatrix);      // post-multiply
    object.rotation.getRotationFromMatrix(object.matrix, object.scale);
}

var rotWorldMatrix = new THREE.Matrix4();
// Rotate an object around an arbitrary axis in world space       
function rotateAroundWorldAxis(object, axis, radians) {
    rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
    rotWorldMatrix.multiplySelf(object.matrix);        // pre-multiply
    object.matrix.copy(rotWorldMatrix);
    object.rotation.getRotationFromMatrix(object.matrix, object.scale);
}

I am not sure whether this will be better or not. I took these screenshots. This one was using the original functions and this one is with these new functions. Seems to suggest slightly better performance with the new ones. I’m not sure if I can notice a difference.

EDIT: I came up with a different function once I became aware of the updateMatrix function. This avoids the use of copying the entire matrix. Here is the new world rotation function:

/** Adds a rotation of rad to the obj's rotation about world's axis */
var rotWorldMatrix = new THREE.Matrix4();
function rotateWorldAxis(obj, axis, rad) {
    rotWorldMatrix.makeRotationAxis(axis.normalize(), rad);
    obj.updateMatrix();
    rotWorldMatrix.multiplySelf(obj.matrix); // pre-multiply
    obj.rotation.getRotationFromMatrix(rotWorldMatrix, obj.scale);
}