バージョン1.2.0におけるプレハブのインスタンシング

バージョン1.2.0におけるプレハブのインスタンシング

David Peicho

プレハブのインスタンス化は、.bin/.glbファイルからオブジェクトやコンポーネントを生成するプロセスです。

新しいインスタンス化メソッドはマルチシーンの概念に基づいているため、まずはマルチシーンに関するブログ記事をぜひご覧ください。

バージョン1.2.0以前 

プレハブのインスタンス化は（現在非推奨の） append メソッドで利用可能でした：

const promises = [];
for (let i = 0; i < 100; ++i) {
    promises.push(await engine.scene.append('Zombie.bin'));
}
await Promise.all(promises);

このAPIには以下のような制限があります：

  • シーンを100回ダウンロードし、パースする必要がある
  • 各Zombie.binが新しいメッシュ、テクスチャ、およびマテリアルを作成する

Wonderland Engine 1.2.0がこれらの問題をどのように解決するか見てみましょう！

インスタンシング 

loadSceneで読み込まれた任意のシーンがインスタンス化の対象になります：

const mainScene = await engine.loadMainScene('Scene.bin');
const zombie = await engine.loadPrefab('Zombie.bin');

// ゾンビの群れを作成
for (let i = 0; i < 100; ++i) {
    const {root} = mainScene.instantiate(zombie);
}

結果はObject3Dインスタンスになるので、以下のように階層を変更できます：

const {root} = mainScene.instantiate(zombie);
// `root`は`Zombie.bin`のシーングラフ全体のObject3Dの親
root.setScalingLocal([0.5, 0.5, 0.5]);

instantiate()をアクティブおよび非アクティブなシーンで呼び出すことができます。上記の例はアクティブなシーンでの使用方法を示していますが、非アクティブなシーンでのインスタンシングは同じように動作します：

const zombie = await engine.loadPrefab('Zombie.bin');
const zombieHead = zombie.findByName('Head')[0];
zombieHead.addComponent(LookAtComponent);

const nextScene = engine.load('NextScene.bin');

// インスタンス化された際にのみ、LookAtComponent.onActivate()と
// LookAtComponent.start()が呼ばれます。
nextScene.instantiate(zombie);

GLTF 

インスタンス化はWonderland Engineシーンフォーマット(.bin)に限定されず、glTFでも利用できます：

const avocado = await engine.loadGLTF('Avocado.glb');

// アボカドサラダを作成
for (let i = 0; i < 100; ++i) {
    const {root} = scene.instantiate(avocado);
}

glTFプレハブは拡張管理のための追加メソッドもあります。詳しくはPrefabGLTF APIをご覧ください。

リソースに関する注意 

マルチシーンに関するブログ記事に記載されているように、リソースはロード時にengineインスタンスに移動されます。これにより、複数のシーンがメモリを複製することなく同じリソースを参照できます。

インスタンス化によって作成されたコンポーネントは次のようになります：

  • 同じリソースを参照する
  • リソースを削除するとインスタンスはnullエントリーを参照することになる

さらに進むために 

プロジェクトでインスタンシングを使用し始めるためのリンクをいくつかご紹介します：

コミュニティがインスタンシングを活用して驚くべき体験を築くのを見るのが楽しみです！

Last Update: March 27, 2025

最新情報をお届けします。