Prototyping an Immersive Experience – Amber Rose Dalton

Introduction

This blog post aims to explore immersive prototyping and experiences through a range of development tasks exploring different software. Each exercise will make use of immersive design principles, including User Experience (UX). A discussion of design considerations regarding the use of a 360-degree canvas will enrich my knowledge of immersive design.

Examples of 360 Immersive Design – Initial Research

The research below provided me with inspiration and prior knowledge of immersive user experience (UX) principles to consider when designing my own experiences. The use of narratives, sound and lighting effects enhance each of the 360VR experiences, therefore depicting a more realistic experience when wearing a VR headset.

Figure 1 – Initial research surrounding 360 immersive design, shark VR experience. (3D VR 360 Videos, 2021).

Figure 2 – Initial research surrounding 360 immersive design, space VR experience, (Vicinity360, 2020).

The use of 360 immersive videos can also be used to experience real life situations as observed in the 360 images below of Hull and surrounding areas. This type of 360VR experience could be useful for people who are unable to physically visit places.

Figure 3 – Screenshot – Initial research surrounding 360 immersive videos in real-life situations. Queen Victoria Square, Hull, (Showler , 2011).

Figure 4 – Screenshot – Initial research surrounding 360 immersive videos in real-life situations. Humber Bridge and Foreshore, Hessle, (Anderson , 2010).

Link to 360 immersive video/image – http://www.360cities.net/image/queen-victoria-square-hull-1#335.49,16.32,70.0

Link to 360 immersive video/image – http://www.360cities.net/image/humber-bridge-at-sunrise#329.98,7.58,83.9

Week 1 – Exploring the 360 3D VR Camera in Maya

Setting up the 3D workspace settings and VR Camera in Maya

The below screenshots show the process of setting up the VR camera settings in Autodesk Maya. Ensuring the camera setting are altered before designing an experience guarantees that the correct versions of renders are exported at the end.

Figure 5 – Setting up the VR camera in Maya.

Figure 7 – Ensuring the camera output is set to VR.

Figure 8 – Setting up the render device.

Figure 9 – Creating a local file destination for render outputs.

Figure 11 – Testing the render sequencing settings.

Figure 12 – Ensuing VR camera is set as the render output.

Maya 360 Cinema Experience – Design Development

The below screenshots explore the design development process behind the final 360VR cinema experience in Autodesk Maya and Premier Pro.

Figure 13 – Beginning to build the exterior of the cinema experience room. Using a flat plane and extruding the sides to create a box structure.

Figure 14 – Building the inside of the cinema using a variety of square shapes. Altering the sizes to form a cinema screen.

Figure 15 – Creating a partition wall to separate the cinema from the walkway.

Figure 16 – Creating seating levels with planes and squares.

Figure 17 – Editing the height of each level and adding in the film camera at the back.

Figure 18 – Adding new material attributes to each section and changing the colours to suit the cinema experience.

Figure 19 – Adding stairs up to the seating area.

Figure 21 – Duplicating the chair to create rows of cinema seating.

Figure 23 – Changing the screen material attributes to give it the reflective sheen seen on all screens.

Figure 24 – Exporting and inputting the renders into Premier Pro as an image sequence and adding sounds to enhance the 360 cinema experience, (Pixabay).

Narrative for Immersive Design

The below storyboard, effectively communicates the goals of the final 360VR story sphere/video.

Figure 25 – 360VR storyboard communicating the goals of the final video.

What makes an effective VR story?

An effective VR story/experience embraces reality as we know it. The artificial experience heightens the feeling of presence and the user feels as though they are really there, exploring a spatial environment that otherwise wouldn’t be an attainable real-life experience. There are multiple user experience factors to be considered when designing an effective and immersive VR experience, a few of these include, human centered design approach, perspective, and plot.

The human centered design approach

The human centered (HCD) design approach considers three aspects including desirability, viability, and feasibility.

Desirability – Refers to the user experience and the three levels of emotional design, visceral, behavioural, and reflective design. Andreas Komninos articulates Don Normans three levels of emotional design in an article that refers to visceral design as animalistic influences of the human mind. These influences are almost uncontrollable emotions or actions. Behavioural design refers to the controlled aspects of human action. Conscious decision-making investigates suitable outcomes, most likely to prove effective overtime, with little to no effort. Reflective design refers to human reflection of conscious thoughts. Learning new concepts, systems and generalisations about the world, (Komninos, 2023). User experience can also be described as pragmatic and hedonic which refer to the utility and usability of a product or service and the pleasures of use, (Tong et al., 2022).

Viability – refers to the aspect of designing a product or service that is not only desirable but also realistically obtainable practically and financially. Viability is also closely related to filling in gaps in the market. It is extremely important to evaluate whether there is a genuine need or demand for the product or service. It is vital to understand the market, target audience and competition.

