1.2.0でのPrefabインスタンシング

Prefabインスタンシエーションは、.bin/.glbファイルからオブジェクトやコンポーネントを作成するプロセスです。

新しいインスタンシエーションメソッドはマルチシーンの概念に基づいているため、まずは我々の マルチシーンに関するブログ記事を一読することをお勧めします。

バージョン1.2.0以前 

“prefab"のインスタンシエーションは、(現在は非推奨の)appendメソッドを介して利用可能でした。

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

このAPIには制限があります:

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

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

インスタンシング 

loadSceneを介してロードされた任意のシーンは、インスタンシエーションの受取手となることができます:

1const mainScene = await engine.loadMainScene('Scene.bin');
2const zombie = await engine.loadPrefab('Zombie.bin');
3
4// ゾンビの群れを作成
5for (let i = 0; i < 100; ++i) {
6    const {root} = mainScene.instantiate(zombie);
7}

結果がObject3Dインスタンスであるため、次のように階層を変更できます:

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

instantiate()アクティブシーンと非アクティブシーンの両方で呼び出すことができます。上記の例ではアクティブシーンでの使用法を示していますが、非アクティブシーンでのインスタンシングも同様に機能します:

1const zombie = await engine.loadPrefab('Zombie.bin');
2const zombieHead = zombie.findByName('Head')[0];
3zombieHead.addComponent(LookAtComponent);
4
5const nextScene = engine.load('NextScene.bin');
6
7// 一度インスタンシエーションされると、LookAtComponent.onActivate()
8// およびLookAtComponent.start()が呼び出されます。
9nextScene.instantiate(zombie);

GLTF 

インスタンシエーションはWonderland Engineシーン形式(.bin)に限定されるものではなく、glTFでも使用可能です:

1const avocado = await engine.loadGLTF('Avocado.glb');
2
3// アボカドサラダを作る
4for (let i = 0; i < 100; ++i) {
5    const {root} = scene.instantiate(avocado);
6}

GlTF prefabには、拡張機能を管理するための追加メソッドもあります。詳細についてはPrefabGLTF APIを参照してください。

リソースについての注意 

マルチシーンに関するブログ記事で述べたように、ロード時にリソースはengineインスタンスに移動されます。これにより、複数のシーンが同一のリソースを参照でき、メモリの重複を回避します。

instantiationで作成されたコンポーネントは次のようになります:

  • 同一のリソースを参照
  • リソースを削除すると、インスタンスはnullエントリを参照する

さらに進む 

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

コミュニティがインスタンシングを活用して素晴らしい体験を構築していくのを楽しみにしています!

Last Update: May 19, 2024

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