let’s dev GmbH & Co. KG - The brand for groundbreaking custom software

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework
by Judith
10. Januar 2018

WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

Virtual Reality (VR) and Augmented Reality (AR) have developed from a niche topic to a real hype in recent years. This results in a "playground for designers" that creates new space for representation. Mozilla's open source framework A-Frame opens up new possibilities for VR on the web.

„Virtual and Augmented Reality are going mainstream“

Several years ago, Burdea and Coiffet defined virtual reality (VR) as follows:

„Virtual reality is a high-end user-computer interface that involves real time simulation and interactions through multiple sensorial channels. These sensorial modalities are visual, auditory, tactile, smell and taste.”

VR is therefore a purely computer-generated world. Since in VR the digital information does not necessarily have to exist, VR can be used to generate an imaginary as well as an exact simulation of reality. AR, on the other hand, describes the extension of the real world with additional virtual information.

The virtual and real worlds are increasingly merging...

... and this has not only been the case since the science fiction movie "Matrix" from 1999. Even before that, VR was already a well-known topic, but was only used in niches due to the high acquisition costs and the limited mass-production technology of the devices. The rapid technological development of smartphones with high-resolution displays, 3D animations and extensive hardware and software functionality are now making VR and AR socially acceptable. Games like "Pokémon Go" and photo filters like those on "Snapchat" are exciting users in the consumer environment and increasingly uniting the virtual and real worlds.

Statistical surveys illustrate the growth trend of the technology in the coming years. The forecast number of users as well as sales are rising continuously.

statitic_sales

Figure 2: Forecast for virtual reality revenue worldwide from 2016 to 2021 (in billions of U.S. dollars) [1].

statitic_users

Figure 3: Forecast for the number of virtual reality users worldwide from 2016 to 2020 (in millions) [2].

WebVR in practical application

In order to implement the topic of WebVR, various aspects need to be considered, which are presented below.

WebVR

Virtual Reality for the Web, or WebVR for short, is an important future building block for VR, because WebVR has set itself the goal of enabling virtual reality on the web. This is an API that enables the display of VR content in the browser. The market-leading browsers support this technology. However, Mozilla Firefox and Google Chrome are currently pioneers in technical support.

WebGL

With the help of the JavaScript API WebGL (Web Graphics Library) interactive 2D and 3D graphics can be rendered in the browser. Only a compatible browser is required for rendering and visualization. Additional plugins are not necessary.

A-Frame

A-Frame by Mozilla is an open-source framework, which allows a cross-device and simple VR realization possible. Basic HTML knowledge is sufficient to get started with WebVR. Those who have advanced knowledge in HTML, DOM and JavaScript, will be pleased about the possibilities offered by further frameworks and libraries such as jQuery, React, Redux, Vue.js, d3, Meteor or Angular. The A-Frame Framework makes interfaces, such as WebGL and WebVR easily accessible and thus lowers the entry barriers. WebGL is wrapped in HTML elements using A-Frame. This enables the implementation of VR scenes based on WebGL without having to resort to the complex API. Since WebGL is already standard in modern browsers on desktop and mobile, content created with A-Frame works across platforms.

In the following example, the A-Frame application is illustrated using a scene with 3D objects.

To use A-Frame, the framework must first be included in the <header>:

<html>
<head>
    <title> WebVR mit let’s dev </title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
...
</body>
</html>

The basis for a WebVR scene is the <a-scene> tag. Inside the tag the scene is defined. With this it is possible to include WebVR completely or over a desired area. In the code example, a cube (a-box), a sphere (a-sphere), a cylinder (a-cylinder), a plane (a-plane), and a background (a-sky) are included within the <a-scene> tag. For three-dimensional positioning in space, the objects need an X, Y and Z coordinate.

<body>
    <a-scene>
        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>

If you run this code, you get the following WebVR scene:

webVR_example_1

Figure 4: Example scene of WebVR with A-Frame

In the further example, the inclusion of JavaScript adds a hover effect to the 3D objects:

<html>
    <head>
        [...]
        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    </head>
    <body>
        <script>
            AFRAME.registerComponent('change-color-on-hover', {
                schema: {
                    color: {default: 'red'}
                },

                init: function () {

                    var data = this.data;
                    var el = this.el;  // <a-box>
                    var defaultColor = el.getAttribute('material').color;
                    el.addEventListener('mouseenter', function () {
                        el.setAttribute('color', data.color);
                    });

                    el.addEventListener('mouseleave', function () {
                        el.setAttribute('color', defaultColor);
                    });
                }
            });
        </script>
    </body>
</html>

Instead of a background color, an image can also be inserted in the <a-sky> tag. 360° images are ideal for this purpose. Assets are included within the <a-assets> tag.

