lights.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  


  
  <title>lights.html</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>


<body style="background-color: rgb(248, 232, 158);">


<font face="tahoma" size="2">
<div align="left"><a href="editing_objects.html"><b><font size="4">Previous: Editing Objects</font></b></a></div>


<br>


<div align="right"><a href="textures_and_materials.html"><b><font size="4">Next: Textures and Materials</font></b></a></div>


<br>


<font face="tahoma" size="6"><strong>3. Lights</strong></font>
<img src="man_title_small.jpg" align="middle"><br>


<br>


<br>


Lighting in a scene is very important to create the right atmosphere
and mood, from the serene to the dramatic. It is beyond the scope of
this manual to discuss how to create these moods so I shall stick with
explaining the lighting modes possible in Art of Illusion and introduce
a few special effects and leave you to experiment further.<br>


<br>


There are 3 types of light in Art of Illusion: point, directional and
spot.  There also are variations on these whose properties are defined
by a procedure.<br>


<br>


<br>


<a name="point_lights"><strong><font color="#3300cc" size="5">3.1 Point Lights</font></strong></a><br>


<br>


This type of light emits light equally in all directions. Point lights
are created either by clicking on the light icon <img src="lights/light_icon.jpg"> and then clicking on the view
window to define its position, or by selecting <b>Object
-&gt; Create Primitive -&gt; Point Light</b> which brings
up a layout dialogue box allowing its position and orientation to be
accurately specified. Scaling has no effect on light objects.<br>


<br>


<table>


  <tbody>


    <tr>


      <td><font face="tahoma" size="2">On the
view windows, the point light looks like this:</font></td>


      <td><img src="lights/point_light.jpg"></td>


    </tr>


  
  </tbody>
</table>


<br>


Having created the point light, it can be edited either by
double-clicking on it in the Object List or by selecting it and
clicking on <b>Edit -&gt; Edit Object</b>.<br>


<br>


<table>


  <tbody>


    <tr>


      <td width="500"><font face="tahoma" size="2"> The
point light dialogue box is shown on the right:<br>


      <br>


Click on the <b>Color</b> box the alter the light's
colour. This brings up a dialogue allowing Hue/Saturation/Value (HSV),
Red/Green/Blue (RGB) or Hue/Lightness/Saturation (HLS) values to be set
to define the light colour.<br>


      <br>


The <b>Intensity</b>, I<sub>0</sub>, of the
light is simply how bright it is. By default, this set to 1. The
intensity of this light at any point in space, I(r), is a function of
this value, the <b>Decay Rate</b>, d, and the distance
from the light source, r as follows:<br>


      <br>


I(r)= I<sub>0</sub>/(1+dr+(dr)<sup>2</sup>)<br>


      <br>


Close to the light (r&lt;&lt;1/d) the intensity is
approximately constant. Far from the light (r&gt;&gt;1/d), it
follows an inverse square law (i.e. decays as 1/r^2) as shown in the
plot below for a range of
decay rates: </font></td>


      <td><img src="lights/point_light_dialogue.jpg"></td>


    </tr>


  
  </tbody>
</table>


<table>


  <tbody>


    <tr>


      <td><img src="lights/intensity.jpg"></td>


      <td width="500"><font face="tahoma" size="2">The <b>Intensity</b>
of a light source can be negative. In this case, it becomes a source of
'darkness' which,
although physically unrealistic, can be a useful effect.<br>


      <br>


The <b>Decay Rate </b>defines the drop off in the
intensity of the light per unit distance from the light. A high value
means that the light will be bright only very near to the light source,
while a small value means it only drops off a little. A value of 0
causes the light to be the same brightness everywhere.<br>


      <br>


      </font><font face="tahoma" size="2">The
      <b>Radius</b> defines the physical size of the light.
This only has an effect if Soft Shadows are switched on when rendering
with the <a href="rendering.html#raytrace">Raytracer</a>.
Increasing the radius has the effect of making shadows softer at their
edges.</font><br>


      </td>


    </tr>


  
  </tbody>
