Designing 3D Environments: Lights, Camera, Polygons? Action!

The jump from 2D to 3D isn't just big—it's trans-dimensional! 3D can be daunting, but let's try to ease the painful transition with a solid game plan for getting your game ideas into a 3D space. We're not covering the specifics of creating 3D objects here, but we will be discussing tips for putting these into a game scene and getting the most out of them visually and in play.

What Is a 3D Environment?

Easy, right? They're just places! Games are deceptively simple organisms, though. Those that take the most care with their environment create non-intrusive tangibility: a place where the player doesn't feel that they're surrounded by artificial geometric shapes doctored up to give the illusion of a living world to play in. Tricking the user into thinking they're trapped in a desolate space station or deep in the ocean's depths, when they're actually in a comfy computer chair, takes careful planning, iterative execution, and a lot of trial and error.

When starting your first scenes, an initial thought may be, "I'm going to put trees here", followed by creating forests every which way and running into all kinds of problems down the line. We should start following up the urge to place assets with questions like, "How will the collision fit around this naturally?", "Can the view of the player be obstructed if they run behind a given object", and ultimately, "Do these new environments assets actually make the level look and play better?".

There are a lot of preconceived notions about what a game environment is, and, to be fair, there are many general practices in this area when it comes to making a game, whether it's an FPS with lots of box collision and corridors, a side scroller with generic platforms of given sizes, or an open space environment with nothing but asteroids to fill in the background. What your game environment is composed of is up to you (and the team you're working with), and how much content you need to populate that environment will depend on the type of game you plan to create.

In this article I'll be referencing our indie game, tentatively titled Flap Jack, to help us cover some of the universal concepts of environment art. This project is "2.5D", meaning that the art is fully 3D, but the gameplay takes place on a 2D plane.

Step One: Don't Panic

While piecing together one of your first 3D scenes, the last thing you want to do is bog yourself down worrying over technical restraints; you'll have enough on your mind getting things working on a basic level.

Polygons look pointy, but they're harmless.

One of the most important aspects of creating a 3D environment is having strict restrictions on texture sizes, polygon limits, draw calls, and tons of other technical garble we're not going to discuss in this tutorial. So, before we move forward, take a deep breath (and take those worries off your mind). We're concerned with making things functional, we want to make things look nice. Worry about finishing a scene, not optimizing it. There will be plenty of time to develop the best practices for optimizing performance when the basics become a no-brainer.

With that out of the way, let's actually start making stuff!

Finding Reference Material and Planning Your Scene

Okay, I lied, we're not ready to make stuff yet—but this part of the project is fun, educational, and motivating, so no complaints! Finding reference material is the process of amassing images that you can draw inspiration from and that will aid in the creation of your scene without hindering it. These images can further be used as color palettes to help you pick lighting, fog, sky, and texture colors.

Between these two images, think about which might be a good reference image for someone new to creating 3D environments:

Top: Limbo by Danish developer Playdead. Bottom: Avatar

If you chose Limbo, good on you! With its muted colors and minimal background elements, this is a great stylistic choice to get your foot in the door creating 3D environments, and, best of all, it has artistic value and atmosphere despite being relatively simple!

If you want to capture the grandeur of a multi million dollar movie production with no runtime restrictions, you probably want to reconsider your artistic direction; it's important to have realistic expectations for your first forays into the 3D space or you're going to get frustrated.

"But Limbo isn't 3D", you may be thinking. Reference images aren't necessarily meant to be directly copied—in fact, they shouldn't be. You're drawing inspiration here to make your game or scene, not someone else's. Some 3D games are heavily inspired by 2D elements; others are not. Pick and choose which images will best help you facilitate your own unique environment with its own unique requirements. Making a full on 3D game but see a 2D image with a color palette you really like? Throw it in your reference images folder!

Make sure to look at lots of images, and think about how these scenes might look in the editor with collision volumes and basic geometry, light sources, and so on. How were they constructed from start to finish? But don't think that you should be learning to simply emulate one scene verbatim. Environments are all unique, and most all games have their own requirements for what an environment does, both visually and through play. You don't want to get too carried away with either. If you worry too much about the game looking good, you may end up with art that doesn't conform to collision, or beautiful sky boxes that the camera never pans out to see. Conversely, you may make a game that's very playable but never put any thought into exciting visuals, and you're now struggling with how you can even show a sky box, or inject exciting environmental elements.

A good rule of thumb for choosing assets is to consider whether you can start them as basic primitives and later replace them with higher end assets. Can you put in cylinders and cones for tall trees, and cubes for cars? If so, then go to town. But if you're throwing together several tubes in an effort to create a gnarled great oak, there's a good chance you're taking the scene too far.

The above collision geometry is manageable, the tree is out of control.

Think simple; think playable. You can spend weeks trying to get massive and finely tuned collision on crazy, strange environment assets, only to find they actually make your game worse. You may have realized as a gamer that most assets have very simple collision geometry, and usually boxy or cylindrical silhouettes to boot (at least in their playable space). There's a reason for this: it's easily implemented and it works. Great complexity in environments rarely pays off, and if you're striving for it, you must be sure that there's a legitimate payoff.

