A few years ago I sold all my stuff to explore the world, creating 12 startups in 12 months and building $1M+/y companies as an indie maker such as Nomad List and Remote OK. I'm also a big pusher of remote work and async and analyze the effects it has on society. Follow me on Twitter or see my list of posts. My first book MAKE is out now. Contact me
Subscribing you...
Subscribed! Check your inbox to confirm your email.
levels.io

From web dev to VR: How to get started with VR development

Learning 3d, Virtual reality
Oct 11, 2016

Earlier this year, I set myself the challenge to learn 3d in a month by modeling this scene in Tokyo:

Previously, I’ve only really done web development and before that music. So it’s been pretty challenging but I’ve been trying to brute force myself through it. Learning only the minimal needed while making something.

After a month of pain, I modeled this entire street and got the basics down + I added cats! <3

Now I had a 3d scene.But my end goal was to **walk in my own modeled street in virtual reality** though. How would I do that?

First, I needed some hardware.

Hardware

VR doesn’t work with MacBook’s yet as their GPU isn’t powerful enough. So I had to get a PC. I searched around a bit and found Keijiro, a great 3d designer, and copied his new rig and made a few adjustments:

I went for the GTX 1080 as that’s the fastest GPU you can get now.

screenshot-2016-10-12-00-37-30

I chose the Phanteks Enthoo ITX case because I wanted to travel with it (as carry-on), apparently I could’ve gone smaller but it was okay:

screenshot-2016-10-12-00-38-41

The case is 23 cm x 37.5 cm x 39.5 cm. The carry-on allowance for Qatar Airways (to give an example) is 25 cm x 37 cm x 50 cm. So just 0.5cm too big but that can be considered a margin of error so it’s probably okay. There’s VR laptops now but they are prone to overheat and break. Don’t buy them. I also got a Dell 24″ dislay. Not too big, and this could actually fit in my rolling suitcase.

94080c255295dda89e680ceabdf77127

Why try be mobile with AN ENTIRE VR SET UP? Well, I had this epic plan to go live on a beach in Bali at the end of 2016 and learn to surf in the day and learn VR dev at night. I know, ridiculous.

htc-vive-set-0

I chose the HTC Vive (made in co-op with Valve and Steam) as it seems like the best choice of headset now. It has room scale VR by default, which means you can walk around freely in your room. Oculus just added it too (with Touch) but it’s lagging behind a lot in features. They’re quickly catching up though (see OC3’s Oculus announcements). I also like that the Vive is built around a future open source SteamVR framework, which means other headsets will be able to use the technology.

After a few weeks I got my setup in the mail:

photo44036811243249501

photo44036811243249493

photo44036811243249498

And the neighborhood cat used the PC box as her new home ^_^

screenshot-2016-10-12-00-50-26

Hardware Update 2017-02-22: It’s been 4 months and there’s actually pretty good VR-ready laptops available now, primarily by MSI and Alienware. If you’re moving around, I suggest getting those because traveling with a 12kg rig was terrible! Emirates broke my $300 Dell monitor I checked in in my suitcase (even as I insulated it). The PC still works but carrying it through customs (where they ask many funny questions) and all to the gate (there’s no carts AFTER customs did you know that?) is intense. TL;DR get a VR laptop if you move a lot.

Software

Just like with 3d modeling, most of game development can now happen with just one tool: Unity:

unity_3d_1

I remember years ago being scared of even getting close to Unity as it seemed so complicated, but having mastered the basics of Cinema 4D, this seemed like a smooth ride. It feels, looks and acts a lot like Cinema 4D. The difference is everyhting in Unity is primed for interactivity. Unity is free, although if you release your game I think you have to pay them a % of your revenue. There’s also Unreal Engine, which looks better and appears more photorealistic:

171

…but I feel Unity is more noob-friendly and more people use it, so you can find answers to questions you have easily.

Everything I write now I learnt by just Googling again and watching lots of YouTube tutorials…

Let’s start

I started by making a new project and importing my entire scene from Cinema 4D into Unity as an asset:

screenshot-2016-10-12-00-04-09

