Virtual Reality

Virtual Reality Environments

With society becoming increasingly more dependent, expectant and attached to digital technology, the online world has the ability to lead a process of change but also spark negativity. 

During my lifetime there have been huge developments in the way information is communicated. I believe the two-dimensional digital world we know has the potential to take on new forms that will communicate content better.

 

https://virtual-world-landing-page.herokuapp.com/

ROLE :

TIMELINE:

SKILLS NEEDED/USED:

IN COLLABORATION WITH:

Coding Developer and Designer of Virtual Environments

 

Dec 2020 – April 2021

HTML

Javascript Libraires

Node.js 

Sound Layering

Solo Project

Project Overview

The project using Virtual Reality aimed to be the first step in exploring how 3-dimensional environments can hold information, imagery and content by using technology in new ways.

 

The end goal was to have a series of outcomes (made through code) that interact with the viewer in new ways and to communicate through our largest visual communicator, the internet.

Screenshot 2021-04-23 at 12.26.00.png

Three-dimensional Landing Page Showcasing the Final Series

Background Research

The developing concept of making the settings three-dimensional lead me to research and explore the different methods/mediums surrounding virtual reality.

 

I took inspiration from Olafur Elission Your Uncertain Archive, the environments made by developers on the platform Three.js and lessons gained from relatives who work in code.

Screenshot 2021-04-29 at 15.01.37.png

Olafur Eliasson - Your Uncertain Archive

Screenshot 2021-04-29 at 15.00.09.png

Three.js (VR coding platform)

Material Enquiry

In the contemporary era of digital technology, the ways in which we create have shifted into new mediums. This can be used as a new language of creativity that opens up new ways of working/making.

 

To create a virtual environment this project made use of JavaScript libraries (such as three.js and node.js), HTML, Sound Layering, Animation and image rendering platforms like Blender. The process of creating in alternative mediums opens up many new creative possibilities in this style of visual communication.

Screenshot 2021-05-03 at 13.48.35.png

Foundational Code Still

Screenshot 2021-04-30 at 15.57.46.png

First Layered Sound File (Stepping Squares)

Defining the Problems

The developing concept around making settings three-dimensional lead me to create six different setting overall (three of which contributed to final pieces).

 

The first three where more underdeveloped and less resolved, as I slowly understood how to create works though code. During this stage I was learning how to add multiple objects to setting, how to create movement and how to add HTML elements (e.g. buttons).

Screenshot 2021-05-15 at 17.02.02.png

1

2

3

4

Virtual Immersive Environment  2 / 3

After gathering enough research data from users I began to see common themes, frustrations and areas of opportunity to develop the 

environments design.

1).  HTML button and Link through to external URL not coherent with environments design. 

2). Internal editing tools feel 'jarring' to overall setting.

3). Moving Blender files sound not obvious enough to user.

4). 'Overcrowding' of internal setting.

Designing Solutions

Below shows the finished design style shown in each environment and highlights the key HTML elements that brought the layout together. 

1).  HTML 'Expand' button that makes screen enlarge to full screen size, creating a more immersive environment for the user to experience (inspired from user feedback). 

2). HTML 'Sound' button, linking to layered sound file that depicts a variety of different individuals depicting what they are seeing on screen.

3). Overall environments now showcase a game-like setting where the viewer is immersed into. Aiming to ask questions around expectations of virtual settings and their potential. 

Screenshot 2021-05-02 at 15.13.55.png

1

3

2

Environment Still from 'Blue Towers'

Final UI

The final outcomes of the project consisted of three coded virtual environments. Each acts as a doorway into a virtual experience, aiming to start a conversation with the viewer around imagined, immersive and unordinary virtual experiences.

Screenshot 2021-05-02 at 15.41.26.png

‘Virtually Immersed’ , Virtual Environment Still

Screenshot 2021-04-07 at 15.53.03.png

‘Stepping Squares’ , Virtual Environment Still 

Screenshot 2021-05-02 at 15.13.55.png

‘Blue Towers’ , Virtual Environment Still 

Screenshot 2021-04-23 at 12.26.00.png

Three-dimensional Landing Page Showcasing the Final Series