Lloyd's Register
Tangible VR Book

A Physical book becomes an immersive VR experience.

Watch Demo Try Live Demo Read Paper
Tangible VR Book hero
Lloyd's Register Foundation Supported by Lloyd's Register Foundation

What is the VR Book?

A physical book with visual markers that triggers a web-based VR application on smartphones. As users turn pages, the experience displays 3D models, animations, video, and audio narration.

Why a tangible book? It bridges the gap between physical archives and digital immersion, supporting learning through spatial interaction.

Tangible interaction WebVR Maritime heritage AR.js
Tangible VR Book in use

How it works

1. Open the book
2. Scan the page
3. Enter VR
4. Explore
5. Turn the page

Project Demo

Watch on YouTube

Research

This project investigates how tangible and immersive technologies can support the presentation and understanding of complex archival material in educational contexts. Developed in collaboration with Lloyd's Register Foundation.

Demo Paper ICEC 2026
Read Download
Master's Dissertation University of Coimbra, 2026
Read Download
Physical Book Layout & Design
Read Download

Open-source Authoring Tool

Create your own Tangible VR Book. Design interactive pages, add 3D models, attach videos, configure interactions, and export to VR.

Design interactive pages
Add 3D models
Attach videos
Configure interactions
Export to VR

Tutorial: How to create your own Tangible VR Book

Watch on YouTube
Download Template (ZIP) View on GitHub Live Demo
Includes all files: markers, assets, content-maker.html, and demo content.json

Quick Start Guide

  1. Download the template — Click the button above to download the ZIP file, browse the code on GitHub, or see a live demo.
  2. Extract the files — Unzip the downloaded file to access the project folder.
  3. Add markers to your book — Place the AR.js barcode markers (marker0, marker1, etc.) on your physical pages.
  4. Place your media — Add your images, videos, 3D models, and audio files to the assets/ folder.
  5. Use the authoring tool — Open content-maker.html in your browser to define what content appears on each page.
  6. Export and upload — Export your content.json file and upload everything to GitHub Pages.
  7. Test on your phone — Open your GitHub Pages URL on your smartphone and scan the markers with your book.

Content Editor Fields Explained

Narration Audio file (MP3)
360 Surround 360° image or video
Center Main content (images, videos, 3D)
Left / Right Content placed to the sides
Marker Content attached to the physical marker
Scale Size multiplier
Auto Rotate Enable/disable 3D rotation
Controls Show/hide video controls

Team

Marcelo F. Coelho Main Developer
mfcoelho@student.dei.uc.pt LinkedIn Instagram GitHub
Prof. Jorge Carlos Santos Cardoso Supervisor
Prof. Paul David Hardman Supervisor (Design)
LRFLloyd's Register Foundation
UCDEI · University of Coimbra
VRLabVRLab

Downloads

Demo Paper (PDF) Dissertation (PDF) Poster Physical Book (PDF) Template (ZIP)
Acknowledgments

This work was developed at the VRLab, University of Coimbra.

Lloyd's Register Foundation grant number Sg10\100005 through FCT – Foundation for Science and Technology, I.P., within the scope of the research unit UID/00326 - Centre for Informatics and Systems of the University of Coimbra, https://doi.org/10.54499/UID/00326/2025.

Back to top
Lloyd's Register Tangible VR Book · University of Coimbra · mfcoelho@student.dei.uc.pt