<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>\o/</title>
    <link rel="alternate" type="text/html" href="http://erleuchtet.org/" />
    <link rel="self" type="application/atom+xml" href="http://erleuchtet.org/atom.xml" />
    <id>tag:erleuchtet.org,2008-03-14://3</id>
    <updated>2009-01-17T18:11:20Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 4.32-en</generator>

<entry>
    <title>Talk: Computer Graphics, Part 1</title>
    <link rel="alternate" type="text/html" href="http://erleuchtet.org/2009/01/talk-computer-graphics-part-1.html" />
    <id>tag:erleuchtet.org,2009://3.25</id>

    <published>2009-01-15T00:23:42Z</published>
    <updated>2009-01-17T18:11:20Z</updated>

    <summary>As promised earlier, i gave a talk at entropia in december. I tried to touch many of the non-hardware-oriented topics in computer graphics, with a focus on those that are interesting (to me, at least) and easy to explain without...</summary>
    <author>
        <name>cupe</name>
        
    </author>
    
        <category term="graphics" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="talks" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://erleuchtet.org/">
        <![CDATA[<p>As promised <a href="http://erleuchtet.org/2008/11/latex-beamer-markup-less-sucka.html">earlier</a>, i gave a talk at <a href="http://entropia.de/">entropia</a> in december. I tried to touch many of the non-hardware-oriented topics in computer graphics, with a focus on those that are interesting (to me, at least) and easy to explain without too much background knowledge in math or computer science.</p>

<p>The talk was an experiment for me in several ways. First, the presentation style: The slides should contain as little text as possible, providing only visual assistance to what i said rather than guiding the talk themselves. In typical university or conference talks, i usually read the whole content-stuffed slide as soon as it appears without listening to what the lecturer says. The remaining two thirds of the time the slide takes usually consists of waiting for the next slide while trying not to fall asleep. I did not want to go as far into the opossite direction as Lawrence Lessig does because, obviously, the talk would be graphics-oriented and some of the pictures would need time to sink in and be explained. I think the style worked out fine and i surprised myself by talking quite a lot about slides with just one picture on them although i had not been practicing.</p>

<p>Second, the technical means: It was also the first time for me to use the <a href="http://latex-beamer.sourceforge.net/">Latex Beamer</a> Class for slides. Creating the slides was painless enough with the help of my <a href="http://erleuchtet.org/2008/11/latex-beamer-markup-less-sucka.html">latex preprocessor</a>, but the result did not convince me: (La)tex is not made for displaying pixel data on screen, causing images to be resized that want to displayed exactly 1:1. Most pdf viewers use Nearest Neighbour <a href="http://en.wikipedia.org/wiki/Interpolation">interpolation</a> for resizing pictures, making all my nice pictures look bad - which is somewhat embarrassing for a talk that covers image filtering and interpolation. With evince i found a pdf viewer that performs other interpolation methods, making the result bearable. Nevertheless i will have to find some other way to show images next time. Possibly i will create the slides as images themselves and present them with some image viewer like gqview. And maybe i&#8217;ll end up writing another minimalist slide-defining markup language that creates png images.</p>

<p>Third, i wanted to be able to publish the slides. This meant restricting myself to pictures released under some reasonably free licence or making my own. I ended up using many pictures from the <a href="http://commons.wikimedia.org">Wikimedia Commons</a>, usually modifying them to fit the black background. I also made many of the pictures myself. I included a file that provides proper attribution to the creators of the <a href="http://creativecommons.org/licenses/by/3.0/">CC-Attribution</a>-images in the <a href="http://entropia.de/wiki/Bild:Computer-graphics-part1.tar.gz">archive</a> containing the slides. This involved finding the authors of each of the images which was quite painful (and the reason for the long time it took to publish the slides). I&#8217;d really appreciate a Creative Commons license or something similar that does not force users of my work to remember or research my name - releasing into the Public Domain is not possible in Germany. Just granting all users every imaginable rights to to as they wish (which i hereby do) leaves me doubting the lawfulness of this statement. I&#8217;d really like some standard way of doing this.</p>

<p>All in all things went well and i certainly learned something in the two months it took to prepare a talk that was over in about 90 minutes. As i invested this considerable amount of time into something that did not last that long, i will certainly consider giving it again (or recycling the slides for a similar talk).</p>

<p>The talk&#8217;s <a href="http://entropia.de/wiki/Computergrafik_(Vortrag)"> article in the amazing entropia wiki</a> contains a link to the slides, some of whom may not make that much sense without any comment.</p>

<p>And here&#8217;s the flash version:</p>

<p><embed src="http://static.slideshare.net/swf/ssplayer2.swf?doc=computergraphicspart1-1231956273897879-2&amp;rel=0&amp;stripped_title=computer-graphics-part1-presentation" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></p>
]]>
        

    </content>
