csharp
/
XNAGameStudio
mirror of https://github.com/SimonDarksideJ/XNAGameStudio.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983
							<html xmlns:MSHelp="http://msdn.microsoft.com/mshelp" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:xanx="http://schemas.microsoft.com/developer/xanx/2005"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="save" content="history" /><title>Shader Series 3: Per-Pixel Lighting Sample</title>
<style><!--
/***********************************************************
 *             SCRIPT-SUPPORTING STYLES
 ***********************************************************/

/* Defines the userData cache persistence mechanism. */
.userDataStyle
{
	behavior: url(#default#userData);
}

/* Used to save the scroll bar position when navigating away from a page. */
div.saveHistory
{
	behavior: url(#default#saveHistory);
}

/* Formats the expand/collapse images for all collapsible regions. */
img.toggle
{
	border: 0;
	margin-right: 5;
}

/* Formats the Language filter drop-down image. */
img#languageFilterImage
{
	border: 0;
	margin-left: 0;
	vertical-align: middle;
}

/* Formats the Members Options filter drop-down image. */
img#membersOptionsFilterImage
{
	border: 0;
	margin-left: 0;
	vertical-align: middle;
}

/* Formats the Collapse All/Expand All images. */
img#toggleAllImage
{
	margin-left: 0;
	vertical-align: middle;
}

/* Supports XLinks */
MSHelp\:link
{
 	text-decoration: underline;
	color: #0000ff; 
	hoverColor: #3366ff;
	filterString: ;
}

body
	{
	background:	#FFFFFF;
	color: #000000;
	font-family:	Verdana;
	font-size: medium;
	font-style: normal;
	font-weight: normal;
	margin-top:	0;
	margin-bottom:	0;
	margin-left:	0;
	margin-right:	0;
	width:	100%;
	/*font-size: 110%;*/
	}

div.section
	{
	margin-left: 15px;
	}

div.hxnx5
	{
	margin-left: 1.5em;
	}

/* Font for all headings */	
h1, h2, h3, h4, h5, h6
	{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin-top: 18;
	margin-bottom: 8; 
	font-weight: bold;
	}
h1
	{
	font-size: 130%;
	color: #003399;
	}
div#scrollyes h1 /* Changes font size for full-scrolling topic */
	{
	font-size: 150%;
	}
h2
	{
	font-size: 122%;
	}
h3
	{
	font-size: 115%;
	margin-top: 9;
	margin-bottom: 4; 
	}
h4
	{
	font-size: 115%;
	margin-top: 9;
	margin-bottom: 4; 
	}
h5
	{
	font-size: 100%;
	margin-top: 9;
	margin-bottom: 4; 
	}
h6
	{
	font-size: 100%;
	margin-top: 9;
	margin-bottom: 4; 
	}

ul p, ol p, dl p
	{
	margin-left: 0em;
	}

p
	{
	margin-top: .6em;
	margin-bottom: .6em;
	}
	
td p
	{
	margin-top: 0.0em;
	margin-bottom: 0.6em;
	}

dd p
	{
	margin-top: 0.0em;
	margin-bottom: 0.6em;
	}

.image
	{
	text-align: center;
	}

dl
	{
	margin-top: 0em; 
	margin-bottom: 1.3em;
	}

dd
	{
	margin-bottom: 0em;
	margin-left: 1.5em;
	}

dl.glossary dd 
{
	margin-bottom: 0em;  
	margin-left: 1.5em; 
}

dt
	{
	margin-top: .6em;
	margin-bottom: 1;
	}

ul, ol
	{
	margin-top: 0.6em;
	margin-bottom: 0.6em; 	
	}
	
ol
	{
	margin-left: 2.5em; 	
	}	
	
ul
	{
	list-style-type: disc; 
	margin-left: 1.9em; 
	}

li
	{
	margin-bottom: 0.4em;
	}

ul ol, ol ol
	{
	list-style-type: lower-alpha;
	}

pre
	{
	margin-top: .6em;
	margin-bottom: .6em; 
	font: 105% Lucida, mono; 
	color: #000066;
	}

code
{
	font-family: Monospace, Courier New, Courier;
	font-size: 105%;
	color:	#000066;
}

table.userdata td 
	{
	background: #ffffff;
	background-color: #F5F5F5;
	border-color: #ffffff;
	border: none;
	}	
table.clsWarning
	{
	background: #ffffff;
	padding: 0px;
	margin: 0px;
	border: none;
	}
table.clsWarning td
	{
	padding: 0px;
	margin: 0px;
	background: #ffffff;
	vertical-align: middle;
	font-size: 70%;
	}

div#mainSection table
	{
	width: 95%;
	background: #ffffff;
	margin-top: 5px;
	margin-bottom: 5px;
	}

div#mainSection table th
	{ 
	padding: 5px 6px;
	background: #EFEFF7;
	text-align: left;
	font-size: 70%;
	vertical-align: bottom;
	border-bottom: 1px solid #C8CDDE;
	}
div#mainSection table td
	{ 
	padding: 5px 5px;
	background: #F7F7FF;
	vertical-align: top;
	font-size: 70%;
	border-bottom: 1px solid #D5D5D3;
	}

div#syntaxCodeBlocks table th
	{
	padding: 1px 6px;
	color: #000066;
	}

div#syntaxCodeBlocks table td
	{
	padding: 1px 5px;
	}

/* Applies to the running header text in the first row of the upper table in the
   non-scrolling header region. */
span#runningHeaderText
{
	color: #003399;
	font-size: 90%;
	padding-left: 13;
}

/* Applies to the topic title in the second row of the upper table in the
   non-scrolling header region. */
span#nsrTitle
{
	color: #003399;
	font-size: 120%;
	font-weight: 600;
	padding-left: 13;
}

/* Applies to everything below the non-scrolling header region. */
div#mainSection
{
	font-size: 70%;
	width: 100%;
}

/* Applies to everything below the non-scrolling header region, minus the footer. */
div#mainBody
{
	font-size: 90%;
	margin-left: 15;
	margin-top: 10;
	padding-bottom: 20;
}

/* Adds right padding for all blocks in mainBody */
div#mainBody p, div#mainBody ol, div#mainBody ul, div#mainBody dl
{
	padding-right: 5;
}

div#mainBody div.alert, div#mainBody div.code, div#mainBody div.tableSection
{
	width:98.9%;
}

div.alert p, div.code p
{
	margin-top:5;
	margin-bottom:8;
}

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
div#mainSection div.alert table
{
	border: 0;
}

div#mainSection div.alert table th
{
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 5;
	padding-right: 5;
}

div#mainSection div.alert table td
{
	padding-left: 5;
	padding-right: 5;
}

img.note
{
	border: 0;
	margin-left: 0;
	margin-right: 3;
}
/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - End Note Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/

/*- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Begin Non-scrolling Header Region Styles - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/
/* Applies to the entire non-scrolling header region. */
div#header
{
	background-color: #D4DFFF;
	padding-top:	0;
	padding-bottom:	0;
	padding-left:	0;
	padding-right:	0;
	width:	100%;
}

/* Applies to both tables in the non-scrolling header region. */
div#header table
{
	margin-top:	0;
	margin-bottom: 0;
	border-bottom-color: #C8CDDE;
	border-bottom-style: solid;
	border-bottom-width: 1;
	background: #D4DFFF;
	width:	100%;
}

/* Applies to cells in both tables in the non-scrolling header region. */
div#header table td
{
	color: #0000FF;
	font-size: 70%;
	padding-right: 20;
	padding-top: 1;
	padding-bottom: 1;
	border: none;
	background: #D4DFFF;
}

/* Applies to the last row in the upper table of the non-scrolling header region. Text 
   in this row includes See Also, Constructors, Methods, and Properties. */
div#header table tr#headerTableRow3 td
{
	padding-bottom: 2;
	padding-top: 5;
	padding-left: 15;
}

/* Applies to the lower table in the non-scrolling header region. Text in this table
   includes Collapse All/Expand All, Language Filter, and Members Options. */
div#header table#bottomTable
{
	border-top-color: #FFFFFF;
	border-top-style: solid;
	border-top-width: 1;
	text-align: left;
	padding-left: 15;
}


blockquote
	{
	margin-left: 3.8em;
	margin-right: 3.8em;
	margin-top: .6em;
	margin-bottom: .6em;
	}

sup
	{
	text-decoration: none;
	font-size: smaller; 
	}

a:link
	{
	color: #0000FF;
/*    font-weight: bold */
	}
	
a:visited
	{
	color: #0000AA;
/*    font-weight: bold	*/
	}
	
a:hover
	{
	color: #3366FF;
/*    font-weight: bold */
	}
	
.label
	{
	font-weight: bold; 
	margin-top: 1em;
	margin-left: -26px;
	}
	
.tl
	{
	margin-bottom: .75em; 
	}
	
.atl
	{
	padding-left: 1.5em;
	padding-bottom: .75em; 
	}
	
.cfe
	{
	font-weight: bold; 
	}
	
.mini
	{
	font-size: smaller;
	}
	
.dt
	{
	margin-bottom: -.6em; 
	}
	
.indent
	{
	margin-left: 1.9em; 
	margin-right: 1.9em;
	}

.product
	{
	text-align: right;
	color: #333333;
	font-size: smaller;
	font-style: italic;
	}

.buttonbarshade
	{
	position: relative;
	margin: 0;
	left: 0px;
	top: 2;
	width: 50%;
	height: 40px;
	}

.buttonbartable
	{
	position: absolute;
	margin: 0;
	padding:0;
	border:0;
	left:0px;
	top: 2;
	width: 100%;
	height: 40px;
	}

/* background color, font for header */ 
table.buttonbartable td, table.buttonbarshade td
	{
	background: #ffffff; /*#5177B8; #80C615;*/
	border-left: 0px solid #80C615;
	margin: 0;
	padding: 0px 0px 0px 0px;
	font-family: Impact, sans-serif;
	font-size: 14pt;
	}

table.buttonbartable td.button1
	{
	background: #5177B8; /*#80C615;*/;
	padding: 0;
	font-weight: bold;
	text-align: center;
	cursor: hand;
	}

table.buttonbartable td.button2
	{
	background: #5177B8; /*#80C615;*/;
	font-weight: bold;
	text-align: center;
	}

table.buttonbartable td.button3
	{
	background: #5177B8; /*#80C615;*/;
	font-weight: bold;
	text-align: center;
	}

table.buttonbartable td.runninghead
	{
	padding-left: 0px;
	font-style: italic;
	text-align: left;
	}

.version
	{
	text-align: left;
	color: #000000;
	margin-top: 3em;
	margin-left: -26px;
	font-size: smaller;
	font-style: italic;
	}

.lang, .ilang
	{
	color: #0000ff;
	font: normal 7pt Arial, Helvetica, sans-serif;
	}

div.langMenu
	{
	position: absolute;
	z-index: 1;
	width: 96pt;
	padding: 8pt;
	visibility: hidden;
	border: 1px solid #000000;
	background: #ffffd0;
	}

div.langMenu ul
	{
	padding-left: 2em;
	margin-left: 0;
	}

div.filtered
	{
	margin: 4pt 0 8pt -26px;
	padding: 4px 4px 8px 26px;
	width: 100%;
	border: 2px solid #aaaacc;
	background: #ffffff;
	}

div.filtered2
	{
	margin: 4pt 0 8pt -26px;
	padding: 4px 4px 8px 26px;
	width: 100%;
	border: none;
	background: #ffffff;
	}

div.filtered h1, div.filtered h2, div.filtered h3, div.filtered h4
	{
	margin-left: -22px;
	}

div.filtered span.lang
	{
	position: relative;
	left: -22px;
	}

div.reftip
	{
	position: absolute;
	z-index: 1;
	padding: 8pt;
	visibility: hidden;
	border: 1px solid #000000;
	background: #ffffd0;
	}

a.synParam
	{
	color: #0000FF;
	/*color: #3F7800;*/ 	
	/*color: #8DC54F;*/
	text-decoration: none;
    font-weight: normal;
	}

a.synParam:hover
	{
	text-decoration: underline;
    font-weight: normal;
	}

div.sapop
	{
	position: absolute;
	z-index: 1;
	left: 26px;
	width: 100%;
	padding: 10px 10px 10px 36px;
	visibility: hidden;
	border: 1px solid #000000;
	background: #ffffd0;
	}

div.footer
	{
	width: 100%;
	border: none;
	background: #ffffff;
	margin-top: 18pt;
	padding-bottom: 12pt;
	color: #0000FF;
	/*color: #228B22; */
	text-align: center;
	font-size: 76%;
	}

div.preliminary
	{
	margin-top: 8pt;
	padding-bottom: 12pt;
	color: #A0A0A0;
	}

/* A procedure section. eg. 'To create a file', 'To add a value' */
div.proc
    {
	margin-left: 0.5em; 
    }
     
/* The title of a 'procedure' section. */
div.proc h3
    {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 115%;
	margin-top: 1em;
	margin-bottom: 0.4em;
	margin-left: -0.5em; 
	color: #003399;
    }

div.proc ul
    {
    margin-left: 1.5em;
    }

div.proc ol
    {
    margin-left: 2.0em;
    }
      
.note
	{
	margin-left: 14pt;
	margin-right: 12pt;
	}

.indent1
	{
	margin-left: 12pt;
	}

.indent2
	{
	margin-left: 24pt;
	}

.indent3
	{
	margin-left: 36pt;
	}

p.proch
	{
	padding-left: 16px;
	}

p.proch img
	{
	position: relative; 
	vertical-align: top;
	left: -18px; 
	margin-right: -14px; 
	margin-bottom: -18px;
	}
	
div.clsPlatSpec
{
	background-color:#FFF8DC;
	border-style:solid;
	border-width:1pt 0pt 0pt 1pt;
	border-color:#ffE4C4;
	margin-top:0.6em;
	width:100%;
}


/* Applies to the language labels in the Language Filter drop-down list. */
.languageFilter
{
	color:	#0000FF;
	cursor:hand;
	text-decoration:underline;
	padding-bottom:4;
}

/* Dropdown areas */

#languageSpan {
	position: absolute;
	visibility: hidden;
	border-style: solid;
	border-width: 1px;
	border-color: #C8CDDE;
	background: #d4dfff;
	padding: 4px;
	font-size: 70%;
}

#membersOptionsSpan {
	position: absolute;
	visibility: hidden;
	border-style: solid;
	border-width: 1px;
	border-color: #C8CDDE;
	background: #d4dfff;
	padding: 4px;
	font-size: 70%;
}
--></style>

