0% found this document useful (0 votes)
14 views30 pages

Web-Based AR: 3D Object Optimization Report

This internship report details Arpit Johri's work on optimizing Web-Based Augmented Reality (WebAR) for static 3D object implementation, focusing on performance improvements using tools like A-Frame and AR.js. The project aimed to enhance loading times, rendering efficiency, and cross-platform compatibility while providing an immersive user experience. The report includes acknowledgments, objectives, activities, challenges faced, and the skills acquired during the internship at Madras MindWorks.

Uploaded by

1nt21cs044.arpit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
14 views30 pages

Web-Based AR: 3D Object Optimization Report

This internship report details Arpit Johri's work on optimizing Web-Based Augmented Reality (WebAR) for static 3D object implementation, focusing on performance improvements using tools like A-Frame and AR.js. The project aimed to enhance loading times, rendering efficiency, and cross-platform compatibility while providing an immersive user experience. The report includes acknowledgments, objectives, activities, challenges faced, and the skills acquired during the internship at Madras MindWorks.

Uploaded by

1nt21cs044.arpit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

VISVESVARAYA TECHNOLOGICAL UNIVERSITY

JNANA SANGAMA, BELAGAVI - 590018

An Internship Report on
Web-Based AR: Static 3D Object Implementation
Submitted in partial fulfilment of requirements for award of the degree of

Bachelor of Engineering
in
Computer Science and Engineering
for the Academic Year: 2024-25

Submitted by
Arpit Johri (1NT21CS044)

Under the Guidance of


Dr. Vijaya Shetty
Professor
Department of Computer Science and Engineering
Dr. Sarumathiy CK
Asst. Professor
Department of Computer Science and Engineering
Mr. Aravind
Sr. Developer, Madras MindWorks Private Limited

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

YELAHANKA, BENGALURU- 560064

1
Computer Science and Engineering

Certificate
This is to certify that the internship work entitled “Web-Based AR : Static 3D Object
Implementation” has been successfully carried out by Arpit Johri (1NT21CS044), a
bonafide student of Nitte Meenakshi Institute of Technology, in partial fulfillment of
the requirements for the award of the degree of Bachelor of Engineering in Computer
Science and Engineering under Visvesvaraya Technological University (VTU),
Belagavi, during the academic year 2024–2025.
The internship report has been examined and approved as it meets the academic
requirements prescribed under the autonomous scheme of Nitte Meenakshi Institute of
Technology, Bengaluru, for the said degree.

Signature of the Guide Signature of the HoD Signature of the Principal

Dr. Vijaya Shetty Dr. S Meenakshi Dr. H C. Nagaraj


Sundaram
Professor Principal
Head of Dept., CSE
Dept of CSE Nitte Meenakshi Institute of
Nitte Meenakshi Institute of Technology, Bengauru-560064
Nitte Meenakshi Institute of Technology, Bengauru-560064
Technology, Bengauru-560064

External Internship Viva-Voce

Name of Examiners Signature with Date

1. …………………………….. …………………………..

2
2. …………………………….. …………………………..

3
Acknowledgement
The successful completion of our internship marks a significant milestone in our
academic journey. We take this opportunity to express our heartfelt gratitude to all those
who supported and guided us throughout this enriching experience. Whatever we have
achieved is the result of their encouragement, support, and timely guidance, for which we
remain deeply thankful.
We express our sincere thanks and seek the blessings of Dr. N. R. Shetty, Advisor, Nitte
Meenakshi Institute of Technology, for his vision and emphasis on experiential learning
and constructivist principles, which have immensely enhanced our academic and
professional development. We are grateful to Mr. Rohit Punja, Administrator, Nitte
Education Trust, and Dr. Sandeep Shastri, Vice President, Bangalore Campus, Nitte
University, for their strategic leadership and continuous support in fostering a culture of
academic excellence.
We extend our special thanks to our beloved Principal, Dr. H. C. Nagaraj, for providing
the infrastructure, resources, and motivation that enabled us to successfully complete our
internship. Our sincere gratitude goes to Dr. J. Sudheer Reddy, Dean – Academics, and
Dr. Kiran Aithal, Dean – Research & Development, for their guidance and for nurturing
an ecosystem that supports innovation and holistic growth.
We would like to express our deep appreciation to Dr. S Meenakshi Sundaram, Head of
the Department, Computer Science and Engineering for his constant encouragement and
for facilitating internship opportunities that bridge the gap between academia and
industry. We are immensely thankful to our faculty mentor/internship coordinator, Dr.
Vijaya Shetty, Professor, Department of CSE and Dr. Sarumathiy CK, Assistant
Professor, Department of CSE, for their invaluable mentorship, timely feedback, and
continuous support during our internship period.
We also acknowledge with gratitude the support of our parents for their unwavering
encouragement and belief in us. Finally, we extend our heartfelt thanks to the industry
professionals, team members, and all others—named and unnamed—who contributed in
any way to making our internship experience meaningful and successful.

