0

HTML 5 ビデオ要素をページにロードし、それらを THREE.Texture にマップし、3D の MeshBasicMaterial を使用して立方体にビデオ テクスチャを表示できます。(すべてのビデオは自動再生とループに設定されています。) 各アニメーション/レンダリング サイクル、チェックするテクスチャごとに:

if (video.HAVE_ENOUGH_DATA)
   texture.needsUpdate = true

この方法で再生するビデオをロードすると、フレームレートが低下し続けます。パフォーマンスを向上させるために何かできることがあるとしたら? ビデオを DOM 要素としてロードする必要がありますか? フラグメントシェーダー/GPUを活用して並列化できる方法はありますか?

4

1 に答える 1

4

ここに私が試してみたいことがいくつかあります...

  1. DOM に接続せずに、JavaScript でビデオ要素を読み込みます。ビデオがdisplay: none.

  2. 動画を小さくします。この場合、圧縮されていないビデオ フレームを GPU メモリにコピーすることがボトルネックになる可能性が高いため、適切な圧縮を行うだけでは十分ではありません。

  3. .currentTime各フレームで、各ビデオが変更されたかどうかを確認します。フレーム間であれば、テクスチャを更新する必要はないかもしれません。が更新された後でも、ビデオ フレームを更新するのに数ミリ秒かかる場合があるため、1 フレームずれる場合がありますcurrentTime。ただし、これは通常、ビデオが一時停止されている場合にのみ顕著です。通常、ビデオが一時停止されている場合、すべてのフレームをさらに 0.5 秒程度更新し続けるという特殊なケースがあります。

  4. ビデオのサイズを 2 の累乗に設定してみてください。これはおそらく GPU ハードウェアに依存しますが、テストしても損はありません。

  5. ビデオがすべて同じ長さで同じタイムラインで再生される場合は、それらを 1 つに結合し、すべてを 1 つのテクスチャにロードして、それに応じて UV 座標を設定すると役立つ場合があります。

より一般的には、おそらく次のことに注意する必要があります。

  • ビデオ フレームを GPU メモリにコピーします。必要以上に頻繁に、大きくしないでください。
  • 動画ファイルの管理におけるブラウザのオーバーヘッドを削減する
于 2013-04-24T17:17:28.400 に答える