share

ENGINEERING

9min read

Have Fun with Nature—Polidea's VR Experience

We already had a chance to try some VR and AR technologies in a form of Polidea Labs projects—check Augmenting Reality on the web and Augmenting reality with an iPhone. The aim was to check the level of advancement of available tools and do some basic research. It was a great introduction to preparing a better demo. With the gathered knowledge we were able to create an interactive web VR experience in which we combined a beautiful design with a thoroughly-planned development.

About the project

It took us some time to finalize the concept of this app. We did a couple of prototypes on the way, since imagining how something should work in VR and actually making it happen are two different things. As WebVR is not suitable for high-quality rendering we decided to create a low-poly world, but improve the experience with a colorful landscape. By placing rocks from the menu on correct shapes on the stone in the middle, a user is able to change the scenery around them. You can try and play around with it yourself here. It works both in a desktop browser as a 360-degree mode and on mobile as a VR mode. You should definitely try it out on your VR headset.

image.png

Development and technology stack

You can check full source code on our github.

Even though VR and AR are still developing, there are a lot of various tools to choose from. Creating an app which will be available on as many platforms as possible was a fundamental argument in favor of choosing WebVR. On top of that, we decided to also use the A-Frame framework, which is very well documented. It easily integrates with a regular HTML, but you have to use dedicated markup tags. You might also use built-in JS functions to build more complex logic around simple HTML parameters.

For instance, we used registerComponent to create an item parameter which will invoke specific behavior when it’s hovered in 3D. It has to define a schema aka a list of properties which will be interpreted by A-frame in the markup. Here’s the source code:

import * as AFRAME from "aframe";
AFRAME.registerComponent('hovered_menu_item', {
schema: {
position_down: {default: {x: 0, y: 0, z: 0}},
position_up: {default: {x: 0, y: 0, z: 0.1}},
color_down: {default: "#b4d1ff"},
color_up: {default: "#FFFFFF"},
},
init: function () {
let el = this.el;
this.el.addEventListener('raycaster-intersected', function () {
el.emit("run_down");
});
this.el.addEventListener('raycaster-intersected-cleared', function () {
el.emit("run_up");
});
el.setAttribute("animation__position_down", {
property: "position",
dur: 400,
easing: "easeInSine",
to: this.data.position_down,
startEvents: "run_down",
restartEvents: "run_down",
pauseEvents: "run_up"
});
el.setAttribute("animation__position_up", {
property: "position",
dur: 400,
easing: "easeInSine",
to: this.data.position_up,
startEvents: "run_up",
restartEvents: "run_up",
pauseEvents: "run_down"
});
},
play: function () {
let el = this.el;
el.setAttribute("animation__color_down", {
property: "material.color",
dur: 400,
easing: "easeInSine",
from: this.data.color_up,
to: this.data.color_down,
startEvents: "run_down",
restartEvents: "run_down"
});
el.setAttribute("animation__color_up", {
property: "material.color",
dur: 400,
easing: "easeInSine",
from: this.data.color_down,
to: this.data.color_up,
startEvents: "run_up",
restartEvents: "run_up"
});
}
})
view raw hovered_menu_item.js hosted with ❤ by GitHub
class MenuItem extends React.Component {
render() {
return (
<Entity
className="item intersectable"
controller-clickable
hovered_menu_item={{
position_down: this.state.field.position_down,
position_up: this.state.field.position_up
}}
geometry={{primitive: 'plane', width: 1.0, height: 1.0}}
material={{shader: "flat", color: 'white', opacity: 1.0}}
rotation={{x: 0, y: 0, z: 0}}
position={this.state.field.position_up}
shadow="cast: false; receive: false"
events={{
click: (evt) => {
let el = evt.target;
this.onMenuItemClicked(el, this.state.field.texture)
}
}}>
<a-image
position="0.0 -0.05 0.005"
scale="0.8 0.8 0.8"
src={this.state.field.textureId}/>
</Entity>
);
}
}
view raw menu_disks.js hosted with ❤ by GitHub

As you might have noticed, we are really fond of React in Polidea. Since the app was supposed to smoothly transition from 2D Landing Page to VR and also dynamically adapt to the gameplay state we’ve decided to use aframe-react library and keep most of the code as React Components. It made a project more readable and well-organized. It’s wasn’t all roses, React DOM substitution mechanism doesn’t always play well along A-frame animations. We made it work, but we had to compromise between React and A-frame syntaxes.

One of the helpful tools we used during development was ngrok. It gives remote access to the app when you are developing it locally on your machine. We were able to instantly share and test each other’s versions of the code and check them on various devices. It proved to be very useful as it turned out we had to debug code on Daydream and Gear VR devices. Unfortunately, the free version of ngrok is quite limited, but once you go premium it might boost your web development process significantly.

Challenges and tips

First of all, WebVR ecosystem still hasn’t matured enough. At the early stage of the project we used an A-frame redux library, which one week later was removed from NPM to make space for its successor. Fortunately, the newer version of the library turned out to be more intuitive and easy-to-use.

Still…be careful. If you are tempted to use experimental libraries—which utilize a well-known web development pattern—think it through; evaluate if you know it well enough to transition to a newer version or if you’re capable of fixing it yourself, when necessary.

There’s no good advice for a situation like this, but at this point it’s better to use the most stable A-frame libraries, even though they require you to write additional code. Remember to use a specific version in package.json or yarn file, because even a small patch can break your project.

image.png

Commercial VR development practices are still developing and so is the VR design process. It was a challenge to build a process, where both designers and developers could work hand-in-hand, including rapid prototyping and 3D modeling. VR/AR designers needed to check if their vision “feels” good in VR. Developers also didn’t know if it’s possible to easily transform their concepts into a working application.

However, we transformed this ‘don’t know’ circle into a successful close agile collaboration. Instead of receiving all designs and UI project at the beginning, we were incrementally adding small components and testing. Some visual attributes were changed in the code, some required only 3D models improvements. At some point, it became as pleasant as assembling a Lego set. So don’t feel discouraged by frequent code changes, when developing a VR—try to use the most out of React and A-frame by smartly dividing your code into smaller components.

image.png

It was a challenge to make Daydream and GearVR controllers work properly, mostly due to a testing inconvenience. We were still developing and testing it mostly in a desktop browser, but as often as possible we were running it using NGROK on both Daydream and Samsung Gear VR devices.

Summary

Web VR and AR is still growing and is bound to rapidly evolve in the near future. Obviously, hardware ecosystem grows the fastest, so it will take some time for development technologies to catch up until they are reliable enough and easy to use in various situations. A-frame is definitely a framework you should choose if you are into web development and try to acquire new skills in VR and AR areas. There’s still a lot of room for discovering best design patterns, creating good development practices and building interesting VR or AR applications. In Polidea, we are not slowing down as we’re constantly improving the process of creating VR & AR applications.

share


KatarzynaSoftware Engineer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: 0048 795 536 436, email: hello@polidea.com (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.