Virtual Reality platform
A new internet build in a virtual reality metaverse
"Cosmos cyber reality will become a virtual reality platform that utilizes the web-browser. By entering the virtual metaverse you can access 3D applications built by other people or create your own models. You can use, play or create virtually anything you can think of.
Using block-chain technology assets in the virtual metaverse can be owned and traded. With CYBR as digital currency you can trade your goods or pay for experiences anywhere on the platform."
Using block-chain technology assets in the virtual metaverse can be owned and traded. With CYBR as digital currency you can trade your goods or pay for experiences anywhere on the platform."
Client: CosmosCR / Hodl
==
The question was to help CosmosCR communicate their concept on the website with a piece of animated media. We talked about using the 'traditional' approach, animate in 3D, render to frames and postprocessing those, but decided it would be a good fit to start of with a piece of actual realtime 3D.
One reason is that the concept is all about a realtime 3D metaverse. Another is that the same content can be 'consumed' as an animated movie, an interactive window in 3D space or even as a immersive VR experience.
There is a story to be told so we wanted to guide the user a certain way without breaking down the experience so we decided on a steady camera move that works in animations as well as VR experiences in the past. The first scene is about the link to the block-chain technology on which the whole CosmosCR is build upon. The uplifting music takes you to revealing moment when the ports open and present a possible look off the CosmosCR island, floating in 3D space.
The project is view-able on the website with mouse and keyboard on every webGL enabled browser. On webVR enabled browsers you can jump directly into VR by clicking the VR button.
The user is able to look around at all times.
When the camera movement stops, the user is able to freely move around in 3D space (WASD).
Tags: WebGL, WebVR, Aframe, VR, XR, Metaverse
WebVR Demo:
Development
Coming from the Unity development side, I first did some research about the proper workflow for these kind of projects. Using Unity was not really an option due to high compiling times to WebVR. Three.js was able to do everything I wanted, and way more, but did go really in-depth immediately to set up a relative simple scene.
I ended up using aframe as high-level tool with some JavaScript additions where default component were not enough. It is however, heavy in development and has therefor, a lot of dead ends and lack of documentation. Not doing web development for quite some time, it was a bit of a puzzle to comprehend the structure of things. But all good, keep on learning! And it has potential to fill the gap for webbased VR,AR,XR development.
Tools used:
Visual studio Code + live server extension > Almost live view when saving.
Firefox > WebVR enabled
Cinema4D for modelling, Blender for materials and gltf exporter.
