In June of last year, I was at work minding my design business when our COO asks to meet with me. When we sat down to talk, he asked me to make our company’s Mascot (the Mobile Monster) in 3D in two months. I got to say I was a little surprised. Not just surprised, but super intimidated and uncertain.
I had zero 3D design experience. None, except a little clay sculpting in high school and plaster sculpting in college, but that’s it, and that was, dare I say, 20 years ago. I had some big concerns, so I talked to one of my fellow designers who had dabbled in 3D design a little on his own time.
After some good discussions with my coworker, it was clear I needed to do some research. Like ‘how long does it take to create a custom designed 3D character with texture and color?’ It turns out it takes a fair chunk of time. These are my rough approximations based on my research:
—The average student takes approximately 4 months to a year to master 3D modeling
—For experienced 3D modelers it takes an average of 3-4 weeks to create a high quality render. That’s if they have a high quality 2D character to work from.
So after finding out the above, I was in the unfortunate position of giving our wonderfully optimistic COO a reality check, which went over surprisingly well. He gave me to the end of the year based on my research. I sigh of relief, and a sigh of “what have I gotten myself into?
Let’s start with 2D
Based on research, I knew I needed to redesign our company’s mascot in 2D before I even started to figure out a 3D program. Shockoe’s mobile monster is a cute little black ape-like character with orange hair and a goatee. However, it needed some updating so I could actually see what its body looked like. As of now, it’s a black blob with an indistinguishable nose/mouth that we still debate in the office today.
After an awful lot of character illustrations, I felt the monster was in a good enough place. I could now start learning a 3D design program, but which one? There are many. There’s 3D S Max, Cinema 4D, Maya, Blender, and loads and loads more. So which one? My COO asked me to pick the one that was free… of course. Blender it is.
Blender, I got to say, is pretty damn cool. It’s open source, meaning it releases the source code under a license; The copyright holder grants users the rights to study, change, and distribute it. One of the coolest things about Blender is that anyone can download it at zero cost, minus the need for a compatible computer.
So, how do I learn Blender?
So, how to learn Blender? Get to it Mr. blog writer. There are quite a few ways to go about learning Blender, but I will tell you how I learned Blender. First, I googled “Blender tutorials”, and the results were many. There are literally hundreds, if not thousands of Blender tutorials out there. Well, my wife found this guy who has a YouTube channel called the Blender Guru. After watching a few minutes from the first in a series of nine tutorials on how to make coffee and donuts, I knew I had found my guy. Andrew Price hosts the Blender Guru channel on YouTube and he just made me laugh. When you’re learning a complex program that’s pretty intimidating, laughing while you’re learning goes along way.
I got quite a bit of heat from our COO for learning how to make coffee and donuts before trying to create our Mobile Monster. The point of making the coffee and donuts though was to learn the program and get comfortable with it before setting out to make something intentionally.
One initial problem I faced was time. It takes a great deal of time to practice 3D modeling. As a beginner you will undoubtedly do it wrong repeatedly and it’s a major time-killer. You won’t be able to replicate what your instructor shows you sometimes, no matter how hard you try. When you can’t replicate it, you’ll have to google it multiple times before you type in the magic phrase for what you’re trying to accomplish.
One delightful thing I found is that when you are googling for answers, you’ll find that there’s an incredibly supportive community of 3D artists out there, willing to help you achieve what you’re trying to create.
When you first start dabbling in 3D modeling, you can pretty much design anything on a basic laptop. However, you won’t be able to render anything unless you have the appropriate graphics card/processor. Once your designs start getting pretty complicated your laptop will no longer be able to keep up with everything. You’ll know you need a better computer when ‘control/⌘ + z’ freezes the program. No one wants to work in design without ‘control/⌘ + z.’
Luckily our office had the computer needed to continue my training, but this meant I could no longer train at home, which also meant I had even less time to learn the program, unless I wanted to ignore my family and spend long nights at the office (not really an option in my house).
Once I completed the coffee and donuts tutorial, I felt on top of the world. I had done it. I had created a three dimensional still life with lighting, texture, color, and personality. Even though I felt good about it, I hadn’t even scratched the surface for what I needed to accomplish. I had only replicated what someone taught me to do. I still needed to learn how to build a character from scratch.
Now it was time to learn character design in Blender. This time I turned to Udemy. At Shockoe, we have an immersive media director and based on his recommendation, I started the Udemy course Blender Character modeling for Beginners instructed by Riven Phoenix.
3D Character Modeling…different than Coffee and Donuts
Let me just state that Riven Phoenix is a brilliant 3D modeler and I might even say he’s a brilliant instructor. His teaching style, however, was night and day compared to Andrew Price. I must admit, it was a tough switch to Riven. Although he is brilliant, he is also somewhat drab. He taught me an entirely new way of 3D modeling, which made me feel small, since I thought I’d learned so much from my coffee and donuts. Turns out coffee and donuts is EASY comparatively! ‘Nooooo!’ I screamed to myself. But it’s ok, because as designers we have to remember there’s a million different ways to design the same thing.
Riven Phoenix teaches about a formula based system where one can design on a grid, snapping each movement into place with exact precision. Starting with just a single cube that is there when you open the Blender program. He teaches you how to model a 3D human figure, similar to Leonardo Di Vinci’s Vitruvian Man. When I first started the tutorial, I initially thought this would take more months to master than I had the time to learn. Little did I know how fast this tutorial would move. Riven’s formula based system is a brilliant and efficient way to work on character modeling.
My window of time to make this Mobile Monster was shrinking, I knew it was time to shit or get off the pot. I didn’t think I was ready, but I had to at least try. So I took my 2D Illustrator designs, uploaded them into Blender, and began tracing my design with 3D cubes using the extrusion effect, which enables designers to pull or push material in any desired direction without affecting other areas of the 3D model.
After a few days of modeling this character, I began to realize that completing a detailed full body render would be nearly impossible in the time frame I had, but I had an idea. I had just come off the heels of working on an Augmented Reality (AR) effect on an app I had worked on for RVATech Women, where users could raise their eyebrows and see a pair of glasses or a superhero mask appear superimposed over their face.
I knew I probably had time to design a face or head so I started to try to use Riven’s formula based system again, but focusing only on the face of the model I had already started. It turns out the formula based system didn’t leave much room for error for novices like myself. I was having an incredible difficulty modeling details that weren’t symmetrical, like curly hair.
But, how does Pixar do it?
I decided it was time to reach out to our Immersive Media director for some objective guidance. I explained to him the issues I was running into. He asked if I had searched how Pixar artists created their characters, and to my dismay, I hadn’t. I thought I had figured out how I would create this 3D model, but little did I know that after my first Google search for “Pixar character tutorials” would open my mind to an entirely new way of 3D design yet again. Mind blown
! I learned that by using flat planes, you could use the same extrusion effect to essentially map out the face of your character. Here’s the Blender Character Modeling tutorial by Darrin Lile that really helped me out.
Once you have your 2D design uploaded into Blender, delete the cube they start you with and create a small plane and add a mirror effect to it. You can start your 2D modeling anywhere on the face you want, but since the tutorial I watched started at the lip area just below the nose, that’s where I started. Then you can extrude your plane around the mouth, nose, cheeks, chin, and so forth. If you’re like me, once you cover up the face, you might start getting excited.
Once I finished modeling a flat face, essentially a flat mask, now what? Now, this is the crazy abstract part of the process. At this point, you must import the profile (side view) of your 2D design. You need to scale your 2D design and your 3D model to the same size so you can trace your 2D design with the planes and vertices of your 3D model. You will switch from the front view to the side view, so it would be ideal to have both views open simultaneously if you want to work efficiently and not confuse yourself (and trust me, it can get confusing).
From the front view, you’ll want to select the vertices that need to be pulled back, so you are creating a sense of depth for the face of your character. I started with the deepest parts of the face, like the back of the jaw. You will move each of these vertices back on the axis that pulls them away from the surface of the flat mask that you’ve created.
Once you have pulled all of your vertices back to create the depth, you’re left with this weird spikey face that you don’t want. This is where it takes time to smooth out your character’s face and start defining their facial features to give them the basic shape you want them to have.
Once you have a good face for your character, you must complete their entire head. I did this using the same method, extruding the planes based on the 2D design that I had imported into Blender. Once your character’s head is at a good stopping point, modeling wise, it’s time to have fun with textures and colors and bring your character to life.
Adding textures and color is a lot of fun, but beware, the more complicated the effects you implement into your design, the longer it will take to render, and could affect loading time once you’ve exported your model and imported it into other programs like Unity or Spark AR. You can most likely disable any effects you put on your character in other programs when it gets down to the nitty gritty.
PART 2: UV MAPS & SPARK AR
(10 min read)
Once I ‘finished’ my 3D model in Blender, it was time to import it into a program to make it an interactive object. For the sake of time and money, we used Facebook’s Spark AR. The only downside to this is that if a user wants to interact with the 3D object, they must have a Facebook account because you’re using Facebook’s platform for your project’s use. To have your object ready for importing in a program like this, your 3D model needs to have a couple things ready.
Check these points first:
—It is likely you made your up of multiple 3D objects. Every object in your model will need to be the child of a parent object.
—The parent object can be an invisible shape, but you need to center it on the x, y, and z axis, so that when your object pivots in any direction it’s pivoting from the center. If you didn’t center your object, it will probably be clear in the AR program you edit it in.
—For every object in your model, you will need to create a UV map. You can generally do this in whatever 3D program you built your model in.
—Until 5G is a common thing, you probably won’t be able to use any of the textures or colors in the 3D program you applied to your model. That’s ok though, because you can likely recreate a similar effect in Spark AR or Unity in much less time than it took to make in the 3D rendering program you used.
—You will need to find or create high quality texture images for your model. I would recommend pulling each of your UV maps from your 3D program and import them one at a time into Photoshop. Then you’ll want to import the high quality texture image over the UV map. Use the stamp tool to spread the image texture out over all the UV map. Once you’re happy with the coverage of the UV map, you must hide the UV map and make a normal map out of the texture image. When the normal map modal pops up, you can then adjust how much depth you want to give your texture with the levels provided.
Importing into Spark AR
Now that you’ve done all the dirty work and you have a gazillion files for your project it’s time to import them into Spark AR.
- Click ‘File’ and select ‘New Project’ and name your new project (⌘ N)
- Go to ‘File’ and select ‘Import From Computer’ (⌘ I) and select the 3D object you want to import
- Next, click ‘Insert’ and select ‘Face Tracker’ or whatever type of tracker you want.
- Find ‘Assets’ on the left toolbar and select your imported object and drag it to your tracker.
- At this point you should see your object moving with the person’s head in the scene. Exciting stuff!
- If the scaling is off or you hadn’t aligned your object with one of the x, y, and z axes, you can adjust some of these using the toolbar on the right when you select your model.
- If you click into the x, y, oz axis you can make any necessary adjustments and see real-time updates in the preview scene.
- Go to “Assets” again and select the + button, then select “Create New Material” and name it “Materials” or whatever makes you happy.
- This is where you will organize all the objects individually within your 3D model; i.e. FaceMaterial, RightEyeMaterial, RightPupilMaterial, LeftEyeMaterial, etc.
- Click “Assets” again and select the + button, then select “Create New Material” and name it Textures or Diffuse.
- This is where you’ll want to import (or drag and drop) all the files you have for the texture image, also known as a ‘diffuse.’ Make sure you’re naming everything accordingly to not confuse yourself and also to not confuse a developer who might work with these files.
- Lastly, click ‘Assets’ again and select the + button, then select ‘Create New Material’ and name it ‘Normal Maps’.This is where you’ll want to import (or drag and drop) all the files you have for the normal maps you created in Photoshop. Make sure you’re naming everything accordingly to not confuse yourself and also to not confuse a developer who might work with these files.
- Once you have imported every file associated with your 3D object, it’s time to assign your individual 3D objects textures (diffuses) and normal maps.
- In the left toolbar, make sure you’ve expanded your 3D model layers so you can see all the associated layers of your model.
- Select the first layer or 3D object in the expanded list. On the right toolbar under Materials, you’ll want to make sure you’ve checked the checkbox.
- Select the drop-down button and select the desired material.
- In the left toolbar, under Materials you’ll want to select the material you just assigned to your 3D object layer
- Selecting this material will change the options in the toolbar on the right for this material
- Under Shader Properties, select the Texture drop-down and select the desired texture (diffuse) file that you have uploaded to this project file.
- You can select a custom color as desired.
- Under Normal, check the checkbox and select the Texture drop-down and select the desired normal map for your material.
- You should see the changes in the preview scene and make adjustments as needed.
- Now just repeat steps eight through nine until all of your 3D objects have assigned textures (diffuses) and normal maps. Once you’ve assigned all your materials, you can play around in the program and adjust the levels as needed. There’s a slew of cool things I’m not covering, but that’s where you come into the program and learn for yourself.
- When you’re at a stopping point and you think you’re ready to package this bad boy up, scroll over to “Project” and select “Show Asset Summary”
- In the Asset Summary Window, you will see any files you’re not using. It would be ideal to trash them if you can. You want your file to be as small as possible, especially since you plan on having this live and perform on a mobile device.
- Once you’ve cleaned up your file, select the bottom right button “Compress All”.
- Scroll over to “File” and select “Export”
- Selecting “Export” will automatically tell you if your project is ready to export your compressed 3D model or not. You will see a list of device requirements and how your files compares to what it requires.
Ready to Submit!
From my experience, this was one of the most challenging parts of the process. Spark AR requires up to 1.3 MB to 2 MB, my file was initially 24 MB when I first tried to export my compressed file. I then had to work in reverse and recreate all my normal maps and diffuse files and change the size to 512 K in Photoshop in order to even come close to meeting these requirements. It took hours to get to “export ready,” but I was determined to make it happen. Ultimately, I had to sacrifice several design details that improved the overall design, but I’m not sure the average person would have noticed the difference or even appreciate the differences those details made but I noticed; It was a hard pill to swallow. However, with 5G in the horizon, hopefully these MB requirements will be a little easier to meet with a detailed 3D model.
Sign up for the Shockoe newsletter and we’ll keep you updated with the latest blogs, podcasts, and events focused on emerging mobile trends.