That instantly crashed Unity as I think the scene was too complex. So instead I made an empty project in Unity, quit Unity. Then I went into the project’s Assets folder and put the C4D file there. Then I loaded the project and my scene was in the Library. Dragging it into the viewer, there it was!

It didn’t go perfect though. I had to reskin ALL textures as they were missing:

tokyo_2016-05-16-2

…this seems to be a common problem as @vanschneider had the same issue.

photo44036811243249471

Also all light and physics (e.g. gravity) was gone. Oh well…

Making a project VR-ready

To make a Unity project VR-ready for Vive, you need to go into the Unity Assets Store and download the SteamVR script:

screenshot-2016-10-09-17-38-39

Drag the CameraRig and SteamVR object inside the SteamVR/Prefabs folder into your project and you instantly make it VR-ready. The blue line is you room’s boundaries and help you scale your scene relatively:

screenshot-2016-10-09-17-46-27

Add some random objects and bam:

Literally that’s how easy it is. It even adds the Vive’s controllers into your project. When you click Play in Unity, you put on your headset and it works!

Or well…So I tried it with my scene but the scale was completely off. I was in a giant street about 100x off scale. It took a few minutes to scale it down to 0.075x. I literally just measured with my controllers how big or small the scale should be and adjusted accordingly.

photo44036811243249489

But then it worked. And amazingly the scale was pretty consistent too even though I designed it in 3d from just that photo:

Yay! From idea, to 3d, to VR in just a few months. So. Easy.

Apart from the skins, the lights weren’t properly imported either, so I had to rebuild them in Unity. That took a while.

Adding interaction

Now that I had a scene, how could I let the controllers touch and interact with stuff? Because by default you simply move through objects that remain static and can’t interact with anything. Well, you use the VR Toolkit (VRTK) by @thestonefox. You simply add VRTK’s scripts to objects that you want “interactable” and can modify the properties on there, for example selecting “grabbable” lets you pick up objects by clicking your controllers:

screenshot-2016-10-12-01-18-02

There we go:

Then if you apply physics to the object, by adding a rigid body with gravity and a box collider (a box around so it can collide with other objects):

maxresdefault-1

…it becomes an object that acts like real life and SHIT JUST TURNED REAL (sorry my mic was a bit soft here but there’s frustration here, haha):

You can go crazier though, Unity has cloth physics, which you can use to make curtains:

Sorry, textures are a bit off here:

Cool, right?!

WebVR

I didn’t want to write this post about learning VR as a web dev and not even mention WebVR. There’s lots of cool stuff happening here with React just announcing ReactVR which lets you build entire VR scenes with just HTML/CSS like code:

We just announced the React VR project during the Oculus Connect Keynote, here’s the Hello World of VR: pic.twitter.com/VArPTYQlFs

— React (@reactjs) October 6, 2016

Or frameworks like A-Frame which let you do it with even simpler code:

I made something dumb in A-Frame https://t.co/R5SdsGzQjf #vaporwave

— Ada Rose Edwards 🎃 (@Lady_Ada_King) October 10, 2016

The cool thing about Unity is that it can actually export easily to WebVR. That means once my VR game is finished, I can deploy it to web in a day or less. Awesome!

Conclusion

I’m amazed how easy it is to get a 3d scene you made into VR. There’s some challenges and pains but in the end it went pretty smooth. I was expecting a lot more bugs, errors and weird problems. They weren’t there.

I’m not sure why I started modeling with Cinema 4D, as importing it from there caused some pain (reskinning, relighting) , so it seems easier to just start in Unity immediately from next time. Sorry Cinema 4D! Unity here we come!

What’s next

I now need to add more interactivity to my scene, the plan is to add walking street cats that you have to catch with a fishing net. Here’s a start with this cat I rigged on Mixamo, an auto rigger service (rigging means making a skeleton for your 3d character so you can move it like a real animal/human):

Also I want you to be able to walk (or teleport) into the restaurants and bars in the street. Maybe make the doors slideable like real Tokyo doors. And maybe add a ramen bar on the right where you can eat ramen with your controllers (and get high scores for it), I’ll make them extra slippery so it’s hard to eat. Here’s a start:

