8th Wall Blog

From Concept to Reality: Marley Kanui's Approach to Cutting-Edge AR Projects

Mastering WebXR Development with 8th Wall and Innovative Techniques

8th-wall
Sep 5, 2024 . 3 min read . Community
From Concept to Reality: Marley Kanui's Approach to Cutting-Edge AR Projects

Marley Kanui is a talented Senior WebXR Developer at Groove Jones who has been leveraging Niantic 8th Wall to create standout AR experiences since 2021. With a strong background in WebGL, Three.js, React, and more, Marley is known for his focus on optimization and seamless integration to create smooth, engaging AR experiences. Marley’s expertise and innovative approach continue to push the boundaries of what's possible in AR development as shown in his work on the Hope for Haiti project to build an interactive experience aimed at raising funds for a non-profit.

We caught up with Marley to discuss his experience with 8th Wall, his recent projects at Groove Jones, and his thoughts on the future of AR development.

How did you first get started with 8th Wall, and what initially drew you to the platform?
I first got into 8th Wall in 2021 when I was working on a project with Groove Jones, where I'm currently a Senior Developer. At the time, we were exploring different web-based AR tracking technologies to pair with WebGL and React for an AR experience we were building. 8th Wall really stood out because it had the best World Tracking tools and a solid API. It just worked really well, so it quickly became our go-to for a lot of our WebAR projects after that.

With your diverse expertise across various technologies like WebGL, Three.js, and Niantic 8th Wall, how do you approach the integration of these tools to create seamless AR experiences?
For me, optimization is key to making things run smoothly. Great UX design can only go so far if memory management is off or if the frame rate isn’t consistent. So, I always start with optimization when integrating tools like WebGL, Three.js, and 8th Wall. I’ve got a checklist I go through—like deciding if a texture should be atlas, whether meshes should be instanced or merged and whether we can achieve the same effect procedurally in a shader. The same goes for using 8th Wall’s XR8 API—only using the features we need and making sure our pipeline is optimized. Once that’s sorted, I can focus on making the experience look and feel great instead of just trying to get it to work.

 

You've worked on a variety of projects, each with unique technical elements. What has been your favorite technical challenge so far, and how did you overcome it?

The Target project we did here at Groove Jones, especially the portal scene, was my favorite challenge. The creative was huge, so optimizing was key. I worked closely with the modeling, animation, and rigging teams to make sure everything—textures, geometries, animations—was as optimized as possible. The coding was also tricky, like placing a life-size portal door that led into a holiday scene with animated toy characters. We even added positional audio, animation triggers, and an image segmentation feature for selfies. It was a complex project but really rewarding to pull off.

 

Your project for Hope for Haiti showcased impressive use of stencil buffers and WebGL instancing. Could you walk us through some of the challenges you faced in optimizing these techniques for a smooth user experience? 
I had to instance meshes while making sure they varied in color, texture mapping, and transformations at different times. This needed some custom shader code and fine-tuned JavaScript animations. It was a bit of a challenge, but I think it turned out pretty sweet.

 

Your work on the My Hero Academia AR project required precise alignment of effects with real-life objects. What are some best practices you recommend for achieving accurate tracking and alignment in AR? 
Coaching the user through the UX/UI is really important, especially since many people are still getting familiar with AR. For the My Hero Academia AR project, using the right type of tracking—World Tracking with Absolute Scale in Niantic 8th Wall—was key to getting the alignment just right. If alignment is ever off for whatever reason, it would be good to include some sort of manual intervention, like an easy-to-use interface that lets the user make adjustments or reset. This helps keep everything on track and enhances the overall experience.

 

What has been the most exciting project for you to work on and why? What elements made it stand out to you both creatively and technically?

The Hope for Haiti project was definitely the most exciting one for me. I did everything on it—from concept design to implementation. I created the UI, 3D, and audio assets using Photoshop, Figma, Blender, and Ableton, and then coded the project with React, WebGL, Three.js, and 8th Wall. It was a full-on creative and technical challenge because it was one of the first times I brought all the creative tools I’ve learned over the years together, but it felt great to pull it off. What really stood out was incorporating AI-generated voices, which was something I hadn’t worked with before. Creatively, the standout was achieving a two-scenes-in-one effect with a stencil buffer portal—one scene anchored to your environment, and another that occluded the camera pass-through and felt like pseudo-VR, with a seamless transition between the two

 

Looking ahead, what are your major goals in the AR space, and how do you see technologies like 8th Wall evolving to meet the needs of developers like yourself?
My main goal is to create more context-aware experiences that blend seamlessly with the user’s environment. I’m particularly interested in utilizing advancements in environmental understanding, where AR can dynamically react to real-world surroundings through true object recognition and scene understanding.

I see 8th wall evolving in this way as well—allowing for more complex, real-time interactions. Improved integration with AI and support for WebGPU, enabling more immersive, interactive, and performant experiences that feel truly integrated in the physical world.

Finally, what advice would you give to new developers who are just starting out with 8th Wall and looking to make an impact in the AR community?
Get obsessed—fail quickly and iterate; the first attempt is always not good—don’t settle. Be curious—don’t be afraid to dive into lower-level concepts in WebGL and the XR8 API. Sometimes the "slow" way of taking the time to really understand lower-level concepts before moving forward is actually the fast way. It helps you debug, create more unique visual effects, and build more performant experiences. Finally, work on ideas you actually think are dope.


Are you interested in connecting with developers like Marley Kanui? Join our developer Slack to build and learn from others in the 8th Wall developer community. 

8th-wall

Written by 8th Wall

Niantic's 8th Wall platform is equipping developers, agencies and brands with a complete set of tools to create web-based augmented reality. 8th Wall's WebAR works across iOS and Android devices with an estimated reach of 5 billion smartphones worldwide - all with no app required to download. 8th Wall has powered thousands of commercial experiences for top brands which have engaged millions of users around the world.

Explore More Topics