Here's an example of a ground asset from the underwater scene:

Notice that, despite this having a relatively complex silhouette with curves, I didn't go overboard and add lots of boxes to try to create a curved surface. You'll find that, once you turn off the visuals of collision, you can get away with a lot more simplistic shapes than you may have initially anticipated. Not only will these simple collision setups save you time, they also function better; fewer things can go wrong when shapes are kept simple. Also note that there are no hard 45 degree angles and sharp corners that fish can get stuck on; the collision has a shape that would allow objects to roll off of it if collision occurred. This is important!

Have you ever played a game where you get snagged in unseen places? It's very unsatisfying, and a sure sign of poor collision placement. Keep it simple, and, if you can, keep it obtuse, with angles that don't trap the player in a collision. These technicalities may be a tad boring, but you will save untold time and stress if you spend a bit of time coming to understand how 3D scenes work, and have a strategy in mind before placing your first piece of geometry, light sources, terrain objects, and so on.

Time to Start Getting Our Hands Dirty: Lighting

Let's get this straight: 3D environments tend to be harder to make, have more technical restrictions, require a broader tool set, and are a pain in the neck when you first start. Are there any upsides?

Of course! Lighting in a 3D space is one such component of a scene that's powerful, relatively simple, and tons of fun to play with.

It would take most of us a lot of time to produce a lackluster 2D image like the one on the left, but with the powerful 3D packages we have access to today, it's possible to generate all sorts of interesting visuals with nothing more than simple geometry, lighting, and an eye for color and mood. Many strikingly beautiful games get by on these core elements alone, and never bother with the headache of high end 3D asset creation involving 3D sculpting and texture baking:

Oberon's Court by Tomas Sala

Let's say you were making a game with lots of adventure, where one moment the player's exploring a vibrant colorful area full of whimsy and open exploration, and you wanted it to seamlessly transition into a dark, brooding area with murky fog clouding the player's senses. In 2D, this would be rather hard to accomplish smoothly and convincingly—you'll notice most 2d games have very harsh transitions between environment and lighting transitions—but in 3D, we have the tools and technology to make this transition quite easily, and in real time!

In Flap Jack, and most 3D games, mood can quickly and easily be adjusted by changing several values for lighting direction, intensity, and color, and fog render distances, and the player can seamlessly swim from brightly lit coral areas to the murkiest depths of the ocean by using some simple scripts.

Lighting setups are tangible real world things that we have an innate understanding of from having visually observed the world around us, watching movies, and even playing games. It just takes a bit of practice before you can apply this innate understanding to your own scenes.

One of the first things to do, when starting on lighting, is create a sanity test asset that you will use to make sure lighting and materials don't go "out of whack". Put a single, decent-sized sphere somewhere in your scene. Make sure it has a straight white material with maybe a touch of specular. We're going to set some guidelines here to ensure you're properly adjusting both your lighting and materials to work in harmony.

It's a common mistake to have overblown lighting and improperly adjust textures to be too dark, or to have lighting that's too dim and adjust tons of assets to be properly visible, only to realize you've just made every asset far too bright under normal lighting conditions. First, achieve the mood you want on your spherical sanity object; then strike the right balance in your textures and materials so they look right.

Take a look at the above two spheres and their corresponding lighting setups. They're very similar, but the intensity of the main light is a tad higher on the right. The lighting setup on the left works; there's no flatness in the tone across the sphere's surface, and the 3D nature of the object shines through in its shading. The main light on the right sphere is overblown; we aren't getting a broad tonal range across its surface as there's a bland white spot covering a majority of its surface.

Though there is no "default" lighting setup, you can mix and match lights to produce a range of functional and exciting visual styles. In order to keep these lights in line, it's important to understand their role and get some ballpark figures for their intensity and the angle in which they shine.

Ambient lights will illuminate everything, everywhere, and you generally want to keep them at a lower value—a cool blue is common. (Don't use black unless you're making a horror game!) Sometimes, this light is a separate object you place in the scene; sometimes, it's a single scene setting (like in Unity). In overcast scenes, these can be your core lighting method, but they can also wash things out and make the scene look dull. The lower the value on your ambient, the more interesting shadows and lighting in general you'll have in your scene.

Your main light is the primary light source and generally shines in at a downward angle with a slight yellow tinge representing sunlight. If your game takes place indoors, it could be iridescent light. Generally speaking, the two lights you really want working in harmony first are your ambient light and main light' other lights will act as accents.

Rim lights shine more or less directly at the camera, with a slight rotation to give the edge of an object a bright colorful highlight. We use these in Flap Jack to give assets a navy blue glow from the ocean below and sky blue on top, assigning colors and intensities that correspond to both.

Some lighting setups work better than others, depending on what bells and whistles your game has access to, and these should be prime considerations when planning and creating scenes.

Left: Ambient Occlusion. Right: No Ambient Occlusion

If you have shadows, ambient occlusion, or light baking, an overcast lighting setup with the majority of the lighting coming through in the global ambient light can look great! But if you don't... things can end up looking very flat and dull.

