<?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>Last Ray of Hope &#187; Shaders</title>
	<atom:link href="http://www.lastrayofhope.com/category/programming/shaders/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lastrayofhope.com</link>
	<description>Home of Kaluriel Hargrove</description>
	<lastBuildDate>Thu, 02 Feb 2012 00:21:18 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Athena: Cheap(er) Per-Pixel Directional Lighting (cont)</title>
		<link>http://www.lastrayofhope.com/2009/06/01/athena-cheaper-per-pixel-directional-lighting-cont/</link>
		<comments>http://www.lastrayofhope.com/2009/06/01/athena-cheaper-per-pixel-directional-lighting-cont/#comments</comments>
		<pubDate>Mon, 01 Jun 2009 19:23:06 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Athena]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[engine]]></category>
		<category><![CDATA[OpenGL]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=2411</guid>
		<description><![CDATA[In my previous blog entry, Athena: Cheap(er) Per-Pixel Directional Lighting, I wrote how I had an idea for post process lighting calculations. Well, like many other things, it has already been done before, in fact a long time ago, 1988. It is known as Deferred Shading. The wiki article also mentions something else that I [...]]]></description>
			<content:encoded><![CDATA[<p>In my previous blog entry, <a href="http://www.lastrayofhope.com/2009/05/31/athena-cheaper-per-pixel-directional-lighting/">Athena: Cheap(er) Per-Pixel Directional Lighting</a>, I wrote how I had an idea for post process lighting calculations. Well, like many other things, it has already been done before, in fact a long time ago, 1988. It is known as <a href="http://www.lastrayofhope.com/2009/05/31/athena-cheaper-per-pixel-directional-lighting/" target="_blank">Deferred Shading</a>.</p>
<p>The wiki article also mentions something else that I didn't take into considering, and that is transparent objects, since there would be more than one lighting equation needed.</p>
<p>On the whole though, I'm glad I got a chance to implement it, one more thing I know how to do.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2009/06/01/athena-cheaper-per-pixel-directional-lighting-cont/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Athena: Cheap(er) Per-Pixel Directional Lighting</title>
		<link>http://www.lastrayofhope.com/2009/05/31/athena-cheaper-per-pixel-directional-lighting/</link>
		<comments>http://www.lastrayofhope.com/2009/05/31/athena-cheaper-per-pixel-directional-lighting/#comments</comments>
		<pubDate>Sun, 31 May 2009 21:40:52 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Athena]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[engine]]></category>
		<category><![CDATA[OpenGL]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=2364</guid>
		<description><![CDATA[As mentioned in Athena: More Uses for Framebuffer Objects, I have thought up a way of doing lighting using colour buffers, at the moment it is only directional lighting however. But the great thing is, depending on how many objects are in your scene, and how much overdraw can happen, this method is faster (I [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.lastrayofhope.com/wp-content/uploads/2009/05/perpixel_directional_postprocess.png"><img class="alignleft size-medium wp-image-2374" title="Per-Pixel Directional Lighting through Post Process" src="http://www.lastrayofhope.com/wp-content/uploads/2009/05/perpixel_directional_postprocess-300x233.png" alt="Per-Pixel Directional Lighting through Post Process" width="180" height="140" /></a>As mentioned in <a href="http://www.lastrayofhope.com/2009/05/29/athena-more-framebuffer-objects/" target="_blank">Athena: More Uses for Framebuffer Objects</a>, I have thought up a way of doing lighting using colour buffers, at the moment it is only directional lighting however.</p>
<p>But the great thing is, depending on how many objects are in your scene, and how much overdraw can happen, this method is faster (I think, I don't know the cost of writing to a second colour attachment).</p>
<h3><span style="text-decoration: underline;">Colour Shader</span></h3>
<p>The colour shader is just a basic shader I've setup to show. First of all the vertex shader...</p>
<div id="wpshdo_1" class="wp-synhighlighter-outer"><div id="wpshdt_1" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_1"></a><a id="wpshat_1" class="wp-synhighlighter-title" href="#codesyntax_1"  onClick="javascript:wpsh_toggleBlock(1)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_1" onClick="javascript:wpsh_code(1)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_1" onClick="javascript:wpsh_print(1)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_1" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Varying Variables</span>
<span class="kw2">varying</span> <span class="kw3">vec3</span> Normal<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Vertex Shader entry point</span>
<span class="kw3">void</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	Normal <span class="sy0">=</span> <span class="kw5">normalize</span><span class="br0">&#40;</span> <span class="kw6">gl_NormalMatrix</span> <span class="sy0">*</span> <span class="kw6">gl_Normal</span> <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw6">gl_Position</span> <span class="sy0">=</span> <span class="kw5">ftransform</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>As you can see this is just a basic vertex shader, transforming a vertex position into screen space and passing the normal onto the fragment shader through a varying variable type.</p>
<p>Now the fragment shader...</p>
<div id="wpshdo_2" class="wp-synhighlighter-outer"><div id="wpshdt_2" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_2"></a><a id="wpshat_2" class="wp-synhighlighter-title" href="#codesyntax_2"  onClick="javascript:wpsh_toggleBlock(2)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_2" onClick="javascript:wpsh_code(2)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_2" onClick="javascript:wpsh_print(2)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_2" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Varying Variables</span>
<span class="kw2">varying</span> <span class="kw3">vec3</span> Normal<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Fragment Shader entry point</span>
<span class="kw3">void</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="kw3">vec3</span> N <span class="sy0">=</span> <span class="kw5">normalize</span><span class="br0">&#40;</span> Normal <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw3">float</span> kDrawLit <span class="sy0">=</span> <span class="nu0">1.0</span><span class="sy0">;</span>
	<span class="kw6">gl_FragData</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span> <span class="sy0">=</span> <span class="kw3">vec4</span><span class="br0">&#40;</span> 1<span class="sy0">.</span>0<span class="sy0">,</span> 0<span class="sy0">.</span>0<span class="sy0">,</span> 0<span class="sy0">.</span>0<span class="sy0">,</span> 1<span class="sy0">.</span>0 <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw6">gl_FragData</span><span class="br0">&#91;</span>1<span class="br0">&#93;</span> <span class="sy0">=</span> <span class="kw3">vec4</span><span class="br0">&#40;</span> N<span class="sy0">,</span> kDrawLit <span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>This is a typical fragment shader as well, using draw buffer zero for the unlit texel colour. However, I've normalised the interpolated normal that was calculated for this texel and I'm outputting it to draw buffer one, along with another value '<em>kDrawLit</em>'.</p>
<p>When the w component of draw buffer 1 for this texel is set to <strong>0.0</strong>, the texel will not have any lighting calculations performed on it in the post process. I came up with this when I started thinking about rendering a HUD before the post processing.</p>
<p>I've chose just to output red as a colour, anything is fine, such as a texture that is mapped to the object in question.</p>
<h3><span style="text-decoration: underline;">Per-Pixel Lighting Shader</span></h3>
<p>Again, another simple vertex shader, passing a transformed vertex and texture coordinate to the fragment shader...</p>
<div id="wpshdo_3" class="wp-synhighlighter-outer"><div id="wpshdt_3" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_3"></a><a id="wpshat_3" class="wp-synhighlighter-title" href="#codesyntax_3"  onClick="javascript:wpsh_toggleBlock(3)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_3" onClick="javascript:wpsh_code(3)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_3" onClick="javascript:wpsh_print(3)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_3" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Varying Variables</span>
<span class="kw2">varying</span> <span class="kw3">vec3</span> v_lightDir<span class="sy0">;</span>
<span class="kw2">varying</span> <span class="kw3">vec3</span> v_halfVec<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Vertex Shader entry point</span>
<span class="kw3">void</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">//</span>
	v_lightDir <span class="sy0">=</span> <span class="kw5">normalize</span><span class="br0">&#40;</span> <span class="kw6">gl_LightSource</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">position</span><span class="sy0">.</span><span class="me1">xyz</span> <span class="br0">&#41;</span><span class="sy0">;</span>
	v_halfVec <span class="sy0">=</span> <span class="kw5">normalize</span><span class="br0">&#40;</span> <span class="kw6">gl_LightSource</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">halfVector</span><span class="sy0">.</span><span class="me1">xyz</span> <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">//</span>
	<span class="kw6">gl_TexCoord</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">xy</span> <span class="sy0">=</span> <span class="kw6">gl_MultiTexCoord0</span><span class="sy0">.</span><span class="me1">xy</span><span class="sy0">;</span>
	<span class="kw6">gl_Position</span> <span class="sy0">=</span> <span class="kw6">gl_Vertex</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>Now for where the magic happens, the fragment shader, it uses two textures. The '<em>baseImage</em>' sampler is for the colour buffer, whilst the '<em>nrmImage</em>' is used for the normal texture we wrote...</p>
<div id="wpshdo_4" class="wp-synhighlighter-outer"><div id="wpshdt_4" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_4"></a><a id="wpshat_4" class="wp-synhighlighter-title" href="#codesyntax_4"  onClick="javascript:wpsh_toggleBlock(4)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_4" onClick="javascript:wpsh_code(4)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_4" onClick="javascript:wpsh_print(4)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_4" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Uniform Variables</span>
<span class="kw2">uniform</span> <span class="kw3">sampler2D</span> baseImage<span class="sy0">;</span>
<span class="kw2">uniform</span> <span class="kw3">sampler2D</span> nrmImage<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Varying Variables</span>
<span class="kw2">varying</span> <span class="kw3">vec3</span> v_lightDir<span class="sy0">;</span>
<span class="kw2">varying</span> <span class="kw3">vec3</span> v_halfVec<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Fragment Shader entry point</span>
<span class="kw3">void</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Get texel colour and normal data</span>
	<span class="kw3">vec4</span> kTexelColour <span class="sy0">=</span> <span class="kw5">texture2D</span><span class="br0">&#40;</span> baseImage<span class="sy0">,</span> <span class="kw6">gl_TexCoord</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">xy</span> <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw3">vec4</span> kNormalColour <span class="sy0">=</span> <span class="kw5">texture2D</span><span class="br0">&#40;</span> nrmImage<span class="sy0">,</span> <span class="kw6">gl_TexCoord</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">xy</span> <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">// Don't Perform Lighting on a non-lit texel</span>
	<span class="kw1">if</span><span class="br0">&#40;</span> kNormalColour<span class="sy0">.</span><span class="me1">w</span> <span class="sy0">==</span> 0<span class="sy0">.</span>0 <span class="br0">&#41;</span>
	<span class="br0">&#123;</span>
		<span class="kw6">gl_FragData</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span> <span class="sy0">=</span> kTexelColour<span class="sy0">;</span>
		<span class="kw1">return</span><span class="sy0">;</span>
	<span class="br0">&#125;</span>
&nbsp;
	<span class="co1">// Calculate Ambient</span>
	<span class="kw3">vec4</span> kAmbient <span class="sy0">=</span> <span class="kw6">gl_LightSource</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">ambient</span> <span class="sy0">*</span> kTexelColour<span class="sy0">;</span>
&nbsp;
	<span class="co1">// Process Light Direction and Normals</span>
	<span class="kw3">float</span> NdotL <span class="sy0">=</span> <span class="kw5">max</span><span class="br0">&#40;</span> <span class="kw5">dot</span><span class="br0">&#40;</span> kNormalColour<span class="sy0">.</span><span class="me1">xyz</span><span class="sy0">,</span> v_lightDir <span class="br0">&#41;</span><span class="sy0">,</span> 0<span class="sy0">.</span>0 <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw3">vec4</span> kColour <span class="sy0">=</span> kAmbient<span class="sy0">;</span>
&nbsp;
	<span class="co1">// Add Diffuse and Specular is NdotL is greater than zero</span>
	<span class="kw1">if</span><span class="br0">&#40;</span> NdotL <span class="sy0">&gt;</span> <span class="nu0">0.0</span> <span class="br0">&#41;</span>
	<span class="br0">&#123;</span>
		<span class="co1">// Calculate Diffuse</span>
		<span class="kw3">vec4</span> kDiffuse <span class="sy0">=</span> <span class="br0">&#40;</span> 1<span class="sy0">.</span>0 <span class="sy0">-</span> kAmbient <span class="br0">&#41;</span> <span class="sy0">*</span> <span class="br0">&#40;</span> <span class="kw6">gl_LightSource</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">diffuse</span> <span class="sy0">*</span> kTexelColour <span class="br0">&#41;</span><span class="sy0">;</span>
		<span class="kw3">vec4</span> kSpecular <span class="sy0">=</span> <span class="kw6">gl_LightSource</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">specular</span><span class="sy0">;</span>
		<span class="kw3">float</span> kShininess <span class="sy0">=</span> <span class="nu0">60.0</span><span class="sy0">;</span>
&nbsp;
		<span class="kw3">float</span> NdotHV <span class="sy0">=</span> <span class="kw5">max</span><span class="br0">&#40;</span> <span class="kw5">dot</span><span class="br0">&#40;</span> kNormalColour<span class="sy0">.</span><span class="me1">xyz</span><span class="sy0">,</span> v_halfVec <span class="br0">&#41;</span><span class="sy0">,</span> 0<span class="sy0">.</span>0 <span class="br0">&#41;</span><span class="sy0">;</span>
		kColour <span class="sy0">+=</span> kDiffuse <span class="sy0">*</span> NdotL<span class="sy0">;</span>
		kColour <span class="sy0">+=</span> kSpecular <span class="sy0">*</span> <span class="kw5">pow</span><span class="br0">&#40;</span> NdotHV<span class="sy0">,</span> kShininess <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="br0">&#125;</span>
&nbsp;
	<span class="co1">// Write Pixel Colour</span>
	<span class="kw6">gl_FragData</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span> <span class="sy0">=</span> kColour<span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>As you can see, if the w component of the normal texture is <strong>0.0</strong> then the colour value is outputted as it is. If not, using the normal and the light currently setup, the colour is modified to be lit before being outputted.</p>
<p>I've just used a simple Blinn shader for calculating the lighting.</p>
<h3><span style="text-decoration: underline;">The Application</span></h3>
<p>Now for the application side of things, below is just some quick sample code for what I used for my example. As you can see I've used a unsigned byte to store the normal, a floating point texture may have better accuracy at describing it though.</p>
<div id="wpshdo_5" class="wp-synhighlighter-outer"><div id="wpshdt_5" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_5"></a><a id="wpshat_5" class="wp-synhighlighter-title" href="#codesyntax_5"  onClick="javascript:wpsh_toggleBlock(5)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_5" onClick="javascript:wpsh_code(5)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_5" onClick="javascript:wpsh_print(5)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_5" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">//</span>
<span class="kw2">namespace</span> CommonApp
<span class="br0">&#123;</span>
	<span class="kw2">enum</span> TextureTypes
	<span class="br0">&#123;</span>
		kColour,
		kNormal,
		kDepthStencil,
		kNumTextureTypes,
	<span class="br0">&#125;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">//</span>
	<span class="kw4">const</span> <span class="kw4">int</span> kWidth <span class="sy1">=</span> <span class="nu0">800</span><span class="sy4">;</span>
	<span class="kw4">const</span> <span class="kw4">int</span> kHeight <span class="sy1">=</span> <span class="nu0">600</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">//</span>
	GLuint l_frameBuffer<span class="sy4">;</span>
	GLuint l_textures<span class="br0">&#91;</span>kNumTextureTypes<span class="br0">&#93;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">//</span>
	GLuint l_colourProgram<span class="sy4">;</span>
	GLuint l_lightingProgram<span class="sy4">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Use alternate INTERNAL_FORMAT if floating point textures are not supported</span>
<span class="co1">//#define INTERNAL_FORMAT GL_RGBA</span>
<span class="co2">#define INTERNAL_FORMAT GL_RGBA32F_ARB</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> CommonApp<span class="sy4">::</span><span class="me2">Init</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Code to load colouring shader program</span>
	<span class="co1">// ...</span>
&nbsp;
	<span class="co1">// Code to load lighting shader program and setup uniform variables</span>
	<span class="co1">// ...</span>
&nbsp;
	<span class="co1">// Generate Textures</span>
	glGenTextures<span class="br0">&#40;</span> kNumTextureTypes, l_textures <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Create Colour Texture</span>
	glBindTexture<span class="br0">&#40;</span> GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kColour<span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexImage2D<span class="br0">&#40;</span> GL_TEXTURE_2D, 0, INTERNAL_FORMAT, kWidth, kHeight, 0, GL_RGBA, GL_FLOAT, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Create Normal Texture</span>
	glBindTexture<span class="br0">&#40;</span> GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kNormal<span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexImage2D<span class="br0">&#40;</span> GL_TEXTURE_2D, 0, INTERNAL_FORMAT, kWidth, kHeight, 0, GL_RGBA, GL_FLOAT, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Create Depth Buffer</span>
	glBindTexture<span class="br0">&#40;</span> GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kDepthStencil<span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexImage2D<span class="br0">&#40;</span> GL_TEXTURE_2D, 0, GL_DEPTH24_STENCIL8_EXT, kWidth, kHeight, 0, GL_DEPTH_STENCIL_EXT, GL_UNSIGNED_INT_24_8_EXT, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE <span class="br0">&#41;</span><span class="sy4">;</span>
	glTexParameteri<span class="br0">&#40;</span> GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Generate Framebuffer and attach textures</span>
	glGenFramebuffersEXT<span class="br0">&#40;</span> 1, <span class="sy3">&amp;</span>l_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
	glBindFramebufferEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, l_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT0_EXT, GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kColour<span class="br0">&#93;</span>, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT1_EXT, GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kNormal<span class="br0">&#93;</span>, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_DEPTH_ATTACHMENT_EXT, GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kDepthStencil<span class="br0">&#93;</span>, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_STENCIL_ATTACHMENT_EXT, GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kDepthStencil<span class="br0">&#93;</span>, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> CommonApp<span class="sy4">::</span><span class="me2">DeInit</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	glDeleteFramebuffersEXT<span class="br0">&#40;</span> 1, <span class="sy3">&amp;</span>l_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
	glDeleteTextures<span class="br0">&#40;</span> kNumTextureTypes, l_textures <span class="br0">&#41;</span><span class="sy4">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>Just the usual code as you can see for setting up a frame buffer. Now for rendering the scene...</p>
<div id="wpshdo_6" class="wp-synhighlighter-outer"><div id="wpshdt_6" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_6"></a><a id="wpshat_6" class="wp-synhighlighter-title" href="#codesyntax_6"  onClick="javascript:wpsh_toggleBlock(6)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_6" onClick="javascript:wpsh_code(6)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_6" onClick="javascript:wpsh_print(6)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_6" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> CommonApp<span class="sy4">::</span><span class="me2">Render</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Use Frame Buffer</span>
	glBindFramebufferEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, l_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Set Draw Buffers</span>
	<span class="kw4">const</span> GLenum kBuffers<span class="br0">&#91;</span><span class="br0">&#93;</span> <span class="sy1">=</span> <span class="br0">&#123;</span> GL_COLOR_ATTACHMENT0_EXT, GL_COLOR_ATTACHMENT1_EXT <span class="br0">&#125;</span><span class="sy4">;</span>
	glDrawBuffers<span class="br0">&#40;</span> 2, kBuffers <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Use Shading Program</span>
	glUseProgram<span class="br0">&#40;</span> l_colourProgram <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Perform Rendering</span>
	<span class="co1">// ...</span>
&nbsp;
	<span class="co1">// Reset Draw Buffer</span>
	glDrawBuffer<span class="br0">&#40;</span> GL_COLOR_ATTACHMENT0_EXT <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Reset Frame Buffer</span>
	glBindFramebufferEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>I've set it up so that drawing to draw buffer zero writes to the colour texture, whilst drawing to draw buffer one writes to the normal texture, to reflect what is being done in the shader.</p>
<p>You don't need to use the colour shader I described up above, as long as it writes out the normal and an unlit colour, any shader can be used for this process, but for demonstration I've made it in this example that all geometry is drawn with this shader program.</p>
<p>Finally with our scene rendered, we can moved onto the final post processing stage...</p>
<div id="wpshdo_7" class="wp-synhighlighter-outer"><div id="wpshdt_7" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_7"></a><a id="wpshat_7" class="wp-synhighlighter-title" href="#codesyntax_7"  onClick="javascript:wpsh_toggleBlock(7)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_7" onClick="javascript:wpsh_code(7)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_7" onClick="javascript:wpsh_print(7)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_7" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> CommonApp<span class="sy4">::</span><span class="me2">PostRender</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	glActiveTexture<span class="br0">&#40;</span> GL_TEXTURE0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glBindTexture<span class="br0">&#40;</span> GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kColour<span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	glActiveTexture<span class="br0">&#40;</span> GL_TEXTURE1 <span class="br0">&#41;</span><span class="sy4">;</span>
	glBindTexture<span class="br0">&#40;</span> GL_TEXTURE_2D, l_textures<span class="br0">&#91;</span>kNormal<span class="br0">&#93;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	glUseProgram<span class="br0">&#40;</span> l_lightingProgram <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Render Fullscreen Quad</span>
	<span class="co1">// ...</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p><a href="http://www.lastrayofhope.com/wp-content/uploads/2009/05/perpixel_direction_postprocess_2.png"><img class="size-medium wp-image-2391 alignright" title="More Per-Pixel Directional Lighting through Post Process" src="http://www.lastrayofhope.com/wp-content/uploads/2009/05/perpixel_direction_postprocess_2-300x233.png" alt="More Per-Pixel Directional Lighting through Post Process" width="180" height="140" /></a>Attaching the colour and normal texture, using the per pixel lighting shader program and drawing a quad. The images within this blog are the final result (showing a comparison would be useless since they look the same).</p>
<p>One downside to this is that all texels have to use the same shininess value, however the alpha value of the colour buffer could be used to control this.</p>
<p>It is only a start, I need to performance check it at some point to see if it gives better or worse performance and under what conditions.</p>
<blockquote>Download Source: <a href="http://www.lastrayofhope.com/wp-content/plugins/download-monitor/download.php?id=4" title="Per Pixel Lighting (MacOSX)">Per Pixel Lighting (MacOSX)</a></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2009/05/31/athena-cheaper-per-pixel-directional-lighting/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Athena: More Uses for Framebuffer Objects</title>
		<link>http://www.lastrayofhope.com/2009/05/29/athena-more-framebuffer-objects/</link>
		<comments>http://www.lastrayofhope.com/2009/05/29/athena-more-framebuffer-objects/#comments</comments>
		<pubDate>Fri, 29 May 2009 20:21:45 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Athena]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[engine]]></category>
		<category><![CDATA[FBO]]></category>
		<category><![CDATA[OpenGL]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=2352</guid>
		<description><![CDATA[As I was upgrading my engine to the latest version of OpenGL, I noticed how my depth buffer was broken again (I use it for debugging my scenes when on the debug menu), and despite many changes, I was still having trouble getting it to display properly. The glReadPixels() function with GL_DEPTH_COMPONENT was working, but [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.lastrayofhope.com/wp-content/uploads/2009/05/fbo_depthbuffer.png"><img class="alignleft size-medium wp-image-2377" title="Depth Buffer using Frame Buffer Object" src="http://www.lastrayofhope.com/wp-content/uploads/2009/05/fbo_depthbuffer-300x233.png" alt="Depth Buffer using Frame Buffer Object" width="180" height="140" /></a>As I was upgrading my engine to the latest version of OpenGL, I noticed how my depth buffer was broken again (I use it for debugging my scenes when on the debug menu), and despite many changes, I was still having trouble getting it to display properly.</p>
<p>The glReadPixels() function with GL_DEPTH_COMPONENT was working, but I was having no luck at getting it displaying at any colour other than white without converting it first before writing it to a texture with glDrawPixels() - on reflection a floating point texture might have made this easier.</p>
<p>Anyways, when looking for answers, I found a way of using frame buffer objects to write out to multiple colour buffers, which allowed me to modify my Blinn shader to render a scene and the depth buffer to texture at the same time.</p>
<p>First of all, the shader needs to be shaders, instead of gl_FragColor, we use gl_FragData[n], where n is the index of the colour buffer we want to write to.</p>
<div id="wpshdo_8" class="wp-synhighlighter-outer"><div id="wpshdt_8" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_8"></a><a id="wpshat_8" class="wp-synhighlighter-title" href="#codesyntax_8"  onClick="javascript:wpsh_toggleBlock(8)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_8" onClick="javascript:wpsh_code(8)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_8" onClick="javascript:wpsh_print(8)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_8" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Varying Variables</span>
<span class="kw2">varying</span> <span class="kw3">float</span> v_farPlane<span class="sy0">;</span>
<span class="kw2">varying</span> <span class="kw3">float</span> v_nearPlane<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Fragment Shader entry point</span>
<span class="kw3">void</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Write Pixel Colour</span>
	<span class="co1">//gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );</span>
	<span class="kw6">gl_FragData</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span> <span class="sy0">=</span> <span class="kw3">vec4</span><span class="br0">&#40;</span> 1<span class="sy0">.</span>0<span class="sy0">,</span> 0<span class="sy0">.</span>0<span class="sy0">,</span> 0<span class="sy0">.</span>0<span class="sy0">,</span> 1<span class="sy0">.</span>0 <span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
	<span class="co1">// Write Depth</span>
	<span class="kw3">float</span> kDepth <span class="sy0">=</span> 1<span class="sy0">.</span>0 <span class="sy0">-</span> <span class="br0">&#40;</span> <span class="kw6">gl_FragCoord</span><span class="sy0">.</span><span class="me1">z</span> <span class="sy0">/</span> <span class="kw6">gl_FragCoord</span><span class="sy0">.</span><span class="me1">w</span> <span class="br0">&#41;</span> <span class="sy0">/</span> <span class="br0">&#40;</span> v_farPlane <span class="sy0">-</span> v_nearPlane <span class="br0">&#41;</span><span class="sy0">;</span>
	<span class="kw6">gl_FragData</span><span class="br0">&#91;</span>1<span class="br0">&#93;</span> <span class="sy0">=</span> <span class="kw3">vec4</span><span class="br0">&#40;</span> kDepth<span class="sy0">,</span> kDepth<span class="sy0">,</span> kDepth<span class="sy0">,</span> 1<span class="sy0">.</span>0 <span class="br0">&#41;</span><span class="sy0">;</span> <span class="co1">// Luminace style</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>And finally when binding your frame buffer object.</p>
<div id="wpshdo_9" class="wp-synhighlighter-outer"><div id="wpshdt_9" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_9"></a><a id="wpshat_9" class="wp-synhighlighter-title" href="#codesyntax_9"  onClick="javascript:wpsh_toggleBlock(9)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_9" onClick="javascript:wpsh_code(9)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_9" onClick="javascript:wpsh_print(9)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_9" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> RenderTarget<span class="sy4">::</span><span class="me2">Setup</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Create Frame Buffer</span>
	glGenBuffers<span class="br0">&#40;</span> 1, <span class="sy3">&amp;</span>m_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Bind Frame Buffer</span>
	glBindFramebufferEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, m_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Attach texture to receive colour</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT0_EXT, GL_TEXTURE_2D, m_colorTexture, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Attach Texture to receive depth buffer</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_COLOR_ATTACHMENT1_EXT, GL_TEXTURE_2D, m_depthTexture, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Attach Depth and Stencil Buffer (same object since my gfx card doesn't support them being separate)</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_DEPTH_ATTACHMENT_EXT, GL_TEXTURE_2D, m_stencilDepthBuffer, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
	glFramebufferTexture2DEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, GL_STENCIL_ATTACHMENT_EXT, GL_TEXTURE_2D, m_stencilDepthBuffer, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> RenderTarget<span class="sy4">::</span><span class="me2">StartRender</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Bind Frame Buffer</span>
	glBindFramebufferEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, m_frameBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Set which index draws to which colour attachment</span>
	<span class="kw4">const</span> GLenum kBuffers<span class="br0">&#91;</span><span class="br0">&#93;</span> <span class="sy1">=</span> <span class="br0">&#123;</span> GL_COLOR_ATTACHMENT0_EXT, GL_COLOR_ATTACHMENT1_EXT <span class="br0">&#125;</span><span class="sy4">;</span>
	glDrawBuffers<span class="br0">&#40;</span> 2, kBuffers <span class="br0">&#41;</span><span class="sy4">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>The call to glDrawBuffers() sets where gl_FragData[x] is being wrote to, I've specified there are two indexes, the first one points to colour attachment 0, and the second points to colour attachment 1.</p>
<p>Now when an object is rendered using that shader, it will output the normal colour buffer to colour attachment 0, and output the depth buffer to colour attachment 1.</p>
<p>Also, don't forget to reset the draw buffer destination after you're finished with it.</p>
<div id="wpshdo_10" class="wp-synhighlighter-outer"><div id="wpshdt_10" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_10"></a><a id="wpshat_10" class="wp-synhighlighter-title" href="#codesyntax_10"  onClick="javascript:wpsh_toggleBlock(10)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_10" onClick="javascript:wpsh_code(10)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_10" onClick="javascript:wpsh_print(10)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_10" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">//</span>
<span class="kw4">void</span> RenderTarget<span class="sy4">::</span><span class="me2">EndRender</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">// Reset draw buffer destination</span>
	glDrawBuffer<span class="br0">&#40;</span>GL_COLOR_ATTACHMENT0_EXT<span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
	<span class="co1">// Unbind frame buffer and all attachments</span>
	glBindFramebufferEXT<span class="br0">&#40;</span> GL_FRAMEBUFFER_EXT, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>I will probably remove the glBindFramebufferEXT() call to unbind the frame buffer at some point, so that the same frame buffer gets used for all render targets, only the attachments get changed.</p>
<p>I've read it is faster this way. For more information on this, there is this great article on GameDev.net about it called, <a href="http://www.gamedev.net/reference/articles/article2333.asp" target="_blank">OpenGL Frame Buffer Object 201</a>.</p>
<p>I probably won't use this for writing out the depth buffer, but it did give me some ideas for per pixel lighting.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2009/05/29/athena-more-framebuffer-objects/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Athena: OpenGL 3.0 Upgrade in Progress&#8230;</title>
		<link>http://www.lastrayofhope.com/2009/05/28/opengl-30/</link>
		<comments>http://www.lastrayofhope.com/2009/05/28/opengl-30/#comments</comments>
		<pubDate>Thu, 28 May 2009 17:08:20 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Athena]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[C++]]></category>
		<category><![CDATA[engine]]></category>
		<category><![CDATA[OpenGL]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=2304</guid>
		<description><![CDATA[I just upgraded to the latest version of gDEBugger, and it kept notifying me that a lot of my code is using deprecated functions as of OpenGL 3.0. So I have begun the long task of converting code and shaders alike, hopefully in a positive step since it will mean my DirectX 10 port of [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.lastrayofhope.com/wp-content/uploads/2009/05/command-and-conquer-3.jpg"><img class="size-medium wp-image-2345 alignleft" title="Command and Conquer 3" src="http://www.lastrayofhope.com/wp-content/uploads/2009/05/command-and-conquer-3-300x176.jpg" alt="Building in progress..." width="180" height="106" /></a></p>
<p>I just upgraded to the latest version of gDEBugger, and it kept notifying me that a lot of my code is using deprecated functions as of OpenGL 3.0.</p>
<p>So I have begun the long task of converting code and shaders alike, hopefully in a positive step since it will mean my DirectX 10 port of the Athena engine will have little modifications to work like the OpenGL and vice versa.</p>
<p>These functions are the first on my list, they are used for rendering my geometry.</p>
<blockquote><p>glTexCoordPointer()</p>
<p>glColorPointer()</p>
<p>glNormalPointer()</p>
<p>glVertexPointer()</p></blockquote>
<p>These have been replaced with glVertexAttribPointer(), a more useful system so you can specify custom attributes a vertex has, and link them to attribute variables in shaders (shaders are required now for everything like DirectX 10). So for a simple array of vertices, I linked them to attribute variable in my shader which was bound to location 0.</p>
<div id="wpshdo_11" class="wp-synhighlighter-outer"><div id="wpshdt_11" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_11"></a><a id="wpshat_11" class="wp-synhighlighter-title" href="#codesyntax_11"  onClick="javascript:wpsh_toggleBlock(11)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_11" onClick="javascript:wpsh_code(11)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_11" onClick="javascript:wpsh_print(11)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_11" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Bind VBO Object</span>
glBindBuffer<span class="br0">&#40;</span> GL_ARRAY_BUFFER, m_vertexBuffer <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Enable vertex attribute streaming on location 0</span>
glEnableVertexAttribArray<span class="br0">&#40;</span> <span class="nu0">0</span> <span class="coMULTI">/* location */</span> <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Set attribute offset, size, and type details for location 0</span>
glVertexAttribPointer<span class="br0">&#40;</span>	<span class="nu0">0</span>, <span class="coMULTI">/* location */</span>
			<span class="nu0">4</span>, <span class="coMULTI">/* components */</span>
			GL_FLOAT, <span class="coMULTI">/* type */</span>
			GL_FALSE, <span class="coMULTI">/* normalize */</span>
			<span class="kw3">sizeof</span><span class="br0">&#40;</span> <span class="kw4">float</span> <span class="br0">&#41;</span> <span class="sy2">*</span> <span class="nu0">4</span>, <span class="coMULTI">/* stride */</span>
			0 <span class="br0">&#41;</span><span class="sy4">;</span> <span class="coMULTI">/* buffer offset */</span></pre></div></div>
<p>&nbsp;</p>
<p>I found out shortly after however that the index I was using for my vertex attribute is a reserved index by nVidia for their built-in attributes, as are 12 others.</p>
<blockquote><p><strong>0</strong> - gl_Vertex<br />
<strong>2</strong> - gl_Normal<br />
<strong>3</strong> - gl_Color<br />
<strong>4</strong> - gl_SecondaryColor<br />
<strong>5</strong> - gl_FogCoord<br />
<strong>8</strong> - gl_MultiTexCoord0<br />
<strong>9</strong> - gl_MultiTexCoord1<br />
<strong>10</strong> - gl_MultiTexCoord2<br />
<strong>11</strong> - gl_MultiTexCoord3<br />
<strong>12</strong> - gl_MultiTexCoord4<br />
<strong>13</strong> - gl_MultiTexCoord5<br />
<strong>14</strong> - gl_MultiTexCoord6<br />
<strong>15</strong> - gl_MultiTexCoord7</p></blockquote>
<p>So in the interest of keeping things sane I changed the location index to be 16, all that was needed was updating my shaders to use attributes rather than gl_Position, etc.</p>
<div id="wpshdo_12" class="wp-synhighlighter-outer"><div id="wpshdt_12" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_12"></a><a id="wpshat_12" class="wp-synhighlighter-title" href="#codesyntax_12"  onClick="javascript:wpsh_toggleBlock(12)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_12" onClick="javascript:wpsh_code(12)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_12" onClick="javascript:wpsh_print(12)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_12" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// Vertex Attributes</span>
<span class="kw2">attribute</span> <span class="kw3">vec4</span> a_vertex<span class="sy0">;</span>
<span class="kw2">attribute</span> <span class="kw3">vec2</span> a_texCoord0<span class="sy0">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Vertex Shader Entry Point</span>
<span class="kw3">void</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	<span class="co1">//gl_TexCoord[0].xy = gl_MultiTexCoord0.xy;</span>
	<span class="kw6">gl_TexCoord</span><span class="br0">&#91;</span>0<span class="br0">&#93;</span><span class="sy0">.</span><span class="me1">xy</span> <span class="sy0">=</span> a_texCoord0<span class="sy0">;</span>
&nbsp;
	<span class="co1">//gl_Position = gl_Vertex;</span>
	<span class="kw6">gl_Position</span> <span class="sy0">=</span> a_vertex<span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
<p>You may have noticed that I don't multiply my vertex by any transformation matrices, this is because my vertex coordinates for 2D are always in the range of -1.0 to 1.0. Doing it this way saves me changing projection matrix states whenever I want to draw 2D, so my projection matrix is always setup for 3D. Also, the source for this vertex shader program contains another attribute for the texture coordinate as well since I just copy-pasta'd my Bloom shader.</p>
<p>Now just two simple calls were needed to be added to my  shader program before it was linked, so that the vertex attribute is bound to the correct location.</p>
<div id="wpshdo_13" class="wp-synhighlighter-outer"><div id="wpshdt_13" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_13"></a><a id="wpshat_13" class="wp-synhighlighter-title" href="#codesyntax_13"  onClick="javascript:wpsh_toggleBlock(13)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_13" onClick="javascript:wpsh_code(13)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_13" onClick="javascript:wpsh_print(13)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_13" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;">glBindAttribLocation<span class="br0">&#40;</span> m_program, <span class="nu0">16</span> <span class="coMULTI">/* location */</span>, <span class="st0">&quot;a_vertex&quot;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
glBindAttribLocation<span class="br0">&#40;</span> m_program, <span class="nu0">17</span> <span class="coMULTI">/* location */</span>, <span class="st0">&quot;a_texCoord0&quot;</span> <span class="br0">&#41;</span><span class="sy4">;</span>
glLinkProgram<span class="br0">&#40;</span> m_program <span class="br0">&#41;</span><span class="sy4">;</span></pre></div></div>
<p>&nbsp;</p>
<p>As you can see my vertex shader has a texture coordinate as well (I'm using my Bloom vertex shader as an example), so the final code for setting up the VBO for this is.</p>
<div id="wpshdo_14" class="wp-synhighlighter-outer"><div id="wpshdt_14" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_14"></a><a id="wpshat_14" class="wp-synhighlighter-title" href="#codesyntax_14"  onClick="javascript:wpsh_toggleBlock(14)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_14" onClick="javascript:wpsh_code(14)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_14" onClick="javascript:wpsh_print(14)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_14" class="wp-synhighlighter-inner" style="display: block;"><pre class="cpp" style="font-family:monospace;"><span class="co1">//</span>
<span class="co1">// VBO layout</span>
<span class="kw4">struct</span> TexturedVertex
<span class="br0">&#123;</span>
	<span class="kw4">float</span> texCoord<span class="br0">&#91;</span>2<span class="br0">&#93;</span><span class="sy4">;</span>
	<span class="kw4">float</span> position<span class="br0">&#91;</span>4<span class="br0">&#93;</span><span class="sy4">;</span>
<span class="br0">&#125;</span><span class="sy4">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Bind VBO Object</span>
glBindBuffer<span class="br0">&#40;</span> GL_ARRAY_BUFFER, myVBO <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Enable vertex attribute streaming on location 0</span>
glEnableVertexAttribArray<span class="br0">&#40;</span> 16 <span class="br0">&#41;</span><span class="sy4">;</span>
glEnableVertexAttribArray<span class="br0">&#40;</span> 17 <span class="br0">&#41;</span><span class="sy4">;</span>
&nbsp;
<span class="co1">//</span>
<span class="co1">// Set attribute offset, size, and type details for location 0</span>
glVertexAttribPointer<span class="br0">&#40;</span> 17, 2, GL_FLOAT, GL_FALSE, <span class="kw3">sizeof</span><span class="br0">&#40;</span> TexturedVertex <span class="br0">&#41;</span>, 0 <span class="br0">&#41;</span><span class="sy4">;</span>
glVertexAttribPointer<span class="br0">&#40;</span> 16, 4, GL_FLOAT, GL_FALSE, <span class="kw3">sizeof</span><span class="br0">&#40;</span> TexturedVertex <span class="br0">&#41;</span>, <span class="kw3">sizeof</span><span class="br0">&#40;</span> <span class="kw4">float</span> <span class="br0">&#41;</span> <span class="sy2">*</span> 2 <span class="br0">&#41;</span><span class="sy4">;</span></pre></div></div>
<p>&nbsp;</p>
<p>I'm sure there is a preprocessor command to get the offset of a variable within a structure, but "sizeof( float ) * 2" works as well. My code is a bit more complex than is shown here (I have a vertex format class that manages what needs to be set where, and something to managed state changes et cetera), but you get the idea of how it all works.</p>
<p>Well that was one big change down, on the next page of this blog entry will be another big change, replacing glMatrixMode() and glLoadMatrix().</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2009/05/28/opengl-30/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cg/HLSL Saturate</title>
		<link>http://www.lastrayofhope.com/2009/04/13/cghlsl-saturate/</link>
		<comments>http://www.lastrayofhope.com/2009/04/13/cghlsl-saturate/#comments</comments>
		<pubDate>Mon, 13 Apr 2009 01:19:43 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[Cg]]></category>
		<category><![CDATA[glsl]]></category>
		<category><![CDATA[shader]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=1175</guid>
		<description><![CDATA[I've been converting my Cg shaders I wrote for my AGT work in university into GLSL, however I came by an annoying problem, Cg uses a function that doesn't exist in GLSL, but does exist in HLSL. I eventually found documentation on what it does and so looked up the GLSL equivilant. The Cg version [...]]]></description>
			<content:encoded><![CDATA[<p>I've been converting my Cg shaders I wrote for my AGT work in university into GLSL, however I came by an annoying problem, Cg uses a function that doesn't exist in GLSL, but does exist in HLSL. I eventually found documentation on what it does and so looked up the GLSL equivilant. The Cg version shown below...</p>
<div id="wpshdo_15" class="wp-synhighlighter-outer"><div id="wpshdt_15" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_15"></a><a id="wpshat_15" class="wp-synhighlighter-title" href="#codesyntax_15"  onClick="javascript:wpsh_toggleBlock(15)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_15" onClick="javascript:wpsh_code(15)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_15" onClick="javascript:wpsh_print(15)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_15" class="wp-synhighlighter-inner" style="display: block;"><pre class="c" style="font-family:monospace;">float3 outValue <span class="sy0">=</span> saturate<span class="br0">&#40;</span> inValue <span class="br0">&#41;</span><span class="sy0">;</span></pre></div></div>
<p>Becomes the following when converted to GLSL...</p>
<div id="wpshdo_16" class="wp-synhighlighter-outer"><div id="wpshdt_16" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_16"></a><a id="wpshat_16" class="wp-synhighlighter-title" href="#codesyntax_16"  onClick="javascript:wpsh_toggleBlock(16)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_16" onClick="javascript:wpsh_code(16)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_16" onClick="javascript:wpsh_print(16)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_16" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="kw3">vec3</span> outValue <span class="sy0">=</span> <span class="kw5">clamp</span><span class="br0">&#40;</span> inValue<span class="sy0">,</span> 0<span class="sy0">.</span>0<span class="sy0">,</span> 1<span class="sy0">.</span>0 <span class="br0">&#41;</span><span class="sy0">;</span></pre></div></div>
<p>&nbsp;</p>
<p>Thought this might be useful for others who might be having the same problem.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2009/04/13/cghlsl-saturate/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Texture Splat Shader</title>
		<link>http://www.lastrayofhope.com/2008/02/26/texture-splat-shader/</link>
		<comments>http://www.lastrayofhope.com/2008/02/26/texture-splat-shader/#comments</comments>
		<pubDate>Tue, 26 Feb 2008 17:56:54 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[Cg]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=660</guid>
		<description><![CDATA[A shader for using an RGBA Map to texture map a primitive with four textures. The first texture is the base texture splat map. The image on this blog entry is a texture splat map that I've used, anywhere there is a green component is grass, anywhere there is blue is sand/dirt, and anywhere there [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.lastrayofhope.com/wp-content/uploads/2008/02/ground.png"><img class="alignleft size-medium wp-image-2611" title="Texture Splat Base" src="http://www.lastrayofhope.com/wp-content/uploads/2008/02/ground-300x300.png" alt="Texture Splat Base" width="180" height="180" /></a>A shader for using an RGBA Map to texture map a primitive with four textures.</p>
<p>The first texture is the base texture splat map. The image on this blog entry is a texture splat map that I've used, anywhere there is a green component is grass, anywhere there is blue is sand/dirt, and anywhere there is red is rock/road. The colour component acts as a blend value.</p>
<p>The other three textures represent the area I just mentioned, there is room for texture to be applied to the same texture splat if the alpha channel is used, but I prefer to save that for use as a height map in the vertex stage.</p>
<div id="wpshdo_17" class="wp-synhighlighter-outer"><div id="wpshdt_17" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_17"></a><a id="wpshat_17" class="wp-synhighlighter-title" href="#codesyntax_17"  onClick="javascript:wpsh_toggleBlock(17)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_17" onClick="javascript:wpsh_code(17)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_17" onClick="javascript:wpsh_print(17)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_17" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">// --- [ structs ] --------------------------------------------</span>
<span class="co1">//</span>
<span class="kw3">struct</span> VS_OUTPUT
<span class="br0">&#123;</span>
	float4 position <span class="sy0">:</span> POSITION<span class="sy0">;</span>
	float2 uv <span class="sy0">:</span> TEXCOORD0<span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
<span class="kw3">struct</span> VS_INPUT
<span class="br0">&#123;</span>
	float4 position <span class="sy0">:</span> POSITION<span class="sy0">;</span>
	float2 uv <span class="sy0">:</span> TEXCOORD0<span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// --- [ vertex program ] -------------------------------------</span>
<span class="co1">//</span>
VS_OUTPUT main_vp<span class="br0">&#40;</span> VS_INPUT In<span class="sy0">,</span> <span class="kw2">uniform</span> float4x4 worldViewProj <span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	VS_OUTPUT Out<span class="sy0">;</span>
&nbsp;
	Out<span class="sy0">.</span><span class="me1">position</span> <span class="sy0">=</span> mul<span class="br0">&#40;</span>worldViewProj<span class="sy0">,</span> In<span class="sy0">.</span><span class="me1">position</span> <span class="br0">&#41;</span><span class="sy0">;</span>
	Out<span class="sy0">.</span><span class="me1">uv</span> <span class="sy0">=</span> In<span class="sy0">.</span><span class="me1">uv</span><span class="sy0">;</span>
&nbsp;
	<span class="kw1">return</span> Out<span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// --- [ fragment program ] -----------------------------------</span>
<span class="co1">//</span>
float4 main_fp<span class="br0">&#40;</span> float2 uv <span class="sy0">:</span> TEXCOORD0<span class="sy0">,</span> <span class="kw2">uniform</span> <span class="kw3">sampler2D</span> texBase<span class="sy0">,</span> <span class="kw2">uniform</span> <span class="kw3">sampler2D</span> tex0<span class="sy0">,</span> <span class="kw2">uniform</span> <span class="kw3">sampler2D</span> tex1<span class="sy0">,</span> <span class="kw2">uniform</span> <span class="kw3">sampler2D</span> tex2 <span class="br0">&#41;</span> <span class="sy0">:</span> COLOR
<span class="br0">&#123;</span>
	float3 colour <span class="sy0">=</span> tex2D<span class="br0">&#40;</span>texBase<span class="sy0">,</span> uv<span class="br0">&#41;</span><span class="sy0">.</span><span class="me1">rgb</span><span class="sy0">;</span>
	<span class="kw1">return</span> tex2D<span class="br0">&#40;</span>tex0<span class="sy0">,</span> uv<span class="br0">&#41;</span> <span class="sy0">*</span> colour<span class="sy0">.</span><span class="me1">r</span> <span class="sy0">+</span> tex2D<span class="br0">&#40;</span>tex1<span class="sy0">,</span> uv<span class="br0">&#41;</span> <span class="sy0">*</span> colour<span class="sy0">.</span><span class="me1">g</span> <span class="sy0">+</span> tex2D<span class="br0">&#40;</span>tex2<span class="sy0">,</span> uv<span class="br0">&#41;</span> <span class="sy0">*</span> colour<span class="sy0">.</span><span class="me1">b</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2008/02/26/texture-splat-shader/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Basic Water Shader</title>
		<link>http://www.lastrayofhope.com/2008/02/13/basic-water-shader/</link>
		<comments>http://www.lastrayofhope.com/2008/02/13/basic-water-shader/#comments</comments>
		<pubDate>Wed, 13 Feb 2008 17:50:32 +0000</pubDate>
		<dc:creator>Kaluriel</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Shaders]]></category>
		<category><![CDATA[Cg]]></category>

		<guid isPermaLink="false">http://www.lastrayofhope.com/?p=655</guid>
		<description><![CDATA[A very simple vertex shader for creating basic wave motion. I designed this shader for use with the Tales of Phantasia Remake for the river in Totus Village. And despite its simplicity it turned out quite well. &#160;]]></description>
			<content:encoded><![CDATA[<p>A very simple vertex shader for creating basic wave motion. I designed this shader for use with the Tales of Phantasia Remake for the river in Totus Village. And despite its simplicity it turned out quite well.</p>
<div id="wpshdo_18" class="wp-synhighlighter-outer"><div id="wpshdt_18" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_18"></a><a id="wpshat_18" class="wp-synhighlighter-title" href="#codesyntax_18"  onClick="javascript:wpsh_toggleBlock(18)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_18" onClick="javascript:wpsh_code(18)" title="Show code only"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_18" onClick="javascript:wpsh_print(18)" title="Print code"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="http://www.lastrayofhope.com/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_18" class="wp-synhighlighter-inner" style="display: block;"><pre class="glsl" style="font-family:monospace;"><span class="co1">// --- [ structs ] --------------------------------------------</span>
<span class="co1">//</span>
<span class="kw3">struct</span> VS_OUTPUT
<span class="br0">&#123;</span>
	float4 position <span class="sy0">:</span> POSITION<span class="sy0">;</span>
	float2 uv <span class="sy0">:</span> TEXCOORD0<span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
<span class="kw3">struct</span> VS_INPUT
<span class="br0">&#123;</span>
	float4 position <span class="sy0">:</span> POSITION<span class="sy0">;</span>
	float2 uv <span class="sy0">:</span> TEXCOORD0<span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
<span class="co1">// --- [ vertex program ] -------------------------------------</span>
<span class="co1">//</span>
VS_OUTPUT main_vp<span class="br0">&#40;</span> VS_INPUT In<span class="sy0">,</span> <span class="kw2">uniform</span> float4x4 worldViewProj<span class="sy0">,</span> <span class="kw2">uniform</span> <span class="kw3">float</span> time <span class="br0">&#41;</span>
<span class="br0">&#123;</span>
	VS_OUTPUT Out<span class="sy0">;</span>
&nbsp;
	Out<span class="sy0">.</span><span class="me1">position</span> <span class="sy0">=</span> In<span class="sy0">.</span><span class="me1">position</span><span class="sy0">;</span>
	Out<span class="sy0">.</span><span class="me1">position</span><span class="sy0">.</span><span class="me1">y</span> <span class="sy0">=</span> In<span class="sy0">.</span><span class="me1">position</span><span class="sy0">.</span><span class="me1">y</span> <span class="sy0">+</span> 0<span class="sy0">.</span>10 <span class="sy0">*</span> <span class="br0">&#40;</span> <span class="kw5">sin</span><span class="br0">&#40;</span> <span class="br0">&#40;</span> In<span class="sy0">.</span><span class="me1">position</span><span class="sy0">.</span><span class="me1">z</span> <span class="sy0">+</span> <span class="br0">&#40;</span> time <span class="sy0">*</span> 30 <span class="br0">&#41;</span> <span class="br0">&#41;</span> <span class="sy0">+</span> <span class="br0">&#40;</span> In<span class="sy0">.</span><span class="me1">position</span><span class="sy0">.</span><span class="me1">x</span> <span class="sy0">+</span> <span class="br0">&#40;</span> time <span class="sy0">*</span> 30 <span class="br0">&#41;</span> <span class="br0">&#41;</span> <span class="br0">&#41;</span> <span class="br0">&#41;</span> <span class="sy0">-</span> <span class="nu0">0.10</span><span class="sy0">;</span>
	Out<span class="sy0">.</span><span class="me1">position</span> <span class="sy0">=</span> mul<span class="br0">&#40;</span>worldViewProj<span class="sy0">,</span> Out<span class="sy0">.</span><span class="me1">position</span><span class="br0">&#41;</span><span class="sy0">;</span>
	Out<span class="sy0">.</span><span class="me1">uv</span><span class="sy0">.</span><span class="me1">x</span> <span class="sy0">=</span> <span class="br0">&#40;</span> In<span class="sy0">.</span><span class="me1">uv</span><span class="sy0">.</span><span class="me1">x</span> <span class="sy0">-</span> time <span class="sy0">*</span> 5 <span class="br0">&#41;</span> <span class="sy0">*</span> <span class="nu0">0.5</span><span class="sy0">;</span>
	Out<span class="sy0">.</span><span class="me1">uv</span><span class="sy0">.</span><span class="me1">y</span> <span class="sy0">=</span> <span class="br0">&#40;</span> In<span class="sy0">.</span><span class="me1">uv</span><span class="sy0">.</span><span class="me1">y</span> <span class="sy0">+</span> time <span class="sy0">*</span> 10 <span class="br0">&#41;</span> <span class="sy0">*</span> <span class="nu0">0.5</span><span class="sy0">;</span>
&nbsp;
	<span class="kw1">return</span> Out<span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="co1">// --- [ fragment program ] -----------------------------------</span>
<span class="co1">//</span>
float4 main_fp<span class="br0">&#40;</span> float2 uv <span class="sy0">:</span> TEXCOORD0<span class="sy0">,</span> <span class="kw2">uniform</span> <span class="kw3">sampler2D</span> tex0 <span class="br0">&#41;</span> <span class="sy0">:</span> COLOR
<span class="br0">&#123;</span>
	<span class="kw1">return</span> tex2D<span class="br0">&#40;</span>tex0<span class="sy0">,</span> uv<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lastrayofhope.com/2008/02/13/basic-water-shader/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