</table>


<br>


<br>


</font><font face="tahoma" size="2"><font face="tahoma" size="2">The <span style="font-weight: bold;">Type</span>
can be <span style="font-weight: bold;">Ambient,
Shadowless </span>or <span style="font-weight: bold;">Normal</span>.
&nbsp;<span style="font-weight: bold;">Normal </span>means
the light behaves realistically, <span style="font-weight: bold;">Ambient</span>
means the light comes from all directions and equally illuminates all
surfaces in a volume,&nbsp;<span style="font-weight: bold;">Shadowless</span>
means that the light illuminates surfaces as expected but does not cast
any shadows. &nbsp;The image below shows the difference for light with the same intensity and decay rate:<br>


<br>


<img style="width: 1001px; height: 270px;" alt="" src="lights/light_types.jpg"><br>


<br>


</font></font><font face="tahoma" size="2"><br>


<a name="directional"><strong><font color="#3300cc" size="5">3.2 Directional Lights</font></strong></a><br>


<br>


Directional lights are infinitely-wide beams of parallel light, i.e.
the light emitted by them travels in one direction only. The direction
is defined by the light's orientation. It is important to note that the
light travels in this direction from a point infinitely far away and
not from the position of the light source as illustrated in the figure
below. Because they are infinitely wide, any of the light sources shown
on the diagram could have been positioned at any point in space and
still have had the same effect; it is only their
orientation that matters.<br>


<table>


  <tbody>


    <tr>


      <td><img src="lights/directional_lights.jpg"></td>


      <td><font face="tahoma" size="2">Directional
lights are useful for simulating light sources which are far away, the
most obvious example being the sun. Light from the sun is virtually
parallel because of the tiny angle subtended even across the whole
Earth's diameter. Also intensity does not drop off over noticeably as
the Earth's diameter is small compared with the distance the light has
already travelled.<br>


      <br>


To create a directional light, either click on the light icon and then
click its position on a viewport and drag in the required direction (if
you do not drag, you will end up with a point light), or select <b>Object
-&gt; Create Primitive -&gt; Directional Light </b>and
enter the position and orientation as prompted.<br>


      </font></td>


    </tr>


  
  </tbody>
</table>


<br>


Directional lights are represented by this symbol in the view windows
with the light beams indicating the direction of the beam:<br>


<br>


<img src="lights/directional_light.jpg"><br>


<table>


  <tbody>


    <tr>


      <td><font face="tahoma" size="2">Because
of their inherent simplicity, the editing dialogue box brought up by
double-clicking the light on the Object List or via the <b>Edit</b>
menu, allows only 2 parameters to be specified: <br>


      <br>


      <b>Color</b> - allows the light's colour to be
specified with the usual 3 HSV/RGB/HLS bars.<br>


      <br>


      <b>Intensity</b> - allows the brightness to be
specified. This value is independent of position.<br>


      <br>


      <b>Angular Radius</b> defines the physical size of the light.
This only has an effect if Soft Shadows are switched on when rendering
with the <a href="rendering.html#raytrace">Raytracer</a>.
Increasing the angular radius has the effect of making shadows softer at their
edges.
<p>

    <span style="font-weight: bold;">Type</span>
is as defined above for point lights.<br>


      </font></td>


      <td><img src="lights/directional_light_dial.png"></td>


    </tr>


  
  </tbody>
</table>


<br>


<a name="spotlights"><strong><font color="#3300cc" size="5">3.3 SpotLights</font></strong></a><br>


<br>


Spotlights produce a cone of light. They are created by selecting <b>Object
-&gt; Create Primitive -&gt; Spot Light </b>and then
defining position and orientation. <br>


<table>


  <tbody>


    <tr>


      <td><font face="tahoma" size="2">Spotlights
look like this when displayed in the view windows:<br>


      <br>


This clearly shows the orientation of the emitted light beam. </font></td>


      <td><img src="lights/spotlight.jpg"></td>


    </tr>


  
  </tbody>
</table>


<br>