Arpit Johri (1NT21CS044)


Place: Bengaluru
Date:20/05/2025
1
Abstract
The rise of Augmented Reality (AR) as a mainstream technology has introduced new
possibilities for immersive experiences in browsers. However, displaying static 3D
objects in web-based AR often suffers from slow loading, inefficient rendering, and
compatibility challenges across devices. The aim of this project was to optimize the
implementation of static 3D objects in WebAR to ensure smooth, fast-loading, and
visually efficient AR experiences using lightweight front-end technologies.

This report details the research, implementation, and optimization of a WebAR solution
using open-source tools like A-Frame, [Link], and glTF-based 3D models. The system
was designed to be lightweight, interactive, and scalable, and focused heavily on
performance improvements like lazy loading, efficient rendering, model compression, and
runtime switching. The final system supports seamless marker-based 3D object placement
with animation and model switching — all running directly in a web browser without
requiring an app.

2
Contents

Acknowledgement i

Abstract ii

List of Figures iv

Chapter 1 Introduction 1

1.1 Purpose of the Internship 1


1.2 Internship Objectives 2
1.3 Company Overview
2

Chapter 2 Internship Activities and Responsibilities 3

2.1 Job Description and Task 3


2.2 Hardware and Software Requirements 4
2.3 Learning Experiences 4
2.4 Challenges and Solutions 5

Chapter 3 Learning Outcomes and Skills Acquired 6

3.1 Technical Skills 6


3.2 Hardware and Software Requirement 6
3.3 Knowledge Gained 7

Chapter 4 Reflection on the Internship Experience 9

4.1 Alignment with Expectations


9
4.2 Most Valuable Aspects
10
4.3 Areas for Improvement
10
4.4 Impact on Career Goals
10
Chapter 5 Analysis and Evaluation
11

Chapter 6 Conclusion 16
References
18

3
List of Figures

Fig 5.1 Metrics for Traditional vs Optimized WebAR


11

Fig 5.2 Performance comparision : Traditional vs Optimized WebAR 12

Fig 5.3 Line graph representing real-time FPS


13

Fig 5.6 Cross platform responsiveness. 14

Fig 5.7a Sample screenshot from the live deployment of the WebAR project 14

Fig 5.7b Sample screenshot from the live deployment of the WebAR project 14

Fig 5.7c Sample screenshot from the live deployment of the WebAR project 15

Fig 5.7d Sample screenshot from the live deployment of the WebAR project 15

Fig 5.7e Sample screenshot from the live deployment of the WebAR project 15

4
Chapter 1 Introduction
In recent years, Augmented Reality (AR) has transitioned from a novel concept into a
transformative technology reshaping sectors such as education, healthcare, marketing,
retail, and entertainment. Among the various forms of AR, Web-based Augmented
Reality (WebAR) has emerged as a particularly impactful solution. Unlike traditional AR,
which often requires the installation of dedicated applications, WebAR operates directly
through web browsers, eliminating barriers to entry and enhancing accessibility for end
users.

This internship project focused on optimizing the performance of WebAR applications by