<a-scene>
	<a-assets>
		<img id="schlachthof" src="../assets/img/schlachthof.jpg">
	</a-assets>

	<a-sky src="#schlachthof"></a-sky>

	<!-- Camera + Cursor. -->
	<a-camera>
		<a-cursor id="cursor">
			<a-animation begin="click" easing="ease-in" attribute="scale"
			fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150" ></a-animation>
			<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
			from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
		</a-cursor>
	</a-camera>

	<a-box position="-8 0.5 3" rotation="0 45 0" color="#4CC3D9"
	change-color-on-hover="color: blue"></a-box>

	<a-sphere position="3 5 -15" radius="1.25" color="#EF2D5E"
	change-color-on-hover="color: white"></a-sphere>
</a-scene>

The HTML DOM base allows manipulation of the scene by getAttributes, setAttributes and other functions as it is common in other web projects. The extensive documentation and community make it possible to realize a first, own VR project in a short time and with few lines of code.

A-Frame Inspector

A visual tool for debugging A-Frame.

A very helpful tool is the included visual 3D Inspector. It is based on the well-known browser DOM Inspectors and can be opened in any A-Frame scene using the (ctrl + alt + i) shortcuts. The Inspectors allows to drag, rotate and scale objects. Additional widgets also allow objects to be optimized. Changes are displayed directly, as with the Web Inspector, and avoid jumping back and forth between browser and code.

webVR_inspector_debugger

Figure 5: A-Frame Inspector

Through the extension with own scripts, detailed documentation and the three.js library, even extensive projects can be realized.

Using a space that wasn't there before creates new opportunities

In addition to the horizontal X and vertical Y movement, VR applications can use the movement around Z in space. This offers new interaction aspects for classic applications such as online stores. Furthermore, by enriching a real scene with information, additional applications are conceivable. These include a virtual tour of a museum, a building or a city guide tour.

online-shop-mit-aframe

Figure 6: Application example E-Shop [3]

webVR-example_4

Figure: Interior application example [4]

A-Frame makes it simple to get started

WebVR in conjunction with A-Frame provides a lightweight alternative to legacy gaming engines like Unity or Unreal, plus it offers a simple interface, HTML-based syntax, and an

By using DOM and the resulting optimized performance, the A-Frame is a comprehensive, simple and optimized solution for implementing WebVR.

Image credits:

  • iStock: alvarez

More articles from our blog

let’s dev Blog |

Technical

by Julian

2021-10-14

Read more
let’s dev Blog | Apple Developer Program: What is it used for and what content does it offer me as a member?

Corporate

Apple Developer Program: What is it used for and what content does it offer me as a member?

by Julian

2021-09-30

Read more
let’s dev Blog | Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

Corporate

Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

by Ellen

2021-07-15

Read more
let’s dev Blog | Tailwind: An innovative project for the future use of old wind turbines

Corporate

Tailwind: An innovative project for the future use of old wind turbines

by Karl

2021-06-24

Read more
let’s dev Blog |

Corporate

by Julian

2021-06-10

Read more
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Read more
let’s dev Blog | Dasoman - Data-Sovereignty-Manager

Corporate

Dasoman - Data-Sovereignty-Manager

by Karl

2021-01-11

Read more
let’s dev Blog | We look back on the past months - And wish all the best for the coming year 2021!

Corporate

We look back on the past months - And wish all the best for the coming year 2021!

by Julian

2020-12-17

Read more
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Read more
let’s dev Blog | Adobe Max - Online for the first time

Corporate

Adobe Max - Online for the first time

by Julia

2020-10-29

Read more
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Read more
let’s dev Blog | Mensch und Computer 2020 - Digital Change in the Flow of Time

Corporate

Mensch und Computer 2020 - Digital Change in the Flow of Time

by UX Team

2020-09-18

Read more
let’s dev Blog | Neumorphism – A new era of user interface design?

Technical

Neumorphism – A new era of user interface design?

by Julian

2020-08-13

Read more
let’s dev Blog | UX Research Part 3 - UX Methods

Technical

UX Research Part 3 - UX Methods

by Elena

2020-05-28

Read more
let’s dev Blog | UX Research Part 2 - What is UCD and what does User Research have to do with it?

Technical

UX Research Part 2 - What is UCD and what does User Research have to do with it?

by Elena

2020-04-23

Read more
let’s dev Blog | go-digital promotes establishment of home office workstations

Corporate

go-digital promotes establishment of home office workstations

by Karl

2020-03-19

Read more
let’s dev Blog | Google Passes - Card Management on Android Devices

Technical

Google Passes - Card Management on Android Devices

by Michelle

2020-03-12

Read more
let’s dev Blog | 100% code coverage in software testing - a reasonable goal?

Technical

100% code coverage in software testing - a reasonable goal?

by Raphael

2020-03-06

Read more
let’s dev Blog | Swift UI - Simple and fast implementation of user interfaces

Technical

Swift UI - Simple and fast implementation of user interfaces

by Tobias

2020-03-02

Read more
let’s dev Blog | In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

Corporate

In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

by Julian

2020-02-27

Read more
let’s dev Blog | Simplified testing of iOS push notifications in the simulator with Xcode 11.4

Technical

