ブラウザ３Dゲームを作る作戦その8: 軽量化メモ
主に軽量化についてメモ書きしておきます。
軽量化
特に既存のmodelデータを使いたいときの場合。
materialの変更
構造によって細かい部分は変わりますが、基本的にmaterialを新たに作ってcopy→再度セットでうまくいくようです。
MeshBasicMaterial （塗りつぶし）
MeshLambertMaterial （視点が動いても明るさが変わらない）
あたりが軽いそうです。
変え方は一例ですが、今使ってるフィールドマップだと、
var floader = new THREE.TDSLoader(); // ロード floader.load('models/field/Cartoon_land.3DS', (object) => { let fldChild = object.children; for (let i = fldChild.length-1; i >= 0; i--){ var m = new THREE.MeshLambertMaterial(); //拡散反射 m.copy( fldChild[i].material ); m.side = THREE.DoubleSide; m.opacity = 1; fldChild[i].material = m; fldChild[i].rotation.x = THREE.Math.degToRad( -90 ); } });
のような感じです。この例だとobjectの子要素がそれぞれmaterialを持っています。
マップを分割する
Rayscaterが判定するオブジェクトを減らすために、あるエリアに居たら見るオブジェクトはこれだけ、というリストをあらかじめ作っておきます。
オブジェクトがどこに属するかという感じにリストを作るとエリアを跨ぐときに無駄が多い気がするので、
- エリアの真ん中からある距離以内のオブジェクトを登録しておく
感じにしました（重複あり）。あとベースになっているでっかいオブジェクトはすべてのエリアに登録しておきます。今回はエリアを１６個に分けて121個のオブジェクトからリストを作りました。
オブジェクトをpushで突っ込んでいますが、idだけ取っておいてもいいと思います。
カメラを調整する
デフォルトだと視野も見える距離の範囲もかなり広かったので、ここを変えると確かに軽くなります。
処理時間を監視する
個人的にはperformance.now() が使い勝手が良かったのでこれを採用しました。
単位は1秒/1000 だっと思います。
let t0 = performance.now(); renderer.render( scene, camera ); let t1 = performance.now(); // t1-t0 が処理時間
