3D Text and Confetti

2020 Facebook Developer Circles Community Challenge submission

Spark AR – Local Language (Spanish – Español) - Tutorial for Beginners

by / por Jérôme Guitton (@jeromeguitton)

▶︎ Walkthrough video / tutorial en video : https://youtu.be/kCIC-5LORHQ

▶︎ Open Source Sampled software / Software open source desarrollado: https://github.com/jeromeguitton/FB-DevCCommunityChallenge/blob/main/AR-Effect-Package.arprojpkg

▶︎ Efecto Realidad Aumentada / AR Effect (disponible en Instagram / available on Instagram): https://www.instagram.com/ar/385040889274581/

Tutorial en Español:

Efecto de Spark AR con texto en 3D y confeti (Partículas)

Este efecto es compatible con Facebook e Instagram añade texto 3D con animación sobre el rostro del usuario. Además se emiten partículas de confeti a la imagen.

Elementos:

• 5 materiales (3 para el confeti y 2 para el texto en 3D) • 1 textura (Confeti)

➔ Para empezar: Es necesario crear una textura que asemeje a un pedazo de confeti. Esto puede ser creado usando un rectángulo color blanco en png.

① Paso 1: Abrir Spark AR Studio y crear un nuevo proyecto.

② Paso 2: Seleccionar “+ Add Object” en el panel “Scene” y seleccionar “Face Tracker”, posteriormente añadir a “Face Tracker” > “3D Text”

③ Paso 3: Ajustar mediante las herramientas 3D de Spark AR el texto 3D a la frente del usuario. Puedes añadir color al texto desde “Propiedades”

④ Paso 4: Importar la textura a Spark AR Studio y crear varios materiales con la textura. Seleccionando color y apariencia en las propiedades del material.

⑤ Paso 5: Crear un emisor de partículas (Emitter) y rotarlo hacia abajo, ajustar el “Birthrate”, “Spray Angle” y “Speed” al gusto. Repetir este proceso en base al resultado que se desea obtener. En mi caso, utilicé 6 Emitter para añadir más confeti a la imagen.

⑥ Paso 6: Para obtener un resultado más realista, añadir “directionalLight” y “ambientLight” desde “+ Add Object” en el panel “Scene”.

☞ Nota: Estos pasos están sujetos a la cantidad de colores o de Emitters de confeti que deseas añadir. Entre más Emitters añadas, más confeti aparecerá. En caso de que utilices la opción “Duplicar objeto” debes editar la posición y rotación de los Emitters para evitar que se vean dobles en la misma posición.

⑦ Paso 7: Para animar el texto en 3D, vamos a seleccionar con clic derecho “3DText0” y abrir el menú de “Actions”, seleccionar “Animate” y “Pulse”. Para ajustar la animación, accede a Patch Editor y ajusta los valores “Start” y “End” del bloque “Transition”

➔ Link para probar resultado final: https://www.instagram.com/ar/385040889274581/

➔ Link del Software open source desarrollado: https://github.com/jeromeguitton/FB-DevCCommunityChallenge/blob/main/AR-Effect-Package.arprojpkg

▶︎ Video tutorial: https://youtu.be/kCIC-5LORHQ

Tutorial in English:

Spark AR effect with 3D text and confetti (Particles)

This effect for Facebook and Instagram adds 3D text with animation on the user's face. In addition, confetti particles are emitted to the image.

Elements:

• 5 materials (3 for the confetti and 2 for the 3D text) • 1 texture (Confetti)

➔ To get started: You need to create a texture that resembles a piece of confetti. This can be created using a white rectangle in png.

① Step 1: Open Spark AR Studio and create a new project.

② Step 2: Select "+ Add Object" in the "Scene" panel and select "Face Tracker", then add to "Face Tracker"> "3D Text"

③ Step 3: Adjust 3D text to the user's forehead using Spark AR's 3D tools. You can add color to the Text on the Properties tab

④ Step 4: Import the texture into Spark AR Studio and create some materials with the texture. Select the color and appearance in the material properties.

⑤ Step 5: Create a particle emitter (Emitter) and rotate it downwards, adjust the “Birthrate”, “Spray Angle” and “Speed” to taste. Repeat this process based on the desired result. In my case, I used 6 Emitter to add more confetti to the image.

⑥ Step 6: For a more realistic result, add "directionalLight" and "ambientLight" from "+ Add Object" in the "Scene" panel.

☞ Note: These steps are subject to the number of colors or confetti emitters you want to add. The more emitters you add, the more confetti will appear. In case you use the option "Duplicate object" you must edit the position and rotation of the emitters to avoid that they are doubled in the same position.

⑦ Step 7: To animate the text in 3D, we are going to select with right click "3DText0" and open the "Actions" menu, select "Animate" and "Press". To adjust the animation, go to Patch Editor and adjust the “Start” and “End” values of the “Transition” block.

➔ AR Effect Live test: https://www.instagram.com/ar/385040889274581/

➔ Link to Open Source Sampled software: https://github.com/jeromeguitton/FB-DevCCommunityChallenge/blob/main/AR-Effect-Package.arprojpkg

▶︎ Step-by-step video: https://youtu.be/kCIC-5LORHQ