<xml>
<MSHelp:TOCTitle Title="Shader Series 3: Per-Pixel Lighting Sample" />
<MSHelp:RLTitle Title="Shader Series 3: Per-Pixel Lighting Sample" />
<MSHelp:Keyword Index="A" Term="O:Microsoft.Xna.PerPixelLighting" />
<MSHelp:Keyword Index="A" Term="e4731cef-1585-bb70-7970-4fac71ee8bf1" />
<MSHelp:Keyword Index="K" Term="Shader Series 3: Per-Pixel Lighting Sample" />

<MSHelp:Attr Name="AssetID" Value="e4731cef-1585-bb70-7970-4fac71ee8bf1" />
<MSHelp:Attr Name="Locale" Value="en-us" />
<MSHelp:Attr Name="CommunityContent" Value="1" />
<MSHelp:Attr Name="TopicType" Value="kbOrient" />
</xml>
</head><body><div id="mainSection"><div id="mainBody">
  <h1>Shader Series 3: Per-Pixel Lighting Sample</h1>

  <p>This sample explains how to move lighting calculations to the pixel shader for high-quality per-pixel lighting.  Additionally, this sample uses Phong reflection to approximate specular light, creating "highlights" on the object. Specular highlights are light that is reflected directly to a viewer and can be simulated through a number of techniques.</p>

  <div class="alert"><table cellspacing="0" cellpadding="0"><tr><th>Note </th></tr><tr><td>
    <ul>
      <li>This is the third sample in the Shader Series. Before you begin, you should be familiar with the content of the previous entries in the series, as well as the Shader Primer article.</li>
      <li>The code for this sample is similar to the VertexLighting Sample. Refer to the VertexLighting Sample and associated document for more information about this code.</li>
      <li>The models presented in this sample are the same used in the VertexLighting Sample.</li>
    </ul>
  </td></tr></table></div>

  <a id="ID2EZ" name="ID2EZ"> </a><h1 class="heading">Sample Controls</h1><div id="ID2EZ" class="hxnx1">
    
    <p>This sample uses the following keyboard and gamepad controls.</p>
    <table>
      <tr>
        <th>Action</th>
        <th>Keyboard control</th>
        <th>Gamepad control</th>
      </tr>
      <tr>
        <td>Rotate the camera</td>
        <td>W, A, S, and D</td>
        <td>Right analog D-pad</td>
      </tr>
      <tr>
        <td>Rotate the mesh</td>
        <td>UP ARROW, DOWN ARROW, LEFT ARROW, and RIGHT ARROW</td>
        <td>Left analog D-pad</td>
      </tr>
      <tr>
        <td>Zoom in</td>
        <td>Z</td>
        <td>
          <b>A</b>
        </td>
      </tr>
      <tr>
        <td>Zoom out</td>
        <td>X</td>
        <td>
          <b>B</b>
        </td>
      </tr>
      <tr>
        <td>Use a different technique to render the current 3D primitive</td>
        <td>SPACEBAR</td>
        <td>
          <b>Y</b>
        </td>
      </tr>
      <tr>
        <td>Display a different 3D primitive</td>
        <td>TAB</td>
        <td>
          <b>X</b>
        </td>
      </tr>
      <tr>
        <td>Change the specular power constant for the material</td>
        <td>* or /</td>
        <td>D-pad Left/Right</td>
      </tr>
      <tr>
        <td>Change the specular intensity constant for the material</td>
        <td>+ or -</td>
        <td>D-pad Up/Down</td>
      </tr>
      <tr>
        <td>Exit the sample</td>
        <td>ESC or ALT+F4</td>
        <td>
          <b>BACK</b>
        </td>
      </tr>
    </table>
  </div>


  <a id="ID2EME" name="ID2EME"> </a><h1 class="heading">Separating the Light Components</h1><div id="ID2EME" class="hxnx1">
    

    <p>In the classic fixed-function graphics pipeline, the color of a primitive via illumination is a function called the "Phong Reflectance Model."  This function can be written as:</p> 