addressing key issues such as model load times, marker detection speed, and overall
system responsiveness. By utilizing tools like A-Frame, [Link], and jsDelivr CDN, the
internship provided an opportunity to engage with the latest in web-based immersive
technologies and apply optimization techniques to create smoother, more accessible AR
experiences.

1.1 Purpose of the Internship

The purpose of this internship was to gain practical exposure to the world of immersive
web development through hands-on work with WebAR technologies. As a computer
science student with a keen interest in cybersecurity, web technologies, and interactive
systems, I was particularly drawn to the innovative challenges presented by AR.

This internship offered a unique opportunity to explore how AR can be integrated into the
web ecosystem using standard technologies such as HTML5, CSS3, JavaScript, A-Frame,
and [Link]. It also provided a platform to understand the nuances of real-time rendering
and performance tuning in browser environments. Aligning with both my academic
background and career aspirations, this experience helped me deepen my understanding
of how immersive applications are built, deployed, and optimized in the real world.

Moreover, as part of a broader goal to work in domains involving cutting-edge


technologies like AR/VR, cybersecurity, and cloud computing, this internship allowed me
to begin developing the necessary technical and problem-solving skills to thrive in such
interdisciplinary areas.
1
1.2 Internship Objectives
The internship was guided by the following key objectives:

● To understand the fundamental architecture of WebAR applications, including


how A-Frame and [Link] enable 3D rendering and marker tracking in browsers.

● To optimize the rendering of static 3D models, focusing on reducing initial load


times, improving rendering smoothness, and minimizing memory usage.

● To implement efficient asset delivery strategies using jsDelivr CDN, thereby


enhancing performance across devices and networks.

● To ensure cross-platform compatibility and responsive design by testing on


various mobile browsers and screen sizes.

● To improve marker detection speed and stability under varied lighting and
environmental conditions, thereby enhancing user experience.

● To develop debugging and profiling skills using browser developer tools to


identify performance bottlenecks.

1.3 Company Overview

Madras MindWorks is a Chennai-based immersive technology company specializing in


Augmented Reality (AR), Virtual Reality (VR), and Mixed Reality (MR). The company
serves a wide range of industries including manufacturing, education, defense, healthcare,
and automotive. Known for its innovation in spatial computing, Madras MindWorks
creates solutions such as AR product visualizers, virtual showrooms, and WebAR
applications using frameworks like A-Frame and [Link]. Their focus on optimization,
cross-platform compatibility, and accessibility makes them a leader in delivering
interactive experiences that blend the digital and physical worlds.

During my internship, I worked closely with teams that emphasized lightweight and high-
performance AR development for the web. The company’s commitment to accessible
technology directly aligned with the goals of my project, which focused on optimizing the
display of static 3D models in WebAR. The collaborative environment, technical
mentorship, and real-world problem-solving at Madras MindWorks provided an ideal
setting to apply and expand my academic knowledge in immersive technologies and web-
based development.

2
3
Chapter 2 Internship Activities and Responsibilities

2.1 Job Description and Task


During my internship at Madras MindWorks, I was primarily involved in enhancing the
rendering efficiency and overall user experience of static 3D models within Web-based
Augmented Reality (WebAR) environments. My core project revolved around the
integration of two detailed 3D assets—Cesium Man and Damaged Helmet—into an
interactive, browser-accessible AR platform using lightweight frameworks such as A-
Frame and [Link].

My responsibilities included:

● Researching and selecting optimal 3D model formats like glTF to ensure faster
load times and reduced file sizes.

● Hosting models via jsDelivr CDN to improve content delivery speed across
multiple devices and browsers.

● Applying real-time runtime optimizations (e.g., polygon reduction, texture


compression) to reduce GPU load and memory usage.

● Fine-tuning AR marker detection for faster responsiveness and accurate tracking.

● Conducting benchmark-driven development to quantitatively measure


performance improvements, including frame rate, loading speed, and animation
fluidity.

● Iterating UI/UX elements to maintain a balance between aesthetics and


performance.

● Collaborating with senior developers to align the implementation with industry


best practices and cross-device compatibility standards.

This hands-on experience allowed me to contribute directly to a production-ready


