3d and Me
How I went from being clueless about 3D rendering to a little less clueless about 3D rendering.
I love weird 3D art. The stranger the better — You got a magic lollipop dripping liquid gold delicately placed on a soft pastel background? I’ll want to lick it. How about craggy mountains with prism-like terrain floating high in the sky? Let me hike there! Iridescent holograms entangled in fibrous, neon wires? I trip wit it. I love this stuff! Designers and motion artists are using render tools to spellcast the most bizarre creations. Think about it: this is software whose traditional purpose is to replicate the real-world. The lighting, shading, volumetrics, soft and hard body physics, liquids, simulations etc., all these feature sets are based on real-world physics and math! Designers have started asking questions about what other purposes these neat tools could be used for. “How can I use software to replicate real world objects” gives way to “How can I use software to make my wildest and craziest imaginations become real?” Tethering your mind between reality and another dimension, between familiar and fantasy, becomes exciting brain food for your audience. It’s a subversive use of the tools, and the magical realism(and sometimes downright Dali-esq surrealism) that results is mesmerizing. Equal parts jealous and inspired, I set out to join them and get weird!
Prelude
What follows is a collection of notes, suggestions, observations, curiosities and mistakes from the last year+ of trial and error working in the “third dimension.”
A couple of quick caveats about the experiences documented in this post:
- I suck at this! I’ve been doing this for a 1.5 years now and the main thing I’ve learned is how expansive and powerful these tools are. It’s mind boggling the things you can make!
- I use Blender. Blender is an amazing free and open source project for 3D making. You can build models, rig them, texture them, animate them, and run physics simulations on them. It’s a do-it-all wunderkind of an app. It is the Blender Foundation’s beautiful gift to the world. There are other popular tools which I assume are easier to use and maybe give better results (Cinema4d, 3ds max, Maya, Houdini), but they’re also pretty expensive for a glorified hobbyist like me. Free trials are a great option for getting your feet wet, but I knew I’d be picking things up slowly. Also, I wanted at least the potential for the work to be usable in a professional setting. I don’t feel comfortable doing that with free trials or (GASP!) pirated software. There’s tons of Blender tutorials on Youtube and super useful forum communities, so there’s a lot of help out there. From what I can tell, all these apps share the many basics concepts(which is good!), though the execution can be wildly different (which isn’t as good!). I guess you’ll have to take heart in the fact that you can’t know every little thing about every single design tool ever made. Knowledge of the basics though, would allow you to pick up any of them and be comfortable in a short amount of time. This is the quickest way to achieve zen in the multidimensional-design-tool-scape we live in now.
- I did have some Maya knowledge. Memory is a dusty attic, but after brushing off the cobwebs and spiders in my brain, I was reminded that I made some dumb stuff ten years ago in college for an integrated arts course. So I’m not entirely unfamiliar with 3d views and 3d tool user interfaces. That might have made it a little easier for me, but it sure felt like I was starting from scratch.
Anyway, here goes nothing!
Blender’s “malleable” interface.
Blender is a pretty quirky system that’s built out of panels. It takes a bit of getting used to, but what tool doesn’t. (Do you remember the first time you opened Photoshop?) Each panel has its own properties and abilities — the 3d viewer lets you look at your models, the timeline is for keyframing, the node editor lets make textures, etc. etc. etc. Any panel can become another panel at any time! This is crazy! As a web/ui designer I can’t get over that it’s built this way AND it works reasonably well!
It’s pretty intimidating at first, but never fear! The ones mentioned above are the ones I use most frequently. The 3d viewer panel is where you do all your modeling, positioning and lighting. The node editor is where you build your materials. The right rail of the default interface is the properties panel. It holds all the properties of the thing you have selected (you can name the object here, check out its materials, add mesh effects(called modifiers) and much more. Occasionally, I’ll use the timeline, graph editor, and dope sheet for animating, easing and moving keyframes around. The rest of them, who knows what they are! Maybe I’ll use them someday.
Right click!
Seconds after opening Blender you’ll immediately start clicking the default cube to try to move it around. You’ll try to click and click and click and click on it, but it won’t select or budge. This is a pretty devastating moment to your psyche: The thrill and excitement to play in new software is immediately tempered by failure to do the simplest task you can think of. It’s the most frustrating way to start learning something new.
Turns out you that you need to RIGHT CLICK to select objects in Blender. It’s a crazy opposite world that I don’t understand, but have reprogrammed my brain to accept. I suspect it’s probably possible to change it, I’ve never googled it to find out. Maybe do that to make your life easier.
So if you find yourself clicking really really hard on that damn cube and nothings happens, it’s okay! Deep breaths, right click on it, and drag it anywhere you want to go!
Use a full keyboard
There’s a host of useful hotkeys hidden in the in the function rail and the num-pad of a fully-featured keyboard. Shortcuts are super useful in jumping quickly between features, tools, or views. Get a keyboard and learn a bunch of them. I’m stuck in the mud with a stupid laptop keyboard, you can laugh at me as you drive by on your fancy hotkeys.
Bool Tool!
As a dummy who sucks a modeling, one of the ways my brain can wrap it’s head around building things is through adding and subtracting shapes. They call this booleaning in 3d software (it’s some kinda of algebraic-math term. Again, it’s really fun to me to learn about all this math under the hood that allows us to make really weird stuff). The bool tool is my hero!
Check it out:
I use it to cut holes in stuff, or merge weird shapes together. It reminds merging and trimming paths in Illustrator.
Lighting is (kinda) just like real life
Understanding lighting and texturing was really challenging. If you’re just starting out, it’s going to be a lot of trial and error for awhile. But one thing I realized early on was that lighting objects in Blender shares similarities to lighting objects in a photo studio. Objects in real life don’t just automatically look beautiful. If you’re in a studio and you want something to look good on set, there’s a bunch of equipment you need to set up. You might set up a key light, a fill light, reflectors, diffusers, a seamless backdrop, color gels etc. etc. etc. depending on how complex you want to get.
Just like in life, in Blender you need to build and place all these same tools around the models you’ve made. Only it’s much easier to reposition lights and papers in Blender then in a studio (No expensive lights, poles, clamps, or heavy lifting required!). If you want some shadows, throw some objects in front of the light! If you want reflections on your glass, fill your “room” up with stuff(lights, objects, textures, a world texture) for the glass or metal material to reflect.
Rendering is forever
Nobody told me that what “rendering” really means is “waiting”. Waiting as the computer calculates each pixel to output. Waiting for the estimated render time to dwindle down, only to spike back up again. Waiting for my laptop fans to stop spinning.
Watching the computer slowly puzzling your render together one 16 pixel by 16 pixel piece at a time is agonizing. Rendering a frame in high resolution on my macbook pro can take anywhere from 45 minutes to 2 hours depending the file. For example, it took 3 old macbooks and UQ developer Lily Zhou’s tricked out gaming pc an entire weekend to render the 250 frames of our website intro on uq.com. If I wanted to make a change it meant three days to re-render. (We did this three times, because I’m insufferable :) Thanks to Lily for her help or those old laptops might still be churning.
I shouldn’t be using a macbook for this stuff, but it’s what I have and I’m happy to make due. There’s a bunch settings that I don’t understand that can help lessen render times. I should invest in learning them, cause this shit takes forever. I guess what I’m saying is this: you can make cool stuff with just your laptop(which is cool!), but don’t expect to wrap up your blend and do a final render 30 minutes before your client presentation. Plan your time accordingly.
But I’m addicted to hitting the render button
For some reason I still can’t stop myself from clicking “render” after every little change I make. Part of it is I’m often never sure what the values I just shifted around will actually do, part of it is probably vanity: I always want to monitor the true quality of what I’m building.
Don’t be like me. This wastes a ton of time. I’ll be tweaking and tweaking dumb things, while I’m only half finished with the set and don’t even have the proper materials built. You do need to preview your work as you go, but you don’t need to do this every step of the way. I’m getting better, I’m making a habit of using border regions to preview small areas, and also rendering things at ½ or ¼ size. Still, I can’t help myself and sit and wait for a render like I’m watching cookies in the oven.
Start Small
We do tons of app marketing projects, so UI on phones is a common refrain from our clients. This sounds completely lame, but in sea of boring UI and phone shots, one of the ways for YOUR APP to look really impressive is through careful angles and elegant shadowing. Drop shadows from photoshop always left a lot to be desired for me, so I thought Blender would be a nice way to create more realistic phones and potentially get clients excited about creating high quality 3D renders for the final output.
This was my first 3d project! This is a really small task! I would just make a panel approximately the size of the phone and bring the rendered shadows into photoshop. I knew next to nothing about modeling or lighting at this time. But it helped me learn some of the easy basics: using and understanding different views, selecting and positioning 3D objects, lighting, setting up a camera, and actually rendering something. It also helped make for a higher fidelity and more compelling first round of design!
Tutorials are everywhere
A lot of my questions have already been answered by really helpful people on the internet. Yes, googling how to do everything, all the time, is extremely exhausting. But every search gets you a little bit more familiar with how the software works, what attributes and panels do what, how to make materials etc. etc. etc.
I’ve one embarrassing confession: I sometimes watch tutorials before I go to bed.
This is an attempt to learn through osmosis and also a nice way to lullaby myself to sleep. Some people watch Bob Ross, I watch soothing Blender tuts. (I also watch Bob Ross, RIP)
Watch a few interface and “Selecting and editing objects” tutorials.
I didn’t do this and I think it slowed my learning down. It’s important to learn some of the fundamentals. There are a bunch of shortcuts to select rows of vertices that are super helpful to jumpstart modifying models and making interesting things.
Find opportunities to add to your palette
Learning in a vacuum is hard. It’s a bit easier to pick something up if you have something in mind you want to create. Try to notice opportunities where a little 3D might spice up your design projects and carve out opportunities for yourself to improve your skills. Want some practical magic? Here’s a few personal examples:
Let’s start with a marketing site we made for for Samsung’s 3-in-1 laptop, the Chromebook Pro. Layered and folded papers seemed like an interesting visual concept to accentuate the device’s dynamic 360° hinge. The laptop is an ever-changing book/tablet/writing/work/play machine, and by pairing it with dynamic and colorful set pieces, we can project it as a fun addition to your life. I was determined to illustrate the concept as best I could. This was really early days in my blending career, but I managed to create some FPO style slides that I could build into a site concept. Mind you, dear reader, these were made with very rudimentary skills.
So, naturally, that idea was a bit too far out there for the client, and we eventually decided to focus on the device itself. We could use high quality renders to show off how the device opens, closes and folds as you scroll through the website. Those really crude models, made for a scraped concept, were still super beneficial in finding interesting device patterns, layering app screens, creating layouts, and storyboarding the interactivity. This made communicating with ACTUAL render professionals a breeze, and got us all to production-ready, high-quality final outputs much faster. Imagine that!
Remember that nifty intro animation for uq.com (see above)? I wanted some motivation to start animating in Blender, and this seemed like a nice opportunity. Anyone familiar with with keyframing can do basic animations in Blender. To ease myself into animating, I planned out the bulk of the animation in After Effects, and layered some magical 3d shapes, glass and gems on top of the flat animation. The rendering here wasn’t too adventurous, but it added an extra layer of “wow!” to the animation.
Last year we launch Beacon, a small disaster relief project to help raise money for those affected by the numerous back-to-back disasters last summer. Generous (and talented!) designers from all over the world submitted beautiful posters to the project. It seemed a crime not to put them to use! We wanted a cool visual story to introduce the initiative. I pictured posters hanging in the air, bravely holding their own against torrential winds. So I got to blending. I learned how to pin meshes, add cloth dynamics and a wind force, and voila! Posters elegantly blowing in the wind. Check ’em out!
And at an even dumber scale, I was excited to render a seasonal something-or-other, for my yearly holiday cards. Why not explore what Santa’s up to in the frozen north? I could play with some effects, hide my bad modeling skills behind a wall of ice and surprise my friends and family with something weird and fun. I learned a ton about lighting, texturing, materials, displacement, coloring, hair particles, and sculpting just from making a weird christmas card!
Conclusion
So what’s the point of all this you ask? I must first acknowledge that there are many more qualified and talented artists out there, who’s work my little experiments pale in comparison. They’re creativity inspires me everyday. I’m nowhere close to what they can do. BUT! What’s really cool is I suck at this and still made some pretty interesting things! I haven’t sunk tons of costs into fancy software, nor a souped-up-extreme-render machine. I get better with every file I open. I’m excited every time I hit the render button. I’m enjoying the puzzle of making something new. These skills have made my work more substantial and exciting. They’re proof of more expanded offerings we can provide our clients, and an expanded skill set that opens new realms of ideas I would never have thought of executing before. And perhaps most importantly, I’m having fun.
What I can’t stress enough, dear reader, is that you can do any of this stuff too. It doesn’t have to be Blender. Cinema 4d lite is embedded in After Effects. So if you have Creative Cloud, you have it. Maya has free trials. Houdini provides an apprentice version. The internet is full of tutorials for any 3d app you can think of. Everything you learn can be applied to a whole host of industry related things. It can be applied to advertising, branding, animation, film, motion graphics, interfaces, VR, AR, games. It’s a door to big possibilities. Don’t let the fear of the unknown stop you from walking on through.
Appendix
Please enjoy this best short film ever made:
Postscript
Our studio has been getting jazzed about 3D too, and a few of our design folks are taking Devon Ko’s 3D for Designers course. Let’s all look forward(or peer pressure) them to get posting on what life is like learning Cinema4d!
Upperquad is a growing team of designers, developers and producers brought together by good fortune, great clients and a shared drive to make amazing things.
Jason Dietrick is creative director @Upperquad.
