Augmented Reality

Overview

RALQ’s augmented reality (AR) feature allows students to view molecular structures and laboratory instruments in their real-world environment. By overlaying 3D models onto the physical world through smartphone or tablet cameras, AR provides an immersive learning experience that enhances spatial understanding of chemistry concepts.

Augmented reality bridges the gap between digital 3D models and physical reality, allowing students to visualize molecules and equipment at scale in their actual environment.

How AR Mode Works

RALQ implements AR functionality through two complementary approaches:

1. Model-Viewer Native AR

The Google model-viewer component includes built-in AR capabilities through the ar attribute:

<model-viewer
    src="modelos/agua.glb"
    alt="Modelo de agua"
    auto-rotate
    camera-controls
    ar
    style="width: 100%; height: 240px; background-color: transparent;"
    shadow-intensity="0"
    interaction-prompt="none">
</model-viewer>

How It Works:

The ar attribute enables AR Quick Look button on supported devices
Users tap the AR icon to launch native AR experience
Model appears in camera view overlaid on real environment
Users can move device to view model from different angles
Pinch to scale, tap to place, drag to reposition

2. Web-Based AR Links

Many molecules and instruments include dedicated AR experiences through MyWebAR:

<a href="https://mywebar.com/p/Project_2_y08cdw22dd" target="_blank"
    style="display: inline-block; margin-top: auto; padding: 0.8rem 2rem; 
           background-color: #2563eb; color: white; border-radius: 8px;">
    Ver en Realidad Aumentada
</a>

Benefits:

Works across more device types
No app installation required
Custom AR experiences with annotations
Shareable links for remote learning

Device Compatibility

Android
iOS
Desktop

ARCore Requirements

Minimum Requirements:

Android 7.0 (Nougat) or higher
ARCore support (check Google’s supported devices list)
Camera and motion sensors
Adequate processing power

Supported Browsers:

Chrome (recommended)
Samsung Internet
Firefox with WebXR support

How to Use:

Open RALQ in supported browser
Navigate to molecule or instrument
Tap “View in AR” button
Grant camera permissions
Point camera at flat surface
Tap to place model

Over 400 million Android devices support ARCore. Check device compatibility at developers.google.com/ar/devices

Accessing AR Mode

For Molecular Structures

Each molecule card in estructuras-mol.php includes AR access: Available AR Links:

Water (H₂O)

https://mywebar.com/p/Project_2_y08cdw22dd

Caffeine (C8H10N4O2)

https://mywebar.com/p/Project_0_lui6nsi9y3

Phenol (C6H5OH)

https://mywebar.com/p/Project_2_ble0prmepm

Glycerol (C3H8O3)

https://mywebar.com/p/Project_1_iuoicrjuwn

Propane (C3H8)

https://mywebar.com/p/Project_0_thg4jret8w

Access Methods:

Direct Button: Click “Ver en Realidad Aumentada” button on molecule card
Native AR: Tap AR Quick Look icon in model-viewer (iOS/Android)
URL Sharing: Share MyWebAR links for remote learning

For Laboratory Instruments

Instruments in quimica-general.php and analisis-instrumental.php include AR: Available Instrument AR:

Microscope

https://mywebar.com/p/Project_1_f3ia9uedarView lab microscope at actual scale

Mortar and Pestle

https://mywebar.com/p/Project_2_weu37bf31See grinding tool in 3D space

Test Tube Rack

https://mywebar.com/p/Project_1_bsnqy3x66oVisualize equipment setup

Native AR Available For All Instruments:

All GLB models support native AR via model-viewer
Works on any ARCore/ARKit compatible device
No additional setup required

Best Practices for AR Viewing

Environment Setup

Lighting

Optimal Conditions:

Good ambient lighting (avoid darkness)
Avoid direct sunlight (causes glare)
Consistent lighting across surface
No flickering or colored lights

Why It Matters: AR tracking depends on visual features. Good lighting helps device detect surfaces and maintain stable positioning.

Surface

Best Surfaces:

Flat, horizontal surfaces (tables, floors)
Textured surfaces (better tracking)
Stable, non-reflective materials
Avoid glass or mirrors

Why It Matters: AR needs visual reference points. Featureless or reflective surfaces make tracking difficult.

Space

Room Requirements:

Clear area around viewing point
2-3 meters of free space minimum
Ability to walk around model
No obstructions in viewing path

Why It Matters: Moving around models provides better 3D understanding. Space allows exploration from all angles.

Device

Device Tips:

Fully charged battery (AR is intensive)
Close unnecessary apps
Clean camera lens
Stable internet connection for loading

Why It Matters: AR requires significant processing power. Optimized device ensures smooth experience.

Interaction Techniques

Placing Models:

Surface Detection: Move device slowly to scan surface
Placement: Tap screen where you want model to appear
Adjustment: Drag to reposition if needed
Scale: Pinch to resize model to appropriate scale

Viewing Models:

Walk Around: Physically move around model for different perspectives
Get Close: Move device closer for detail examination
Multiple Angles: View from above, below, and sides
Rotation: Some platforms allow rotation with gestures

Optimal Distances:

Molecules: 30-60 cm for detail, 1-2 meters for overall structure
Instruments: 1-3 meters to see full equipment
Comparison: Place multiple models at same distance for size comparison

Educational Use Cases

Individual Study
Classroom Demonstrations
Remote Learning
Group Activities

Self-Paced Learning:

Explore molecules before/after chemistry lessons
Compare molecular sizes and structures
Examine instrument details before lab work
Practice identifying equipment

Study Strategies:

View water molecule at different scales
Compare caffeine and propane structures
Examine microscope components up close
Visualize molecular geometry concepts

