Tuesday, September 25, 2018

Banging the 3D door #1

Why not just post something about, I don't know, making games? Now so many years later and not too many posts further lately, "making games" sounds a bit pretentious, and yeah, let's say I've been very busy. Work, work, a new house, and working more for that new house, et cetera. But honestly, also for Tower22, a little bit at least. As promised six hundred years ago, I'm still working on that playable (short) demo. And that mainly means adding game-code and "props". Textures, sounds, 3D models, animations, et cetera.

And being busy and not being a qualified artist, it takes time to generate "decent" stuff. Then again, one learns-by-doing, isn't that right? So, I just described how I created yet another door. A door? Really? Yes, a door. A somewhat spooky one, if I may say. Now if you created dozens of 3D doors already, I guess you can fast forward to a future post. But if you are new to modeling, texturing, or just curious how an unexperienced programmer would do such a thing in his game, enjoy! I'll split this in 3 posts. Easier to digest.


STEP 0 - The idea
Making a door sounds dull, but in this particular case it has to contribute to a certain horror-climax. Nothing too fancy modeling-wise, but a one-in-a-kind door design-wise nonetheless. A good idea is the soul of every asset. After all, we're not building a The Sims generic-stuff expansion pack here - which is fine for The Sims, but not for a horror setting. So, what we got here?
Well girls... That's... a dark corridor. Does it actually matter what type of door you put here? You don't see shit anyway. Well, from a lazy perspective, yes that is true. We may just as well put cardboard. But where do scared gamers go to? To the light. The desk on the right would be your first stop. Next goal would be the chamber behind this corridor. But if you can't even see it, players may miss it. Erh... adding a lamp maybe? No no no. Horror game, remember? The door needs to attract your attention, but has to remain scary as well. Well, you could create a bright red door at the end of the corridor that pops out, but, I decided to do it like this:
 

This industrial sci-fi alien jail -or whatever- door shines some light, but without really illuminating the corridor (I increased the levels a little bit here to make it more visible for the photo). And these glory holes are multi-functional: you can peek into the (more horrific) room behind it, but only a little bit. And of course, the door "is locked from the other side". In other words, player needs to solve a puzzle in this dark corridor.

See? Doors don't have to be boring. This one actually plays a little role in the script. Now that we have an idea, we can model it. Oh, and don't be ashamed if your idea changes sixty times while doing the model. Actually I wanted to create a dishwasher, but ended up making a rusty door. Oh, and before going to the 3D model part, note the door is not perfectly rectangular and has a "Diaphragm", to spice up the modelling challenge a bit.


STEP 1 - The 3D mesh
Enough ideas, time to sweat. Let me just assume you never created a 3D-thing before. Where to start? Well, just look at a door, and you should notice it is made of 2 parts. Or 3 actually; a stationary frame, a knob or handle, and the door "plate" itself. We'll be doing the same, though in this case the handle can't rotate or move relative to the door, so we're limited to just 2 objects: the frame and the door. I'll be putting both in the same (Lightwave) model file & let them share the same texture, though in a later stadium they are imported as 2 separate things into Tower22, but that's not a concern now.

1.A The Cube
Like stars are born in gas clouds, most 3D objects are born in primitive (mathematic) shapes. Planes, spheres, cylinders, cubes and occasionally a donut. Now when you were planning to make a crocodile, a cube is probably not the first thing that pops into your mind. But "man-made" stuff on the other hand is all about primitive shapes, 90-degree corners and symmetry. Just look around. The table you're sitting at? Your table, kitchen counters, bed, dressers - cubes, cubes, cubes! Sure some are rounded, softened or bended a bit, but essentially your life is just one big cube. Table? 4 cubes or cylinders as pegs, flattened cube on top. Or disc, if you happen to be king Arthur sitting at his round table. Now you guess what the basic shapes of a door (or its frame) would be...

1.B Think like a carpenter