<br>


<table>


  <tbody>


    <tr>


      <td><font face="tahoma" size="2"> Once
created, spotlights can be edited either by double-clicking on the
light in the Object List or be selecting the object and clicking on
Edit -&gt; Edit Object. This brings up a dialogue box like this:<br>


      <br>


      <b>Cone angle</b> is the extent of the beam spread. A
small value produces a narrow beam.<br>


      <br>


      <b>Falloff rate</b> defines how quickly the light
fades as we
move radially outwards from the centre of the beam. &nbsp;A value
of 0
means there is no falloff and the light will therefore be of uniform
intensity right to the edge of the beam beyond which it will be zero.<br>


      <br>


      <b>Radius</b> is the physical size of the light which
affects rendering with soft shadows switched on (see <a href="rendering.html#raytrace">Rendering</a>).<br>


      <br>


      <b>Color, Intensity</b>, <b>Decay Rate</b>
and <span style="font-weight: bold;">Type</span>
are as defined for <a href="#point_lights">Point Lights</a>.<br>


      </font></td>


      <td><img src="lights/spotlight_dialogue.jpg"></td>


    </tr>


  
  </tbody>
</table>


<br>


The examples below show the effects of varying the cone angle and
falloff rate:<br>


<img src="lights/spotlight_examples.jpg"><br>


<br>


<b><font color="#0000ff">AIMING SPOTLIGHTS</font></b><br>


<br>


Often it is useful to have the ability to aim spotlights accurately in
order to illuminate a
particular part of the scene. Below are 2 helpful hints to allow this:<br>


<br>


<b>1. Using a SpotCam</b><br>


<br>


Create your spotlight via <b>Object -&gt; Create Primitive
-&gt; Spotlight</b> and accept the defaults. Now
create a camera and accept the defaults too. Both objects will be at
the same position and have the same orientation. Make the camera
('Spotcam') a child of the spotlight by dragging it up under the
spotlight in
the Object List (see <a href="layout.html#object%20list">here</a>
for more details) - now wherever you
drag and point the spotlight, the camera will follow. So, in order to
see where the spotlight is
pointing, change one of the view windows to show the Spotcam. Now
rotate and drag your spotlight - the Spotcam view shows what the
spotlight is illuminating - simply rotate the spotlight until
the part of the scene is visible in the Spotcam view - your spotlight
is now pointing in the right direction.<br>


<br>


<b>2. Using a Constraint Track</b><br>


<br>


Animation tracks have uses beyond just animation and here is one
example. Using this method, we will
be able to get the spotlight to point towards a particular object.<br>


<br>


Create the spotlight in the normal way. Click on <b>Animation
-&gt; Show Score</b>, select the spotlight
and go to <b>Animation -&gt; Add Track to Selected Objects
-&gt; Constraint</b>. Move your spotlight to
where you want it positioned. Now create a Null object which will be
the target for the spotlight
to aim at. Move the Null to the appropriate position in the scene. Now
select the spotlight and
double-click on the Constraint track on the score. In the dialogue that
appears set the Orientation
to 'Z Axis' and the box to the right of it to 'Faces Toward'. Then
click on the 'Set:' button
underneath and select the Null object from the list that appears. Click
'OK' and 'OK' again to
leave the dialogue and return to the scene. Your spotlight should now
point towards the Null. Now
all you have to do to point the light is to move the Null to wherever
you want to light to face - note
that the spotlight doesn't update in realtime when you move the null -
you need to advance the score to
effect the change.<br>


<br>


<br>


