<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Hazel McKendrick &#187; Graphics programming</title>
	<atom:link href="http://hazelmckendrick.com/journal/tag/graphics-programming/feed" rel="self" type="application/rss+xml" />
	<link>http://hazelmckendrick.com</link>
	<description>Programming and Games Technology Portfolio</description>
	<lastBuildDate>Mon, 20 Jun 2011 17:44:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>Depth of Field</title>
		<link>http://hazelmckendrick.com/journal/depth-of-field</link>
		<comments>http://hazelmckendrick.com/journal/depth-of-field#comments</comments>
		<pubDate>Sun, 02 Aug 2009 14:41:04 +0000</pubDate>
		<dc:creator>Hazel</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[Dare To Be Digital]]></category>
		<category><![CDATA[Depth of Field]]></category>
		<category><![CDATA[digital colony]]></category>
		<category><![CDATA[Full Screen Effects]]></category>
		<category><![CDATA[Graphics programming]]></category>
		<category><![CDATA[HLSL]]></category>
		<category><![CDATA[pollen]]></category>
		<category><![CDATA[shaders]]></category>
		<category><![CDATA[XNA]]></category>

		<guid isPermaLink="false">http://killercodingninjabunny.com/?p=1247</guid>
		<description><![CDATA[Me: &#8220;But Abi! Surely I should work on bug fixes rather than implementing Depth of Field.&#8221; Project Manager: &#8220;No, Hazel. You must work on awesome graphics effects.&#8221; Me: &#8220;Sweeeet.&#8221; Ok, so I&#8217;m paraphrasing a little but if there was a film of the actual situation I&#8217;m pretty certain this would have been the dialogue. We&#8217;d [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/08/Dof6.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/08/Dof6-1024x592.jpg" alt="Dof6" title="Dof6" width="650" height="400" class="size-large wp-image-1250" /></a></p>
<p>
<b>Me:</b> &#8220;But Abi! Surely I should work on bug fixes rather than implementing Depth of Field.&#8221;</p>
<p><b>Project Manager:</b> &#8220;No, Hazel. You must work on awesome graphics effects.&#8221;</p>
<p><b>Me:</b> &#8220;Sweeeet.&#8221;
</p>
<p><span id="more-1247"></span><br />
Ok, so I&#8217;m paraphrasing a little but if there was a film of the actual situation I&#8217;m pretty certain this would have been the dialogue. We&#8217;d been talking about macro-photography inspired depth-of-field effects for a while but I wasn&#8217;t sure we&#8217;d actually find time to get it working.  In reality, it took less than a day to implement, didn&#8217;t kill our framerate and (I think) looks fantastic.</p>
<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/08/Dof5.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/08/Dof5-300x179.jpg" alt="Dof5" title="Dof5" width="300" height="179" class="alignleft size-medium wp-image-1248" /></a></p>
<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/08/DoF4.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/08/DoF4-300x179.jpg" alt="DoF4" title="DoF4" width="300" height="179" class="alignleft size-medium wp-image-1249" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://hazelmckendrick.com/journal/depth-of-field/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Into The Deep Dark Woods: Lighting and Shading</title>
		<link>http://hazelmckendrick.com/journal/getting-a-little-dark-and-scary</link>
		<comments>http://hazelmckendrick.com/journal/getting-a-little-dark-and-scary#comments</comments>
		<pubDate>Mon, 20 Jul 2009 21:19:38 +0000</pubDate>
		<dc:creator>Hazel</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[Dare To Be Digital]]></category>
		<category><![CDATA[digital colony]]></category>
		<category><![CDATA[Graphics programming]]></category>
		<category><![CDATA[Lighting]]></category>
		<category><![CDATA[pollen]]></category>
		<category><![CDATA[XNA]]></category>

		<guid isPermaLink="false">http://killercodingninjabunny.com/?p=1191</guid>
		<description><![CDATA[Although I&#8217;ve really only been sharing bright and shiny screenshots of our game, it actually progresses from a sunny farm through to a dark and creepy forest. Naturally, this meant it was time to focus on implementing a coherent lighting model for the level. At the moment we&#8217;re working with ambient lighting, two directional lights [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/DarkArea.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/DarkArea-1024x624.png" alt="DarkArea" title="DarkArea" width="650" height="400" class="aligncenter size-large wp-image-1198" /></a></p>
<p>Although I&#8217;ve really only been sharing bright and shiny screenshots of our game, it actually progresses from a sunny farm through to a dark and creepy forest.  Naturally, this meant it was time to focus on implementing a coherent lighting model for the level. At the moment we&#8217;re working with ambient lighting, two directional lights and two spot lights per short section of our game.</p>
<p>In addition, I&#8217;ve been looking at methods for shadowing and shading.  Each bee is an intricate model, but scaled down it would be easy to lose a lot of the detail.  As you can hopefully see in the following images, shading adds some depth and makes the bees appear far more three dimensional.  <span id="more-1191"></span></p>
<div id="attachment_1194" class="wp-caption alignleft" style="width: 160px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/ColourByHeight.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/ColourByHeight-150x150.png" alt="Colouring by distance from ground." title="ColourByHeight" width="150" height="150" class="size-thumbnail wp-image-1194" /></a><p class="wp-caption-text">Shade by distance from ground.</p></div> <div id="attachment_1195" class="wp-caption alignleft" style="width: 160px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/ColourByNormals.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/ColourByNormals-150x150.png" alt="Colour By Normals" title="ColourByNormals" width="150" height="150" class="size-thumbnail wp-image-1195" /></a><p class="wp-caption-text">Shade when normals point down.</p></div> <div id="attachment_1196" class="wp-caption alignleft" style="width: 160px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/Combined4.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/Combined4-150x150.png" alt="Combined Shading Techniques." title="Combined4" width="150" height="150" class="size-thumbnail wp-image-1196" /></a><p class="wp-caption-text">Combined Shading Techniques.</p></div> <div id="attachment_1197" class="wp-caption alignleft" style="width: 160px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/CombinedLit4.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/CombinedLit4-150x150.png" alt="Combined With Lighting." title="CombinedLit4" width="150" height="150" class="size-thumbnail wp-image-1197" /></a><p class="wp-caption-text">Combined With Lighting.</p></div>
<p style="clear: both">&nbsp;<br />&nbsp;Similar techniques applied across the entire scene also improves the overall appearance, with and without lighting:</p>
<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/HeightAndAO.png"><img style="clear: both" src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/HeightAndAO-300x191.png" alt="HeightAndAO" title="HeightAndAO" width="300" height="191" class="alignleft size-medium wp-image-1199" /></a> <a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/HeightAndLighting.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/HeightAndLighting-300x188.png" alt="HeightAndLighting" title="HeightAndLighting" width="300" height="188" class="alignleft size-medium wp-image-1192" /></a></p>
<p style="clear: both">&nbsp;<br />&nbsp;Finally, here&#8217;s an additional happier version of the shot above, just to show the difference a change in lighting can make:</p>
<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/BrighterArea.png"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/BrighterArea-1024x660.png" alt="BrighterArea" title="BrighterArea" width="650" height="400" class="alignleft size-large wp-image-1193" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://hazelmckendrick.com/journal/getting-a-little-dark-and-scary/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Full Screen Effects</title>
		<link>http://hazelmckendrick.com/journal/full-screen-effects</link>
		<comments>http://hazelmckendrick.com/journal/full-screen-effects#comments</comments>
		<pubDate>Wed, 15 Jul 2009 20:53:14 +0000</pubDate>
		<dc:creator>Hazel</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[dare to be digital]]></category>
		<category><![CDATA[Dare To Be Digital]]></category>
		<category><![CDATA[digital colony]]></category>
		<category><![CDATA[Full Screen Effects]]></category>
		<category><![CDATA[Graphics programming]]></category>
		<category><![CDATA[HLSL]]></category>
		<category><![CDATA[pollen]]></category>
		<category><![CDATA[Post-processing]]></category>
		<category><![CDATA[screenshots]]></category>
		<category><![CDATA[XNA]]></category>

		<guid isPermaLink="false">http://killercodingninjabunny.com/?p=1176</guid>
		<description><![CDATA[I like how colourful this game is making my blog look! We&#8217;ve had the ability to add post-processing effects to our game easily for a couple of weeks now, but have only just considered what to do with that. Inspired by some of the effect from rendering fur over the weekend, I created some examples [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/paint2.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/paint2-1024x557.jpg" alt="paint2" title="paint2" width="650" height="360" class="aligncenter size-large wp-image-1133" /></a></p>
<p>I like how colourful this game is making my blog look!  We&#8217;ve had the ability to add post-processing effects to our game easily for a couple of weeks now, but have only just considered what to do with that.  Inspired by some of the effect from <a href="http://killercodingninjabunny.com/journal/fuzzy-wuzzy-bees-rendering-fur">rendering fur</a> over the weekend, I created some examples of a brushstroke shader in effect the game.  It&#8217;s good having a colourful 3D environment to play with like this.<br />
<span id="more-1176"></span></p>
<p>Although it looks nice in screenshots, the way that assets move and colours change make it look as if the screen is swimming and as such is impractical for use in the game.  I think with some consideration it would be possible to create an impressive looking environment in this way however it isn&#8217;t really suitable or relevant for what we&#8217;re working on now.  So it&#8217;s something to consider another time.</p>
<div id="attachment_1134" class="wp-caption alignleft" style="width: 310px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/paint3.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/paint3-300x242.jpg" alt="Brushstrokes shader." title="paint3" width="300" height="242" class="size-medium wp-image-1134" /></a><p class="wp-caption-text">Brushstrokes shader.</p></div>
<div id="attachment_1135" class="wp-caption alignleft" style="width: 310px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/paint4.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/paint4-300x243.jpg" alt="More brushstrokes." title="paint4" width="300" height="243" class="size-medium wp-image-1135" /></a><p class="wp-caption-text">More brushstrokes.</p></div>
<p style="clear:both">&nbsp;<br />&nbsp;Along the way, we also played with a few different effects (a couple of which are shown below).  At the end of the day though we don&#8217;t want to do anything which will cause huge changes to the textures Abi is creating, and simply having a coherent lighting model (which we do now!) greatly improves the game&#8217;s appearance.</p>
<div id="attachment_1126" class="wp-caption alignleft" style="width: 310px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/brightnshiny.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/brightnshiny-300x226.jpg" alt="Horrible toon shading." title="brightnshiny" width="300" height="226" class="size-medium wp-image-1126" /></a><p class="wp-caption-text">Horrible toon(ish) shading.</p></div>
<div id="attachment_1127" class="wp-caption alignleft" style="width: 310px"><a href="http://killercodingninjabunny.com/wp-content/uploads/2009/07/drawingwithalpha.jpg"><img src="http://killercodingninjabunny.com/wp-content/uploads/2009/07/drawingwithalpha-300x278.jpg" alt="Alpha values. Might prove useful..." title="drawingwithalpha" width="300" height="278" class="size-medium wp-image-1127" /></a><p class="wp-caption-text">Alpha values. Pretty, I guess.</p></div>
]]></content:encoded>
			<wfw:commentRss>http://hazelmckendrick.com/journal/full-screen-effects/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