If you ever crafted a REAL door -or any other piece-of-house- it should make common sense that the door has to FIT. So measure up the width and height. Or, use a reference model like I did in the picture above: that ugly thing is a piece of wall where the door shall be placed. And now that you're at it, you should also start thinking about how the door opens. Does it rotate? Slide? Now games don't have to be physically correct, thank God, but would suck your door bangs right through the wall, right? Just, use your head a little bit, will you?

And... talking about thinking + games & doors, it's probably a good idea to use some universal dimensions. So you can re-use your door again and again. Obviously I didn't think straight, as the diagonal corner isn't exactly a common thing in human door design. Speaking of which, let's show the first actual model steps:




So in Lightwave - a not so well known 3D modelling tool, but the only tool I happen to know a bit properly- I inserted a box, and rescaled it to roughly fit in that door hole - thus made it slightly smaller, few inches space on each side. Not shown here, but in Lightwave you can work with layers, so that allows to break up your model in smaller pieces, or to have a background layer that can be used for referencing.

1.C Reshape your vertices
Very typical for most 3D modeller software, is the 4-perspective view. Three windows are used to see & edit the model from the top (or bottom), from its side, and the front. The 4th 3D perspective is not so useful for crafting itself, but gives you a nice preview all the time.

Now by default, a cube or box wouldn't have the right shape. Asides from moving/rotating or scaling the entire box-object, software like this typically allows to select & drag edges, faces or vertices. Say what? If you paid attention at the kindergarten, you should know a cube has 6 sides, also known as "faces". You should also know that a cube has 8 corners, also known as "vertices" (or is it vertexes? whatever). And that those lines that connect 2 vertices are called "edges". Well, you can select one or more at a time, then move/rotate/scale them to customize your boring box.

So a 3D model is essentially a list of vertices (= XYZ coordinates), and a list of polygons, where a polygon is a reference to two, three or more vertices. In games, all these shapes are triangulated, which means each cube face would actually become 2 triangles. But in editing software, it's usually possible to work with quads (4-point polygons) or even N-polygons.

1.D Cut
Looking up front, a cube only has 4 points. If it weren't for that stupid corner, that's fine for a normal door, but here I had to generate more "corners" to move. In Lightwave, you can slice (or "knife" as they call it) your objects in multiple sections. This will split polygons in half, and generate extra edges/vertices which can then be moved.

About modelling that crocodile... You *could* slice (or subdivide) that cube into thousands of sub-faces, then move each point manually and shape a crocodile... But before going that route, I would advise you to grab a hump of clay and download Sculptris. You may have heard of ZBrush (Sculptris older brother). If not, Google it and you will see loads of awesome pictures. But all these pictures have one thing in common: organic shapes. Character modelling and organic shapes in general is quite a different process than making man-made stuff like this door. Like a carpenter's talent is not making statues & a sculptor artist should probably not make your window-frames. Lightwave is not the best tool for making crocodiles. ZBrush is not the best tool for making doors and tables. Just to warn you before buying the wrong tools.


1.E Cookie Cutter
Now that's... a nice cube. But not quite yet a door, is it? As said, In Engine22 moveable stuff usually

has an anchor, a (static) parent object. A doorframe in this case. It's easy to think of a door frame as
3 or 4 sticks (cubes) as well. But here is a more elegant way: Boolean operations. That's difficult slang for a cookie cutter. The idea is that you create a secondary object -on a different layer- and punch a hole with it. So I just copied the previous door-"cube", pasted it on another layer, upsized it a little bit, then punched the smaller original door-cube through it:
 

There are also Boolean operations to merge, or intersect 2 objects. Quite useful to create a clean model, instead of stacking cubes everywhere. Only too bad this technique requires a bit more force in reality when creating a new window in your house.
 
1.F Bender
How about the handle? Doesn't seem like a cube to me, pal. No, but it's a cylinder. A bended one. Now I'm not sure if this is the best way to do it, but what I usually do, is making a "pipe", then again slice it up a few times at the joints. Besides dragging vertices, you could also select a group of vertices or faces, and rotate them. Slice by slice. Oh, I should mention, in my (old) Lightwave at least, its a good idea to UV-map the pipe BEFORE bending it, but more about that later.
If you think about it, the hole process makes sense. When we make machines, we don't get complete ladders and nicely curved plates either, but primitive shapes instead. Plates, pipes, U or H shaped beams, et cetera. And some handy dude or robot has to cut, bend, and weld.


