<HTML>

  <title>loonygames' Painting on Polygons</title>
<body bgcolor="#FEFFEC" link="#0000CC" vlink="#000000">
<div align="CENTER">
  <div align="CENTER">
    <center>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2373963192914918";
/* 468x60 */
google_ad_slot = "3417104156";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
  </div>
  <div align="CENTER">
    <table border="0" width="100%">
      <tr> 
        <td width="261" height="105"><img src="../../images/next_logo_sml.jpg" width="251" height="94" usemap="#map" border="0"> 
        </td>
        <td width="92" height="105" align="LEFT" valign="MIDDLE"> 
          <p><font face="Arial, Helvetica, sans-serif" size="-1">- <a href="../index.html">Contents</a><br>
- <a href="../../../about.1">About</a><br>
            - <a href="../../../submissions/index.html">Submissions</a><br>
            - <a href="../../../feedback.1">Feedback</a><br>
            - <a href="../../archives/index.html">Archives</a></font></p>
        </td>
      </tr>
    </table>
  </div>
  <table border="0" width="100%" align="CENTER">
    <tr> 
      <td width="32%" align="LEFT" valign="TOP"> 
        <table border="0" width="190">
          <tr> 
            <td height="1194" align="LEFT" valign="TOP"> 
              <p><font color="#0000FF"><b><font face="Arial, Helvetica, sans-serif" color="#0000CC">volume 
                1, issue 33</font></b></font></p>
              <p><font color="#0000FF"><b><font face="Arial, Helvetica, sans-serif" color="#0000CC"> 
                </font></b></font></p>
              <p>  <p><font face="Courier New, Courier, mono"><b><font color="#339900" face="Arial, Helvetica, sans-serif">Today 
                in loonygames:</font></b></font></p>

<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1">New!!</font><font face="Arial, Helvetica, sans-serif" size="2"> The Archives have been cleaned up, fead links fixed, and printable versions restored! Also, don't miss the new comments <a href="../../../index.html">on the front page</a>!</font></p>
              
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../2.15/feat/index.html" target="">Livin' 
  With The Sims</a></font><font face="Arial, Helvetica, sans-serif" size="2">: 
  theAntiELVIS explores the wild and wacky world that is Will Wright's <b>The Sims</b>, 
  asking the inevitable quesiton, &quot;is <b>The Sims</b> the first step toward a virtual 
  life where everyone is Swedish?&quot;</font></p>
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../2.15/pixel/index.html" target="">Pixel 
  Obscura</a></font><font face="Arial, Helvetica, sans-serif" size="2">: Josh 
  Vasquez on <b>Omikron: The Nomad Soul</b>.</font></p>
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../rl/index.html" target="">Real 
  Life</a></font>: <font face="Arial, Helvetica, sans-serif"> <font size="-1">Check 
  out our newest comic strip, Real Life! Updated daily!</font></font></p>
<P><font color="#000000" face="Arial, Helvetica, sans-serif" size="-1"><a href="../../uf.1" target="">User 
  Friendly</a></font>: <font face="Arial, Helvetica, sans-serif"> <font size="-1">Updated 
  daily!</font></font></p>


</p>
              
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Related 
                Links:</font></b></font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.6/index.html">DRAW 
                Partner!</a>: Chris Buecheler's article on games and 2D art.</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.26/feat/index.html">Two 
                Programs, Two Dimensions</a>: Rick Grossenbacher's tutorial on 
                using <b>Photoshop</b> and <b>Illustrator</b> to create original 
                2D images.</font></p>
              
              
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Feedback:</font></b></font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1">You've got 
                an opinion...voice it! Drop a line to our <a href="../../../feedback.1">Feedback</a> 
                column...you could end up with a free T-Shirt!</font></p>
              <p><font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Random 
                Feature :</font></b></font></p>
               
<p align="CENTER"><img src="../../images/thumbs/doom.gif" width="115" height="91" align="MIDDLE"></p><p><font face="Arial, Helvetica, sans-serif" size="-1"><a href="../../1.16/feat/index.html">5 Years of Doom!</a>: Last year, on the 5th anniversary of Doom, we took a look back at how the industry has changed in its wake.</font></p>

              <form method="get" action="http://www.google.com/custom" name="">
                <font face="Arial, Helvetica, sans-serif" size="-1"><b><font color="#339900">Search 
                the Archives!</font></b></font> 
               
                 <INPUT TYPE=text name=q size=12 maxlength=255 value="">
 <INPUT type=submit name=sa VALUE="Google Search">
 <INPUT type=hidden name=cof 
