Spark AR — Dynamic instantiation (3)

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.

Cloning of material

Materials can be cloned, making them easier to create and providing the ability to reuse template materials across multiple instances.

Just as you can create a given material through materialModule.create (), the MaterialModule API exposes a Clone () method that takes an instance of an existing material, along with an optional initial state.

There are several important considerations when cloning materials:

• The new material is assigned a globally unique name, unless otherwise specified in the initial state.

• The second argument to the clone() method, initialState, is entirely optional, but it is highly recommended to set the initialState of the material.

• All Signal type attributes are assigned to a ConstSignal that contains the last value of the previously bound Signal. To rebind any properties, you can provide a signal in the initialState parameter.

The following example queries an existing material, clones it, and sets it to the material of an existing object in the scene.

// Load in the required modules
const Scene = require('Scene');
const Materials = require('Materials');
const Textures = require('Textures');
const Reactive = require('Reactive');
              
// 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 our objects in the Scene and Assets panels
    // This includes the texture which we will apply to our cloned material
    const [focalDistance, existingMaterial, newTexture] = await Promise.all([
        Scene.root.findFirst('Focal Distance'),
        Materials.findFirst('material0'),
        Textures.findFirst('texture0'),]);// Dynamically create a plane and clone a material
    const [dynamicPlane, clonedMaterial] = await Promise.all([

        Scene.create("Plane", {
            "name": "Plane"."width": 0.1."height": 0.1."y": -0.2."hidden": false,}).// Clone the existing material from the Assets panel and alter its initiation state, including specifying a new diffuse texture.
        Materials.clone(existingMaterial, {
            "name": "Cloned Material"."blendMode": "ALPHA"."opacity": 0.8."diffuse": newTexture,
            "diffuseColorFactor": Reactive.RGBA(255.0.0.1),}),]);// Assign the existing material to the dynamic plane
    dynamicPlane.material = existingMaterial;

    // 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
    focalDistance.addChild(dynamicPlane);

    // Switch the plane's material between the existing material and the cloned material when the plane is tapped
    let isUsingExistingMaterial = true;

    TouchGestures.onTap(dynamicPlane).subscribe(() = > {
        if(isUsingExistingMaterial){
            dynamicPlane.material = clonedMaterial;
            isUsingExistingMaterial = false;
        } else {
            dynamicPlane.material = existingMaterial;
            isUsingExistingMaterial = true; }});// Enables async/await in JS [part 2]}) ();Copy the code