WebAR application that was both lightweight and scalable, aligning with the company’s
mission to deliver accessible and immersive AR solutions across industries.

4
2.2 Hardware and Software Requirements
During my internship at Madras MindWorks, I engaged with a range of hardware and
software tools essential for developing and optimizing WebAR experiences.
Hardware Requirements:
- Laptop/PC with a multi-core processor and at least 8 GB RAM for development and
testing
- Integrated or external webcam for marker-based AR detection
- Mobile devices (Android/iOS) for cross-platform compatibility testing
- Reliable internet connection to support CDN-hosted model loading and real-time testing
- Basic lighting setup (for consistent marker detection during AR testing)
Software & Tools Used:
- A-Frame (Web framework for building 3D/AR/VR experiences using HTML and
JavaScript)
- [Link] (JavaScript library for marker-based WebAR experiences)
- Blender (for 3D model visualization, editing, and optimization)
- glTF (GL Transmission Format) – efficient 3D model format used for fast rendering
- jsDelivr (CDN used to host and serve 3D assets quickly and reliably)
- [Link] (JavaScript library used indirectly via A-Frame for 3D rendering)
- Web Browsers (Chrome, Firefox) for testing browser-based AR performance
- VS Code (Integrated Development Environment used for coding and debugging)
- GitHub (Version control and project repository management)
Skills Developed/Utilized:
- Web development (HTML, JavaScript)
- 3D model optimization and rendering principles
- Performance tuning for real-time applications
- Cross-device compatibility and responsive design
- Collaborative development using Git
- Problem-solving and technical troubleshooting

2.3 Learning Experiences


This internship provided me with significant technical growth in WebAR application
development, especially in optimizing 3D model rendering and improving cross-device
compatibility. I gained hands-on experience in using web-based AR frameworks and

5
learned the importance of balancing visual fidelity with performance constraints.
Professionally, I developed stronger communication and teamwork skills by collaborating
closely with mentors and colleagues, receiving feedback, and adapting solutions to real-
world technical challenges. The experience also honed my problem-solving abilities, as I
navigated constraints related to model size, load times, and user interaction smoothness.

2.4 Challenges and Solutions


One of the primary challenges was reducing the load times and improving the
responsiveness of 3D models within a browser environment, where resources and
processing power are limited compared to native applications. To overcome this, I
researched and implemented optimized 3D model formats (like glTF), leveraged CDN
hosting for faster content delivery, and employed runtime optimizations to manage
memory and animation efficiency. Another challenge was ensuring reliable marker
detection across diverse devices, which I addressed through testing different [Link]
configurations and simplifying marker designs to enhance detection speed and accuracy.
These solutions collectively improved the WebAR user experience and demonstrated
effective problem-solving in a resource-constrained environment.

6
Chapter 3 Learning Outcomes and Skills Acquired

3.1 Technical Skills


Throughout the internship at Madras MindWorks, I significantly enhanced my technical
capabilities in web development, augmented reality, and 3D content optimization.
Key technical skills acquired or refined include:
- Proficient use of WebAR frameworks:
• A-Frame for declarative 3D scene construction using HTML-like syntax.
• [Link] for real-time, marker-based augmented reality experiences using
browser-native technologies.
- 3D Model Handling:
• Understanding and implementation of efficient model formats such as .glb
(binary glTF) for reduced load times and improved rendering.
• Hands-on experience with jsDelivr CDN for hosting and caching large 3D
assets.
- JavaScript Programming:
• Dynamic DOM manipulation for asset switching and event-driven model
rendering.
• Real-time performance management including lazy loading, attribute
resetting, and memory cleanup.
- Frontend Web Development:
• HTML5 for structured layout and semantic scene definition.
• CSS3 for responsive UI design using Flexbox, absolute positioning, and
media queries.
- Performance Testing and Debugging:
• Used browser-based tools like Chrome DevTools for analyzing FPS,
memory usage, and asset load times.
• Benchmarked WebAR efficiency to compare optimized and non-optimized
implementations.
- Version Control and Deployment:
• Utilized Git and GitHub Pages for collaborative development and static site
hosting with HTTPS support.
7
3.2 Hardware and Software Requirements
Beyond technical expertise, the internship helped develop essential personal and
professional competencies necessary for effective teamwork and project execution:

