3Dからスクリーンへの読み込み位置を変更するときの計算を加速する方法

Question

マウスを動かすと、3次元位置が2次元に更新されます。画面位置に投影する3Dオブジェクトが多数存在する可能性があるため、パフォーマンスの問題が発生します。

計算を高速化する手段はありますか？以下は、2次元スクリーン上の3次元オブジェクトの位置を計算する方法です。

function toScreenPosition(obj) { 
    var vector = new THREE.Vector3(); 
    //calculate screen half size 
    var widthHalf = 0.5 * renderer.context.canvas.width; 
    var heightHalf = 0.5 * renderer.context.canvas.height; 
    //get 3d object position 
    obj.updateMatrixWorld(); 
    vector.setFromMatrixPosition(obj.matrixWorld); 
    vector.project(this.camera); 
    //get 2d position on screen 
    vector.x = (vector.x * widthHalf) + widthHalf; 
    vector.y = -(vector.y * heightHalf) + heightHalf; 

    return { 
     x: vector.x, 
     y: vector.y 
    }; 
} 

Answer 1

ではなく、ワールド空間にカメラが移動して、あなたのカメラオブジェクトへのあなたのHUDオブジェクト（複数可）を追加し、一度だけそれらを配置するたびに、あなたのHUDを再配置します。その後、カメラが動くと、HUDはそれに沿って動きます。カメラの変形が子供たちにカスケードされるからです。

yourCamera.add(yourHUD); 
yourHUD.position.z = 10; 

このようにそれをやって（あるいはそれにあなたがいた道を配置する）シーンオブジェクトは、あなたのHUDの形状でクリップすることができ、あるいはあなたのHUDとカメラの間に表示され、HUDを曖昧にすることに注意してください。それがあなたが望むものなら、素晴らしい！そうでない場合は、HUDを2番目のレンダーパスに移動し、それを「上に」残すことができます。上記のコメントに書かれたよう

Answer 2

まず、ここでは（ほとんど）のために書き直さあなたの関数の例で最適なパフォーマンス、renderloopが明らかに呼び出す行うに説明するための単なる一例である：

var width = renderer.context.canvas.width; 
var height = renderer.context.canvas.height; 

// has to be called whenever the canvas-size changes 
function onCanvasResize() { 
    width = renderer.context.canvas.width; 
    height = renderer.context.canvas.height; 
}); 

var projMatrix = new THREE.Matrix4(); 

// renderloop-function, called per animation-frame 
function render() {  
    // just needed once per frame (even better would be 
    // once per camera-movement) 
    projMatrix.multiplyMatrices( 
    camera.projectionMatrix, 
    projMatrix.getInverse(camera.matrixWorld) 
); 

    hudObjects.forEach(function(obj) { 
    toScreenPosition(obj, projMatrix); 
    }); 
} 

// wrapped in IIFE to store the local vector-variable (this pattern 
// is used everywhere in three.js) 
var toScreenPosition = (function() { 
    var vector = new THREE.Vector3(); 

    return function __toScreenPosition(obj, projectionMatrix) { 
    // this could potentially be left away, but isn't too 
    // expensive as there are 'needsUpdate'-checks in place 
    obj.updateMatrixWorld(); 
    vector.setFromMatrixPosition(obj.matrixWorld); 
    vector.applyMatrix4(projectionMatrix); 

    vector.x = (vector.x + 1) * width/2; 
    vector.y = (1 - vector.y) * height/2; 

    // might want to consider returning a Vector3-instance 
    // instead, depends on how the result is used 
    return {x: vector.x, y: vector.y}; 
    } 
})(); 

しかし、 HUDをレンダリングしたいと考えると、メインシーンとは独立して、上記の計算をすべて廃止し、HUD要素のサイズと配置のために異なる座標系を選択することができます。

ここには例としてhttps://codepen.io/usefulthink/pen/ZKPvPBがあります。そこでは、正射投影カメラと別のシーンを使用して、3Dシーンの上にHUD-Elementsをレンダリングしました。余分な計算は必要ありません。また、HUD要素のサイズと位置をピクセル単位で指定することもできます（パースペクティブカメラを使用しても同じことができますが、これを正しく行うには三角法を必要とします）。