Capability 05
AR, VR and interactive 3D
Spatial and interactive experiences used where three dimensions explain something that text and images cannot.
Problem and opportunity
Three dimensions should earn their place
Spatial media is powerful when the subject is spatial: a building, a machine, a process, a site. Used decoratively it slows the page down and adds nothing a photograph would not do better.
- Complex products are explained with long paragraphs nobody reads.
- Clients cannot picture a space before it is built.
- Training relies on being physically present.
Where three dimensions help
Four situations worth building in 3D
Select a point in the scene. Each one lists what it explains and what has to exist before it can be built, because spatial work depends on the model, drawings or data behind it.
Illustrative spatial view
Equipment
Training on equipment without stopping it
An interactive scene for familiarisation and procedure practice, used before someone works on the running machine.
Needs: The procedure as it is actually performed, and sign-off from the people responsible for safety.
Text version of this diagram
- Training on equipment without stopping it. An interactive scene for familiarisation and procedure practice, used before someone works on the running machine. Needs: The procedure as it is actually performed, and sign-off from the people responsible for safety.
- A product people can turn around. A 3D model in the browser with the parts that matter labelled. On a supported phone, the same model can be placed at full size in the room. Needs: A usable 3D model, or the dimensions, drawings and photographs to build one from.
- Readings shown beside the equipment they describe. Where a building system is already connected, its readings can be shown next to the plant they belong to, on a tablet or a headset. Needs: An existing connected system with data available. The overlay presents data; it does not create it.
- A walkthrough of a space that does not exist yet. Planned layouts, phasing or finishes shown in sequence, so a decision can be made without reading a full drawing set. Needs: Drawings or a model of the planned space, and the decisions the walkthrough has to support.
What Hapis delivers
Scope of delivery
Concept and storyboard
What the viewer must understand, and the shortest interactive path to it.
Web 3D experiences
Browser-based interactive scenes with progressive loading and a non-3D fallback.
AR viewing
Placing products or components in the viewer's own space from a phone.
VR and training scenes
Guided environments for walkthroughs, familiarisation or procedure practice.
How the system works
The layers behind the interface
Each layer has a defined responsibility, so the system can be extended without rewriting what already works.
- 01
Asset pipeline
Model preparation, compression and level of detail suited to mobile bandwidth.
- 02
Scene layer
Interaction, camera behaviour and annotations built as reusable components.
- 03
Fallback layer
Semantic content and imagery for reduced motion, older devices and crawlers.
- 04
Delivery
Code-split loading so the rest of the site stays fast.
Integration and architecture
Where it connects
- Embedded into existing sites and platforms as an isolated bundle.
- Headset delivery for VR where the use case justifies hardware.
- Model sources from CAD, BIM or purpose-built assets.
- Reduced-motion and no-WebGL paths always provided.
Use cases
Typical applications
Product explanation
Interactive breakdown of a machine or assembly with labelled parts.
Space and development visualisation
Walkthroughs of a space before or during construction.
Training and familiarisation
Repeatable scenarios that would be costly or unsafe to run live.
These describe the shape of the work. Named client references are published only with written approval.
Delivery process
How a project runs
- 01
Discover
Confirm the spatial question and the available source assets.
- 02
Design
Storyboard, interaction model and performance budget.
- 03
Build
Scene build with continuous device testing.
- 04
Integrate
Embed, code-split and verify fallbacks.
- 05
Improve
Refine based on how viewers actually use the scene.
Questions
Answered directly
- Will it work on mobile?
- Performance budgets and fallbacks are set at design stage, and mobile is tested throughout.
- Do we need an app?
- Most work is browser-based. Native or headset delivery is only used where the use case requires it.
- What assets do you need?
- CAD, BIM, product drawings or photography. Where none exist we scope modelling separately.
Next