- Problem-Solving:
• Overcame challenges related to rendering performance, memory leakage, and
device compatibility by applying debugging strategies and exploring optimization
techniques.

- Communication:
• Actively collaborated with mentors and teammates, articulating technical ideas
clearly and understanding project feedback constructively.

- TimeManagement:
• Balanced multiple phases of development, from research and implementation to
testing and deployment, within stipulated timelines.

- Adaptability:
• Learned to rapidly understand and apply new libraries and frameworks such as A-
Frame and [Link], demonstrating the ability to work efficiently with emerging
technologies.

- Attention to Detail:
• Ensured model rendering was precise, animations were smooth, and user experience
was consistent across screen sizes and devices.

3.3 Knowledge Gained


The internship provided a comprehensive understanding of how immersive technologies
are developed and optimized for the web. It bridged theoretical knowledge with real-
world application in several ways:

- Applied Concepts:
• Gained insight into the practical implementation of augmented reality principles
such as camera feed overlay, marker detection, and 3D object anchoring.

8
- Industry Awareness:
• Understood how performance optimization and cross-platform support are critical
in industries like manufacturing, education, and healthcare—where Madras MindWorks
deploys AR solutions.

- WebAR Workflow:
• Learned the full lifecycle of a WebAR application—from scene setup and model
integration to performance tuning and deployment—mirroring real industry processes.

- AR Architecture:
• Grasped the architectural principles behind AR systems, including component-
based design, modular loading, event-driven interaction, and CDN utilization.

This hands-on exposure has strengthened my foundation in immersive technologies and


reaffirmed my interest in pursuing a career at the intersection of web development and
extended reality (XR).

9
Chapter 4 Reflection on the Internship Experience
The internship at Madras MindWorks was a transformative experience that allowed me to
bridge the gap between academic learning and real-world application. Throughout the
duration of the project, I gained valuable technical, professional, and personal insights
that contributed meaningfully to my development. The following sections provide a
reflective evaluation of my internship experience based on key aspects such as
expectations, value gained, areas for improvement, and its influence on my future career
path.

4.1 Alignment with Expectations

The internship at Madras MindWorks aligned well with my expectations, particularly in


offering real-world exposure to cutting-edge technologies like WebAR. I anticipated a
hands-on experience involving augmented reality development and was pleased to engage
deeply with A-Frame, [Link], and performance optimization techniques. The opportunity
to work on a live WebAR project with real performance metrics and deployment
pipelines met my goal of applying theoretical knowledge in a practical environment.

4.2 Most Valuable Aspects

The most valuable aspect of this internship was the end-to-end development cycle of a
WebAR application—from ideation and framework selection to optimization, testing, and
deployment. Specifically, the following stood out:

● Gaining hands-on experience with AR frameworks (A-Frame, [Link]) in a real-


world project.

● Learning how to benchmark performance metrics such as FPS, load times, and
memory usage.

● Understanding best practices in 3D model optimization and efficient asset delivery


via CDN.

● Exposure to responsive UI design tailored for mobile AR interfaces.

10
This practical exposure went beyond classroom learning and provided critical insights
into industry workflows and challenges.

4.3 Areas for Improvement

While the internship was productive and enriching, a few areas could be improved for an
even better experience:

- From the Program Side:


• A brief onboarding or training module on [Link] and A-Frame at the beginning would
have accelerated the initial setup phase.
• More collaborative team check-ins or peer feedback sessions could have enhanced
learning through shared insights.

- From My Side:
• I could have engaged more proactively in seeking early feedback on performance
optimizations.
• Time allocation between research and development phases could have been better
balanced to allow more room for testing advanced features.

4.4 Impact on Career Goals

This internship has significantly shaped my career goals by reinforcing my interest in


