Rapid VR prototyping without coding in 2019
⭐This is a fun VR tutorial
Hi! This is the FIRST tutorial brought to you by XRforDesigner.com (WIP, inspired by Devon Ko)
What this tutorial is about and the outcome
In this tutorial, you will learn how to create a VR prototype without coding to communicate your awesome VR product idea in 2019.
At the end of the article, you will have something like what I built: a Twitch VR Concept that includes 4 scenes and allows users to freely navigate themselves in it. Just like this 👇
( It took me around 8 hours to build the whole 4 scenes. This level of polish would normally take me 4 days to finish if made in Unity)
👏Project Overview
As a designer with no former experience in 3D Art creation or game engines, prototyping and trying things in VR is difficult. There are just too many steps and too many things before you can take a look and try the thing you’ve created.
After some trial and fails and thanks to Sketchbox and Google VR. I found this 5-step workflow.
- Step1: Ideation on paper
- Step2: 2D assets creation
- Step3: 3D assets creation
- Step4: Scene building
- Step5: Share and present
It does not require 3D modeling experience or game engine experience. You don’t even have to take off your headset during the making of your prototype. Simple, fast, WYSIWYG, make this workflow super fun and effective to use.
☝Step1: Ideation on paper
How to build faster? Figure things out on paper first.
There are just too many possibilities in the 3D world. Trying every possibility will actually waste your energy and make you lose your progress.
If you can figure these 3 things out before you get your hands dirty, you will never feel lost and eventually create that scene you are excited about that sets you off at the beginning.
- Know the user. Who is the user of this prototype? How does he interact with the scene? What is his goal?
- Storyboard. To express his experience with your prototype, what kind of scenes are needed, describe your scenes with storyboards.
- Assets preparation. Try to ideate some assets you will use. How does the interface look like, what kind of 3D models you will need? Prepare a list of all the assets needed. Like this
Do all these with pen and paper, scan it so you can refer to it throughout the workflow.
I did the ideations on iPad 👇
✌Step2: 2D assets creation
After laying the foundation of what to build. Time to create your assets. Let’s start from the easiest part: creating 2D assets.
Question: since most VR environment runs on PC, do we have a fast interface design tool like the Sketch on Mac?
Tip1: Figma, a web-based lightning-fast interface design tool
If you have Chrome, you have Figma. If you used Sketch before, you will feel home. Design and prepare your titles, notification boxes, icons here. (Or any other 2D design tool available to you.)
Make sure you use big and easy to read typeface with high contrast when you are designing, so they display well later in Sketchbox.
This is my 2D assets Figma file, you can copy it to speed up your 2D assets creation.
Tip2: Start your creation with great VR Design templates
Although there are no strict limitations on the detail of the size, resolution, etc to your assets at the prototyping stage. The VR community have created great templates to make sure your creation performs the best.
For components and layout, you can refer to the Google VR Sticker sheet, I’ve imported them into a Figma file for you to copy and work with.
If you need 2D hand assets, refer to Facebook’s VR design resources page here.
👌 Step3: 3D assets creation
If we think the scene building in step4 as putting pieces of Lego brick together, this step is about how to create these Lego bricks.
A general principle here is to first find public 3D assets, if there is no ideal one, build it with Google Blocks. This way we save more time for constructing the scene and storytelling within that scene.
Tip1: Find what you need from Sketchfab and Google Poly
What is Sketchfab? A web-based 3D model library and presentation tool. Go to Explore/Filter by Downloadable and search for the assets you need.
When downloading, use the glTF format for preserving the details and performance. Make sure you credit the author properly based on his CC Attribution.
If you can’t find downloadable resources from Sketchfab, try searching Poly.
Tip2: Create what you need with Google Blocks
Now that what you need couldn’ t be found, you need to create it on your own. Don’t worry, you can totally do it if you know how to play with Legos.
Google Blocks is low poly modeling tools that offers you six tools to create 3D Models. You can learn how to use it in less than 5 minutes.
To help you get a hang of it faster, here are 3 simple modeling tips:
- Big picture first, details later
2. Use the grid to align things
3.Utilize model kits
Tip3: Use Oculus Dash to pin your reference
If you want to model fast and with a good outcome. Find an image to refer to when you are modeling. Thanks to Oculus Dash, you can now pin your chrome tab into your virtual space across apps.
Open Oculus dash, open chrome, use your grip to drag the tab out from the window and put it down somewhere, point and click the pin button at the bottom of the window.
Tip4: Upload your creation to Poly
Publish your model to Poly and give it a good name. You will pull your model out in the next step by simply searching that name. No complicated art assets pipeline, just create, upload, and call out the model with a name.
You can check out my models at my poly page.
🖖Step4: Scene building
We are finally at the step where everything comes together.
Now, let’s use Sketchbox to put together all the assets into scenes.
Sketchbox is a simple and fast VR prototype tool. Consider it as the keynote of VR. You can put your assets anywhere at any scale in the scene, annotate, and create walkthrough sequences. There are several VR prototype tools out there: Moment XR, Microsoft Marquette, even Tilt Brush, leave a comment if you are interested in a comparison between them.
Tip1: How to import assets
Put your prepared assets into these folders based on their type. Check Sketchbox document. Remember to name them properly, there is no preview image of the assets later on when you are in Sketchbox.
Tip2: The logic of building a scene
Set the environment first, put your character in the scene next so you can determine the relationship between the environment and the user. Set up your objects in the scene after this based on your character and eventually determine your UI assets based on the objects.
When all the assets are properly placed in the scene, set a viewing point to lock the view angle and proportion.
Note: the number here refers to the order of assets import. The user interface should be added last since it can be attached to the environment, object or the user himself.
Tip3: Some Music?
I found listening to music really helped me build some scenes better. Pin an Open.spotify.com player window with oculus dash. These are my favorite music to listen to when I build. Here is a quick video on how to.
🖐Step5: Share and present
Congrats! You are in the last part of this tutorial. Sharing your prototype and testing is just as important as building it.
- Share the scene with Sketchfab. Export your scene from Sketchbox and import it into Sketchfab. You can set up multiple viewing points in Sketchfab and your viewer can view the scene with simple cardboard.
- Record your scene and share the video. Using the Oculus mirror and OBS Studio, you can record your gameplay and your voiceover. Here is a tutorial on how to do it.
Conclusion and credit
Let’s take a look at what we achieved along the way.
- A clear vision on what is your prototype (Bring this to discuss with others)
- Enough 2D assets (Take them and produce more polished interfaces)
- Good 3D assets (Use as a library)
- Several 3D scenes that have a story and can be freely explored (Best start for your next step)
What can you do next? Test? Import them into game engine? Render it? Polish it? Make it to a video? It is your call now.
Thank you for reading this article, good luck!
Credit:
Sketchfab:
James S. Trent Arena by loghawk360 — download 3D model
Guts Berserker by Taiga — download 3D model
Knight Artorias by Samize — download 3D model
MT by Daniil Kutuzov — download 3D model
Mirror’s Edge Apartment — Interior Scene by Aurélien Martel — download 3D model
Fantasy Sky Background by Hannes Delbeke — download 3D model
Poly:
XRforDesigner is a WIP project from Jiacheng Yang. This project aims to share what designers have learned while designing for XR.
Shoot an email to xrfordesigner@gmail.com if you want to contribute.
Stay tuned for more XR design tutorials, projects, and details.