<p>
  <b>Total Light = Ambient + Diffuse + Specular</b>
</p> 

<p>The Phong model also provides definitions for each of these components.</p>
    <ul>
      <li><b>Diffuse</b> (also called <i>Lambertian</i>) is the easiest to understand.  It is the light reflected by the object from a directional light source.  Diffuse light is easy to calculate from the light direction and the normal vector of the primitive at a given vertex or pixel.  The VertexLighting Sample (Shader Series 1) demonstrated how to compute diffuse lighting in the vertex shader.</li>
      <li><b>Ambient</b> is an approximation of scattered light in the scene.  Scattered light comes from the real-world property of <i>diffuse interflection</i>.  The light that leaves the surface of an object and enters your eye also bounces in all directions.  Some of this scattered light will be reflected off of other objects toward the viewer.  In this model, however, the scattered light is not directly modeled; instead, ambient light is added to all vertices or pixels in the scene uniformly.  While this is not mathematically accurate, it adds some color to vertices or pixels that do not receive any diffuse light, which is typically more realistic than no illumination at all.</li>
      <li><b>Specular</b> is a component of the Phong model that may be unfamiliar.  Specular reflectance can be thought of as "mirror-like" reflections, like the highlights you see in shiny substances such as glass and metal.  This component gives the viewer a better idea of the kind of material being rendered.  </li>
    </ul>    

    <p>The reality is that light does not actually separate nicely into these components and actually combines properties of all three into the light that you see reflected from real-world materials.  Shader programs give you the flexibility to add as much or as little accuracy as you would like.  It also allows you to tailor your lighting model to suit your 3D application’s visual style and performance requirements.</p>
  </div>

  <a id="ID2EPF" name="ID2EPF"> </a><h1 class="heading">Specular Component</h1><div id="ID2EPF" class="hxnx1">
    

    <p>The specular component is dependent on a new variable—the viewer's <i>aspect</i>—the angle between the direction of the viewer and the surface.  Specular light changes on a surface as a viewer's aspect to that surface changes.  This is a key visual "hint" that a viewer is looking at something with specific reflective properties, particularly as the viewer rotates the camera.  The diffuse-only versions of the Effects do not give this additional perspective when just moving the camera.</p>

