Hello there,
I have been experimenting with building an augmented reality experience using 8th Wall; and I am encountering some performance issues that I am hoping the commu;nity can help me address.
My current; project involves multiple interactive 3D objects within a scene; and the experience is starting to slow down; especially on mobile devices. I am using several; animations; event listeners; and clickable elements that trigger different actions; such as object transformations and playing media content.
While everything works fine during initial testing; the AR experience becomes noticeably sluggish after adding more interactions. I have tried to optimize my code by reducing; the number of event listeners; and offloading some processes; but the improvements seem minimal.
The response time for interacting with objects in AR increases as I add more interactive elements. Is there a way to streamline; this to make it more responsive?
I am testing primarily on iOS and Android devices; and both platforms show similar performance drops after a few minutes of heavy interaction. Are there any specific optimization techniques for mobile devices that can help mitigate this?
Also, I have gone through this post; https://www.8thwall.com/blog/post/41173258896/how-we-engineered-ar-for-the-mobile-browser-with-8th-wall-web-workday which definitely helped me out a lot.
I am using a combination of GLTF and OBJ files. Could the format or size of these assets contribute to the performance lag? Would converting everything to a more uniform format help?
Thank you in advance for your help and assistance.
I’d recommend using only GLTF or GLB files, as they are much more optimized for web-based applications than OBJ. GLTF models are faster to load, and applying Draco compression can significantly reduce file sizes. This should help with load times and prevent memory issues during interactions.
You can analyze your models using gltf.report to identify areas for optimization. In particular, pay attention to the poly count and texture size. For mobile AR experiences, models should ideally be under 10k polygons. If you’re working with models that have a higher poly count, this could be contributing to the slowdown.
Large textures can also be a major performance bottleneck, especially on mobile. Textures at 2048x2048 or higher can put significant strain on memory. Instead, aim for a single 1024x1024 texture for albedo maps, and use smaller textures (e.g., 512x512) for things like normal or roughness maps. These optimizations will reduce memory usage and help ensure smoother performance.
Since you mentioned using several animations and interactive elements, reducing complexity is crucial. Try limiting the number of animations running at once, and only activate animations or media playback when necessary. Complex animations, especially on multiple objects, can cause lag, particularly if they’re running in the background.
Additionally, while reducing event listeners is a good start, it’s also important to debounce or throttle interactions to prevent overwhelming the system with too many updates. If the scene is recalculating frequently or processing interactions too often, it will slow down.
Another trick is to lazy load models or elements that aren’t needed immediately. For example, only load assets when they come into view or are interacted with, rather than having everything active at once.