This may be one of the first articles to document how to incorporate Cinema4D into your Framer.js prototyping workflow for VR Applications and experiential prototypes.
If that happens to be the case, I would be extremely excited.
I am a huge fan of both Cinema4D and Framer. Contributing to these communities in a meaningful capacity would mean a lot to me.
Research objectives:
Initially, this article began as an effort to accomplish two research objectives:
- Firstly, I wanted to learn how to Incorporate 3D Rendered images from an Application like Cinema4D (or Maya) for use with the VR Component Module documented below. https://blog.framerjs.com/posts/design-virtual-reality.html
- Secondly, I wanted to learn how to Incorporate Panoramaic photos taken on an iPhone into framer.js for use with the aforementioned module.
Simply stated, I wanted to make cool experiential prototypes with Framer.js using my iPhone6s or scenes rendered in Cinema4D.
It seemed pretty straightforward. I’ve often relied on support and assistance from the Framer.js community where members routinely help you get started prototyping with Framer. If you’re just starting-out with Framer.js and have questions, I encourage you to use the community page to ask questions. It’s like stack overflow on Steroids. You’ll even find the founders of Framer like Koen Bok rolling-up his sleeves to help you with your issue. The customer service, insight and help you’ll find on the community page is fantastic.
Blocking issue:
When I visited the Framer Facebook support page for assistance, I learned that the subjects of my research were relatively new and thus…not thoroughly documented.
It quickly became apparent that my goals were more ambitious than I originally thought. In fact, it took me approximately 3 days to gather and record my findings. During the course of my research, I interrupted my family’s Labor Day vacation with non-sensical episodes of me rotating and contorting my body in real-3D space to take 3D photos. I also successfully photobombed some great family photos and nearly fell into a campfire.
The experience was a great investment of time because I learned a bunch of new techniques that I’m excited to share with you.
It’s important for me to digest and synthesize this data so you can extract as much value for your prototyping process as possible. It’s my goal to turn my research into a tutorial that will be relevant to readers who are both new and experienced Cinema4D users. My research occurred during a very busy time for me. It was my first family vacation in 6 months and I just got a cool new gig with a leading Tech Innovation Firm that I’ve admired for years. Consequently, I need to release my research in three instalments.
Roadmap:
This article constitutes part one of a three part instalment that will show you how to incorporate Cinema4D (or Maya) into your Framer workflow to create experiential VR/AR prototypes.
This first instalment is somewhat of a quick summary of my findings. (I wanted to let you know that I haven’t abandoned my research objectives.)
Part Two will be a practical tutorial that will be helpful to Framer users (hereafter referred to as Framers) who fall into one of two respective categories:
a) Framers who have NO experience with Cinema4D.
b) Framers who are experienced with Cinema4D and need help incorporating C4D into their Framer.js pipeline.
Part Three examines how to apply the process of cube mapping mentioned above inside Maya. In my experience, I have noticed that Cinema4D is more commonly used in areas of Motion Graphic Design whereas Maya is somewhat of an industry standard when it comes to Game Development. Despite comparative industry adoption rates, both applications are exceptional and this tutorial hopes to round-out your experience with each one when used with Framer. This section may be more relevant for Game Designers trying to prototype interactions and key experiences that target commercial VR Headsets like Oculus CV1 or PSVR.
Prerequisites:
*If you’re a JavaScript/CoffeeScript Ninja experienced with Framer skip this section.
Please note that I am making these tutorials operating on some key assumptions. I am assuming that you’re loosely familiar with Framer, coffeeScript and/or JavaScript. Additionally, I am assuming you have a decent understanding of the basic principles and constructs of Object Oriented Programming. If you’ve never written a line of code in you’re life, don’t worry, Framer was made for people like you.
Framer is quickly becoming one of the most popular prototyping solutions on the market. Today’s hottest tech companies like Uber, Facebook and Google are incorporating Framer into their Prototyping process. Increasingly, employers are looking for individuals who understand Framer for UX, UI, Interaction and Product Design roles. Learning Framer will really give you an edge as a Product Designer. In my case, I can certainly say that my knowledge of Framer.js and CoffeeScript has really given me an edge in front of prospective employers.
If you’re on the fence about committing to using Framer.js and moving through the learning curve, I wrote an article on why you should seriously consider adding Framer to your toolbox (especially if you’re a designer who has never coded before in your life.)
https://medium.com/@adammazurick/why-i-love-framer-js-ec75759cce5d#.kv67qimn5
By using the following two resources, I learned CoffeeScript and Framer in approximately a week. I still have lots to learn, however, I genuinely believe that the two following resources will supercharge your prototyping abilities and take your career to the next level.
I highly recommend taking O’Reilly’s rapid prototyping course.
http://shop.oreilly.com/product/0636920042716.do
Moreover, if you’ve never done any Object Oriented Programming, I will also HIGHLY recommend that you buy Tessa Thornton’s eBook and do the exercises!
https://coffeescript-for-framerjs.com
Again, both resources will take you from zero to hero in Framer quickly, especially if you’ve never coded before.
Summary of my initial findings:
Whether you’re trying to prototype an environment for a VR Experience or if you’re trying to demo an Augmented Reality menu interaction, Framer can help you prototype your VR/AR ideas quickly and inexpensively. Tools like Framer allow you to get feedback fast and hopefully help you validate your ideas. After-all, ideas are cheap but building things is expensive. We can leverage Framer.js to prove or disprove an idea cheaply and quickly. Moreover, a tool like Framer creates High-fidelity prototypes that can be as good as the real thing for user testing.
Finding one:
It’s totally possible to use Framer to create exceptional VR/AR experiences. Doing so requires a process whereby you produce high-resolution rendered images of your environment with an animated camera positioned at specific heading, pitch and bank coordinates to produce something known as a ‘cube map' that Framer will interpret using the VR Module. This will be the subject of my next post.
Here’s an example I refer to as Maz Mountains that I produced using this process.
Please visit the live prototype here.
http://share.framerjs.com/cz7up4czl1bs/
Finding two:
Initially when I began my research, there was some conjecture about using Photosynth to create cube maps of your panoramic images and then quickly import these into Framer. In my research, I learned that this isn’t really possible. Photosynth is an App that was developed as part of a Microsoft Research Initiative and it has since been removed from the iOS App store. Below you will find some documentation from Microsoft on this subject. Poo…
http://www.windowscentral.com/microsoft-retiring-photosynth-apps
I did, however, find a comparable App named Panorama360. When my Wife saw that I spent 3 bucks on it, she was somewhat pissed… but she quickly got over the purchase when I took some stunning 360 scenic shots.
Panorama360 is available here.
https://itunes.apple.com/ca/app/360-panorama/id377342622?mt=8
I tested this approach, however, it produced some undesirable results. There is a lot of distortion and this is the result of a variety of image capture and environmental variables you can’t control when taking 360 photos from your mobile device. You need to have a fix-mounted 360 Camera to properly capture and incorporate 3D photo into framer.
I did, however, find a workaround that I will share with you tomorrow that discusses ways of mitigating and reducing such distortion. This will be the subject of my next post.
I am presently creating the content which will feature a combination of videos and working files that you can begin to use to reverse engineer and create your own exciting projects.