<p>When calculating diffuse light, we consider only a surface normal when determining the contribution of light to a surface.  For view-dependent lighting, we need to relate that in some way to the viewer's aspect.  To do so, Phong illumination considers how a light is reflected off of a surface.  Let's suppose a ray of light strikes a point on a surface and reflects perfectly from that surface.  The direction of reflection is known as a <i>reflection vector</i>.</p>
    
    <img src="Reflection.png" />
    
    <p>This reflection vector can be calculated with the following function.</p>

    <p>
      <b>vReflection = 2.0 * vNormal * ( vNormal • vLight ) − vLight</b>
    </p>
    
    <p>The proof of this equation is beyond the scope of this sample.  Fortunately, HLSL provides a <b>reflect()</b> intrinsic function that does the same operation (see example 1.6 in VertexLighting.fx).</p>

    <p>The next step for Phong reflection is to relate the reflection vector to the view direction.  Again, we use a dot product to determine the contribution of light at the point.  Like diffuse lighting, a dot product is a convenient way of calculating fall-off by giving an angle between two vectors.  For this part of the specular equation, we calculate the angle between the direction to the viewer and the light reflection to determine the intensity of the specular light.</p>

    <img src="Phong.png" />
    
    <p>The last component of specular light in the Phong model is a quantification of the "shininess" of a given material.  This is done with a pair of constants known as <i>specular power</i> and <i>specular intensity</i>.  The dot product of the reflection vector and the view direction vector are taken to the power of the specular power and multiplied by the specular intensity.  The resulting equation looks like this:</p>

