Camel Wonderland Part 1 : Making an AR

Let’s delve into the captivating world of Augmented Reality (AR)!

I was on the verge of uploading a Lottie project file from a game we developed using Lottie JSON for each animation. However, I’ve decided to split the upload into two parts: the first focusing on AR, and the second on Lottie with After Effects.

Firstly, let’s explore AR. I recently undertook a project that allowed me to immerse myself in this intriguing domain. My goal was to craft an AR experience, and to achieve this, I utilized

various software tools, with Blender being my main go-to. To play the game, one must scan the QR code and then scan the product pack. However, creating an AR experience isn’t just about designing 3D models. It also involves incorporating these models into an AR framework, which necessitates a harmonious collaboration between design and development. As I worked closely with developers, I gained insights into the technical facets of AR development. But Blender alone isn’t sufficient for creating AR content. Users also need a means to code the logic and interactivity of the AR application and a platform for its publication and distribution.

One such option is 8Wall, a web-based platform that enables users to create AR experiences using HTML, CSS, and JavaScript. The amalgamation of Blender and 8wall can be a potent and accessible method for creating AR content, but it does come with its own set of advantages and disadvantages that need to be taken into account.

Before embarking on an AR project, it’s important to familiarize oneself with some tools:

• 3D Software: There are numerous 3D software options available on the market. In this case, I’m using Blender.

• 3D Modeling: It’s crucial to understand that 3D modeling requires modeling with less geometry so as not to make the file too heavy since we’ll be running the AR model on a browser.

• UV mapping for texturing

• Lighting (Only Point light and sun light works on AR)

• Non-linear animation (NLA): The Non-Linear Animation (NLA) Editor in Blender is a tool for creating flexible and complex animations by combining different action sequences, like a walk or a jump, into one.

• Three.js for testing out final model, where you can also check the animation

• Export format for AR is .Glb

The problem and the solution:

The first problem that I faced while creating a model was the size of the model with animation and texture, as there were 4–5 3D assets and 3D characters with animation, which made my model around 10–11 MB. Hence, the AR crashed in the browser.

While talking with the developer, they said for better optimization and better experience on browser, we need at least 2–3 MB of file size Keeping that in mind, I reduced the model polygon and removed the vertex, which was not necessary, and for the texture part, I made a canvas under 500k and put all the texture on a single canvas and tried to use Blender's inbuilt color (the color ramp gradient was not supporting the 8-wall). By using this technique, I have reduced the 3D model to 2 MB.As you can see in the video, there is more information added over it One is the instruction screen, which is a Lottie file.

Animation :

For animation in AR, we need to keep in mind that we cannot just animate and share the AR with the developer. For that, we need to save the animation when we can tell the developer to trigger the animation in code. How do we do it? , With the Help of NLA Non-linear animation in Blender, creating flexible and complex animations by combining different action sequences, like a walk or a jump, into one. It allows blending, layering, and adjusting the timing of these actions for smooth transitions. For character, as we have limited time, I used Mixamo, where you can just use animation-built templates for 3D animation.

The next step was to check the AR in Three.js. To do this, you have to export the model in the GLB format from blender and Upload it to Three.js where you can check and test the AR anim

ation If everything looks fine, the final step is to share it with the developer, where they use 8wall and code magic to make the final product work. That's it for the next article. I will upload Part 2, where I tell about how we created a 2D game with After Effects and converted it into Lottie.

Links to the product used in creating AR:

Blender :- https://www.blender.org/

Three.js :- https://threejs.org/editor/

mixamo :- https://www.mixamo.com/#/

8thwall :- https://www.8thwall.com/

Product link:

https://www.amazon.in/Camlin-Kokuyo-Pastel-Drawing-Pencil/dp/B00LY12JPS