</entry>

<entry>
    <title>LaTeX beamer markup = less suckage</title>
    <link rel="alternate" type="text/html" href="http://erleuchtet.org/2008/11/latex-beamer-markup-less-sucka.html" />
    <id>tag:erleuchtet.org,2008://3.24</id>

    <published>2008-11-11T23:18:05Z</published>
    <updated>2008-11-12T00:35:24Z</updated>

    <summary>There are many bad things about latex - like not being able to use footnotes in tables, color verbatim text for syntax highlighting or center math expressions. One general problem is its verbosity when only a small subset of its...</summary>
    <author>
        <name>cupe</name>
        
    </author>
    
        <category term="lisp" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="programming" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="talks" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://erleuchtet.org/">
        <![CDATA[<p>There are many bad things about latex - like not being able to use footnotes in tables, color verbatim text for syntax highlighting or center math expressions. One general problem is its verbosity when only a small subset of its functionality is needed. Especially when using the beamer class, the mental and textual overhead made writing latex too bothersome for me to be fun. A simple wiki-style markup would suffice for most tasks when creating slides, with extra functionality only needed for special slides like titles. Wouldn't it be nice to write<br />
<em><br />
=Why tex needs to be replaced=<br />
There are countless reasons:<br />
* it's old<br />
* I don't like it</em></p>

<p>which would become<br />
<em><br />
\begin{frame}[plain]<br />
  \frametitle{Why tex needs to be replaced}<br />
There are countless reasons:<br />
\begin{itemize}<br />
  \item it's old<br />
  \item I don't like it<br />
\end{itemize}<br />
\end{frame}</em></p>

<p>I made a primitive LaTeX preprocessor in lisp that does just that. It handles slides, converts itemizations and includes and resizes graphics, while retaining all the nice features that make us use latex in the first place (i.e. the math mode). Things to improve include support for enumerations and flushright/centering and a more friendly shellscript. I will probably update it as I progress with the talk i'm currently preparing which will now be all the more awesome.</p>

<p>You can check out everything from svn://erleuchtet.org/texsucks or <span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://erleuchtet.org/files/texsucks.tar.gz">download</a></span> it directly. With sbcl installed, just run make.sh to create an example pdf.</p>]]>
        
    </content>
</entry>

<entry>
    <title>Project Overview: perfectstorm</title>
    <link rel="alternate" type="text/html" href="http://erleuchtet.org/2008/03/project-overview-perfectstorm.html" />
    <id>tag:erleuchtet.org,2008://4.5</id>

    <published>2008-03-30T23:01:44Z</published>
    <updated>2008-04-02T17:18:12Z</updated>

    <summary> perfectstorm is a real time strategy game study written in common lisp using OpenGL for graphics display and cairo for texture generation. It is in active development with many of the basic features still unimplemented, but i decided the...</summary>
    <author>
        <name>cupe</name>
        
    </author>
    
        <category term="games" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="graphics" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="lisp" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://erleuchtet.org/">
        <![CDATA[<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/with-health-bars.png"><img alt="with-health-bars.png" src="http://erleuchtet.org/with-health-bars-thumb-300x225.png" width="300" height="225" class="mt-image-right" style="float: right; margin: 0 0 20px 20px;" /></a></span></p>

<p><strong>perfectstorm</strong> is a real time strategy game study written in common lisp using OpenGL for graphics display and cairo for texture generation. It is in active development with many of the basic features still unimplemented, but i decided the effort put into it justifies some public documentation.</p>
]]>
        <![CDATA[<h2><strong>Why</strong></h2>

<p>I started perfectstorm because i was annoyed with the Artificial Intelligence offered in most commercial RTS games. Although significant academic research is going on, it seldom finds its way into released games due to publishers&#8217; wishes for absolute stability of the &#8220;gameplay experience&#8221; and the notion of AI as just being responsible for pathfinding plus something. Naturally, AI development can only begin late in the development cycle when the deadline is nearing. The most pressing feature the single &#8220;AI guy&#8221; most teams employ has to do is implementing pathfinding, which is not even part of AI if you want to see it that way. After that, only a poor makeshift enemy AI can be implemented before the product is shipped. Aside from that, writing good AI is hard. Or so i heard.</p>

<p>Most of the academic AI research going on seems to be tested on <a href="http://www.cs.ualberta.ca/~mburo/orts/">ORTS</a> , which seems to be decent and alive. Since i wanted to learn about general game coding and graphics development i decided not to use ORTS and write my own. And of course, i wanted to use lisp since i had not done a serious project with lisp and wanted to test its capability (and mine) to cope with heavy library interaction and larger real-world projects. The name &#8220;perfect storm&#8221; is a metaphor used to denote the interaction of several different parts to maximum overall effect, something i want both my RTS units and my code to perform :)</p>

<h2><strong>Details</strong></h2>

<p>For graphics, i first tested SDL, the 2D part of which turned out not to be hardware-acceleratable under X11. OpenGL was the only alternative and &#8212; thanks to the <a href="http://common-lisp.net/project/cl-opengl/">excellent cl-opengl bindings</a> &#8212; is very easy and fun to use. Now i needed textures and decided i wanted a <a href="http://www.everybody-dies.com/about/screenshots.html">defcon</a>-like slick minimalist-but-pleasing look. No complex models or realism was needed, so i figured drawing nice antialiased primitives and gradients would be enough and settled for <a href="http://cairographics.org">cairo</a>. While cairo is certainly not fast enough for drawing life animations, it produces very nice output and is reasonably easy to use, although the cl-cairo bindings are a pain (i hear that with cl-cairo2 and cl-cairo-cffi two alternatives have emerged).  After spending quite some time setting everything up and finally successfully extracting pixel data from cairo i started defining first units and implementing dummy game mechanics and graphics.</p>

<h2><strong>Status</strong></h2>

<p>Since then, the game has grown and, with the developer count rapidly soaring up to two, includes the following features:</p>

<ul>
<li>User-definable units and weapons that can be plugged together</li>
<li>Object-oriented very open design</li>
<li>Some 20 different textures, with the possibility to add more very easily</li>
<li>Fragment shaders for nice glows and flickering laser beams</li>
<li>Pathfinding</li>
<li>In-game developer console (aka REPL)</li>
</ul>

<h2><strong>Future Plans</strong></h2>

<p>In the near future, i&#8217;d like to see the following things:</p>

<ul>
<li>Steering behaviours for units (currently work in progress)</li>
<li>A first easily replaceable resource scheme</li>
<li>Buildings</li>
<li>More verbose GUI</li>
<li>Dummy ai for first playtesting</li>
</ul>

<p>You are welcome to try it and play around if you like, or even contribute something.</p>

<p>Currently, the svn version is not guaranteed to be in any usable state or even to compile. Since we are more or less concentrating on one feature at the time, it is likely you will see some debug output concering the current development focus when just starting it. Dependencies are listed in the README file. You can check it out from svn://erleuchtet.org/perfectstorm. You will need both the cairo and OpenGL bindings from the same svn repo since i added some features that are needed by perfectstorm.</p>

<p><strong>But beware!</strong> the current state is not that presentable: you&#8217;ll just see pathfinding debug output at the moment. When a first dummy is playable and the code is cleaned up a bit we&#8217;ll make a project page.</p>

<h2><strong>Screenshots</strong></h2>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/pathfinding.png"><img alt="pathfinding.png" src="http://erleuchtet.org/pathfinding-thumb-300x234.png" width="300" height="234" class="mt-image-none" style="" /></a></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/land_vs_air.png"><img alt="land_vs_air.png" src="http://erleuchtet.org/land_vs_air-thumb-300x225.png" width="300" height="225" class="mt-image-none" style="" /></a></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/shader-on.png"><img alt="shader-on.png" src="http://erleuchtet.org/shader-on-thumb-300x225.png" width="300" height="225" class="mt-image-none" style="" /></a></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/shader-off.png"><img alt="shader-off.png" src="http://erleuchtet.org/shader-off-thumb-300x225.png" width="300" height="225" class="mt-image-none" style="" /></a></span></p>
]]>
    </content>
</entry>

<entry>
    <title>Terrain Generation 90ies-style</title>
    <link rel="alternate" type="text/html" href="http://erleuchtet.org/2008/03/terrain-generation-90iesstyle.html" />
    <id>tag:erleuchtet.org,2008://4.4</id>

    <published>2008-03-20T15:02:06Z</published>
    <updated>2008-03-20T21:30:00Z</updated>

    <summary>If you have played with Bryce or Terragen you know that Terrain Generation is fun and useless. The Midpoint Displacement Algorithm is one of the simplest methods to build a triangle mesh that resembles the terrain found in nature. You...</summary>
    <author>
        <name>cupe</name>
        
    </author>
    
        <category term="graphics" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="lisp" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://erleuchtet.org/">
        <![CDATA[<p>If you have played with Bryce or Terragen you know that Terrain Generation is fun and useless. The Midpoint Displacement Algorithm is one of the simplest methods to build a triangle mesh that resembles the terrain found in nature. You can see its output on the right.
<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/displacement.jpg"><img alt="displacement.jpg" src="http://erleuchtet.org/displacement-thumb-200x149.jpg" width="200" height="149" class="mt-image-right" style="" /></a></span></p>

<p>While this looks like a mountain of some sorts, the algorithm does not produce good mountains every time you invoke it. Instead, the result is quite random and almost always bad. Have a look at the algorithm:</p>

<blockquote>
  <ol>
  <li>Make one triangle.</li>
  <li>Subdivide all your triangles into four new ones (use the edge midpoints as new vertices).</li>
  <li>Move your new midpoints along the y-axis by a random offset.</li>
  <li>Repeat 2 and 3 with half the offset.</li>
  </ol>
</blockquote>

<p>The algorithm refines its terrain model recursively with every step, producing self-similar (in other words fractal) patches of terrain. It is short and easy to understand. Too bad real mountains are only superficially self-similar. One of the most visible shortcomings of the algorithm can be seen when the random displacement is replaced by its expected value. The &#8220;expected value&#8221; for the algorithm looks like this:</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/displacement-norandom.jpg"><img alt="displacement-norandom.jpg" src="http://erleuchtet.org/displacement-norandom-thumb-200x149.jpg" width="200" height="149" class="mt-image-left" style="" /></a></span></p>

<p>These furrows can be seen in most randomly displaced terrains, too, when viewed from specific angles or directly from above. (The yellow cube is the light source)</p>

<p>A better approach might be to use <a href="http://en.wikipedia.org/wiki/Perlin_noise">Perlin noise</a> as a heightmap since it does not introduce visible artifacts. I&#8217;ll probably test this later.</p>

<p>Concerning the implementation, i spent most of the time implementing the fundamental mesh operations like splitting lines and triangles. Since this will not be last time i&#8217;ll handle triangle meshes and i might save other Lispers the pain i am thinking about expanding this and publishing it as a general mesh handling and drawing library for Common Lisp.</p>
]]>
        

    </content>
</entry>

<entry>
    <title>a quick guide to shaders</title>
    <link rel="alternate" type="text/html" href="http://erleuchtet.org/2008/03/a-quick-guide-to-shaders.html" />
    <id>tag:erleuchtet.org,2008://3.5</id>

    <published>2008-03-14T00:09:35Z</published>
    <updated>2009-01-15T02:29:42Z</updated>

    <summary>A shader is a small program that is executed on the graphics card. On modern graphics cards, up to 128 shader programs can be executed in parallel. Conventional parallel programming is hard because there are resources to be shared, but...</summary>
    <author>
        <name>cupe</name>
        
    </author>
    
        <category term="graphics" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="en" xml:base="http://erleuchtet.org/">
        <![CDATA[<p>A shader is a small program that is executed on the graphics card. On modern graphics cards, up to 128 shader programs can be executed in parallel. Conventional parallel programming is hard because there are resources to be shared, but shader programs are completely independent, allowing the graphics card manufacturers to add more shader pipelines at will. Currently there are two important types of shaders: vertex shaders and fragment shaders. For each frame that is rendered, all visible vertices (read: nodes of the mesh) are processed by vertex shaders which can modify their position or attributes like normals, color or any other user-defined attributes.</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://erleuchtet.org/fraktale_teekanne.png"><img alt="fraktale_teekanne.png" src="http://erleuchtet.org/fraktale_teekanne-thumb-200x150.png" width="200" height="150" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></a></span>
One fragment corresponds to one pixel on the screen. For each fragment, the fragment shader is called. A fragment belongs to the polygon visible at the position of the corresponding pixel on the screen, i.e. the intersection of the pixel ray with the polygon defines the fragment&#8217;s position in the 3d world. The fragment shader thus knows its position within the polygon and can use this information, e.g. for looking up (and returning) the color of the polygon&#8217;s texture at that place. When using fragment shaders, OpenGL will not do texture mapping, you will have to use a trivial fragment shader to accomplish what would happen automatically without shaders.</p>

<p>Information can pass from the vertex shader to the fragment shader, but not in the other direction. The shader programmer may define arbitrary &#8220;varying&#8221; constants which can be written by the vertex shader and are, linearly interpolated between the vertices, available to the fragment shader. For each triangle three vertex shader executions need to be made, but a much larger amount of fragment shader executions is needed, depending on the size of the triangle on the screen.</p>

<p>Naturally, the fragment shader has access to all of the triangle&#8217;s textures. For advanced shaders, like those in modern games, these auxiliary textures usually contain a normal map and/or a height map, i.e. the direction of the normal for each texel (the three coordinates of the normal are stored as rgb) or the height of the texel compared to the triangle plane (as a grey value) is available. With this information a fragment shader can do arbitrarily complex stuff, ranging from good old bump mapping to a wide variety of occlusion and parallax mapping techniques, the use of gloss maps or the design of weird materials, their colors changing with the angle the camera looks at them.</p>

<p>Since it is also possible to pass values (e.g. a tick count or wind speed) from OpenGL to the shaders, they are used to implement flags fluttering in the wind, rocket engines causing ripples in the air or other animations or effects you would have thought the CPU knew about.</p>

<p>In my experiments i used GLSL (the OpenGL Shader Language), a c-like mid-level language that is compiled into assembly code that can be executed on the graphics hardware. GLSL provides clipping, matrix multiplication, dot product, etc. as primitive operations, along with some useful predefined special variables that are always present and need not be declared.</p>

<p>In the quest for more and more parallelization in computing, shaders may be the most successful example since shader parallelization itself demands no intervention by the programmer at all. Shaders are bound to become even more complex: with geometry shaders (available on graphics cards labeled &#8220;Shader Level 4&#8221; or &#8220;DirectX 10&#8221;, something my setup lacks) it becomes possible to generate geometry on the fly and even run particle systems entirely on the GLPU. It can be expected that even more parallelizable work will be taken from the CPU and put onto the GPU, providing an infinite playground for the demo coder. Graphics programming has never been this easy and fun. 500 GFLOPS are just <strike>$400</strike> $200 away :)</p>

<p>If you are interested, have a look at <a href="http://www.typhoonlabs.com/">typhoon labs</a>&#8217; hard-to-find ex-website, hosting Shader Designer, the tool used in the screenshot above as well as a very nice GLSL tutorial with shiny pictures.</p>
]]>
        

    </content>
</entry>

</feed>
