3D prototyping tools for 2D designers
By: G.E. Karen Lee
Tags: Prototyping, Design, 3d, UX, UI

If you can sketch, you can animate, too (with enough time and patience). Frame by frame animations can be made using Photoshop or any other tools available on iPad such as Procreate and FlipaClip. If we weren’t in a remote setting, we could have used other means of prototyping such as a diorama, acting or bodystorming to think and communicate in 3D. However, they are less effective on Zoom than a simple basic animation. For instance, at the beginning of the project, we were not fully aware of how many permutations of doctor-patient positions there are for a breast examination. I wanted to internally discuss how to cover all of the cases with a minimum amount of animations to make the most of our resources. Making generic animation can be economical, how can we make it adapt to different positions and postures of the doctor/patient avatar? It was challenging to describe the issue via Zoom, but as soon as I showed the below animation, the team immediately understood the point I was trying to make. My main takeaway from all of this was that even if the animation is rudimentary if it helps the team communicate what kind of issue you want to discuss, it serves the purpose.

A frame by frame animation made using Procreate and Powerpoint

If you happen to be good at perspective drawing, you can even make an AR and VR prototype using your paper drawing as illustrated in this video by Professor Michael Nebeling (11:30) at the University of Michigan. Drawing is one of my hobbies and I am glad that I have yet another reason to spend more time doing what I love. However, even if drawing is not your cup of tea, there are other ways to quickly create a 3D scene outlined below.

Character Creators

Our team had to figure out the required actions for a breast exam from reference materials and subject matter expert interviews and get them confirmed by physicians. If this were not a sensitive exam and if we weren’t in the middle of the pandemic, we could have taken a photo of one of the team members doing the required poses. However, the actions included taking off clothes, so a photo was not an option. Drawing poses typically requires too much time unless you are a professional. I sought advice from a peer who had experience working as an animator and he recommended using Character Creators (CC) by Reallusion. CC is sophisticated enough to be used by professional animation studios but easy for a novice like me to create a 3D avatar and have it carry out the necessary poses with appropriate facial expressions in under an hour or two.

A screenshot of a patient avatar touching an area she feels tenderness, made by Character Creator 3

One of the most attractive aspects of the software was how easy it was to make the avatar dress and undress. Making a 3D model dress and undress and getting all of the materials and physics right using other 3D tools like Blender is near to impossible for non-professionals to accomplish within a few months. Our team did not have any professional 3D modellers and animators and the project was only 3 month-long. We ended up purchasing CC and it served the purpose well. It was not only suitable for quick prototyping for a novice but also can be exported to be rigged and animated using Blender so that it can be integrated for final production in Unity.

The catch is if you want to animate the avatar and export it with the animation directly to Unity, you need to purchase another software by Reallusion called iClone plus a pipeline tool 3dxChange that is considerably more expensive than CC and iClone combined! Furthermore. while the default version of CC offers decent customization options of changing facial expressions, body shapes & clothing of avatars, If you are serious about customization, you have to pay for the right hair, skin and clothing. All in all, Character Creator is an excellent tool with beautiful, customizable characters suitable for both rapid prototyping and final production, but keep an eye out for hidden costs. Similarly, DAZ 3D offers easy customization of avatars, but it comes with hidden costs as well and less aesthetically pleasing default models. Unreal offers free, insanely realistic characters called Metahumans, but they can only be used in Unreal projects and still seems to be in beta.

Cheaper Alternatives — Manikin vs. Clipstudio vs. Storyboarder

Character Creator 3 currently costs USD 199 and the free trial only lasts only for a month. I expanded on my research on the available tools after my project and came across a few alternatives.

Manikin is a quick and simple pose reference tool for artists. It is suitable only for quick, low-fidelity character prototyping. Props like furniture are not provided. However, the iPad version offers the most straightforward and easy-to-use UIs for posing characters in a 3D space with decent lighting. The free version offers basic poses like standing, sitting and walking (believe me, it takes effort and time to pose a character from scratch however intuitive the UI is). The app says the paid version (USD 5.49) unlocks a whole array of objects like furniture and over 200 animations.

A screenshot of a Manikin iPad version. Manipulating the cute Manikin with fingers is fun

Clipstudio Paint is a drawing and painting tool mostly used for comics. The Pro version costs USD49.99 and the EX version USD219. It comes with a cool 3D feature that allows for avatar posing and background creation to make comic artists’ life easier. The paid version seems to provide 3D objects like desks or cars. The problem is 3-month trial version does not even provide basic poses like sitting and standing. Manipulating the avatar is on the easy side but I find Manikin’s avatars on iPad easier to use.

A screenshot of Clipstudio Paint trial version. Posing a character from scratch is not easy

Storyboarder by Wonder Unit claims that making “visualizing a story as fast you can draw stick figures.” They are not exaggerating. This free software (yes, free without any hidden costs!) has amazingly useful features, such as making a quick storyboard with fully rigged 3d characters and directly editing it in Photoshop or turning it into a GIF file. It also lets you include a sound file for each scene so that you can easily make animatics without leaving the software. You can even open the scene in VR (if you have a headset, of course) and test the scenes in a VR space. Posing avatars using the feature ‘Shot Generator’ is intuitive and quick although it takes practice to fine-tune the details. It comes with variety of default poses (way more than those offered by Manikin) and 3D assets like furniture, trees and cars. You can make you own poses and save them for later use. Cameras and the items on the scene can be directly manipulated using the top left panel. You can add multiple cameras to quickly generate scenes from different angles. Importing your own 3D assets to the scene does not seem to be supported and there is no iPad version yet. Still, it is an incredibly useful and high-quality free software. Kudos to designers and developers at Wonder Unit!

It took me less than an hour to get the hang of Storyboarder and make low-fidelity 3D scenes

Figma

You can use traditional 2D prototyping tools like Figma to prototype for 3D albeit with limitations. You can make 3D scenes using the above-mentioned tools and make it look like the avatar is doing a certain action when you click a certain button. Our project was building a real-time multiplayer platform where two users see different UIs at the same time, so we didn’t choose to use Figma, but if it were not for multiplayer mode, we would have used it. Figma does offer capabilities to make a prototype for VR as well, but you need 360-degree images to make the prototype. Therefore, you either have to draw it (which can be more challenging than learning Unity) or take a 360-degree picture of physical environment similar to what you envision (which can be difficult too during the pandemic), or create a 3D scene in Unity and take 360 screenshots of the scene using a plugin (you need to know how to make a basic scene in Unity to use Figma this way).