<p><b>Specular = specularIntensity * (( vReflection  • vViewDirection ) ^ specularPower)</b></p>

<p>You can combine this value with the ambient and diffuse lighting values to complete the Phong equation.</p>


  </div>

  <a id="ID2EJH" name="ID2EJH"> </a><h1 class="heading">Per-Pixel Lighting</h1><div id="ID2EJH" class="hxnx1">
    

    <p>You may notice upon trying the sample for the first time that the per-vertex calculation for specular lighting doesn't look very good.  This is because the lighting equation is evaluated at each vertex, and interpolated across each triangle via the Color semantic (as output from the vertex shader and input to the pixel shader).  This interpolation does not necessarily match the value we would have at each individual pixel, particularly with respect to the specular component.</p>
    
    <p>We can achieve a much smoother visual effect by evaluating the specular lighting component at each pixel.  Recalculating Phong illumination at each pixel is a technique known as <i>Phong shading</i> and is a great starting point for more elaborate lighting models.  The sample also includes shaders that move the diffuse calculation to the pixel shader.  While the benefit from computing diffuse lighting per-pixel is less dramatic than that of specular, there are fewer artifacts in the diffuse light.</p>
    
    </div>
  
  <a id="ID2EVH" name="ID2EVH"> </a><h1 class="heading">Implementation of Per-Vertex Phong Reflection</h1><div id="ID2EVH" class="hxnx1">
    
    
    <p>The first thing to notice in VertexLighting.fx is that it is fairly similar to the effect presented in Shader Series 1: VertexLighting Sample.  There are, however, a few new constants.  Example 1.1 declares the specular power and specular intensity of the material being rendered.  Example 1.2 is a declaration of a camera position that also figures into the specular function.  As always, these parameters are set by the sample application through <b>EffectParameters</b> in the C# source code.</p>
    
    <p>Example 1.3 shows a step required for many kinds of shader operations.  The single light in the scene is represented in world-space coordinates.  For the lighting equations to make sense, all of the other vector components must also be transformed to world space.  This applies whether working in model space, world  space, view space, or projection space.</p>

