問題タブ [buffer-geometry]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - three.js でのポイント スプライトのレンダリングの問題
私は現在、アニメーション化されたストロークの円を過剰にレンダリングすることにより、ブラウザーでデータを視覚化するプロジェクトに取り組んでいます。私は 3D ライブラリの評価を開始し、three.js を使用して概念実証アプリケーションを作成しようとしました。私の 1440p モニターでは、最大 150,000 ポイントのスプライトを 60 fps でアニメーション化およびレンダリングできます。詳細を見始めるまで、すべてが見栄えがします。2 つのレンダリングの問題があります。
- アニメーションをオフにしても変な横線が出る
- カメラを向けると、重なっているポイント スプライトの透明な領域に、下にあるポイント スプライトではなく背景が表示されます。
概念実証アプリケーションは次のとおりです: https://jsfiddle.net/tcpvfbsd/1/
問題を確認する最善の方法は、ポイント スプライトが領域全体に広がるのを数秒待ち、右上隅の速度コントロールを使用してアニメーションを一時停止し、マウスの左ボタンを使用してカメラを回転させて回転させることです。
javascript - three.js でフレームごとに bufferGeometry のインデックスを更新する
ループ関数で bufferGeometry のインデックスを更新する必要がありますが、割り当てられていないインデックスのみを更新できます。インデックス配列の要素に値を代入すると、次回は新しい値を代入できません。 などの問題を検索しましmesh.geometry.index.needsUpdate = true;たが、効果がありません。
bufferGeometry によって新しいメッシュを作成するのは私のコードです。
ループ関数のインデックスを更新するのは私のコードです。
レンダリング結果です。
最初に割り当てられたインデックスのみを保持できます。など、index([0,1,2,2,3,0]) が有効です。次回新しい値を設定すると、indexs([4,5,6,6,7,4]) が無効になります。
私cube.geometry.index.needsUpdate = true;はいくつかの問題を検索geometry.addAttribute('indices', new THREE.BufferAttribute(new Float32Array(iIndices), 3));しcube.geometry.attributes.indices.array;ます。無効です。
ループ関数で bufferGeometry のこれらのインデックスを更新するにはどうすればよいですか?
それを解決する方法を試してみると、新しい問題を抱えた低い方法が見つかります。最適化する方法。
これが私の方法です。
これが結果(前)です。
これが結果（後）です。
ジオメトリの頂点は不変ですが、ジオメトリ ( result01 ) のインデックスは [0,1,2,2,3,0] であり、ジオメトリ ( result02 ) のインデックスは [4,5,6,6,7,4 です。 ].ジオメトリがレンダリングされると、result01 と result02 の間のフレームごとにインデックスが更新されます。
ただし、メソッドは のみをサポートしnew THREE.Mesh(geometry, new THREE.MeshBasicMaterial({wireframe: false}));ます。の場合wireframe=true、ジオメトリのインデックスが更新されません。
それを最適化するwireframe=true方法