Feasibility – refers to the practicality of design. It involves assessing and concluding weather the product or service can be realistically developed, produced and maintained with consideration to technical limitations such as hardware and technology.

POV perspectives & 360 plots

Point of view and perspective is crucial in virtual storytelling as it directly affects the user and their experience. In 360 storytelling it is important to allow the viewer to look in all directions, this aids in depicting dynamic scenes/narratives.

Link to final 360 VR Immersive Cinema Experience – https://www.youtube.com/shorts/RZ7uf8FEiHg

Figure 25 – The final 360 immersive VR cinema experience, developed using Autodesk Maya and Premier Pro, (Pixabay).

360 Immersive Cinema Experience – VR Video

Taking into consideration the elements discussed above I have developed a 360VR cinema experience using Autodesk Maya and Premier Pro. Throughout the video the viewer experiences sounds related to a cinema experience, including laughter, whispering, popcorn and drinks cans. These audio considerations aid in creating a dynamic scene. The cinema design uses dome lighting systems that have been altered, intensity and colour wise, to create a darker and more cinematic experience. This concept could be used in real life to give users a chance to experience the cinema that otherwise couldn’t due to health or social restrictions.

360VR Cinema Experience – Scope Limitations

Limitations encountered when developing the 360VR video include my limiting Maya knowledge. I would have liked to add figures and a film into the scene to aid in creating a more realistic experience although I couldn’t figure out how to do this. If in the future I have more time to spend on this task I will learn how to implement these limitations.

Exploring Maya MASH Networks

Following Introduction to Mash Canvas Tutorial

The below screenshots show the process of developing the MASH animation in Autodesk Maya and Premier Pro from the Canvas tutorial.

Figure 26 – Developing the Mash animation using the tutorial provided on Canvas. Altering shape distribution.

Figure 27 – Further altering the distribution attributes.

Figure 28 – Developing a cube distribution in attributes, ready for animation.

Figure 29 – Altering the spacing and position of the cubes to create a moving animation.

Figure 30 – Assigning a new material to the MASH object.

Figure 31 – Adding a pink colour to the MASH object.

Figure 32 – Altering the hues of colour to create a more interesting final Mash animation.

Figure 33 – The MASH animation in action.

Figure 34 – Adding a fall off object to the MASH object, creating a slightly different effect of crashing elements.

Figure 35 – The fall off object in action.

Basic Mash Animation

The below animation of crystals exploding towards to camera could be used throughout VR experience to communicate explosions in many different scenarios. MASH allows you to create quick animations that use instanced networks. These animations can be easily edited and manipulated using the different nodes available in Autodesk Maya.

Figure 36 – Creating my own crystal MASH animation using Autodesk Maya.

Figure 37 – Final Mash animation of exploding crystals.

Abstract Tunnel Effect

The below screenshots show the process of developing an abstract tunnel effect using MASH networks in Autodesk Maya. This effect could be useful when designing surreal virtual reality (VR) experiences. This effect could be used to communicate going ‘down the rabbit hole’ in an Alice and Wonderland VR experience.

Figure 38 – Following the abstract tunnel animation provided on Canvas.

Figure 39 – Changing the shape of the pipe into a cube.

Figure 40 – Altering the shape and position of the pipe.

Figure 41 – Changing the material attributes and colour of the pipe.

Figure 42 – Altering the distribution options in MASH options.

Figure 43 – Altering the distribution settings to form a tube structure.

Figure 44 – Drawing a curve for the animation to follow.

Figure 45 – Attaching the pipe structure to the curve.

Figure 46 – Altering the distribution to create a more surreal pipe structure ready for animation.

Figure 47 – Setting up the camera settings.

Figure 48 – Altering the distribution and camera angles to create the best animation perspective.

Figure 49 – Adding a background plane and altering the render output settings.

Figure 50 – Rendering the abstract tunnel.

Figure 51 – Using Premier Pro and image sequence settings to create the abstract tunnel effect.

Figure 52 – The final abstract tunnel effect.

Week 2 – Exploring WebVR

Spaces Initial Inspiration Pinterest Board – https://www.pinterest.co.uk/AriGraphicDesign/emerging-technology/spaces-inspiration-framevr/

Upon entering the FrameVR experience I was prompted to create an account and an avatar. Once I had completed the initial signup steps I was placed into a world of my choice. I began initially experimenting with the space, adding in images, text and objects to form a small gallery space. FrameVR has the potential to be used for fully immersive and interactive portfolio experiences. Comparing this to the 360VR video experiences previously discussed WebVR can be fully interactive. Providing interactive elements fully immerses the user in the VR experience, providing them with options and the ability to physically explore aspects of the design.

Figure 53 – Setting up and exploring aspects of FrameVR.

Figure 54 – Experimenting with adding images, test and furniture to the FrameVR space.

FrameVR Experience link – Hull Avenue Cafes – FRAMEVR

