Spark AR — Dynamic instantiation (2)

This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

Destroying dynamic Objects

To free up resources, it is best to destroy objects that are no longer in use and are no longer needed by the effect. This is done by calling the destroy() method exposed by the SceneModule and MaterialsModule apis.

Destroying the scene object or material automatically unbinds the property, and the scene object is removed from any parent object.

Only dynamic objects can be destroyed by calling the destroy() method. An attempt to invoke this method on an object added through the Spark AR Studio UI or an object that does not exist causes the Promise to fail.

In the example below, the dynamic plane and the material are instantiated while the effect is running, and when the plane is tapped, they are destroyed and removed from the Scene and asset panels, respectively.

 // Load in the required modules
const Scene = require('Scene');
const Materials = require('Materials');
const Textures = require('Textures');
              
// Enable the Touch Gestures > Tap Gesture capability 
// in the project's properties
const TouchGestures = require('TouchGestures');

// Enables async/await in JS [part 1]
(async function() {

    // Locate the focal distant object in the Scene and the two textures in the Assets panel
    const [focalDistance, texture] = await Promise.all([
         Scene.root.findFirst('Focal Distance'),
         Textures.findFirst('texture0'),]);// Dynamically instantiate a plane and a material
    const [dynamicPlane, dynamicMaterial] = await Promise.all([

        Scene.create("Plane", {
            "name": "Plane"."width": 0.1."height": 0.1."y": -0.2."hidden": false,
        }),

        Materials.create("DefaultMaterial", {
             "name": "Default Material"."blendMode": "ALPHA"."opacity": 1.0."diffuse": texture,
        }),
    ]);

    // Set the dynamic material as the plane's material
    dynamicPlane.material = dynamicMaterial;

    // Add the Dynamic Plane as a child object of the Focal Distance object in the Scene panel so that it is rendered in the  effect otherwise
    focalDistance.addChild(dynamicPlane);

    
    // Destroy the plane and material when the plane is tapped
    TouchGestures.onTap(dynamicPlane).subscribe(() = > {
        Scene.destroy(dynamicPlane);
        Materials.destroy(dynamicMaterial);
    });
              
// Enables async/await in JS [part 2]}) ();Copy the code