VALUE="LW:216;L:http:/home/loonygames/loony.timedoctor.org/content/images/logo1.jpg;LH:55;AH:center;S:http://www.loonygames.com;AWFID:13a298c7abe84fd0;">
<input type=hidden name=domains value="loonygames.com"> 
<input type=hidden name=sitesearch value="loonygames.com">               
</div>
              </form>

            </td>
          </tr>
        </table>
      </td>
      <td width="62%" align="LEFT" valign="TOP"> 
        <p align="LEFT"><font face="Arial, Helvetica, sans-serif" color="#0022A8"><b><a target="" href="../../corner/index.html"><font size="-1">Painting 
          on Polygons</font></a><font size="-1">:</font></b></font><font face="Arial, Helvetica, sans-serif" size="+3" color="#0022A8"><br>
          Creating A Space Scene <font size="+1">(part 1)</font></font></p>
        <p align="right"><font color="#804000"><b><font face="Arial, Helvetica, sans-serif">By 
          Rick "<a href="mailto:flat@iserv.net">Flatness</a>" Grossenbacher<br>
          </font></b></font><b><font face="Arial, Helvetica, sans-serif" size="-1"></font></b></p>
        <p align="right">&nbsp;</p>
        <br>
        <p><font face="Arial, Helvetica, sans-serif">I’m going to get more into 
          making seamless textures in a future article where it’s much more critical 
          on flat surfaces.</font>
        <p><font face="Arial, Helvetica, sans-serif">The seams are taken care 
          of, so now I’m going to use the <i>Offset</i> filter to set it back 
          to the position it was originally at. Step 1 of the 6 is done, now on 
          to step 2.</font></p>
        <p>&nbsp;</p>
        <p><font face="Arial, Helvetica, sans-serif"><b><u>STEP 2</u>: Create 
          a sphere primitive in 3-D Studio MAX</b></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Open up 3-D Studio MAX and 
          create a sphere. My radius was about 53 and I put plenty of segments 
          in it, 42. You’ll want a lot of segments for obvious reasons.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="sphere.gif" width="261" height="242"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Notice that I tilted the 

          sphere a bit. It makes for a more interesting composition.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Done. Now on to step 3.</font></p>
        <p>&nbsp;</p>
        <p><font face="Arial, Helvetica, sans-serif"><b><u>STEP 3</u>: Lights 
          need to be placed in the scene</b></font></p>
        <p><font face="Arial, Helvetica, sans-serif">For me, getting the lighting 
          <i>just the way I want</i> <i>it</i> in MAX is the most difficult part 
          of the program. It’s easy to visualize how I want it in my head, but 
          getting it that way is a different story. Ugh, It can get frustrating. 
          You will probably have to do several test renders to get it positioned 
          correctly. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">For our space scene, we need 
          a main source of light -- a nearby sun. To simulate this, in the <i>Top 
          Viewport</i>, create a <i>Target Directional Light</i> pointing straight 
          into the planet.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="light1.gif" width="410" height="312"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">In the <i>General Parameters</i>, 
          set the following settings for the <i>Directional Light</i>:</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Multiplier: 2.5 (we want 
          that baby bright)</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Contrast: 20 (we also want 
          some pretty contrasty, hard light).</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Now, for the ambiently lighted 
          side of the planet. That is kind of a contradiction in terms, actually. 
          There really isn’t such a thing as ambient lighting in space, unless 
          you are talking about reflections from planets, nebulas, etc. Anyway, 
          I won’t even bother going into the topic about lighting properties in 
          space. Let’s just keep going and ask questions later.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Unless you want the other 
          side of the planet to be pitch black, create a second <i>Target Directional 
          Light</i> as shown in the figure.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="light2.gif" width="412" height="296"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">The settings for this side 
          of the planet are <b>much</b> different:</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Multiplier: 0.335 (pretty 
          dim)</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Contrast: 0.0 (we want that 
          lighting <i>very</i> soft)</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Here is what the lights should 
          look approximately like from the <i>Front Viewport</i> (don’t worry 
          about the grid, I just left that in to give you an idea on where things 
          are at -- the grid doesn’t serve any real purpose):</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="light3.gif" width="409" height="298"></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Notice how both lights are 
          pointing downward on the planet.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Ok, render it, and if you 
          set it up the same as mine, it will look about like this.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><img src="light4.jpg" width="198" height="200"></font></p>
        <p>&nbsp;</p>
        <p><font face="Arial, Helvetica, sans-serif"><b><u>STEP 4</u>: The bitmap 
          needs to be imported into MAX and made into a material</b></font></p>
        <p><font face="Arial, Helvetica, sans-serif">I decided to make mine into 
          a <i>Raytrace</i> <i>material</i>. It’s definitely the most powerful 
          material in MAX, but if you aren’t comfortable with that type of material, 
          or if you are using an earlier version of MAX that doesn’t support a 
          <i>Raytrace</i> <i>material</i>, don’t worry, a <i>Standard</i> <i>material</i> 
          will work fine. I’ll let you know what you need to adjust for as we 
          go.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">1. Open up the <i>Material 
          Editor</i>.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">2. Pick your material type 
          (ie. <i>Standard</i> or <i>Raytrace</i>).</font></p>
        <p><font face="Arial, Helvetica, sans-serif">3. In the <i>Maps</i> section, 
          Check the <i>Diffuse</i> box.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">4. Click the <i>Map</i> slot 
          next to <i>Diffuse</i> and load in your bitmap.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">5. Check the <i>Bump</i> 
          box. (one note, if you are using the <i>Raytrace material</i>, the bump 
          slot isn’t in the <i>Maps</i> section. It’s in the <i>Basic Parameters</i> 
          section. They’ve moved it).</font></p>
        <p><font face="Arial, Helvetica, sans-serif">6. Drag your bitmap name 
          from the <i>Diffuse</i> slot into the <i>Bump</i> slot 5. Set the <i>Bump</i> 
          amount to 40.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">7. In the <i>Basic Parameters</i> 
          section, set the <i>Shininess</i> to 45, and the <i>Shininess</i> <i>Strength</i> 
          to 15.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">8. Select the sphere object 
          (our planet) if it isn’t already.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">9. Click the <i>Assign Material 
          to Selection</i> button in the <i>Materials Editor</i>.</font></p>
        <p>&nbsp;</p>
        <p><font face="Arial, Helvetica, sans-serif"><b><u>STEP 5</u>: Mapping 
          coordinates need to be set/tweaked</b></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Actually, there were already 
          mapping coordinates generated when we created the sphere, but we need 
          to do some adjusting, so:</font></p>
        <p><font face="Arial, Helvetica, sans-serif">1. Click the <i>Modify</i> 
          tab.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">2. Apply a <i>UVW Map modifier</i> 
          to the sphere.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">3. Set the <i>Map Type</i> 
          to <i>Spherical</i>. </font></p>
        <p><font face="Arial, Helvetica, sans-serif">4. In the <i>Alignment</i> 
          section, press the <i>Fit</i> button to make sure the mapping icon fits 
          the sphere.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">5. Press the <i>Sub-Object</i> 
          button so that the <i>Gizmo</i> turns yellow.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">6. Rotate the <i>Gizmo</i> 
          so the map looks cool on the sphere. You will probably need to do a 
          series of test renders so you can get the map to look just the way you 
          want it. Or you may want to have your map shown in your viewport as 
          a guide. Or better yet, you may want to do both (that’s what I did). 
          </font></p>
        <p><font face="Arial, Helvetica, sans-serif"><b><u>STEP 6</u>: Render 
          the planet.</b></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Go ahead and render your 
          planet when you feel the mapping is about how you want it. Here is what 
          mine looked like.</font></p>
        <p align="center"><a href="planet1big.jpg"><img src="planet1.jpg" width="112" height="96" border="1"></a></p>
        <p><font face="Arial, Helvetica, sans-serif"><i>Click the thumbnail to 
          see a larger image.</i></font></p>
        <p><font face="Arial, Helvetica, sans-serif">To see it more clearly, bring 
          this image into Photoshop and press the ‘<b>f</b>’ key a couple of times 
          to set the screen to a black background, then press the ‘<b>tab</b>’ 
          key to hide your menus. I very much recommend doing this because it 
          is a pain to see a dark image in a web-browser.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">When you are looking at the 
          planet, notice the little bumps on the surface -- that was from our 
          bump-mapping that we had set. They are most visibly seen at the point 
          where light and darkness meet.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">Also, notice how the bump-mapping 
          is very consistent on the whole planet. That looks pretty crappy. We 
          need to fix that. Unfortunately, I’m out of time for this issue, so 
          we’ll have to get to that next time.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">For now, take a look at the 
          image below. It is about what we will have for a planet when we are 
          done, to give you an idea of what we are striving for.</font></p>
        <p align="center"><font face="Arial, Helvetica, sans-serif"><a href="planet2big.jpg"><img src="planet2.jpg" width="112" height="96" border="1"></a> 
          </font></p>
        <p><font face="Arial, Helvetica, sans-serif"><i>Click the thumbnail to 
          see a larger image.</i></font></p>
        <p><font face="Arial, Helvetica, sans-serif">Bring this big image into 
          Photoshop as well. When looking at this version, there are several things 
          to take notice of.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">1. The color is richer. I 
          probably should have done that with my bitmap to begin with, how was 
          I to know how it would look after I mapped it on the sphere and rendered 
          it? So, I just touched that up in Photoshop.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">2. There is a glow around 
          the planet. Even a slight glow gives it a hell of a lot more interest 
          and depth.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">3. The bump-mapping is <b>much</b> 
          better. Take a look at how it is bumped very prominently towards the 
          top and bottom, and quite smooth in the middle. It isn’t consistent 
          like the earlier version (I think it looks much more realistic this 
          way).</font></p>
        <p><font face="Arial, Helvetica, sans-serif">4. I threw some stars in. 
          I’ll get more into making stars later (and some better ones that I currently 
          have in there). </font></p>
        <p><font face="Arial, Helvetica, sans-serif">If you have trouble viewing 
          either of the planet images, you may need to bring up the brightness 
          of the image. It’s a real pain trying to compensate for everyone’s monitor. 
          They’re all different, so I had to find a common medium. Heck, you may 
          even need to darken them up a bit too -- particularly if you are viewing 
          on a Macintosh -- those monitors seem to be quite bright.</font></p>
        <p><font face="Arial, Helvetica, sans-serif">I’m out of time, but I’ll 
          tell you how all four of the above steps were accomplished as well as 
          some new stuff like a spiral galaxy and whatever else I can think of 
          in part two of this tutorial. If you have any questions on the tutorial 
          this far, feel free to e-mail me.</font></p>
        <p align="RIGHT">&nbsp;</p>
        <p align="RIGHT"><font face="Arial, Helvetica, sans-serif" size="-1"><i><font face="Arial, Helvetica, sans-serif" size="-1">- 
          Rick Grossenbacher is a professional 2D artist and graphic designer. 
          Amongst other things, he has worked on the upcoming title <b>Daikatana</b> 
          from Ion Storm, and done freelance work for RCA and Sony records.</font></i></font></p>
        <p align="RIGHT">&nbsp;</p>
        </td>
    </tr>
  </table>
  </div>
<map name="map">
  <area shape="rect" coords="32,38,226,76" href="../../../index.html" target="_self">
  <area shape="rect" coords="12,79,125,94" href="http://www.bluesnews.com" target="_self">
 
</map>
<table border="0" width="100%" align="CENTER">
  <tr> 
    <td> 
      <p><i><font face="Arial, Helvetica, sans-serif" size="-2"> <b>Credits:</b> 
        Painting on Polygons is &copy; 1999 Rick Grossenbacher. All other content 
        is &copy; 1999 <a target="_self" href="http://www.loonyboi.com">loonyboi 
        productions</a>. Unauthorized reproduction is strictly prohibited, so 
        don't do it, or we'll paint you white against a white background.</font></i></p>
    </td>
  </tr>
</table>
</HTML>
