Spark AR 3D to 2D Position

In this tutorial we will project, Spark AR 3D to 2D position. To start, let’s add our scene objects.

Spark AR 3D to 2D Position

To get started, add these objects. You can also download the template and start playing around right now, if you prefer.

Face Tracker

• Add a Face Tracker
• Under the Face Tracker, add a Null Object
• Name the null object Nose3D
• Create Producer Patch, so it looks like this:

Canvas

• Add a Rectangle by selecting Add Object
• Name the rectangle0 Nose2D
• Add a material to the Nose2D (I used a nose emoji)
• For reference, it should look like the Scene depicted in the image above.

Script

• Add a Script by selecting Add Asset, Script
• Create To Script and From Script Variables, Nose3D and Nose2D, respectively.
• Plug the Nose Tip 3D Position to the Nose3D To Script variable by pressing the arrow next to the variable name. Hook it up.

JavaScript

Add this to your script.js file by opening the file in a text editor, like Visual Studio or Sublime. More about the Scene Module can be found here: SceneModule.

const Scene = require('Scene');
const Patches = require('Patches');

Promise.all([

    // The 3D Object or 3D Point we want to track
    Scene.root.findFirst('Nose3D'),

]).then(function (results) {

    // Define variable names for items we found
    const nose3D = results[0];

    // This transforms the world coordinate of the 3D Object to a screen coordinate.
    var nose2D = Scene.projectToScreen(nose3D.worldTransform.position)

    // Get the Nose3D Position, then set the projectToScreen point Nose2D
    Patches.outputs.getPoint("Nose3D").then(pointSignal => {

        Patches.inputs.setPoint2D('Nose2D', nose2D);

    });
});

Translate Screen

• Add the From Script object by selecting Producer Patch Creator in the script.js properties panel on the right.
• Divide the Nose2D (Vector2) by the Screen Scale from the Device
  • Drag the Device from the Scene Panel into the Patch Editor to get the Screen Scale from Device.
• Subtract the value you get from the previous Divide object from your 2D object radius. This is the radius or half the width, height of your 2D object, Nose2D.

Please follow and like us: