Building an Art Gallery

In the last chapter, we focused on a lot of passive interactions where you walk into different spaces, and you were able to have different experiences based on the locations you visited. You didn’t have to input anything, but you were able to alter the experience and have a varied experience based on code and indirect interactions.

In this chapter, we’ll revisit direct interactions by creating something that is interactive at its core – drawing. You don’t need to be a true artist to draw in VR, but there are certain core elements that make for very interesting experiences. One of those is being able to interact with GOs and actually have alterations exist after those interactions. Something as simple as drawing on a wall can be very fun because you can explore all the variations of creativity within the virtual world and build the framework for it to be expanded across a whole environment. By the end of this chapter, you will understand...

Technical requirements

The complete source code for this chapter can be found at https://github.com/PacktPublishing/Enhancing-Virtual-Reality-Experiences-with-Unity-2022/tree/main/EnhancingVRExperiencesFullProject/Assets/_VRProjectAssets/Scenes/Chapter_12.

Creating a gallery mesh

This section should feel pretty familiar at this point because we’ve taken these steps many times before. We’re going to revisit the idea of using a 2D image as a floor plan and then use ProBuilder to convert that floor plan into a 3D model. After doing that, we will utilize the available materials and assign the materials to our 3D model, and then we can add our lighting system. This is a straightforward implementation, and the approach is easy to follow. Once we have our art gallery 3D model, that’s when the fun begins because we can start creating a system where we can draw in every nook and cranny of it.

To convert our gallery floor plan (Figure 12.1) into a 3D mesh (Figure 12.2) with ProBuilder, follow these steps:

1. Create a new, empty scene and name it ArtGallery.
2. In Hierarchy, create an empty GO and name it ArtGallery.
3. Set the XYZ position to 0,0,0 and the rotation to 0,0,0.
4. Drag our Art Gallery Map floor plan...

Adding indoor lights

As I mentioned in the lighting chapter (Chapter 6), setting up our lights is crucial to increase visibility; but more importantly, if you don’t set up your lights correctly, you will run into performance issues. We will cover more on how to improve performance by baking our lights in Chapter 18, which covers optimizations. But for now, our focus is on setting up our lights in a way that makes sense for the art gallery and creating a system to control the lights based on proximity.

Note

Overuse of dynamic lights can hinder performance, particularly in VR. Implementing baked lighting for static items is advisable to enhance performance.

To set up indoor lighting with spotlight prefabs (Figure 12.3), follow these steps:

1. Create a new, empty GO as a child of ArtGallery.
2. Name it CeilingLights.
3. From our prefabs folder, add a CeilingLight prefab as a child of the CeilingLights GO.
4. Set the X position to 0.09.
5. Set the Y position to...

Adding light switches

We can provide a workaround to have high-quality lights and great performance while also limiting the number of lights that are turned on within a certain proximity. We can do that by creating a system where we press a light switch, and in doing so, turn off the lights that are within a specified distance of that light switch. Therefore, we’re able to simulate a somewhat realistic experience of only having lights on that are turned on by us and turning off the lights that are not.

To create a light switch to place on the walls, go through the following steps:

1. Create an empty GO as a child of ArtGallery.
2. Name it LightSwitches.
3. Create another empty GO in LightSwitches.
4. Name it LightSwitch.
5. Create a cube as a child of the LightSwitch GO.
6. Name it SwitchBody.
7. Set the Y position to .05. Set the X scale to .5. Set the Y scale to .1. Set the Z scale to .5.
8. Give the cube a DarkGray_Standard material.
9. Create a cylinder and...

Creating a drawing system

In this section, we’ll be focusing on creating a drawing system that incorporates two core components: a canvas that can be drawn on and a marker that can be used for drawing. These two objects work together to create the drawing experience. Individually, they are just objects that you can interact with. You can expand on this system by modifying the canvas to cover a larger area, allowing you to draw on a larger surface instead of the predefined size we initially create.

To create a drawing canvas (Figure 12.7), go through the following steps:

1. Create a new plane.
2. Name it Whiteboard.
3. Set the X position to 3.6, the Y position to 2.4, and the Z position to -0.4.
4. Set the X rotation to 90, the Y rotation to 90, and the Z rotation to 90.
5. Set the X scale to 0.3, leave the Y scale at 1, and set the Z scale to 0.3.
6. Create a new C# script, name it WhiteboardController, and add it to the Whiteboard GO.
7. Add the following namespace...

Hanging a picture frame

When you think about art galleries in general, you might wonder whether there’s any point in having one if you can’t hang things on the walls. Say you spent all this time working on a piece of art and you don’t know what to do with it. You could take your art to the hypothetical art gallery and hang it on the art gallery wall so that people who visit the virtual gallery can see it. In many ways, you can have a virtual space that you have full control over to display your art. Even if you haven’t set up the locations on the wall where you are going to place the art, you can set up sockets and places for you to place your art.

In this section, we’ll proceed to make a picture frame that can hold art in it. We will be able to place it on our wall so that we can display the art in the frame. To do this, we will be utilizing sockets, which you should be familiar with from the introduction to all of the XR interactable components...

Summary

In this chapter, we had a good mix of applying creativity and technical skills. Our goal, as outlined in Chapter 10, in Phase 6 of our roadmap, was to create an art gallery experience. We began by designing a floor map and then creating a 3D model of it. We added lights and created a system to control them procedurally and automatically. After that, we built a drawing system that included a canvas and markers with customizable settings. Finally, we created a hanging system that allowed us to place picture frames on walls with socket indicators. These implementations utilized familiar concepts and were intuitive, allowing us to create various types of experiences.

In a later chapter, we will explore how to create a theater experience where users can watch a movie on the big screen. By tapping into familiar concepts, we can create memorable experiences that are novel in their presentation. The key is to add our own twist and set ourselves apart by applying these concepts in...