immersive technologies and web-based development. Working on this WebAR project
has shown me the potential of browser-based AR in sectors like education, automotive,
and healthcare, and how optimized digital experiences can transform user engagement. I
am now more confident about pursuing a career in Extended Reality (XR) development,
with a focus on AR applications for the web. The blend of creativity, real-time
interaction, and technical challenge is exactly what I look for in a long-term career path.

11
Chapter 5 Analysis and Evaluation
The project aimed to enhance WebAR performance by eliminating common bottlenecks
associated with traditional approaches to rendering static 3D models in browser-based
augmented reality environments. This section provides a detailed assessment of the
performance improvements, a comparative analysis between traditional and optimized
implementations, and a breakdown of key metrics such as frame rate (FPS), memory
usage, model loading time, marker detection speed, and cross-device responsiveness.

5.1 Performance Metrics Overview

To accurately evaluate the optimization, several critical performance indicators were


measured across both traditional and enhanced WebAR implementations. These include:

● Model Load Time

● Frame Rate (FPS)

● Memory Consumption

● Marker Detection Speed

● Initial Page Load Weight

● Cross-Device Responsiveness

These metrics offered concrete benchmarks to assess how optimizations affected both the
user experience and application stability.

12
Figure 5.1

5.2 Graphical Comparison

A bar chart was created to compare the performance metrics between the traditional
WebAR setup and the optimized implementation:

Figure 5.2

From the graph, it is evident that the optimized solution delivered measurable
improvements across all key metrics. Notably:

● Model load time improved by approximately 68%

● Initial page size was reduced by over 80%

● Marker detection latency dropped significantly

● Memory consumption was halved


13
5.3 FPS Analysis

Smooth frame rates are essential for maintaining immersion in AR experiences. In


traditional implementations, large model sizes and inefficient scene handling frequently
caused frame rates to drop below 30 FPS, resulting in laggy interactions.

The optimized solution sustained stable frame rates in the range of 50–60 FPS on modern
smartphones. This was achieved through:

● Conversion of 3D assets to GLB (binary glTF) format

● Lazy loading and cleanup of unused assets

● Streamlined scene graph management using A-Frame entities

A line graph representing real-time FPS tracking during various interaction stages is
included below.

Figure 5.3

5.4 Marker Detection Accuracy and Latency

Marker detection responsiveness is a crucial factor in AR applications. The optimized


implementation leveraged [Link]'s robust detection engine along with lighter model
formats, resulting in an average marker recognition latency of ~0.4 seconds—nearly
instantaneous compared to traditional setups.

The system maintained high detection accuracy across a wide range of lighting conditions
and camera angles, ensuring consistent anchoring and a more natural user experience.

5.5 Memory Usage

14
Traditional WebAR implementations often suffered from poor memory management due
to lingering 3D models and texture assets. The optimized version employed an effective
strategy for memory conservation:

● Proactive removal of previously rendered models from the DOM

● Clean-up of associated event listeners to prevent memory leaks

● Use of lower-resolution textures without compromising visual quality

As a result, peak memory usage on mid-range smartphones was reduced from over 250
MB to below 100 MB.

5.6 Cross-Platform Responsiveness

The solution was tested on a diverse set of devices—including smartphones, tablets, and
laptops—across major browsers. HTML5 and CSS3 were employed for responsive UI
design, while A-Frame and [Link] provided device-agnostic rendering capabilities.

The application consistently maintained performance and interactivity, demonstrating its


ability to scale across varying hardware and software environments.

Figure 5.6

5.7 Visual Enhancements

Below is a sample screenshot from the live deployment of the WebAR project,
showcasing the rendered 3D model anchored via marker-based tracking:

15
Figure 5.7a Figure 5.7b

16
Figure 5.7c Figure 5.7d Figure 5.7e

17
Chapter 6 Conclusion
The culmination of this WebAR internship project represents a significant contribution
toward the advancement of lightweight, browser-based augmented reality systems. By
focusing specifically on the performance challenges associated with static 3D object
rendering in real-time AR environments, the project successfully demonstrates that a
strategic, optimization-oriented development approach can dramatically improve user
experience, resource utilization, and cross-device compatibility.

