Web AR Avatar Campaign: LuminousOne

Luminous Power Technologies is one of the most trusted brands in providing complete Solar Solutions and Power Backup Solutions through technologically advanced Inverters and Batteries. LuminousOne - A Global partner's meet held in Dubai saw Luminous Power partners from over 20 countries worldwide joining for a deep dive into the theme of Luminous 3.0. At the event, Preeti Bajaj [CEO of Luminous Power Technologies] shared the renewed strategy for Luminous 3.0 and during the event, she also shared her perspective on the 3 D's—Decarbonization, Decentralisation, and Digitization. This project builds on top of her views bringing a sneak peek of the renewed strategy for Luminous 3.0 and giving an immersive touch to the perspective of the 3Ds leveraging immersive technology.

Project Link✨

The Spark ✨

This Project was made fruitful in collaboration with the team at Pixel Party and Web Dimensions who provided the asset and design support for this project. The project was developed by me to create a web-based augmented reality experience (web app) that is accessible to anyone from the browser. It was built using 8thwall SDK and web technologies like Three.js, A-frame, and JavaScript.

The Stats 💯

Timeline: Nov 3 - Nov 11, 2022 Deliverables: • Create a base Web AR experience • Avatar using Green Screen

• Avatar voice over • 3D design asset

• 3D model Animations

• Glb model Transitions

• Touch gesture interactivity

• UI/UX

Features 👨‍💻

The following custom features were developed for the LuminousOne web AR experience

Custom Placement:

This feature lets the user place the avatar anywhere in their respective physical space. The feature takes camera feed input and tracks planes using SLAM tracking technology. The avatar is placed when the user clicks or taps the screen.

3D Transformations:

This feature allows the user to reposition, scale, and rotate i.e. perform basic 3D model transformations to the avatar setup. The feature takes in user gesture input to perform the following transformations

-- Position: Hold and Drag the 3D asset

-- Scale: Pinch gesture to scale the 3D asset on its origin

-- Rotation: two-finger rotation gesture to rotate the 3D asset on Y-axis

Glb model transition:

Opacity transition:- The 3D asset (.glb file format) can be transitioned into a fade-in and fade-out animation by changing its material opacity values. It required traversing the mesh to the material node and custom setting its material opacity. Thanks to

Piotr Adam Milewski

model.setAttribute('animation', {

          property: 'model-relative-opacity.opacityFactor',

          from: '0',

          to: '1',

          easing: 'easeOutQuad',

          dur: 1200,

        })

2. Material Color transition:- The 3D model color can be changed on the go by traversing through the node material property of the 3D asset. Using Three.Js to develop a custom component to create a synchronization of elements based on the avatar's progress.

this.modelMesh.traverse((node) => {

  node.material.color = new THREE.Color('#228B22')

})