Terug naar site

The Sustainability Game

Immersive presentation, on WebXR

Right before the start of the corona crisis, we kicked off our collaboration with PVH Europe (known from brands such as Calvin Klein). We found each other over our shared enthusiasm about the possibilities of VR, and its potential for working remotely, not knowing that this question would become very relevant in a few weeks time.

We decided to continue our earlier research, ‘immersive presenting’, with PVH Europe and to explore the potential of WebVR. Leads in this project were senior Berend Weij, senior Alex Kentie, intern Femke Roozendaal and intern Erik Kooijman.

In collaboration with PVH Europe’s Architecture & Visuals Team we decided on what the heart of our project was going to be. This team is responsible for outlining and raising the standards and brand experience of all Calvin Klein retail stores in Europe. Every year they organize two big events to keep teams all around Europe up to date about the new season, and to involve everyone into the decision making process. The possibility to use VR, AR or other immersive media to make these events even more inspiring and engaging especially, enticed the PVH Europe team. It could offer an alternative by having these events online in the future, instead of having to gather physically every half year.

The focus was centered on two questions:

  • How can WebVR be used to connect employees from all over Europe with each other?
  • How can we build an open source presentation tool, in which you can create a 360 degree presentation?

The goal would be to create an informal intermezzo during this informative day. The theme would be ‘Sustainability’, a central theme within PVH Europe.

Challenges

broken image

Finishing the project within a short timespan

One of the biggest challenges of this project was the deadline. We had eight days in total to build and design the product with a team only consisting of two senior developers and two college interns. Therefore we had to determine and monitor our MVP (Minimum Viable Product) as specifically as possible.

When creating an interactive product, there is always the danger of adding too many new features. What really helped us, is that we paid a lot of attention to defining our core gameplay and keeping it as small as possible. New ideas were noted, but the core had to be finished first. When the core gameplay is testable within a prototype, you have time to tweak and polish. No matter how good your ideas are, you always have to test, feel and adjust. To let a project transform into a product that satisfies the target audience, your core gameplay should be spot on. If the core doesn't feel right, you will never be able to deliver a product that makes users happy. As a developer, this should always be your focus. But with a deadline of eight working days, this was even more important. Deliver something small which is playable.

Together with the PVH Europe team, we scheduled a lot of brainstorm sessions to distillate this MVP out of all the ideas. The challenge for us was to communicate the possibilities, without knowing for certain how much time it would take. After all, we were trying out new technologies.

WebVR to WebXR

Within our projects, we like to try out new technologies. But since we only had eight days of production time, we thought it would be wise to choose something we were familiar with. Therefore we choose WebVR. We thought this would give us an advantage, because we had our own WebVR framework from an earlier project that we could rely on. But we could not have been more wrong. After starting to work on the first prototype, we found out nothing worked on the Oculus Quest browser. This browser is built upon Chromium, the open source project that is used for the popular Chrome browser. Chromium is one of the first browsers that supports WebXR, the successor of WebVR. But along with implementing this new WebXR API, it also dropped the support for WebVR. This means that everything that you have coded for WebVR, needs to be rewritten to WebXR. This challenge was too big for our production time. This challenged us with the question: what to do now?

After doing research about WebXR and making some early prototypes with the new API, we made the decision that building a WebXR project from scratch would also be too time consuming. We had to come up with a different solution. Fortunately, we knew about A-Frame.io, a well known WebVR / AR / WebXR framework. This framework is built upon Three.js and has support for a lot of media. It enabled us to prototype our idea within 4 hours. This made us confident enough to make a leap of faith to build the complete project with a framework that we never used before. Looking back, we only had some minor hiccups with A-Frame. Challenge solved and project delivered :)

Prototype

broken image

The final prototype resulted in a WebXR game, in which the player is tasked - in VR - to collect data points in a virtual environment. These can be found by teleporting around the level. After the general explanation, through a 360 video, the player is teleported to a small Calvin Klein store. At discovering a datapoint, the player is presented with a piece of information about the following subthemes: Fixture, Waste, Packaging and Miscellaneous. At the end of the experience the player is shown a concluding 360 video and a quiz in which the players newly-gained knowledge is put to the test. The aim of the game is to get people interested in topics they otherwise wouldn’t be interested in pursuing.

PVH Europe used the game with an Oculus Quest device, but by the nature of WebXR it’s also possible to use this product on other platforms, like mobile phones and other VR-devices.

Continuation

MediaCollege Amsterdam

One of the goals of XR lab is to inject new knowledge and skills in the mainstream curriculum of MediaCollege Amsterdam, and prepare a new generation of students for the ever changing labor market.

As it looks now, our PVH Europe project is already influencing MediaCollege Amsterdam’s Software development courses. The senior developer on this project - Berend Wei- incorporated his findings in his course. Freshmen students will start working with WebXR during the second period in the context of a professional assignment commissioned by a museum.

PVH Europe

We started this collaboration with the prospect to develop the tool further to a future event in January 2021. At this stage we are in the middle of this development.

To be continued....!

broken image