Raise your hand if you knew you could use JavaScript to create full-fledged 3D apps, complete with AR and VR support, right in the browser?
Most beginners are surprised to learn how far the web has come in terms of 3D graphics and real-world game development.
In this article, you’ll learn:
What tools and frameworks are needed to enter the world of Web-3D and AR applications;
How to connect an Angular interface to a 3D scene to make the app feel unified;
What challenges developers face when creating a true 3D application;
What optimizations can dramatically increase performance?
Our test project is Golf AR. It’s a small game where the user’s goal is simple: hit the ball into the hole. But for us, it wasn’t so much about the game itself as it was about exploring the real-world challenges a developer faces when creating an interactive 3D app in the browser: working with physics, camera control, lighting, event synchronization, and UI integration.
We won’t go into detail about how to build a 3D app in the browser from scratch — there are already dozens of good articles and courses on this topic. Here, we’ll share our practical development experience, discuss real-world challenges, and explore solutions using our project as an example.
Since the project covers several distinct areas, we’ve decided to split the material into two parts. In this first article, we’ll focus exclusively on the 3D portion of the project: architecture, performance, physics, and the integration of the 3D scene with the UI. In the second, we’ll detail some of the limitations associated with AR and the practical solutions we found during development.