Instanciación de Prefabs en 1.2.0

La instanciación de prefabs es el proceso de crear objetos y componentes a partir de un archivo .bin/.glb.

Dado que el nuevo método de instanciación se basa en el concepto de multiescena, te recomendamos echar un vistazo rápido a nuestro artículo del blog sobre multiescena primero.

Antes de 1.2.0 

La instanciación de un “prefab” estaba disponible a través del método append (ahora en desuso):

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

Esta API viene con limitaciones:

• La escena necesita ser descargada y procesada 100 veces
• Cada Zombie.bin crea nuevos meshes, textures y materials

¡Veamos cómo Wonderland Engine 1.2.0 ayuda a resolver esos problemas!

Instanciación 

Cualquier escena cargada a través de loadScene puede ser el destinatario de una instanciación:

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

// Crear una horda de zombis
for (let i = 0; i < 100; ++i) {
    const {root} = mainScene.instantiate(zombie);
}

Dado que el resultado es una instancia Object3D, puedes modificar la jerarquía de la siguiente manera:

const {root} = mainScene.instantiate(zombie);
// `root` es el padre Object3D de todo el gráfico de escena `Zombie.bin`
root.setScalingLocal([0.5, 0.5, 0.5]);

Puedes llamar a instantiate() en escenas activas e inactivas. Mientras que el ejemplo anterior demuestra cómo usarlo en una escena activa, la instanciación en una escena inactiva funciona de la misma manera:

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

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

// Solo una vez instanciado, LookAtComponent.onActivate()
// y LookAtComponent.start() se invocan.
nextScene.instantiate(zombie);

GLTF 

La instanciación no se limita al formato de escena de Wonderland Engine (.bin), sino que también se puede usar con glTF:

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

// Haz una ensalada de aguacates
for (let i = 0; i < 100; ++i) {
    const {root} = scene.instantiate(avocado);
}

Los prefabs glTF también tienen métodos adicionales para gestionar extensiones. Para obtener más información, echa un vistazo a la API PrefabGLTF.

Nota Sobre Recursos 

Como se menciona en el artículo del blog sobre multiescena, los recursos se mueven a la instancia engine al cargar. Esto permite que múltiples escenas hagan referencia a los mismos recursos, sin duplicar la memoria.

Los componentes creados a través de instanciación por lo tanto:

• Hacen referencia a los mismos recursos
• Eliminar un recurso hará que la instancia haga referencia a una entrada nula

Avanzando Más 

Aquí hay algunos enlaces para ayudarte a comenzar a usar la instanciación en tus proyectos:

• Ejemplo de instanciación de prefabs en GitHub
• API de JavaScript Scene.instantiate

¡Estamos ansiosos por ver cómo la comunidad aprovechará la instanciación para crear experiencias increíbles!