は時間

Question

の期間にわたってTHREE.Pointsオブジェクトをモーフィング私はTHREE.Pointsは、私は別の形に変身しようとしているオブジェクトがあります。私は単に新しいジオメトリへのオブジェクトのジオメトリを設定した場合、頂点は自動的に新しい位置に更新されます：

object.geometry =新しいTHREE.SphereGeometry（）。

はしかし、私は頂点が単純に瞬時にそこに登場するのではなく、彼らの新しい位置に「旅」にしたいです。 Tweenjsを使ってすべての頂点に対して新しいトゥイーンを作成することを検討しました。これはうまくいくように見えますが、操作する頂点が何千個もある場合、実際には遅れます。

function morph(){ 
    var newGeom = new THREE.SphereGeometry(2.5, 64, 64); 
    var curGeom = box.mesh.geometry; 

    var targetVertices = newGeom.vertices; 
    var curVertices = curGeom.vertices; 
    var less = targetVertices.length < curVertices.length ?targetVertices : curVertices; 

    var tween; 
    var cur, target; 
    for (var i=0; i<curVertices.length; i++){ 
     cur = curVertices[i]; 
     target = targetVertices[i]; 

     tween = new TWEEN.Tween(cur).to(target, 1000); 
     tween.start(); 
     box.mesh.geometry.verticesNeedUpdate = true; 
    } 
} 

もっと良い解決法はありますか？私はモーフターゲットを使ってみましたが、THREE.Pointsがそれらをサポートしているとは思いません。

Answer 1

何千もの頂点の位置を1秒間に60回更新すると、CPUが非常に重くなるため、ラグが発生しています。グラフィックカードがだったので、フレームごとに大量の計算を処理するためににしたので、これらの計算をすべてGPUに委ねる必要があります。

をご覧になることをお勧めします。達成しようとしている機能と同様の機能をラグなしで実行します（ただし、各点のサイズを変更する代わりに、位置を変更します）。 Here is the source code you should read carefully。

あなたはこの例が何をするかを適切に理解していたら、私は次のように、あなたのシーンを変更するお勧めします。

1. はBufferGeometryを取り、あなたが出発点として、たいどんな位置にposition属性を割り当てます。
2. は、すべてのエンディングポジションを持つことになりますBufferGeometry、新しいカスタム属性customPositionを追加します。開始と終了位置との間のアニメーションを制御する「スライダー」であろう1、 -
3. が0の範囲ShaderMaterialでuniform宣言する。ジオメトリ属性とシェーダの制服を設定したら

、あなたがid="vertexshader"ラベルされたセクションに移動することができますし、positionとcustomPosition属性で遊ぶことができます（それ以外の場合はしませんが、トップにattribute vec3 customPosition;を追加することを忘れないでください何を理解するcustomPosition！）。

ちょうどそのように、あなたはGLSLに独自のカスタム頂点シェーダを書くことでしょう！ GLSLは、WebGLがGPUと通信するために使用する言語です。

シェーダの詳細を理解するには、http://thebookofshaders.com/を読むことを強くお勧めします。