<a name="procedural"><strong><font color="#3300cc" size="5">3.4 Procedural Lights</font></strong></a><br>
<br>
The lights described above are defined by simple physical properties: their color,
their brightness, etc.  Sometimes you want something fancier.  What about a light
that gives out different colors in different directions?  Or one that projects
a picture onto a wall?  Or a light that produces bright and dark bands at
different distances from the light source?  You can do all of these with procedural
lights.
<p>
To create a procedural light, select <b>Object -&gt; Create Primitive -&gt;
Procedural Point Light </b> or <b>Object -&gt; Create Primitive -&gt; Procedural
Directional Light</b>.  The difference between the two is what direction the
light rays travel in.  For a point light, they travel outward from the location
of the light.  For a directional light, they are all parallel to each other.
<p>
Having created the light, it can be edited either by
double-clicking on it in the Object List or by selecting it and
clicking on <b>Edit -&gt; Edit Object</b>.  The window that appears will look
something like this:<p>
<table><tr><td><img src="lights/procedure_editor.png"></td><td><font face="tahoma" size="2">
This is a procedure editor.  The 'Color' and 'Intensity' boxes on the right
are the properties of the light at a point in space: its color and its intensity.
You get to define exactly how those properties should be calculated. You do this
by creating a mathematical procedure that takes the x, y, and z coordinates of a
point in space (defined in the light object's local coordinate system), and computes
the color and intensity at that point.  See the section on <a href="textures.html#proc_tex">
procedural textures</a> to learn how to create procedures.
<p>
Click the <b>Properties...</b> button to edit the light's other properties: its radius
(for a point light) or angular radius (for a directional light) and type.  These
have exactly the same meaning as for regular point and directional lights.
<p>
</font></td></tr></table>
<p>
For ordinary directional lights, it doesn't matter where you put the light in the
scene, because it produces the same light everywhere.  That isn't necessarily true for
procedural directional lights: you can create a procedure that makes the light color
and intensity vary with position.  In that case, it does matter where you put the light.
<p>
There are no "procedural spot lights", because you don't need them.  Just use a
procedural point light, then create a procedure that makes its brightness vary
with angle:<p>
<table><tr><td><img src="lights/procedural_spot.png">&nbsp;&nbsp;
<img src="lights/procedural_spot_preview.png"></td></tr></table>
<p>
Procedural lights are especially useful for creating 'non-physical' lighting effects
that could never be created by real lights.  This isn't realistic, of course,
but it can be very useful for artistic effect.
<p>
Be careful when using procedural lights with photon mapping (described
<a href="rendering.html#illumination">here</a>).  Photon mapping assumes a physically
accurate lighting model.  If you use it with a non-realistic procedural light,
the results can be unpredictable and usually are not what you want.
<br><br>

<a name="lighting effects"><strong><font color="#3300cc" size="5">3.5 Lighting Effects</font></strong></a><br>


<br>


<a name="realistic lighting"><strong><font color="#ff6633" size="4">3.5.1 Realistic Light Sources<br>


</font></strong></a>
<br>


Like most, if not all, 3D graphics packages, the light sources in Art
of Illusion are themselves
not actually visible. If you point the camera at a light source and
render the view, there will not
be a bright area where the light source is. Lights are only visible in
the way they interact with
objects around them. In most cases, this is useful as lights can be
positioned anywhere in the scene without having to worry about them
being visible as is the case in real life.<br>


<br>


Sometimes, however, it is desirable to replicate real life sources. To
simulate a realistic light
source requires 2 qualities: (i) the object needs to give out light
that reacts realistically with
its surroundings and (ii) the object needs to 'glow'. In real life,
these qualities are manifestations
of the same physical feature but they are quite different in 3D
graphics.<br>


<br>


<table>


  <tbody>


    <tr>


      <td width="500"><font face="tahoma" size="2">The
first thing to do is to create the object you want to represent the
light source. The image on the right
is an example of a 'bulb' which was created by applying the lathe tool
to a curve. The rendered image
shows the bulb 'turned off'.</font></td>


      <td><img src="lights/bulb_off.jpg"></td>


    </tr>


  
  </tbody>
</table>


<br>


<br>


<table>


  <tbody>


    <tr>


      <td width="500"><font face="tahoma" size="2">To
make it into a light source, we need to put a light source inside it.
The point light source is
the best type for this purpose. Having positioned the light in the
bulb, you will need to make the bulb
transparent so that the light can escape and, thus, interact with its
surroundings. Alter the transparency
in the <a href="textures.html">texture</a> to
achieve this.<br>


      <br>


The light will now shine out from the object but the object itself will
not 'glow' and so will not look realistic. To get this effect, add some
emissive colour to the object.
Alter the diffuse and emissive colours to get the right effect and make
sure the overall colour matches
that from the light. The image on the right shows the results of these
changes. <br>


      <br>


Note that 'soft shadows' had
to be switched on otherwise artefacts can appear when light sources are
placed inside objects.</font></td>


      <td><img src="lights/bulb_on2.jpg"></td>


    </tr>


  
  </tbody>
</table>


<br>


<table>


  <tbody>


    <tr>


      <td width="500"><font face="tahoma" size="2">Another
example of 'realistic' lighting is shown on the right. The 'lights' are
cylinders with point light
sources positioned within:</font></td>


      <td><img src="lights/tunnel.jpg"> </td>


    </tr>


  
  </tbody>
</table>


<br>


<br>


If you're rendering with <a href="rendering.html#glob_illum">Global
Illumination (GI)</a>, there is another
option; that is to use an emissive textured object to produce the
light. With GI, emissive textures actually
give out light and this may be suitable to avoid having to use
transparent objects/light sources. See <a href="textures.html#colour_scale">here</a> for more
details.<br>


<br>


<br>


<a name="cookies"><strong><font color="#ff6633" size="4">3.5.2 Slides, Cookies and Collimation<br>


</font></strong></a>
<br>


<br>


Although directional lights are simple, they are ideal for use in more
advanced lighting techniques. For example, a cucaloris or 'cookie' (a
sheet of card with holes cut in it) can be used to create artificial
light arising from off-screen objects. In the example below, a 'cookie'
was made in a graphics program as a simple binary image. When this is
used as a transparency image map (See <a href="textures.html#textures">Textures and Materials</a>)
in the set up below, only the cut-out shapes allow the light to pass
through. This sort of effect has been used in CGI movies for things
like leaf-dappled forests. The parallel quality of directional lights
means that the image shapes are preserved.<br>


<table>


  <tbody>


    <tr>


      <td><img src="lights/cookie_setup.jpg"><br>


      <i><font face="tahoma" size="1">perspective
view of set up for 'cookie' scene. The screen on the left has the
cookie image set for a transparency map<br>


and is projected onto right hand screen at which camera is pointing.</font></i></td>


      <td><img src="lights/cookie_psp.jpg"><br>


      <i><font face="tahoma" size="1">binary
image map created in 2D graphics program.</font></i></td>


    </tr>


  
  </tbody>
</table>


<img src="lights/cookie.jpg"><br>


<i><font face="tahoma" size="1">Resulting
image. Could be used for leaf-dappled shadows etc.</font></i>
<br>


<br>


The binary cookie image could be replaced by an transparent imagemap to
give a 'slide' projection.<br>


<br>


<br>


Collimation of light sources can also be used to good effect either
using geometric objects or through
the use of textures. The image below uses the lamp shade object to
effectively collimate the light source within it to simulate the
lighting from a lamp. <br>


<br>


<img src="lights/lamp2.jpg"><br>


<br>


The images below were made by putting light sources into a sphere which
was assigned a procedural texture that made small circular areas
transparent. The left image has one white light source inside
the sphere, whereas the right hand image has 3 light sources at
slightly different positions; red, green and blue. All images below
were rendered with 'soft shadows' on (see <a href="rendering.html#raytrace">Rendering</a>).<br>


<br>


<img src="lights/star-ball2.jpg">
<img src="lights/star-ball_colour2.jpg"><br>


<br>


<br>


<div align="left"><a href="editing_objects.html"><b><font size="4">Previous: Editing Objects</font></b></a></div>


<br>


<div align="right"><a href="textures_and_materials.html"><b><font size="4">Next: Textures and Materials</font></b></a></div>


<br>


<a href="contents.html#contents_top"><b><font size="4">Back to Contents</font></b></a><br>


</font>
</body>
</html>