Then at the end of this year I’d like to try and get it into the SteamVR store for free and I’ll close the year having learnt 3d, VR and released my first VR game/experience.

And…I already have a cheesy cover for it:

3art2

P.S. I'm on Twitter too if you'd like to follow more of my stories. And I wrote a book called MAKE about building startups without funding. See a list of my stories or contact me. To get an alert when I write a new blog post, you can subscribe below:

Subscribing you...
Subscribed! Check your inbox to confirm your email.

2022
18 Sep
This House Does Not Exist
2022
14 Jul
Sam Parr + Shaan Puri asked me about bootstrapping, open startups and lifestyle inflation (My First Million Podcast)
2022
16 May
Thinking and doing for yourself (Life Done Differently Podcast)
2022
10 May
Relocation of remote workers (Building Remotely Podcast)
2022
26 Jan
Money, happiness and productivity as a solo founder (Indiehackers Podcast)
2022
20 Jan
Bootstrapping, moving to Portugal and setting up Rebase (Wannabe Entrepreneur Podcast)
2021
25 Mar
Why I'm unreachable and maybe you should be too
2021
25 Mar
The next frontier after remote work is async
2021
19 Mar
List of all my projects ever
2021
08 Mar
Why coliving economics still don't make sense
2021
14 Feb
Inflation Chart: the stock market adjusted for the US-dollar money supply
2021
10 Jan
I did a live 4+ hour AMA on Twitch w/ @roxkstar74
2020
20 Dec
No one should ever work
2020
10 Dec
Normalization of non-deviance
2020
05 Dec
Copywriting for entrepreneurs: explain your product how you'd explain it to a friend
2020
30 Nov
Entrepreneurs are the heroes, not the villains
2020
12 Nov
The future of remote work: how the greatest human migration in history will happen in the next ten years
2020
05 Nov
Will millions of remote workers become location independent in 2021?
2020
11 Apr
5 years in startups with Abadesi
2020
11 Jan
Twitter giveaways can be hacked to win every time
2019
16 Oct
Lorn - The Slow Blade ✕ Hong Kong
2019
28 Sep
Most decaf coffee is made from paint stripper
2019
12 Sep
The odds of getting a remote job are less than 1% (because everyone wants one)
2019
08 Sep
In the future writing actual code will be like using a pro DSLR camera, and no code will be like using a smartphone camera
2019
29 Aug
Instead of hiring people, do things yourself to stay relevant
2019
28 Aug
Nobody cares about you after you're dead and the universe destroys itself
2019
28 Aug
The only real validation is people paying for your product
2019
05 Aug
Monitoring Bali's undersea internet cable
2019
29 Jul
Nomad List turns 5
2018
29 Jan
I'm Product Hunt's Maker of the Year again!
2018
28 Jan
Why Korean Jimjilbangs and Japanese Onsens are great
2018
24 Jan
Turning side projects into profitable startups
2018
03 Jan
What I learnt from 100 days of shipping
2017
28 Dec
As decentralized as cryptocurrency is: so will be the people working on it
2017
22 Oct
How to 3d scan any object with just your phone's camera
2017
09 Aug
In a world of outrage, mute words
2017
03 Aug
How to pack for world travel with just a carry-on bag
2017
26 Jul
Building a startup in public: from first line of code to frontpage of Reddit
2017
24 Jul
Facebook and Google are building their own cities: the inevitable future of private tech worker towns
2017
21 Jul
The TL;DR MBA
2017
12 Jul
We did it! Namecheap has introduced 2FA
2017
08 Jun
It's about time for a digital work permit for remote workers
2017
23 May
Using Uptime Robot to build unit tests for the web
2017
08 May
Namecheap still doesn't support 2FA in 2017 (update: they do now!)
2017
03 May
Taipei is boring, and maybe that's not such a bad thing
2017
16 Apr
What we can learn from Stormzy about transparency
2017
17 Feb
The ICANN mafia has taken my site hostage for 2 days now
2017
10 Feb
Most coworking spaces don't make money; here's how they can adapt to survive the future
2017
11 Jan
A society of total automation in which the need to work is replaced with a nomadic life of creative play
2017
07 Jan
Nomad List Founder
2016
12 Dec
Make your own Olark feedback form without Olark
2016
29 Oct
How to fix flying
2016
19 Oct
Robots make mistakes too: How to log your server with push notifications straight to your phone
2016
17 Oct
Hong Kong Express - 上海 (Shanghai)
2016
17 Oct
Choosing entrepreneurship over a corporate career
2016
13 Oct
"I can't buy happiness anymore. I've bought everything that I ever wanted. There's not really anything I want anymore."
2016
11 Oct
From web dev to VR: How to get started with VR development
2016
05 Oct
What I would do if I was 18 now
2016
22 Sep
Bootstrapping Side Projects into Profitable Startups
2016
27 Aug
Kids
2016
13 Aug
How I cured my anxiety (mostly)
2016
26 Jul
We have an epidemic of bad posture
2016
17 Jul
Fixing "Inf and NaN cannot be JSON encoded" in PHP the easy way
2016
26 Jun
My third time in a float tank and practicing visualizing the future
2016
15 Jun
How to add shareable pictures to your website with some PhantomJS magic
2016
29 May
My chatbot gets catcalled
2016
19 May
From web dev to 3d: Learning 3d modeling in a month
2016
09 Mar
My second time in a sensory deprivation chamber
2016
04 Mar
Day 30 of Learning 3d 🎮 Cloning objects 👾👾👾
2016
02 Mar
Day 29 of Learning 3d 🎮 Glass, reflectives, HD, coloring and more details
2016
29 Feb
Day 27 of Learning 3d 🎮 Details, details, DETAILS!
2016
25 Feb
Day 23 of Learning 3d 🎮 Filling up the street and adding shadows
2016
24 Feb
Day 22 of Learning 3d 🎮 Added rain, blinking lights, sound, textured menu sign and a VR web app
2016
23 Feb
Day 21 of Learning 3d 🎮 High res textures, physical rendering and ambient occlusion
2016
22 Feb
Day 20 of Learning 3d 🎮 Objects and camera perspectives 🙆
2016
19 Feb
My first time floating in a sensory deprivation tank ☺️
2016
12 Feb
Day 10 of Learning 3d 🎮 Making complex objects by combining shapes 🙆
2016
06 Feb
Day 4 of Learning 3d: @shoinwolfe visits the actual street I'm modeling 🏮😎🏮
2016
03 Feb
Day 1 of Learning 3d 🎮 I learnt how to make shapes, move, rotate and scale them + how to texturize, and add colored lights 💆
2016
02 Feb
I'm Learning 3d 🎮
2016
27 Jan
The things I have to do to read an email sent to me by my government
2016
12 Jan
How to use your iPhone as a better Apple TV alternative (with VPN)
2015
23 Dec
Here's a crazy idea: automatically pause recurring subscription of users when you detect they aren't actually using your app
2015
17 Dec
Stop calling night owls lazy, we're not
2015
16 Dec
We are the heroes of our own stories
2015
25 Oct
There will be 1 billion digital nomads by 2035
2015
21 Oct
Tobias van Schneider interviewed me about everything
2015
18 Oct
Why doesn't Twitter just asks its users to pay?
2015
17 Oct
Punk died the moment we learnt that the world WAS in fact getting better, not worse
2015
15 Oct
Stop being everyone's friend
2015
14 Oct
Vaporwave is the only music that fits the feeling futuristic Asian mega cities give me
2015
09 Sep
We live in a world built by dead people
2015
01 Sep
Why global roaming data solutions don't make any sense
2015
26 Aug
How to export your Slack's entire archive as HTML message logs
2015
24 Aug
How to play GTA V on your MacBook (and any other PC game)
2015
14 May
I uploaded 4 terabyte over Korea's 4G, and paid $48
2015
08 May
How I sped up Nomad List by 31% with SPDY, CloudFront and PageSpeed
2015
04 May
My weird code commenting style based on HTML tags
2015
01 May
Now is probably the time to make HTTPS the default on all your sites and apps
2015
17 Apr
Do the economics of remote work retreats make any sense?