1.G More Details

I won't describe every boring detail of this rather simple door in great detail. But to name a few things: I added a few more (flattened) cubes as plates on the door, and 5-sided cylinders as bolts. Since this model is supposed to run in a game, always keep an eye on your polycount. True, modern video-cards can consume quite an awful lot, but still. Its good practice to remove backfaces you can never see anyway, and details like the bolts I just mentioned... you could create a 30-sided cylinder (= 160 triangles for each bolt), or a 6, 5 or even less sided cylinder. Or... remove the entire bolt as 3D geometry, and paint it on top in it's texture. Sure its flat then, but if its just a small shape, you'll hardly notice.

Oh, and of course, don't forget about the hinges, THE HINGES! (which could be, surprise, low-res cylinders). I'm saying that because it's those small details that make the difference between a flat plate and a real door. And if you don't have a clue how to model these hinges... How about standing up for one moment, and have a look at your own door? Yes you Can! It sounds silly, but actually I learned a fair bit of details and basic construction principles, as I modelled a preview of our new house. You soon find out what is easy, difficult, or just impossible to make. Turned out the floating roof didn't work. Next time your mom & dad complain you're spending too much time on video-game nonsense, just tell them your studying to become an architect.


1.H The Peephole
Whatever. But how about the window holes in the door? Think about your training, wax on, wax of, cookie cutter with cylinder. I punched a couple of "circular" holes in the door. I quote that, because in 3D, using triangles and vertices, there is no such thing as a perfect circle. Octagons and hexagons are more like it. Note that the same cylinder you used for punching, can be thinned and function as a window. Because also transparent stuff like glass still requires solid polygons in the end. I used a "Bevel" tool to generate several smaller inner-circles on the glass-cylinders, and moved them back and forth to create a ship-window. Add some (hexagon) nuts on the border, and yeah, that feels about right.

Now the grand finale, the part that got me thinking for a moment what to grab from the toolbox; the diaphragm. Now the door has sort of an alien feel, as if eyes are implemented in it. A diaphragm adds some extra strength to that effect, I think. Or maybe this is just a very modern art door that everyone will have somewhere in 2027, who shall say.

But how to model a diafragma? What basic shapes to use? Before going there, I have to mention that you could just as well create another flat disc, punch a hole in it, then DRAW lines on it as if it was a diafragma. Rather than modelling the actual geometry. That's fine, but keep in mind you'll be looking from really up close through that peephole. So your texture should be high-res as well, or it will look poopy. That being said, I found the diaphragm mechanics quite ingenious. When stuff is old, I ought to think it can't be that delicate, but there were some smart guys amongst our grand-grandpa's! Fortunately our 3D model doesn't have to work mechanically correct.
Instead of using a primitive cube, I made one of those "teeth" polygons by hand, point by point. As you can see, it can be handy to have a background picture, as guidance. A flat polygon can be extruded to give it some depth, if you like. Next, good old Copy-Paste allows to duplicate and rotate each tooth. Finally, the teeth had to be rotated a bit inwards, creating some overlap. And that requires some height offsetting and/or tilting as well of course. 

Keep in mind you can do this in a separate layer, so you won't be bothered by other 3D crap. 3D models can become a mess very quickly when multiple shapes overlap each other in your Front/Top/Side views. Work in layers when possible, merge later. Think as if you were creating that diaphragm on a separate table, then pick it up and place it inside (=move/rotate/scale the object) the peephole.


Well friends, that makes our UNTEXTURED mesh. If you didn't get or read all the steps - no problemo. Just as long you can recognize all the primitive shapes in the picture above and know how to model each of those individually, you'll be fine Daniel San.

Next time in PART-2: Making the UV map & Texturing (with Substance Painter)