VR Prototyping #3 | Illustration Interaction Experiment
Intro
The last several VR prototypes I put together were largely utility focused. For this next prototype I wanted to go a little bit more artistic and playful. This gave me a chance to practice my modeling and texture skills a bit more.
Check out the past prototype’s I’ve put together here:
VR Prototyping #2 | Number Input
VR Prototyping #1 | Meta Horizon World Selection
⏩ Here’s a quick fast-forward to the final prototype
Modeling
The first step I took to create this prototype was to choose a 2D illustration by another artist which I would then recreate in 3D and add interactions. I wanted to use an illustration by another artist so that I would be forced to find ways to model and texture to their style rather than come up with something on my own that would be subconsciously based on my skill level.
I’ve always been impressed with the illustrations featured in the Robinhood app. I chose this computer globe illustration by Julian Burford. Check out more of Julian’s work here: julianburford.com
There were a couple of reasons I chose this illustration as compared to others:
- The black outlines would pose a challenge for texturing
- The buttons and controls featured in the illustration would allow for obvious interactions.
- The controls reminded me of Star Wars; I am big fan.
Overall, I am happy with how the modeling and texturing turned out. Here’s the live completed model on Sketchfab:
Here’s the process I followed to create the model:
- I blocked out the geometry in Blender primarily using 2 cubes (controls and glass box), a plane to emulate the dark shadow, and a cylinder for the part under the globe that I called the “globe projector”.
- I used Blender’s Smart UV Map feature to create and export UV maps of each separate piece of geometry (except the shadow plane).
- I placed the UV Map layouts from blender into Figma*. I used Figma to then recreate each of the faces textures based on the illustration. *Worth noting that Figma is totally not made for this type of work. However, I use Figma extensively so it’s a tool I am very comfortable in.
- Lastly, I created the styled black outlines in a couple different ways. Most of the black outlines are just part of the textures. However, for round objects like the globe I had to take a different approach. For these cases I used a classic method often called backface or inverted culling. This youtube video covers exactly what I did: https://youtu.be/913lbud30xc
VR Interactions
After completing the model it was time to bring the illustration to life with interactions. I spun up a Unity 3D (URP) project and added the model.
I started by adding the interactions to the grid buttons. These rows of buttons all adjust the characteristics of the globe on tap. I felt that instead of trying to change the button texture on each click, it would be easier to remove the buttons from the texture and use individual planes instead. This way I could just instantly change the position of each plane on tap. Easy-peasy.
After adding those primary interactions I wanted to add some more passive life to the prototype. I cut out the curved line heartbeat-monitor-looking UI that I had created based on the original illustration. I opened it in Adobe After Effects to add a basic looping animation. Then I headed back over to unity to import the animation in a tiny video player that autoplays.
At this point, I was supposed to be done. But.. something was missing. I wanted to make this gizmo behave like something man-made. I decided to have the power off by default and include a power button to boot things up. But then took it a step further using a power cord that by default is disconnected. This allowed for more spatial interactions which I love.
And we’re done! Here’s the final product (again):
List of tools/resources used:
- Blender: for modeling and UV mapping
- Figma: for creating textures
- Unity: for the prototype engine
- Bolt / Visual Scripting: for creating interaction logic in Unity
- Autohand: for the VR camera/hand rig and grabbing interactions
- Obi Rope: for the power cable physics
- Envato Elements, Soundkit by Meta, SND.dev: for sound effects