Through a combination of modern web technologies such as A-Frame, [Link], and


efficient content delivery networks (CDNs), the project achieved noticeable reductions in
model load time, initial page size, and memory consumption—three of the most critical
metrics influencing the performance of any AR application. The use of .glb file formats in
place of heavier .gltf or unoptimized 3D models, along with deferred loading strategies
and memory-aware architecture, resulted in a robust and scalable WebAR solution that
significantly outperforms traditional implementations.

Key Takeaways:
18
● Performance Optimization is Crucial in WebAR: Without optimizations, WebAR
applications suffer from slow model rendering, sluggish marker detection, and
high memory usage—especially on mobile devices. This project clearly
illustrates that optimization techniques such as binary asset formats, lazy-
loading, and CDN hosting are not just beneficial but essential for delivering
smooth AR experiences on the web.

● Marker-Based AR Still Holds Value: While markerless AR and SLAM-based


techniques are increasingly popular, marker-based AR remains an effective and
reliable approach for low-latency applications, especially when integrated with
lightweight 3D content. The use of the Hiro marker in this project ensured fast and
accurate object rendering even on low-end devices.
● WebAR is a Viable Alternative to Native AR: Native AR applications typically
require more storage, platform-specific SDKs, and regular updates. In contrast, this
project demonstrates how WebAR, when properly optimized, can offer a comparable
level of interactivity and visual fidelity while being instantly accessible via browsers.
No installations, updates, or app store approvals are needed.
● Cross-Platform Compatibility and Accessibility: Hosted on GitHub Pages, the final
deployment is fully web-based, mobile-friendly, and accessible to any user with a
camera-enabled browser. This ensures that AR content can reach a broader audience
with minimal barriers to entry, a crucial advantage in educational, commercial, and
marketing applications.
● Scalability and Maintainability: The use of modular code (JavaScript) and standard
web frameworks ensures that the project can be easily expanded in the future. New
3D models can be added dynamically with minimal effort, and the user interface can
be improved or localized for different regions without architectural overhauls.

Reflection on Internship Goals

The overarching goal of the internship was to implement a fast, optimized, and scalable
WebAR system capable of delivering real-time 3D object visualization in a browser
environment. Every element of the development pipeline—from code structure and 3D

19
asset selection to deployment and testing—was oriented around achieving maximum
efficiency and responsiveness.

All the primary objectives were met successfully:

● Static 3D models now load in under 2.5 seconds on most devices.


● The initial page size was reduced by over 80% compared to traditional methods.
● Frame rates of 55–60 FPS were consistently achieved in modern browsers.
● The UI and logic are extendable, maintainable, and efficient.

This project not only met its technical goals but also provided a comprehensive, hands-on
learning experience in augmented reality, performance engineering, WebGL, and
browser-based deployment strategies. The skills and insights gained during this internship
are transferable across a wide range of cutting-edge fields—from immersive education
and e-commerce to remote collaboration and medical training through AR.

References
1 A-Frame – Web framework for building virtual reality (VR) and augmented reality
(AR) experiences using HTML.
Official Documentation: [Link]
2 [Link] – Lightweight library for Augmented Reality on the Web, supporting marker-
based AR with high performance.
GitHub Repository: [Link]
3 GLB Model Format – Binary version of glTF, optimized for efficient transmission
and rendering of 3D models.
glTF Overview: [Link]
4 Khronos Group - glTF Sample Models – Open-source repository for testing and
benchmarking glTF models such as CesiumMan and Damaged Helmet.
GitHub: [Link]
5 jsDelivr CDN – Free, fast, and reliable open-source CDN used to host 3D models in
this project for optimized delivery.
Website: [Link]
20
6 GitHub Pages – Hosting service used to deploy and serve the live WebAR
application.
Documentation: [Link]
7 WebXR Device API (Conceptual Reference) – Provides access to AR and VR
devices in compatible browsers.
MDN Web Docs:
[Link]
8 Matplotlib Library – Used for generating performance comparison charts and metrics.

21
Offer Letter

22
Internship Completion Certificate

23

You might also like