Istanze dei Prefab in 1.2.0

L’istanza di prefab è il processo di creazione di oggetti e componenti da un file .bin/.glb.

Poiché il nuovo metodo di istanziazione si basa sul concetto di multiscene, ti consigliamo di dare un’occhiata veloce al nostro post del blog sul multiscene prima di procedere.

Prima della versione 1.2.0 

L’istanza di un “prefab” era disponibile tramite il metodo append (ora deprecato):

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

Questa API presenta delle limitazioni:

• La scena deve essere scaricata e analizzata 100 volte
• Ogni Zombie.bin crea nuovi mesh, texture e materiali

Vediamo come Wonderland Engine 1.2.0 aiuta a risolvere questi problemi!

Istanza 

Qualsiasi scena caricata tramite loadScene può essere destinataria di un’istanza:

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

// Crea un'orda di zombie
for (let i = 0; i < 100; ++i) {
    const {root} = mainScene.instantiate(zombie);
}

Poiché il risultato è un’istanza Object3D, puoi modificare la gerarchia come segue:

const {root} = mainScene.instantiate(zombie);
// `root` è il genitore Object3D dell'intero grafo di scena `Zombie.bin`
root.setScalingLocal([0.5, 0.5, 0.5]);

Puoi chiamare instantiate() su scene attive e inattive. Sebbene l’esempio sopra dimostri come utilizzarlo su una scena attiva, l’istanza in una scena inattiva funziona allo stesso modo:

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

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

// Solo una volta istanziato, LookAtComponent.onActivate()
// e LookAtComponent.start() vengono invocati.
nextScene.instantiate(zombie);

GLTF 

L’istanza non è limitata al formato di scena Wonderland Engine (.bin), ma può essere utilizzata anche con glTF:

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

// Fai un'insalata di avocado
for (let i = 0; i < 100; ++i) {
    const {root} = scene.instantiate(avocado);
}

I prefab glTF hanno anche metodi extra per gestire le estensioni. Per ulteriori informazioni, dai un’occhiata all’API PrefabGLTF.

Nota sulle Risorse 

Come menzionato nel post del blog sul multiscene, le risorse vengono spostate nell’istanza engine quando vengono caricate. Questo permette a più scene di fare riferimento alle stesse risorse, senza duplicare la memoria.

I componenti creati tramite instanziazione quindi:

• Fanno riferimento alle stesse risorse
• Eliminare una risorsa farà sì che l’istanza faccia riferimento a un’entrata nulla

Ulteriori Approfondimenti 

Ecco alcuni link per aiutarti a iniziare a utilizzare le istanze nei tuoi progetti:

• Esempio di istanza prefab su GitHub
• API JavaScript Scene.instantiate

Non vediamo l’ora di vedere come la comunità sfrutterà le istanze per creare esperienze straordinarie!