<?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:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>ioxu heavy industries</title>
	<atom:link href="http://blog.ioxu.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://blog.ioxu.com</link>
	<description>ioxu heavy industries</description>
	<pubDate>Wed, 28 Nov 2012 03:30:53 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>lightrays in LÖVE</title>
		<link>http://blog.ioxu.com/?p=909</link>
		<comments>http://blog.ioxu.com/?p=909#comments</comments>
		<pubDate>Sun, 25 Nov 2012 16:44:05 +0000</pubDate>
		<dc:creator>ben</dc:creator>
		
		<category><![CDATA[realtime]]></category>

		<category><![CDATA[glsl]]></category>

		<category><![CDATA[love2d]]></category>

		<guid isPermaLink="false">http://blog.ioxu.com/?p=909</guid>
		<description><![CDATA[<a href="http://blog.ioxu.com/?p=909"><img class="alignnone size-thumbnail wp-image-352" title="texarea" src="http://blog.ioxu.com/wp-content/uploads/2012/11/lril_01_blurb.jpg" /></a>
A LÖVE lightrays pixeleffect.]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.ioxu.com/wp-content/uploads/2012/11/lril_01.jpg"><img class="alignnone size-medium wp-image-923" title="lril_01" src="http://blog.ioxu.com/wp-content/uploads/2012/11/lril_01-300x224.jpg" alt="lril_01" width="420" height="312" /></a></p>
<p><a href="https://love2d.org/">LÖVE</a> is a fun 2d graphics/game engine based around Lua.</p>
<p>I adapted a glsl shader for a light ray effect in a <a href="https://love2d.org/">LÖVE</a> pixeleffect. I used this effect in a hastily assembled demo of pixel shading in a sidescroller mockup:</p>
<p><iframe src="http://player.vimeo.com/video/43841761?badge=0" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<p><a href="http://fabiensanglard.net/"> Fabien Sanglard&#8217;s </a> original code, and a brief but excellent description of the effect, is <a href="http://fabiensanglard.net/lightScattering/index.php">here</a>.</p>
<p><a href="https://love2d.org/wiki/love.graphics.newPixelEffect">This LÖVE wiki page</a> lists the main differences between pixeleffects and glsl you should be aware of while adapting shaders to LÖVE.</p>
<h1>adapting glsl to pixeleffect</h1>
<p>To adapt Fabien&#8217;s glsl pixel shader to a LÖVE pixeleffect I only had to change a couple of things.<br />
The biggest change was moving the <strong>void main()</strong> function to one that returns a vec4. LÖVE requires this function to be named <strong>effect</strong>, and to have a bunch of arguments supplied:</p>
<p><code>void main(){</code></p>
<p>became</p>
<p><code>vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 pixel_coords){</code></p>
<p>which returns a vec4 value instead of setting a value to gl_FragColor.</p>
<p>The adapted shader, as a LÖVE pixeleffect looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="glsl" style="font-family:monospace;"><span style="color: #333399; font-weight: bold;">extern</span> number exposure <span style="color: #000066;">=</span> <span style="color: #0000ff;">1.0</span><span style="color: #000066;">;</span>
<span style="color: #333399; font-weight: bold;">extern</span> number decay <span style="color: #000066;">=</span> <span style="color: #0000ff;">1.0</span><span style="color: #000066;">;</span>
<span style="color: #333399; font-weight: bold;">extern</span> number density <span style="color: #000066;">=</span> <span style="color: #0000ff;">1.0</span><span style="color: #000066;">;</span>
<span style="color: #333399; font-weight: bold;">extern</span> number weight <span style="color: #000066;">=</span> <span style="color: #0000ff;">1.0</span><span style="color: #000066;">;</span>
<span style="color: #333399; font-weight: bold;">extern</span> <span style="color: #000066; font-weight: bold;">vec2</span> lightPositionOnScreen<span style="color: #000066;">=</span> <span style="color: #000066; font-weight: bold;">vec2</span><span style="color: #000066;">&#40;</span><span style="color: #0000ff;">0.0</span><span style="color: #000066;">,</span><span style="color: #0000ff;">0.0</span><span style="color: #000066;">&#41;</span><span style="color: #000066;">;</span>
<span style="color: #333399; font-weight: bold;">extern</span> number NUM_SAMPLES <span style="color: #000066;">=</span> <span style="color: #0000ff;">100.0</span><span style="color: #000066;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">vec4</span> effect<span style="color: #000066;">&#40;</span><span style="color: #000066; font-weight: bold;">vec4</span> color<span style="color: #000066;">,</span> Image texture<span style="color: #000066;">,</span> <span style="color: #000066; font-weight: bold;">vec2</span> texture_coords<span style="color: #000066;">,</span> <span style="color: #000066; font-weight: bold;">vec2</span> pixel_coords<span style="color: #000066;">&#41;</span>
<span style="color: #000066;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">vec2</span> deltaTextCoord <span style="color: #000066;">=</span> <span style="color: #000066; font-weight: bold;">vec2</span><span style="color: #000066;">&#40;</span> texture_coords <span style="color: #000066;">-</span> lightPositionOnScreen<span style="color: #000066;">.</span><span style="color: #006600;">xy</span> <span style="color: #000066;">&#41;</span><span style="color: #000066;">;</span>
	<span style="color: #000066; font-weight: bold;">vec2</span> textCoo <span style="color: #000066;">=</span> texture_coords<span style="color: #000066;">.</span><span style="color: #006600;">xy</span><span style="color: #000066;">;</span>
	deltaTextCoord <span style="color: #000066;">*=</span> <span style="color: #0000ff;">1.0</span> <span style="color: #000066;">/</span> <span style="color: #000066; font-weight: bold;">float</span><span style="color: #000066;">&#40;</span>NUM_SAMPLES<span style="color: #000066;">&#41;</span> <span style="color: #000066;">*</span> density<span style="color: #000066;">;</span>
	<span style="color: #000066; font-weight: bold;">float</span> illuminationDecay <span style="color: #000066;">=</span> <span style="color: #0000ff;">1.0</span><span style="color: #000066;">;</span>
	<span style="color: #000066; font-weight: bold;">vec4</span> cc <span style="color: #000066;">=</span> <span style="color: #000066; font-weight: bold;">vec4</span><span style="color: #000066;">&#40;</span><span style="color: #0000ff;">0.0</span><span style="color: #000066;">,</span> <span style="color: #0000ff;">0.0</span><span style="color: #000066;">,</span> <span style="color: #0000ff;">0.0</span><span style="color: #000066;">,</span> <span style="color: #0000ff;">1.0</span><span style="color: #000066;">&#41;</span><span style="color: #000066;">;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">for</span><span style="color: #000066;">&#40;</span><span style="color: #000066; font-weight: bold;">int</span> i<span style="color: #000066;">=</span><span style="color: #0000ff;">0</span><span style="color: #000066;">;</span> i <span style="color: #000066;">&lt;</span> NUM_SAMPLES <span style="color: #000066;">;</span> i<span style="color: #000066;">++</span><span style="color: #000066;">&#41;</span>
	<span style="color: #000066;">&#123;</span>
		textCoo <span style="color: #000066;">-=</span> deltaTextCoord<span style="color: #000066;">;</span>
		<span style="color: #000066; font-weight: bold;">vec4</span> sample <span style="color: #000066;">=</span> Texel<span style="color: #000066;">&#40;</span> texture<span style="color: #000066;">,</span> textCoo <span style="color: #000066;">&#41;</span><span style="color: #000066;">;</span>
		sample <span style="color: #000066;">*=</span> illuminationDecay <span style="color: #000066;">*</span> weight<span style="color: #000066;">;</span>
		cc <span style="color: #000066;">+=</span> sample<span style="color: #000066;">;</span>
		illuminationDecay <span style="color: #000066;">*=</span> decay<span style="color: #000066;">;</span>
	<span style="color: #000066;">&#125;</span>
	cc <span style="color: #000066;">*=</span> exposure<span style="color: #000066;">;</span>
	<span style="color: #000000; font-weight: bold;">return</span> cc<span style="color: #000066;">;</span>
<span style="color: #000066;">&#125;</span></pre></div></div>

<h1>an actual example</h1>
<p>Here is a .love with the pixeleffect in action: (you&#8217;ll need <a href="https://love2d.org/">LÖVE</a> to run this)</p>
<h1><a href="http://ioxu.com/publicdownloads/love2d/lightrays.love">lightrays.love</a></h1>
<p>Like Fabien&#8217;s example, there are keys to play with the effect in realtime:</p>
<p>exposure +-:<strong> w, s</strong><br />
decay +-:<strong> e, d</strong><br />
weight +-:<strong> r, f</strong><br />
density +-:<strong> t, g</strong><br />
vsync toggle:<strong> v</strong><br />
cycle through rendering buffers:<strong> b</strong></p>
<p>With vsync off (v key) I get a capped 1000 fps on a Nvidia GTX 580 card.</p>
<p>Feel free to use the LÖVE code for whatever use you desire.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.ioxu.com/?feed=rss2&amp;p=909</wfw:commentRss>
	
		<media:thumbnail