That said, if you're working with more bare bones lighting, you're best off pumping the main light, fill lights, and rim lighting, while toning down your ambient light to make up for the lack of hardware enhancing effects.

Don't be discouraged if your game doesn't have fancy stuff like real-time ambient occlusion; learning to make games look decent without bells and whistles opens up your projects to a wider and booming gaming demographic on mobile phones and other devices!

Pretty vs. Play

As a 3D environment artist, you have three tasks: make things pretty, make things play well, and find a way to make the first two work together. Feel free to learn the first two in whichever order you wish.

If you consider yourself more of an artist, then spend some time learning to compose things in visually appealing ways. Attack scenes with an eye for color, with composition, with slick looking assets. Tweak bloom settings, adjust fog values, find all the ways you can to inject more knobs and color depth and artistry and expression into your scene!

If you gravitate more towards design, then put visuals on the back burner. Explore the space with collision volumes, terrain objects, power up placements, enemy spawn locations... whatever it is that makes your vision of a game playable.

Once you're ready to make a vibrant and playable scene, know this: it's a heck of a lot easier to make a playable scene pretty than it is to make a pretty scene playable. Start with block outs; if possible, figure out the types of collision volumes you need in play, then go in and create the visual elements afterwards that fill them up. (This is assuming your game has a focus on gameplay elements and not scenery.) Also, learn to throttle your efforts on either visuals or gameplay.

Many games pace themselves by having moments of grandeur, where the scope may radically change and you find yourself atop a massive ornate bridge with compelling landscapes in all directions. The gameplay may be slow during this moment, but it doesn't matter: the scenery is the star here. Some time later you may find yourself in a dull box-like room, but with enemies spawning from all locations! The simplicity of the environment allows for the gameplay to be the focus, so wave after wave of enemy can burst in without a hitch. Who cares that the environment is stale? Gameplay often thrives on simplicity.

Modularity: The Importance of Reusing Assets

Modularity in scene assets, and combining them in functional, visually appealing ways, is an important and deep topic that could take up its own article. Even if your game lacks exacting cityscapes, kitbashed sci-fi hallways, or other obviously modular things, you'd be wise to think of ways to reuse your assets to create fast methods for quickly populating your scenes.

In the above image, I've positioned some rock pieces to create a larger, more interesting assortment of geometry. It can be rotated 180 degrees for a secondary piece of level geo, and its 2D collision aspects will still hold up. It's often best not to add too many detail elements to these modular objects, as it can start to become obvious that assets are being reused extensively. Later polish passes on the zone can add more diversified, unique detailing.

Telling Your Story Through Your Environment

Your levels will tell a story. Whether your game tells an epic story of a wandering adventurer saving the universe, or an action game where as a hobo you violate people for street change, it doesn't change that.

The Flash game Hobo: a rich narrative of the common street dweller rising above his class lines.

For a great example of how story is developed through ambient styling in environment, watch any Pixar movie and spend your viewing time thinking about how the story is amplified by artistic changes in the color and tone of lighting and environments. Even the shapes of objects, their roundness and softness, are augmented to deliver a specific mood. It's striking how similar the progression of games and other mediums correlate; some things in story telling are universal.

Which of these images do you think represents the beginning of Flap Jack's story, and which might represent a more tremulous time in its narrative?

The visual stylings of your levels are an important factor of how players perceive themselves within the progression of your game's story. We identify the image on the top as the beginning of the story because we have been conditioned by games and other media that calm, bright, vibrant, blue and green areas are beginner areas where you can expect peace and serenity in the mechanics of a given universe, where there's no danger: a safe place to become enriched in something you aren't yet familiar with.

Gamers can identify rises in difficulty and change their expectations based on surroundings. If there is a point in the game where you are intentionally planning on ramping up the difficulty—putting in a boss fight, changing levels, or what have you—it would be a good idea to alter the environment to suit the difficulty. It's not just a great visual cue to help the player understand what's going on in the game; it feels right, and gives the experience of your game a visual tempo that aligns with play for a fully cohesive experience.

Finishing Touches: Tweaking Settings and Making Adjustments

If you're totally new to 3D environments, don't sweat polish for a while. Like technical limitations, learning to polish a scene will come with time, so make mistakes and make them fast. But if you want to put a stamp on a scene, and call it done, you're going to have to spend 90% of your time on what you thought the last 10% of the work was going to be, just like the rest of the team.

There's a popular saying: "games are never finished". It could be argued, probably more than most mediums, that there is no perfect game, and much of that comes from our clunky and ever changing graphical fidelity. The more graphics improve, the harder it becomes to reach the current benchmark. There are so many layers that can be refined over time: lighting, textures, materials, topology, composition, collision volumes, and more. Does your game look great at run time? Did you spend months putting finishing touches on it? Great! Now do it again for other detail levels!

A designer's job is never done. "Look over there! You cloned an asset and forgot to slightly offset the rotation and scale of its clone." But, in order to be competitive, you must polish to a high level of shine. A team capable of bringing their game to the finish line isn't going to stand for slight errors in any aspect of the title—not code, not sound, and not graphics. Keep pushing your scene until every texture seam is gone, until every unpleasant intersection of geometry is eliminated, and, most importantly, until it's fun!