<p>Example 1.4 is another common, important step: ensuring the coordinate is in homogenous space.  This is typically necessary only when transforming positions, and is not necessary for the direction vectors in this effect.</p>

<p>The first application of the previous discussion of specular highlighting can be found in Example 1.6.  This section is the vertex shader implementation of the equation for determining a reflection vector from a point light source.  Example 1.7 completes the Phong specular equation by taking the dot product of the view direction (the direction to the camera) and the reflection vector.  Specular power and intensity are applied to give an overall specular contribution.  This is multiplied by the color of the specular light to give the total specular color for the vertex.  Note that the dot product is clamped from 0 to 1 by using the <b>saturate</b> intrinsic.  This is done because, like diffuse intensity, negative values do not make sense, so they are omitted.</p>

    <p>Finally, in Example 1.8, the Phong reflection equation is completed by summing the ambient, diffuse, and specular components and storing them in the vertex color register.  These colors are then interpolated into screen-space pixel values.  The simplistic pixel shader simply returns the interpolated color.</p>
    
  </div>
    <a id="ID2ELAAC" name="ID2ELAAC"> </a><h1 class="heading">Implementation of Per-Pixel Phong Reflection</h1><div id="ID2ELAAC" class="hxnx1">
      
      
      <p>In Shader Series 2, TEXCOORD outputs were used to send interpolated texture coordinates to the pixel shader for use in looking up texture values at each pixel.  It turns out that this linear interpolation makes the TEXCOORD registers far more flexible than their name suggests. These registers are used to send anything that can be sensibly linearly interpolated to pixels from the vertex shader.</p>

      <p>This is a tremendously powerful technique, and it will appear in all but the most basic shaders. Using the <b>texcoord</b> registers to store additional data about a pixel enables a wide range of data to be made available when the pixel shader is run on that pixel.  In PerPixelLighting.fx, Example 2.1, the vertex shader output structure uses TEXCOORD registers 0 and 1 to store world normals and positions, respectively.  The pixel shader inputs correspond to these <b>texcoord</b> registers and are named appropriately.</p>