Simplified testing of iOS push notifications in the simulator with Xcode 11.4

by Manuel

2020-02-26

Read more
let’s dev Blog | National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

Corporate

National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

by Karl

2020-01-27

Read more
let’s dev Blog | UX Research Part 1 - Why User Research is so important

Technical

UX Research Part 1 - Why User Research is so important

by Elena

2020-01-23

Read more
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Read more
let’s dev Blog | We wish you a Merry Christmas - And a Happy New Year!

Corporate

We wish you a Merry Christmas - And a Happy New Year!

by Julian

2019-12-20

Read more
let’s dev Blog | Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

Corporate

Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

by Karl

2019-12-17

Read more
let’s dev Blog | DaSoMan at the Internet+ Expo in Foshan (China)

Corporate

DaSoMan at the Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Read more
let’s dev Blog | Google Play Console: Pre-Launch Reports

Technical

Google Play Console: Pre-Launch Reports

by Fabian

2019-12-11

Read more
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Read more
let’s dev Blog | Vernissage digital art in the media theater of the Humboldt University Berlin

Corporate

Vernissage digital art in the media theater of the Humboldt University Berlin

by Karl

2019-11-21

Read more
let’s dev Blog | World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

Corporate

World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

by Aileen

2019-11-11

Read more
let’s dev Blog | Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

Corporate

Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Read more
let’s dev Blog | Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

Corporate

Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

by Elena

2019-09-17

Read more
let’s dev Blog | Business and Enterprise App Distribution on iOS

Technical

Business and Enterprise App Distribution on iOS

by Aileen

2019-08-05

Read more
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Read more
let’s dev Blog | let's dev supports runners at the 7th KIT Championship

Corporate

let's dev supports runners at the 7th KIT Championship

by Karl

2019-07-05

Read more
let’s dev Blog | Automated testing of C++ code with Google Test and Google Mock - Part 2

Technical

Automated testing of C++ code with Google Test and Google Mock - Part 2

by Arne

2019-06-13

Read more
let’s dev Blog | Apple WWDC 2019: These are the highlights of the keynote

Technical

Apple WWDC 2019: These are the highlights of the keynote

by Nicolas

2019-06-05

Read more
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Read more
let’s dev Blog | Official opening of the Consolidation and Expansion Center (FUX)

Corporate

Official opening of the Consolidation and Expansion Center (FUX)

by Helena

2019-04-15

Read more
let’s dev Blog | Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

Corporate

Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

by Helena

2019-04-14

Read more
let’s dev Blog | The time has come: We are moving!

Corporate

The time has come: We are moving!

by Helena

2019-03-26

Read more
let’s dev Blog | Automated testing of C++ code with frameworks - part 1

Technical

Automated testing of C++ code with frameworks - part 1

by Arne

2019-02-20

Read more
let’s dev Blog | The app in the Google Play Store

Technical

The app in the Google Play Store

by Elisa

2019-01-24

Read more
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Read more
let’s dev Blog | let's dev supports SG Siemens volleyball players from Karlsruhe

Corporate

let's dev supports SG Siemens volleyball players from Karlsruhe

by Helena

2018-12-04

Read more
let’s dev Blog | SMEs shape digitalization - SME Conference 2018

Corporate

SMEs shape digitalization - SME Conference 2018

by Helena

2018-11-12

Read more
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Read more
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Read more
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Read more
let’s dev Blog | let's dev is an authorized consulting company in the „go-digital“ funding program

Corporate

let's dev is an authorized consulting company in the „go-digital“ funding program

by Helena

2018-09-01

Read more
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Read more
let’s dev Blog | iOS 12: The top new features at a glance

Technical

iOS 12: The top new features at a glance

by Nicolas

2018-07-17

Read more
let’s dev Blog | let's dev at CEBIT

Corporate

let's dev at CEBIT

by Karl

2018-06-11

Read more
let’s dev Blog | Introduction to User Interface (UI) Testing with Espresso

Technical

Introduction to User Interface (UI) Testing with Espresso

by Raphael

2018-06-07

Read more
let’s dev Blog | The app in the Apple App Store: what information is needed?

Technical

The app in the Apple App Store: what information is needed?

by Aileen

2018-04-27

Read more
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Read more
let’s dev Blog | User interface design for iPhone X: all innovations at a glance

Technical

User interface design for iPhone X: all innovations at a glance

by Helena

2018-02-07

Read more
let’s dev Blog | Deutsche Bahn Open Data Hackathon

Corporate

Deutsche Bahn Open Data Hackathon

by Karl

2015-03-31

Read more
let’s dev Blog | Blur effects under iOS 7

Technical

Blur effects under iOS 7

by Katja

2014-04-24

Read more
let’s dev Blog | Beyond App Store - iOS application distribution

Technical

Beyond App Store - iOS application distribution

by Karl

2012-08-27

Read more
let’s dev Blog | Front-end architecture - Model View Presenter and Message Bus

Technical

Front-end architecture - Model View Presenter and Message Bus

by Karl

2011-03-08

Read more