A 3D Primer for Designers and Design Students
When both Apple and Google announced support for augmented reality content on newer mobile devices in 2017, the number of people who had access to 3D-capable devices exploded from a few million to close to a billion. Not surprisingly, growth in demand for resources for designers and design students eager to learn about 3D or spatial design kept pace.
If you are a designer, design student, or simply someone interested in learning more about immersive applications, this document is meant to help you learn the basics of 3D design. This should not be an arduous process. First off, thinking in three dimensions is natural. Thinking in three dimensions when designing a mobile application is all that is new.
Second, if you know the basics of traditional 2D design, you already have most of the foundation needed to design in 3D. Whether it is a firm understanding of color theory or the ability to create gorgeous PNG files using Sketch, these skills are just as valuable in immersive design as they are for 2D applications.
There's no excuse not to be a 3D designer. It's time to add a third, Z dimension to your design tool kit and explore the possibilities thinking in Z opens up.
Thinking in Z
If you have experience designing for screens, you are probably familiar with “X” and “Y” as 2D coordinates. These coordinates represent a distance (usually in pixels) relative to some origin point. Typically this origin point is the upper left corner of an image, window, or some other rectangular container. X is the distance left or right and Y is the up or down distance relative to the origin. For example if there is a digital image that is 12 pixels wide by 12 pixels tall, then the pixel at “6, 6” is near the center of that image.
What if you could move that single pixel forward into the screen or backward out of the screen? You would need a third axis in addition to X and Y which is commonly known as “Z”. A pixel location of “6, 6, 10” means it’s still within the image when looking at it straight on but is 10 pixels into the screen away from the viewer. “6, 6, -10” means it would be hovering out of the screen towards the viewer.
Unfortunately working in 3D doesn’t just mean adding a Z coordinate to element positions. Recall that a position like “6, 6, -10” is all relative to that upper left corner origin of the image which is “0, 0, 0.” The assumption here that keeps this simple is the origin can only move along the X, Y, and Z axes. But what if the image (and that origin point) can also rotate along any of those axes? If you tilted the image 90º backwards, it is now laying flat and facing upwards towards the sky. Our magic 3D pixel that was 10 pixels in front of the other pixels towards the viewer is now hovering 10 pixels above them.
As you can see, something simple in 2D can get complex quickly in a 3D context. The good news is 3D tools for creatives are getting easier to use each day and allow you to work visually instead thinking too much about the math involved. As 3D creation tools like our own become more accessible, we thought it was useful to review some terms and concepts you may encounter.
Key Mobile AR Terms Designers Should Know
Even with the complexity reduced, there are still some key terms you should be familiar with as you start to work in 3D. We have a short list of them here to help you get started.
Translation is a fancy way of saying the position of an object in 3D space. Usually this is expressed as three numbers (in meters, typically) that represent the distances right, up, and forward. Usually these are called “x”, “y”, and “z”, respectively. Beware: not every industry or tool agrees on which axes these labels represent. These numbers are relative to a point called “origin” or “anchor” that represents 0, 0, 0.
Rotation is similar to Translation in that it represents the three dimensions of values. These three values are best thought of like an airplane with yaw, pitch, and roll. Just like Translation, these are sometimes expressed with “x”, “y”, and “z” labels. The values are usually in radians or degrees.
If you think back to our pixel example, we were really just talking about a very specific point in the 3D coordinate space. Three points can be connected to make a triangle. A mesh is a collection of those triangles used to define surfaces and shapes. A point in 3D is also known as a vertex.
Materials give something a colorful, detailed appearance in 3D. At a very high level, this is where 2D images are applied to meshes (often these are called Textures). There may also be other parameters described in a material that can affect the final appearance. Think of these like image filters that are common in 2D tools.
A model is a collection of meshes and materials used to represent a visual object. These are what you can download from Google Poly or Sketchfab. Even to get a 2D image to display in 3D space, it needs to be made into a simple model (a polygon mesh to create a flat plane and a material to render the image on the plane). Models can contain animations.
Virtual lights work similar to lights in the real world. Lights affect the final appearance of models and their material appearance in a scene. Ambient light is the overall lighting of the 3D scene described with an intensity and color. Directional lights are like ambient lighting but they have a direction property which affects shadows and highlighting. Point lights radiate light in all directions from a single point which means they generally have properties of a position, intensity, and color. A spotlight has a location like point light but also has additional properties to define the cone of light coming from it.
The hiding of virtual objects behind other virtual objects, or behind real things is known as occlusion. To accomplish this in any arbitrary location or environment, the mobile device must create meshes that represent the physical world. One of the companies working on solving this for mobile AR is 6D.AI and they have an excellent primer on occlusion in mobile AR.
One of the main challenges of using 2D elements in 3D is actually part of the nature of the design tools we have been using for years. In the flat universe of 2D design, everything lines up on the depth (or Z) axis. This simplifies things for the designer, including a uniform sense of scale.
In 3D, on the other hand, objects don’t all live on the same plane. The parallax effect can cause objects to look as if they are aligned, when they are far apart but of differing size.
In the video below, note these equal size purple creatures right beside each other. Look again! The shadows beneath the objects, where available, are a useful hint of real size and position.
Virtual objects generally need to behave like their real-world counterparts in order to preserve a sense of immersion. This is known as physics. A virtual brick, for example, should have different virtual physical properties from a virtual ball, in terms of weight, solid appearance and interaction with the environment. A brick falling onto a table might jolt upon impact, while a ball will bounce several times. To achieve this, physical attributes (such as bounce damping ratio) are applied to each virtual object using a physics engine, which is a software library containing physics-related functions. The tighter the coupling between the real and virtual layers in AR, the greater the need for an underlying physics engine.
Spatial audio is the sonic experience in AR where the audio source has a specific position in the virtual space. Utilizing the positional tracking of the viewing device, the audio engine will pan and attenuate the audio which gives a very strong sense of location relative to the viewing device. For example, if a virtual puppy is yapping directly in front of you in the AR app, you would hear it clearly in both ears. But if you move your head or device left, the audio perspective would shift along with the visual, and the puppy’s bark would be heard mostly in your right ear.
These fundamentals should serve you well as you begin your exploration into creating experiences for 3D. Of course nothing beats actually working in 3D.
Additional Reading and Resources:
- Google AR Design Guidelines -- These guidelines are an excellent place for a designer new to 3D to dig deeper. Key concepts to pay attention to include:
- Encourage movement and prompt your user to explore physical space.
- Design for all abilities. Not everyone can move freely at all times.
- Encourage mindfulness of surroundings. For instance, don't ask your users to walk backward, lest they trip and fall.
- The Torch blog summarizes many of the most important takeaways.
- A Quick Design Guide for Augmented Reality on Mobile - Bushra Mahmood, a designer currently at Unity, has put together some very nice design guidelines.
- Devon Ko's online class that teaches 3D model making - 3D for Designers - is wildly popular and reportedly a lot of fun.
As always, if you have questions or just want to get some additional assistance, contact us at Torch Support. We love talking to people interested in 3D.