<p>The execution of this usage pattern can be seen in Example 2.2.  The world normal and world position are set as outputs so they can be consumed at a per-pixel level in the pixel shader.  Diffuse light is being calculated in the vertex shader and is added to the ambient component in Example 2.3.</p>

<p>The pixel shader code in Example 2.4 is nearly identical to the per-vertex implementation of Phong specular, but it is being done with much higher granularity at the pixel level.  Using the interpolated world positions and normals, calculating the lighting effect at each pixel gives a much more precise approximation of specular light.  In Example 2.5, the specular component is added to the input color, which is the Gouraud shaded diffuse plus ambient components from the vertex shader.</p>

<p>Starting with Example 2.6, some other per-pixel vertex and pixel shaders are introduced that move the entire lighting calculation to the pixel shader.  The vertex shader simply acts as a setup step to create the proper inputs for the pixel shaders in Examples 2.8 and 2.9.  Calculating diffuse light with per-pixel granularity gives less dramatic results than that of specular lighting, but there is a small image improvement.</p>  

<p>The drawback to moving calculations to the pixel shader is that there are far more pixels in our scene than vertices.  Therefore, pixel-shader operations will be run more times than those in a vertex shader, and this solution may run slower than the per-vertex techniques.  It is up to the developer to determine the performance versus quality tradeoff when developing lighting shaders.</p>

<p>The <b>BasicEffect</b> class built into the framework implements a Phong lighting model with ambient, diffuse, and specular components by using the same computations described in this sample. By default, <b>BasicEffect</b> uses per-vertex lighting, but you can set the <b>BasicEffect.PreferPerPixelLighting</b> property to <b>true</b> to use per-pixel lighting instead.
</p>
      
    </div>
  <a id="ID2EMBAC" name="ID2EMBAC"> </a><h1 class="heading">Extending the Sample</h1><div id="ID2EMBAC" class="hxnx1">
    
    
    <p><b>Specular Textures:</b>  In Shader Series 2: Textures and Colors Sample, the concept of pixel-shader texturing was introduced.  Armed with the ability to apply specular lighting, you can now create specular textures (also called <i>specular maps</i>) to add another dimension of detail to the geometry in the scene.  Combining diffuse and specular textures can create very realistic lighting effects.  It can also be applied to create fantastic or other-worldly lighting effects to represent non-realistic materials.</p>
    
<p><b>Blinn-Phong Reflection:</b>  A potentially more efficient and more physically accurate variation of Phong illumination is Blinn-Phong reflection.  Try researching the Blinn-Phong shading model and modifying the sample to use Blinn-Phong.  Hint: instead of passing a world position and world normal via <b>texcooord</b> registers, try passing the "half-vector" and the world normal.</p>

  </div>

</div><div class="footer" id="footer"><p>© 2010 Microsoft Corporation. All rights reserved.<br />Send feedback to <a href="mailto:[email protected]?subject=Documentation Feedback: Shader Series 3: Per-Pixel Lighting Sample">[email protected]</a>.</p></div></div></body></html>