QA@IT

three.jsでmeshの追加削除を繰り返し行うとメモリ使用量が増えていくのを修正したい

8174 PV

(three.js以前のJavaScriptコーディングの問題かもしれませんが)

組んだサンプルプログラム(JS Bin)

追加削除の概要は

  1. sceneに追加
  2. scene.remove()でmeshをscheneから削除
  3. mesh配列の該当要素をsplice()で削除
  4. mesh配列変数にnullをセット。

というのを繰り返しています。

このサンプルプログラムを実行して、ChromeのDevToolsのTimelineでメモリ使用量を確認すると
時間がたつごとに増える一方です。
いろいろと試行錯誤してみたのですが改善方法が見出せないでいます。
もしどなたか修正方法がわかる方がいらっしゃられましたらご教授お願いします。

回答

ありがとうございます。なるほど配列の開放はlength = 0とすることでできるのですね。
sceneに残骸が残っているということは少しは考えたのですが、その可能性は否定したかったですね。おっしゃるように再度newするというなどの方法をとったとしてもそれはコードとしてはあまり綺麗とは言えないものとなりますので。(いい言葉が思いつかなかった)
回答ありがとうございました。

編集 履歴 (0)

nullをセットしてもGC待ちになるだけだったはずなので、
deleteで消したりvoid 0を入れたりして削除するといいと思います。

配列全部削除するならlength = 0 でもいいかもしれませんね。

以下はかなり適当なコードですが、remove_allの一例です。

for(var i = cubes.length; i--; ){
scene.remove(cubes[i]);
delete cubes[i];
}

cubes.length = 0;

あとsceneにも残骸が残っているような気がしますので、たまにsceneもnewしなおしたほうがいいでしょうね。(そうしないと段々遅くなります)

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。