Benefits:

Learn at own pace
Repeat viewing as needed
Study from home
Build confidence before physical labs

Troubleshooting

Common Issues and Solutions

AR Button Doesn't Appear

Possible Causes:

Device doesn’t support AR
Browser doesn’t support WebXR
Model-viewer not loaded properly

Solutions:

Check device compatibility (ARCore/ARKit)
Update browser to latest version
Try different browser (Chrome/Safari)
Refresh page to reload model-viewer
Use external AR links (MyWebAR) instead

Model Won't Place on Surface

Possible Causes:

Insufficient lighting
Surface lacks texture
Camera permissions denied

Solutions:

Increase ambient lighting
Move to textured surface (wood, carpet)
Grant camera permissions in browser
Move device slowly to help tracking
Restart AR session

Model Appears Too Large/Small

Possible Causes:

Default scale not appropriate
Viewing distance incorrect

Solutions:

Use pinch gesture to resize
Move closer or farther from model
Replace model to reset scale
Check scale information in documentation

Tracking Unstable or Jumpy

Possible Causes:

Poor lighting conditions
Moving too quickly
Reflective or featureless surface

Solutions:

Improve lighting consistency
Move device more slowly
Change to different surface
Ensure camera lens is clean
Close other apps using camera/sensors

AR Link Opens but Shows Error

Possible Causes:

Internet connection issues
MyWebAR service unavailable
Model file not found

Solutions:

Check internet connection
Try again later
Use native AR (model-viewer) instead
Report issue if persistent

Technical Details

AR Implementation Stack

Google Model-Viewer

Native AR Support:

ARKit integration (iOS)
ARCore integration (Android)
WebXR API utilization
USDZ format for iOS
GLB format for Android

Version: Latest from unpkg CDN

MyWebAR Platform

Web-Based AR:

Cross-platform compatibility
No app installation required
Custom AR experiences
Link sharing capability
Analytics and tracking

Integration: External links per model

File Formats

GLB (GL Transmission Format Binary):

Used for all 3D models in RALQ
Single-file format (geometry + textures)
Efficient for web delivery
Supported by model-viewer
Compatible with ARCore

USDZ (Universal Scene Description):

Automatically generated by model-viewer for iOS
Apple’s AR format
Used by AR Quick Look
Created on-the-fly from GLB

Browser Support

Browser	Android AR	iOS AR	Desktop 3D
Chrome	✅ Full	❌ N/A	✅ Full
Safari	❌ N/A	✅ Full	✅ Full
Firefox	⚠️ Limited	❌ N/A	✅ Full
Edge	✅ Full	❌ N/A	✅ Full
Samsung Internet	✅ Full	❌ N/A	✅ Full

iOS Safari provides the best AR experience on Apple devices. Chrome is recommended for Android devices.

Safety and Privacy

Safety Considerations:

Be aware of surroundings when using AR
Don’t use AR while walking or in dangerous areas
Watch for obstacles when moving around models
Take breaks to avoid eye strain
Ensure adequate space for movement

Privacy:

Camera access required for AR functionality
Images captured stay on device unless shared
MyWebAR may collect usage analytics
No personal information required
Review browser camera permissions

Future Enhancements

Potential improvements for RALQ’s AR capabilities:

Interactive Features

Tap atoms to see element information
Animated chemical reactions
Bond manipulation and breaking
Molecular assembly activities

Multi-Model AR

Compare multiple molecules simultaneously
Show molecular interactions
Reaction pathway visualization
Scale comparison tools

Measurement Tools

Bond length measurement
Bond angle calculation
Molecular size comparison
Distance measurements

Educational Annotations

Floating labels for atoms
Bond type indicators
Property information overlays
Guided tours of structures

Additional Resources

Learn More About AR:

ARCore developer documentation: developers.google.com/ar
ARKit developer documentation: developer.apple.com/arkit
Model-Viewer documentation: modelviewer.dev
WebXR specification: immersiveweb.dev

Related RALQ Features:

Molecular Structures - All available molecules
Lab Instruments - Equipment with AR support
Periodic Table - Element information

Get Started

Core Features

User Guide

Technical

​Overview

​How AR Mode Works

​1. Model-Viewer Native AR

​2. Web-Based AR Links

​Device Compatibility

​ARCore Requirements

​ARKit Requirements

​Limited AR Support

​Accessing AR Mode

​For Molecular Structures

Water (H₂O)

Caffeine (C8H10N4O2)

Phenol (C6H5OH)

Glycerol (C3H8O3)

Propane (C3H8)

​For Laboratory Instruments

Microscope

Mortar and Pestle

Test Tube Rack

​Best Practices for AR Viewing

​Environment Setup

Lighting

Surface

Space

Device

​Interaction Techniques

​Educational Use Cases

​Troubleshooting

​Common Issues and Solutions

​Technical Details

​AR Implementation Stack

Google Model-Viewer

MyWebAR Platform

​File Formats

​Browser Support

​Safety and Privacy

​Future Enhancements

Interactive Features

Multi-Model AR

Measurement Tools

Educational Annotations

​Additional Resources

Build docs developers (and LLMs) love

Overview

How AR Mode Works

1. Model-Viewer Native AR

2. Web-Based AR Links

Device Compatibility

ARCore Requirements

ARKit Requirements

Limited AR Support

Accessing AR Mode

For Molecular Structures

For Laboratory Instruments

Best Practices for AR Viewing

Environment Setup

Interaction Techniques

Educational Use Cases

Troubleshooting

Common Issues and Solutions

Technical Details

AR Implementation Stack

File Formats

Browser Support

Safety and Privacy

Future Enhancements

Additional Resources