jscript垃圾收集器有多快？ Three.js矩阵旋转 [英] How fast is the jscript garbage collector? Three.js Matrix Rotations

问题描述

  //旋转一个对象围绕对象空间中的任意轴
函数rotateAroundObjectAxis（object，axis，radians）{
 rotationMatrix = new THREE.Matrix4（）; 
 rotationMatrix.makeRotationAxis（axis.normalize（），radians）; 
 object.matrix.multiplySelf（rotationMatrix）; //后乘
 object.rotation.getRotationFromMatrix（object.matrix，object.scale）; 
删除rotationMatrix; 
} 
 
 //围绕世界空间中的任意轴旋转对象
函数rotateAroundWorldAxis（对象，轴，弧度）{
 rotationMatrix = new THREE.Matrix4（ ）; 
 rotationMatrix.makeRotationAxis（axis.normalize（），radians）; 
 rotationMatrix.multiplySelf（object.matrix）; //预乘
 object.matrix = rotationMatrix; 
 object.rotation.getRotationFromMatrix（object.matrix，object.scale）; 
删除rotationMatrix; 
} 
  

其中rotationMatrix是一个全局变量。我对Javascript和Web应用程序的开发没有经验，但是我跟一个似乎向我转达的人交谈过，因为有时候我会把这些功能称为一个框架，我应该关心它为每个调用创建新对象的事实。到目前为止，这并没有给我带来任何问题，但是我应该担心垃圾收集器最终无法保持吗？我明白，与C ++不同的是，delete关键字仅删除引用。 当我在每个函数结束时调用它时，这有帮助吗另外除了使这个函数更有效之外，还有什么可以做的，以便可以调用它尽可能多的时间，而不会放慢速度或最终导致浏览器占用过多的内存。

解决方案

我进一步了解了如何使用Chrome开发人员工具。此外，我已将这些功能重写为我认为可能稍微更高效的功能。我将不得不看看它是如何扩展的，但是剖析工具似乎表明这些内存和垃圾收集器都更好一些。

世界中旋转的函数但是为了不创建新的矩阵，空间需要复制。简而言之，如果我们不是每次调用都创建一个新的矩阵，我们不能简单地复制参考，我们必须复制矩阵。基本上这取决于这个副本或垃圾收集器的开销是否会更加昂贵。

  //旋转对象围绕对象空间中的任意轴
 var rotObjectMatrix = new THREE.Matrix4（）; 
函数rotateAroundObjectAxis（object，axis，radians）{
 rotObjectMatrix.makeRotationAxis（axis.normalize（），radians）; 
 object.matrix.multiplySelf（rotObjectMatrix）; //后乘
 object.rotation.getRotationFromMatrix（object.matrix，object.scale）; 
} 
 
 var rotWorldMatrix = new THREE.Matrix4（）; 
 //围绕世界空间中的任意轴旋转对象
函数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）; 
} 
  

我不确定这是否会更好。我拍了这些截图。这个人使用 原创功能 ，而且这一个使用这些 新功能 。似乎表明新的表现略好。我不确定是否可以注意到有什么不同。

编辑：一旦我意识到updateMatrix函数，我想出了一个不同的函数。这避免了使用复制整个矩阵。这是新的世界循环函数：

  / **将rad的旋转添加到关于世界轴的obj旋转* / 
 var rotWorldMatrix = new THREE.Matrix4（）; 
函数rotateWorldAxis（obj，axis，rad）{
 rotWorldMatrix.makeRotationAxis（axis.normalize（），rad）; 
 obj.updateMatrix（）; 
 rotWorldMatrix.multiplySelf（obj.matrix）; // pre-multiply 
 obj.rotation.getRotationFromMatrix（rotWorldMatrix，obj.scale）; 
} 
  

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.

解决方案

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);
}

这篇关于jscript垃圾收集器有多快？ Three.js矩阵旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！