The below screenshots show the development of my own WebVR experience which explores a few cafes in the Hull, Avenues area.

Figure 55 – Adding in 3D objects, coffee cups to enhance the visual journey of the VR story, (Sketchfab).

Figure 56 – Adding in ambient cafe sounds to make the experience more dynamic, (Pixabay).

Figure 57 – Experimenting with different orbs and effects, (Sketchfab).

Figure 58 – Adding text to explain the VR scene, (Sketchfab).

Figure 59 – Viewing the VR scene from different angles, (Sketchfab)

Figure 60 – Viewing the VR scene from different angles, (Sketchfab).

Figure 61 – Viewing the VR scene from different angles, (Sketchfab).

Figure 62 – Changing the camera settings to view placement of avatar, (Sketchfab).

The café WebVR experience explores recommended cafes in the Hull, Avenues area. Adding in 3D assets to complement the café experience, enhances the VR experience and creates a gallery type of experience showcasing, coffee cups, coffee stands, menus, and more. These additions fill up the space and make it more three dimensional and dynamic. The addition of sound effects creates a sense of realism, immersing the user in the environment around them. Adding in interactivity would have made the WebVR experience fully immersive, considering aspects of interactive elements will enhance the experience further when designing future WebVR experiences.

Figure 63 – Final screen recorded FrameVR cafe experience exploration.

References

3D VR 360 Videos (2021) 360 video | Shark VR experience3D, YouTube. Available at: https://www.youtube.com/watch?v=kLVajtkrG_4&t=6s (Accessed: 27 October 2023).

Anderson , S. (2010) Humber Bridge at sunrise, hull, england 360 panorama, 360Cities. Available at: https://www.360cities.net/image/humber-bridge-at-sunrise (Accessed: 27 October 2023).

Bosch , V. (no date) 90,000+ free sound effects for download – pixabay – pixabay. Available at: https://pixabay.com/sound-effects/ (Accessed: 28 October 2023).

Campbell, J. (2023) I tried princes ave’s new venue and it’s perfect for the street, Hull Live. Available at: https://www.hulldailymail.co.uk/whats-on/food-drink/tried-princes-avenues-latest-venue-8152592 (Accessed: 06 November 2023).

Hall, D. (2022) Popular Hull Coffee Shop is up for sale, Hull Live. Available at: https://www.hulldailymail.co.uk/whats-on/food-drink/hulls-popular-planet-coffee-up-6621792 (Accessed: 06 November 2023).

Herlingshaw, B. (2020) Nick Cobley on dive hu5’s resurgence post-lockdown, Soundsphere magazine. Available at: https://www.soundspheremag.com/news/culture/venue-spotlight-dive-hu5/ (Accessed: 06 November 2023).

Komninos, A. (2023) Norman’s three levels of design, The Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/article/norman-s-three-levels-of-design#:~:text=Don%20Norman%20proposes%20the%20emotional,visceral%2C%20behavioral%2C%20and%20reflective. (Accessed: 03 November 2023).

Pixabay (no date) Free cafe sound effects download – pixabay. Available at: https://pixabay.com/sound-effects/search/cafe/ (Accessed: 06 November 2023).

Pixabay (no date) Free laughing sound effects download – pixabay. Available at: https://pixabay.com/sound-effects/search/laughing/ (Accessed: 28 October 2023).

Pixabay (no date) Free popcorn sound effects download – pixabay. Available at: https://pixabay.com/sound-effects/search/popcorn/ (Accessed: 28 October 2023).

Pixabay (no date) Free whisper sound effects download – pixabay. Available at: https://pixabay.com/sound-effects/search/whisper/ (Accessed: 28 October 2023).

Showler , L. (2011) Queen Victoria Square, Hull 360 Panorama, 360Cities. Available at: https://www.360cities.net/image/queen-victoria-square-hull-1 (Accessed: 27 October 2023).

Sketchfab Search (no date) Sketchfab. Available at: https://sketchfab.com/search?q=cafe&type=models (Accessed: 06 November 2023).

Tong, Y. et al. (2022) A data-driven approach for integrating hedonic quality and pragmatic quality in user experience modeling, ASME Digital Collection. Available at: https://asmedigitalcollection.asme.org/computingengineering/article-abstract/22/6/061002/1139685/A-Data-Driven-Approach-for-Integrating-Hedonic?redirectedFrom=fulltext (Accessed: 03 November 2023).

Vicinity360 (2020) 360° VR spacewalk experience | BBC Home, YouTube. Available at: https://www.youtube.com/watch?v=hEdzv7D4CbQ (Accessed: 27 October 2023).

Young, D. (2023) Rising bills claim another victim as ‘wonderful’ café to close, Hull Live. Available at: https://www.hulldailymail.co.uk/news/hull-east-yorkshire-news/rising-bills-claim-another-victim-8285903 (Accessed: 06 November 2023).

Related Posts