<?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>INsanityDesign &#187; NeA</title>
	<atom:link href="http://insanitydesign.com/wp/author/admin/feed/" rel="self" type="application/rss+xml" />
	<link>http://insanitydesign.com/wp</link>
	<description>The Imagination Enhancer</description>
	<lastBuildDate>Sat, 31 Dec 2011 22:14:05 +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>Under Pressure</title>
		<link>http://insanitydesign.com/wp/2011/05/12/under-pressure/</link>
		<comments>http://insanitydesign.com/wp/2011/05/12/under-pressure/#comments</comments>
		<pubDate>Thu, 12 May 2011 21:16:48 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[altdevblogaday]]></category>
		<category><![CDATA[crunchtime]]></category>
		<category><![CDATA[overtime]]></category>
		<category><![CDATA[pressure]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=1029</guid>
		<description><![CDATA[The issue tracker is overflowing and the deadline is inexorably coming near: The milestone 4 build has to be reached! Feature-set B15 has to be fully implemented and needs to be QA approved but bugs still occur and some features haven&#8217;t even been worked on. Everything needs to be crunched in there somehow as bug [...]]]></description>
			<content:encoded><![CDATA[<p>The issue tracker is overflowing and the deadline is inexorably coming near: The milestone 4 build has to be reached! Feature-set B15 has to be fully implemented and needs to be QA approved but bugs still occur and some features haven&#8217;t even been worked on. Everything needs to be crunched in there somehow as bug fixing is not limited by the announced feature freeze&#8230; and so it happens that you go into <em>overtime</em>!</p>
<p>Because of actual events in my last weeks and months this topic just pops up again and again with me: <strong>Crunch</strong> and <strong>Overtime</strong>! Nowadays, these are even accepted as &#8220;normal&#8221; in not only Games but general IT and Development. I know only few other industries and departments that take crunch-time for granted&#8230; especially in the end of any project.</p>
<p>As soon as overtime happens it is already too late. As no project manager (should) plans with crunch-time something went wrong if it happens anyway. In some cases this is not necessarily bad. Most people do what they do, work at what they work because they like the challenge, they like the environment&#8230; they just like what they do.<br />
But no matter how much you love your work, after 12, 18, 24 hours day after day after day no <a href="www.redbull.com/">Red Bull</a> nor a single good night sleep can help to keep you really focussed and up to the task that you are actually on.</p>
<p>I do not want to go into detail why something like overtime happens but there are some things professionally and socially that I observed over the last years and especially months I want to share if you have to crunch to release a feature in dependency with others!</p>
<h3>Documentation vs. Communication (or &#8220;State the obvious&#8221;)</h3>
<blockquote><p>Pressure pushing down on me<br />
Pressing down on you no man ask for</p></blockquote>
<p><a href="http://insanitydesign.com/wp/wp-content/uploads/cpt-obvious.jpg"><img class="alignright size-medium wp-image-1058" title="Captain Obvious" src="http://insanitydesign.com/wp/wp-content/uploads/cpt-obvious-246x300.jpg" alt="" width="246" height="300" /></a>It may be so easy: You get your Game Design, your Technical Design, Interfaces, Standards etc. defined and start developing from top to bottom. In the end everything works out, interconnected and your task is finished. Great!<br />
This <a href="http://www.imdb.com/title/tt0107808/">perfect world</a> is pretty rare and in most cases does not reflect the &#8220;<a href="http://en.wikipedia.org/wiki/The_Real_World">real life</a>&#8220;. In most cases many things have to be reworked or clarified and therefore <strong>communication socially and professionally</strong> is one of the most important factors when it comes to development in larger teams.<br />
Nevertheless, especially after 12, 14 hours of work or during a night the receptivity starts to lack the focus it needs for intense communication and dialogues. People start starring at their displays trying to get around that one oddness or gaze into the coffee/energy drink creeping over the floor. People that normally question anything start developing &#8220;<em>till the end</em>&#8221; and not &#8220;<em>to finish a task successfully</em>&#8221; meaning they &#8220;crunch&#8221; all what is left into their current objective, finish it up as quickly as possible top to bottom based on the docs&#8230; and as clarification takes time if the design itself can also be interpreted in a specific implementation kind of way: It will be!<br />
So, in the end of any project, after many hours of work, during nights etc. try and start being pro-active: If you crunch with others, <strong>state the obvious</strong>! If you do overtime yourself, <strong>start questioning</strong> the most simple things! This may sound annoying but is most important as the most well-formed process is nothing worth after four+ weeks of crunching. Normal things like &#8220;Did you add the graphics of that item?&#8221; or &#8220;Have you added the <a href="http://en.wikipedia.org/wiki/I18n">i18n</a> key?&#8221; are the first things that get lost as soon as a narrowed mind is focussing on fixing a bug or finishing up a feature.</p>
<h3>Crunch in Overtime (or &#8220;The right Task at the right Time&#8221;)</h3>
<blockquote><p>Insanity laughs under pressure we&#8217;re cracking<br />
Can&#8217;t we give ourselves one more chance</p></blockquote>
<p>Don&#8217;t get me wrong: Sometimes overtime can be very healthy for a project and team if e.g. a small group of people focus on one small feature-set altogether and try to reach a goal in a given time frame. Tasks get crunched, time just passes by and everybody is happy (with some pizza and beer of course this can be a wonderful achievement).<br />
Nonetheless, very often overtime is used or has to be used to finish up tasks that are <em>unfinished</em> or even <em>untouched</em>. This leads to crunching in all the different tasks that just have to be done before a milestone or deadline is reached. So, the overtime is used to clear out the issue tracker and not to finish what the main goal was.<br />
If overtime happens use it wisely and <strong>plan what to do</strong>! You are not in your right state of mind after hours and hours of coding, drawing, layouting, &#8230; and deprivation of sleep can lead to similar effects as alcohol e.g. headache or dizziness. The efficiency may seem increased after some energy drinks but based on experience and code review&#8230; it is not! You cannot state a number but if the efficiency and focus is decreased, plan in some laborious work, some monotonic tasks, clean up and work off method sets etc. Complete new structures, concept arts (depends on the crazy creativity ^^), calculations or templates especially interfacing with others (see above) are detrimental. <strong>Crunching has to be planned</strong> and should not just occur!</p>
<h3>Social Competence (or &#8220;To Develop is Human&#8221;)</h3>
<blockquote><p>Watching some good friends<br />
Screaming &#8216;Let me out&#8217;</p></blockquote>
<p>During daytime everybody is calm, touched by the sun, always having a smile on their faces. But after 15 hours <a href="http://www.imdb.com/title/tt0116367/">from dawn till dusk</a> the smile starts to vanish from their faces as the sun sets.<br />
It is no matter how &#8220;nice&#8221; somebody is during the day: during overtime and crunching tasks every mood starts to swing. If set under pressure over weeks, sleepless for days and crunching code into a machine people get nervous and tetchy.<br />
Now it is important to be sensitive. Not only developers, artists, &#8230; in-between but also a managing director has to apply his best soft-skills and <strong>pressurize focussed but appreciative</strong>. Even ironic jokes that would cheer up anybody during daytime can break loose hell if people spend 20 hours working on one bug! This <a href="http://en.wikipedia.org/wiki/Soft_skills">emotional intelligence</a> is a major issue when it comes to delegated work. Nobody intentionally tries to <em>not</em> finish any task so do not sound like this.<br />
To loosen up a little and see the crunching time as a task of the team. Do not take it too serious&#8230; it is more important to sometimes just take a walk and have a little water cooler talk. I am a non-smoker but if it is getting dark it can be helpful to just go with the crowd and to keep together. Share thoughts, introduce pair-programming (if not already given, <em>200% more effective during overtime</em> in my opinion) and try to help each other as together the longest nights can become the best stories for the next day.</p>
<h3>Stay Focussed (or &#8220;Utopia is nowhere near&#8221;)</h3>
<blockquote><p>It&#8217;s the terror of knowing<br />
What this world is about</p></blockquote>
<p>In 90% of cases overtime and crunch-time happens because a goal has to be reached in time. A milestone, a release build, &#8230; whatever. Unfortunately, during crunch-time it often occurs that some people see this time as &#8220;additional&#8221; hours to use (see above). They try to achieve 200% and not to reach bug-free 100%. Such ideas come from management/directors but also from developers that tend to pressurize themselves. If they do not get to see their bed for days at least this time has to pay out.<br />
<strong>Always be realistic</strong> about what the goal is and try to not loose focus of what can be achieved during this overtime. As stated above crunching should be planned and therefore plan against the origin of that specific overtime. If people are under pressure it is more important to eliminate all mush and narrow down what you want to achieve. Overtime pays out in work and even for the person itself if something has been achieved. A e.g. developer that works all through the night coding and coding without having achieved what he wanted in the morning is only half the developer for the coming hours and days. But if you clearly achieve your realistic goal you are happy and produce endorphins. Your body is powered up and you can shed any sorrows of work. <em>This is the best sleep you will have for months</em>!</p>
<h3>Keep the Balance (or &#8220;The equilibrium of Life and Work&#8221;)</h3>
<blockquote><p>And love dares you to care for<br />
The people on the edge of the night</p></blockquote>
<p>Overtime happens and crunching some work, too. This can be manageable to some degree. But if your whole purpose in life is work and you are crunching everyday, hour after hour, seeing sunlight only as a reflection of your display you will &#8220;dry up&#8221;.<br />
As much as overtime has to be planned (see above), the balance of overtime, crunching and <strong>regeneration has to be maintained</strong>, too. Otherwise the productivity and benefit of the additional time decreases down to a (negative) point of no return&#8230; yes, negative. At least in many cases I have seen, people actually fixed and created productive resources and code up to a specific point where the amount of positives fell below the amount of negatives. And this just happened over one day. When days went by the amount of time that produced good quality decreases and got inferior to the amount of time producing crap. And the most important issue is: Those errors have to be cleaned up, too!<br />
This is something general and may sound corny but to keep a good Work/Life balance is most important and overtime is no contradiction to it. But crunched overtime needs different compensation to be regenerated. As mentioned, a good night sleep might not be enough for a 80 hours week. Fresh air, <strong>sunlight</strong>, healthy drinks and food are a necessity to &#8220;survive&#8221; not only the crunch-time but the time after (downfall).</p>
<h3>Post Mortem (or &#8220;The Lessons we Learned&#8221;)</h3>
<blockquote><p>This is our last dance<br />
This is ourselves<br />
Under pressure</p></blockquote>
<p>This is not necessarily something to keep in mind during a crunch-phase but afterwards. Always <strong>recapture what happened</strong>! Always try to learn from the lessons made! A retrospective or post mortem should help to pinpoint problems, miscommunication, bad planning etc. for the coming tasks and have to be used for positive and directed criticism.<br />
A review about every process, not only meta or technical processes but also socially can help to suffocate future errors. Especially critique is hard to deal with and often taken personal. But what directed criticism (a director that guides the review is most important. Reviewing, not discussing when it comes to focussed critique) should provide is what we require to grow, to evolve. Because that is what we all want: <em>To become better</em>! It may sound unfortunate but people outside ourself often provide a better view on us than we ever can.<br />
Therefore, always have a retrospective, a review, a post mortem, a lessons learned meeting, &#8230; call it whatever you (or your project management philosophy) like, but do it!</p>
<p>So, if we have a look at the lessons we learned:</p>
<ul>
<li>State the obvious</li>
<li>Plan your overtime</li>
<li>Be social</li>
<li>Be realistic</li>
<li>Keep a Work/Life balance</li>
</ul>
<p>and always recapture your work!</p>
<p>All this may sound general and soooo obvious but after weeks of overtime, pressure from the management and the deadline coming near it gets lost pretty easy.<br />
Overtime happens and sometimes it can even be fun to see &#8220;this one feature being finished&#8221;, &#8220;this one bug being fixed&#8221;, especially in a <em>nice social environment</em>. Nevertheless, if you have to crunch keep in mind that not everybody is in the right <a href="http://www.youtube.com/watch?v=WcYDBlMbU_Q">state of mind</a> and always remember some general work rules&#8230; maybe even pin them on a wall in front of you!</p>
<p><em>Written for <a href="http://altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/05/12/under-pressure/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>(Don&#8217;t Fear) The (C)Reaper</title>
		<link>http://insanitydesign.com/wp/2011/04/13/dont-fear-the-creaper/</link>
		<comments>http://insanitydesign.com/wp/2011/04/13/dont-fear-the-creaper/#comments</comments>
		<pubDate>Tue, 12 Apr 2011 22:02:52 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[.net]]></category>
		<category><![CDATA[C/C++]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[altdevblogaday]]></category>
		<category><![CDATA[c/c++]]></category>
		<category><![CDATA[challenge]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[ignorance]]></category>
		<category><![CDATA[Java]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=969</guid>
		<description><![CDATA[I have to be honest: My C and C++ skills are bad! Besides some personal tries in my &#8220;early years&#8221; and lessons at the University I never had a good connection to the world of C. Nevertheless, I got my degree, became a developer, working for nearly a decade now in my young life and [...]]]></description>
			<content:encoded><![CDATA[<p>
I have to be honest: My <a href="http://en.wikipedia.org/wiki/C_(programming_language)">C</a> and C++ skills are bad! Besides some personal tries in my &#8220;early years&#8221; and lessons at the University I never had a good connection to the world of C. Nevertheless, I got my degree, became a developer, working for nearly a decade now in my young life and I call myself a successful Software Engineer, even developing games&#8230; but in <a href="http://www.java.com/">Java</a>, JavaScript and <a href="http://msdn.microsoft.com/en-us/vcsharp/default">C#</a>. So, my dreams of getting into what I love most (<strong><em>Gaming</em></strong>) became real, doing what I like all day!<br />
But still I feel inferior to the &#8220;real&#8221; developers because of my bad C expertise and especially my personal ignorance to really focus on it.
</p>
<h3>All my history&#8230;</h3>
<p>
I got in touch with computers and gaming early in my life through my brother. I started with a C16, C64 and <a href="http://en.wikipedia.org/wiki/Amiga_500">Amiga 500</a> besides my GameBoy until I got my first (nowadays) classic PC. I was always intrigued by what was possible, the magic, playing <a href="http://stewd.io/pong/">Pong</a>, Maniac Mansion, Zork and watching Scene Demos and Cracktros from legends such as <a href="http://www.tbl.org">The Black Lotus</a> or the <a href="http://www.youtube.com/watch?v=Hp1kmaon3tk">Animators</a>. I wanted to do the same stuff, I wanted to (text-)wander through my own forests, wanted to have colorful spinning balls on the screen&#8230; so I began learning how to do so.<br />
I started off on the Amiga with Assembler, got into <a href="http://en.wikipedia.org/wiki/QBasic">QBasic</a> later, Pascal, <a href="http://www.delphigl.com/">Delphi</a> (<em>loved its structure</em>), Visual Basic (<em>quick results</em>) and very early PHP (<em>the Internet</em>) through early Web-Development tests and HTML/CSS. About ten years ago I got into Java at version 1.1 and am still on it. At every Job I had before and during my studies I was able/forced to use Java and it kept that way until today. Besides Java I had a look at and use Python, <a href="http://www.scala-lang.org/">Scala</a> (<em>what I like about Java+functional programming</em>), Actionscript, &#8230; and even Perl (just in one project) out of personal interest or for personal stuff.<br />
Just from my history my expertise developed early around object-oriented programming which appealed to me the most, so I stayed. Therefore, very early in my &#8220;<em>personal development</em>&#8221; my development expertise was already conquered by Delphi and Java that formed my view on OOP and general Application Development besides their originators being influenced by C++ (good or bad). But there were still the games I liked the most. So, I had to learn C and C++. Teach myself the language of my favourite entertainment.
</p>
<h3>Try, Fail, Ignore</h3>
<p>
I bought books about C, about C++, about Game Development, about DirectX, about OpenGL, got into boards, searched the net for every tutorial I could find, tried everything and even got some minor things to work so that something moved on my screen&#8230; and it was programmed in C++. But something <em>clicked</em> in my head, spreading bad thoughts such as: </p>
<ul>
<li>This could be easier!</li>
<li>Linkage and IDE is clumsy, <a href="http://eclipse.org/">Eclipse</a> is way superior!</li>
<li>These <a href="http://en.wikipedia.org/wiki/Design_patterns">design patterns</a> are native in Java!</li>
</ul>
<p>I read more and more, tried more and more and unfortunately failed more often. The initial fun and ambition faded away with every single compilation that turned out to not work as expected, crashed or ended up in memory leaks.<br />
Even with every interest and devotion I had to learn, to me it was &#8220;just&#8221; another syntax complicating things. Pretty much everything I learned and did I was able to reproduce in Java in less time and with more comfort and less errors. <em>I got lazy</em>!
</p>
<h3>Coding Personality</h3>
<p>
So, even if I tried to seriously learn and get into C and C++ it just did not reach me, did not touch me. From my history and my experience with other languages, IDEs and projects I knew that there were different ways to achieve nearly the same things. And it was not only my laziness from very elegant development environments or library usage, also the code itself appeared to be cryptic to my eyes.<br />
No matter if I read Java, Python or PHP code nowadays: Besides the fact that every code can be beautiful and ugly I understand Java code instantly; I recognize the Python functionality; I get what the PHP developer meant to do! Even in the last years as I was checking examples and help sites for iOS and Android <a href="http://developer.android.com/sdk/ndk/index.html">NDK</a> coding out of interest I could not get rid of the thought: I can achieve the same thing with the <a href="http://developer.android.com/sdk/index.html">Android SDK</a>! (PS: Objective-C is pretty ugly ^^)<br />
And it is not that I do not like any other languages any more: I was &#8220;forced&#8221; to use Haskell and dismissed it; tried Scala and loved it! Fooled around with Ruby and had fun; Prolog and Lisp&#8230; na; Eiffel and C#, olé!<br />
Especially C# instantly appealed to me: The syntax, the structures, the functionality and the ideas filled the holes that Java left over the years. It may be a coincidence that <a href="http://en.wikipedia.org/wiki/Anders_Hejlsberg">Anders Hejlsberg</a>, a main man behind &#8220;my&#8221; Delphi is the lead designer of C# but maybe we think alike. And with the advent of <a href="http://create.msdn.com">XNA</a> I even had a connection to game development again&#8230; and it started with a C! The commonality of course was a similar syntax, similar principles and the idea of a Virtual Machine executing and &#8220;managing&#8221; my code. No changes for specific operating systems (at least in the perfect sales world ^^), just develop and it would work&#8230; now with easy native Windows &#8220;ways&#8221;!<br />
But the thing that always struck me again were games. Even XNA seemed &#8220;unreal&#8221; for real game developments.
</p>
<h3>Games are developed in C</h3>
<p>
If I would have gotten one cent for every time I read this exact line on a board, tutorial or e-mail&#8230; you know what I would be then as you probably think the same right now. And I believed it! It was like this; It stays like this!<br />
But over time I got more experienced in developing and engineering applications and solutions and I realized that in most cases the programming language is just the tool to fulfil the requirements: And my requirement was still to make the things I have in my head!<br />
I started to look around and found games such as <a href="http://www.spiralknights.com/">Spiral Knights</a>, Puzzle Pirates, <a href="http://bytonic.de/html/jake2.html">Jake2</a> (a Quake2 Java port), <a href="http://en.wikipedia.org/wiki/Chrome_(video_game)">Chrome</a> using Java for scripting and even <a href="http://www.eveonline.com/">EVE Online</a> from <a href="http://www.ccpgames.com">CCP</a>. A Server and Client nearly 100% developed in <a href="http://www.stackless.com/">Stackless Python</a>; a dynamic programming language in a multi-micro-threaded environment. Easy to read and learn, hard to master.<br />
But probably the biggest counterexample today would be <a href="http://www.minecraft.net/">Minecraft</a>. The biggest Indie sensation last year is developed in Java and even if I never really got into the game, I admire <a href="http://notch.tumblr.com/">Notch</a> for what he did and achieved&#8230; and everything in Java. And Minecraft was not the first but <a href="http://www.wurmonline.com/">Wurm Online</a> already showed where Notch could go&#8230; in Java.
</p>
<p><iframe title="YouTube video player" width="600" height="380" align="center" src="http://www.youtube.com/embed/m_yqOoUMHPg" frameborder="0" allowfullscreen></iframe></p>
<p>
With these great examples of <strong>Games</strong> not developed in C/C++ I felt more confident in following my own way that I have successfully gone for years now.
</p>
<h3>To be or TioBe</h3>
<p>
I do not intend to defy C or C++ but if I am not required to use C for the games I want to create and other segments and industries can be conquered by languages such as Java, too (as shown in the <a href="http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html">Tiobe Index</a>), why should I?<br />
Especially in enterprise environments Java is a strong candidate for projects: From a Manager perspective the Java salesman argues with operating system independence, easy extended library architecture, basic native Database framework and <a href="http://en.wikipedia.org/wiki/Swing_(Java)">UI</a> support&#8230; sold! Enterprise Java is still a keyword for international research projects today. And with JME and Android even the mobile sector is invaded by Java for years now.<br />
And with Android supporting Java as well as Microsoft supporting C# I can be everywhere: On PCs, on Consoles, on Mobile Phones and on Browsers. With languages I know, am experienced with and that appeal to me.<br />
So, do I still have to put all my power in re-learning what I already know in other languages? Where I have intensive practical knowledge? Where I can craft my dreams?
</p>
<p><a href="http://insanitydesign.com/wp/wp-content/uploads/tpci_trends.png"><img src="http://insanitydesign.com/wp/wp-content/uploads/tpci_trends.png" alt="" title="Tiobe Index" width="500px" class="aligncenter size-medium wp-image-1010" /></a></p>
<h3>Ignorance is bliss</h3>
<p>
Even with my underwhelming C skills I get along very well. Tiobe proves me right and until now I always solved the problems given to me or achieved and created what I wanted. I am working in the games industry, worked on large and international projects for big companies, wrote some publications and most results were accepted just fine. I even remember some projects and programs created by me that I am still proud of and this does not happen very often as every developer I know normally wants to change the code he wrote the second he/she finished the last line ^^.<br />
I am aware that for the last performance tweak, for the most awesome graphics engine I would have to use C (or Assembler) and I am aware that the foundation for all that I use such as the Java or the .net VM an explicit knowledge is required. Nevertheless, I do not state that nobody should use C or C++. It is just that I want to raise awareness for people that complain about people not knowing C, labelling these as non-programmers. These guys are able, too. And if they want to <a href="http://scientificninja.com/blog/write-games-not-engines">Write Games, not Engines</a> they might even be better for game logic and not &#8220;just&#8221; tools. These guys are also able to know what <em>really happens</em> underneath as that is a mandatory pre-requisite and not the knowledge of a syntax.<br />
Therefore, besides all my years trying to get into &#8220;the game&#8221; of learning C and C++ I turned out pretty well, with experience in large projects, systems and now games. I call myself a game developer. And if many decline my languages I decide for myself that (C+)Ignorance Is Bliss&#8230;
</p>
<p>
<em>Part of the Challenge: <strong>Show your ignorance!</strong> for <a href="http://www.altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/04/13/dont-fear-the-creaper/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>3&#8230;2&#8230;1&#8230; planned!</title>
		<link>http://insanitydesign.com/wp/2011/03/29/3-2-1-planned/</link>
		<comments>http://insanitydesign.com/wp/2011/03/29/3-2-1-planned/#comments</comments>
		<pubDate>Tue, 29 Mar 2011 20:36:36 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[altdevblogaday]]></category>
		<category><![CDATA[estimation]]></category>
		<category><![CDATA[pert]]></category>
		<category><![CDATA[planning]]></category>
		<category><![CDATA[task]]></category>
		<category><![CDATA[tdd]]></category>
		<category><![CDATA[test-drive]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=963</guid>
		<description><![CDATA[No matter what we do, if we are Agile or fall down the water&#8230; if we are senior or junior&#8230; if it is big or small&#8230; for nearly everything we do we have to define tasks and estimations to plan the days, weeks and months to come. Again, no matter what, this (especially first) planning [...]]]></description>
			<content:encoded><![CDATA[<p>
No matter what we do, if we are Agile or fall down the water&#8230; if we are senior or junior&#8230; if it is big or small&#8230; for nearly everything we do we have to define tasks and estimations to plan the days, weeks and months to come. Again, no matter what, this (especially first) planning is in most cases (and from personal experience <em>most</em> means 90%) pretty far from what is really required in the end. The other 10% split up into 1) the ones that planned good but not 100% correct, maybe used &#8220;proven&#8221; methodologies such as <a href="http://en.wikipedia.org/wiki/PERT">PERT</a> or just estimated +30% and 2) the ones where the planning perfectly fit the development (again in my experience normally 1%-3%).<br />
So, what you could say is to just &#8220;do it&#8221; like the 1%-3% did. This would normally be the way to go if theirs worked out. The thing is, from everything I have seen in project planning over the years: It just worked because of luck!
</p>
<p>
I think it is fair to say that I learned project planning pretty much from the practical side, always failing what I learned theoretically. No mater how much time I spend planning big projects, setting up tasks, goals, milestones, reviews, reworks, &#8230; it never got into this <em>1-3</em> frame.<br />
Even with a more agile-driven approach, small sprints, good daily tasks, weekly reviews and time consuming remodelling of the plan: If I sum up what had to be reworked every single week I was as far away as with the initial waterfall plan. All goals got achieved and &#8220;somehow&#8221; it worked out but it is disappointing for the one who planned to see his estimations being more a <em>guideline</em> than a workplan.<br />
Based on that experience I started thinking: What are the reasons for such divergence? What am I planning wrong? What do I have to change to fit the developers needs? And that is what strucked me: The Developer!
</p>
<h3>&#8230;to be busy!</h3>
<p>
With all IT projects I had to work on, the main time is consumed by the developers, the engineers, the architects of the (mostly) software projects. Of course Game Design, Art, etc. have to be taken into account but are often more parallel to what goes wrong more often: The actual development or implementation! (no question, thinking <a href="http://en.wikipedia.org/wiki/Lean_manufacturing">lean</a> everybody should care about downtimes because of unfinished output/input)<br />
As a developer myself that has to plan for others, estimate work, thinking about the production, milestones etc. none of the &#8220;theoretical&#8221; methodologies really worked out for me but just took my time. And in most cases this time is very limited. Estimations have to be given instantly to evaluate feasibility, plans have to be set-up initially to have a higher model to work and further estimate on. So, time is of the essence not only in the plan itself but also for the time to create it. And if I have to rework it all the time (real-life) I do not want to spend too much time in that phase (no time for building up charts with optimistic, pessimistic and realistic plans&#8230;).
</p>
<h3>&#8230;should be enough!</h3>
<p>
In a coincidence <a href="http://altdevblogaday.org/author/jake-simpson/">Jake Simpson</a> gave a pretty good impression of this wonderful land, where everything works out. It is known as <a href="http://altdevblogaday.org/2011/03/28/should-be-land/">Should Be Land</a>. This is normally the land where the estimations come from, too. From developers that should estimate their tasks, should give away an idea how long each of it could take to make a plan that also has to tie in with other departments (<em>lean</em> everywhere). If such an estimation fails because &#8220;36 hours should be enough!&#8221; more often others that depend on you are delayed, too.<br />
Especially inexperienced developers, <a href="http://altdevblogaday.org/2011/03/20/so-you-wanna-be-a-senior/">juniors</a> and fresh &#8220;hackers&#8221; from the backyard tend to underestimate especially the requirements in correlation with others, to plan interfaces, to build adapters to dock onto others and so on. Nevertheless, seniors aren&#8217;t better in general. All people that &#8220;program&#8221; stuff normally just plan the programming time&#8230; and they do not want to plan too much time as the developer is often assessed based on his Cph (Code per hour) output and not based on his quality of code, re-usability, extendibility or tests. The results are in many cases optimistic estimations with no or little time to even plan what you are going to develop.
</p>
<h3>&#8230;am no developer!</h3>
<p>
Another often misleading <em>planning element</em> is that (many) project managers, scrum masters, gantt-junkies, &#8230; do not have the best development background. Therefore, the estimations given are taken as fixed. <em>Experienced</em> managers add an amount of 30% and plan it in. This is unfortunate as even the best estimation cannot just be coped by some time-addition if essential points that are requirements for good development are missing.
</p>
<h3>One of Two of Three</h3>
<p>
Besides complicated methodologies or the adding of just 30%-50% of time to an initial estimation given, I split it up into the three tasks I want to see as an output from a developer: The <strong>implementation</strong> (or coding, hacking, programming, refactoring, &#8230;), the <strong>planning</strong> and the <strong>tests</strong>!</p>
<ul>
<li>The development is the actual implementation of the task. It may be the creation of a user-system, achievements, tool, crafting, &#8230; whatever comes to mind</li>
<li>The planning is the structuring of work, the evaluation of patterns, architecture and interfaces to follow during development and precedes it accordingly</li>
<li>The testing is no QA process but the personal testing of code, writing of (unit-)tests, maybe even playing the created and succeeds the development</li>
</ul>
<p>Now, instead of adding a specific amount to a given estimation I add tasks to the estimation. My input is the implementation estimation from a developer. Based on that I add two thirds as planning and one third of that as testing resulting in the three tasks of implementation, planning and testing with a weight of 1/3 of 2/3 of 3/3. For example, if an estimation is 9 hours, I add a task for planning with 6 hours and a task for testing with 2 hours.
</p>
<p>
Yes, the result is a very keen estimation but the important part for me is that it covers <em>mandatory</em> tasks that are often forgotten and is also able to compensate for possible misjudgement, unforeseen circumstances, &#8230; as the package is given as one. The creation of these tasks remind the developer what he &#8220;should&#8221; do, and the derived estimations compensate for possible problems as well as they fit the real necessity for the other tasks (at least in my experience).<br />
The tasks are important as normally you do not start hacking instantly. To evaluate existing code, interfaces and elaborate what architecture or pattern to use is often more practical and a necessity in general before starting to implement (to think something through <strong>before</strong> starting programming). To already know what the result should be helps the implementation. And the testing part may be the coders worst nightmare but again a requirement.
</p>
<p>
The most important point for me is: It&#8217;s easy! I can easily derive it in my mind, do have a most-likely accurate estimation (future may prove me wrong ^^) and won&#8217;t forget the importance of planning and testing.<br />
If you follow up different approaches the weighting can also be adapted either by mixing tasks or changing the base weight. For example, if you are following a <a href="http://en.wikipedia.org/wiki/Test_first">Test-first</a> approach you can either switch the planning and testing tasks, as the testing in TDD also compensates planning partly. Or you can change the <strong>base</strong> to 4 and plan 1/4 of 3/4 of 4/4 meaning for our example implement 8 hours, test-first for 6 hours and plan for 2 hours (bare with me as I selected easy to calculate estimations).<br />
What base to use depends on personal experience, the project and just the most important gut feeling. For me myself a third for general estimations and a fifth (1/5 of 2/5 of 5/5) for more specific tasks paid out. But all in general split up into my three main tasks I instantly have an estimation ready that fits at least my real-world.
</p>
<h3>&#8230;should work!</h3>
<p>
Please keep in mind this has no theoretically proven background but my experience over the years experimenting with different approaches and using the methodologies given in literature. Everything depends on your environment and personal likes and dislikes. It &#8220;should&#8221; work for other instances, too. I used it in several personal standalone and living project estimations and at least for now it was fitting best.<br />
In my environment, with the time given and the amount of work to do this approach works. It is never really off the track, it reminds people about planning and testing besides the actual <em>hacking</em> and helps me to easily keep track about developments without spending too much time in overblown concepts that do not fit my personal habits or the &#8220;real&#8221; developer.<br />
Of course, there are also drawbacks, such as too little/too much planning. If you split up e.g. User Stories to have tasks such as: <em>Build divideByZero() function</em>; <em>Create class object</em>; <em>Write SQL Statement for querying all users</em>; &#8230; you will end up in unnecessary tasks because of the simplicity. In such cases, the User Story &#8220;should be&#8221; the one to estimate and divide onto the tasks or you reduce the base and introduce a zero/x task.<br />
Therefore, this may not be the 100% <em>1-3</em> approach but it fits me best and therefore leads me into that frame more often as the important thing is the variance that fuels this approach&#8230; and that can make it work for you, too!
</p>
<p><em>Written for <a href="http://altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/03/29/3-2-1-planned/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>What happened to the middle class of gaming?</title>
		<link>http://insanitydesign.com/wp/2011/03/13/what-happened-to-the-middle-class-of-gaming/</link>
		<comments>http://insanitydesign.com/wp/2011/03/13/what-happened-to-the-middle-class-of-gaming/#comments</comments>
		<pubDate>Sun, 13 Mar 2011 22:53:38 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Games]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[altdev]]></category>
		<category><![CDATA[altdevblogaday]]></category>
		<category><![CDATA[cliffy b]]></category>
		<category><![CDATA[gaming]]></category>
		<category><![CDATA[gdc]]></category>
		<category><![CDATA[independent]]></category>
		<category><![CDATA[middle-class]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=909</guid>
		<description><![CDATA[As time was short this week just a small post but one thing in the last days really intrigued me: Just recently at GDC, Epic&#8216;s own (in)famous Cliff Bleszinski stated: &#8220;The Middle class game is dead!&#8220;. Now, &#8220;Cliffy B.&#8221; is known for some polemic statements but if you have a look at the current games [...]]]></description>
			<content:encoded><![CDATA[<p>
As time was short this week just a small post but one thing in the last days really intrigued me: Just recently at <a href="http://www.gdconf.com/">GDC</a>, <a href="http://www.epicgames.com/">Epic</a>&#8216;s own (in)famous Cliff Bleszinski stated: &#8220;<a href="http://www.mcvuk.com/news/43343/Cliffy-B-Middle-class-games-are-dead">The Middle class game is dead!</a>&#8220;. Now, &#8220;Cliffy B.&#8221; is known for some polemic statements but if you have a look at the current games in the Top10, being released or being covered in magazines and online portals unfortunately he has a good point. But as I do not agree with Mr. Bleszinski I thought I have to do a little <strong>rant</strong> on it.
</p>
<h3>State of the &#8220;Art&#8221;</h3>
<p>
To quote what was said:</p>
<blockquote><p>It needs to either be either an event movie – day one, company field trip, [Battle: Los Angles], we’re there. Avatar – we’re there. <a href="http://www.imdb.com/title/tt1386588/">The Other Guys</a> starring Will Ferrell and Marky Mark? Nah, I’ll f****** rent that, I don’t really care, right?<br />
Or it has to be an indie firm. <a href="http://www.imdb.com/title/tt0947798/">Black Swan</a> – I’ll go and see that. I’ll go to The Rialto or I’ll go to the triple-A Imax movie. The middle one is just gone, and I think the same thing has happened to games.</p></blockquote>
<p>What he does is making a very logical comparison to the movie industry and the people watching movies. And I think we all had that kind of thinking when going to the cinema, at least once.<br />
In general, the movie and the gaming industry underwent a big change over the last years through the advent of fast internet connections, a wider offer of &#8220;different&#8221; games delivering the same and of course piracy. The movie industry had many problems related to the &#8220;new media audience&#8221; and was trying to force a new way of thinking onto an old structure&#8230; and in most cases failed (not counting things like the iTunes Movie Store, Netflix, &#8230; as these are 3rd parties)!
</p>
<p>
Gaming did so, too! With building restrictive copy protections, enforcing keys for online playing etc. the industry of course tries to protect their property and investment but has also to deal with a not so new audience but its only audience, the media-audience that knows the possibilities and knows how to spread or deal with what they do not intend to deal with (again some &#8220;kind of&#8221; 3rd parties succeeded such as <a href="http://steampowered.com">Steam</a>, providing other games more successful).<br />
But from there, two new branches (re-)opened for gaming: <strong><em>1)</em></strong> Widen the audience with titles like <a href="http://www.justdancegame.com">Just Dance</a> and the NDS or Wii and <strong><em>2)</em></strong> work with the &#8220;independent idea&#8221;, doing something special, even odd (being &#8220;<a href="http://www.sundance.org/festival/">Sundance</a>&#8220;). These also broadened the art of games and the art of developers. But if only Triple-A and Indie developments are really the only thing succeeding the whole Wii line-up probably has to be canned.
</p>
<p>
If we just take a look at sales, Top10s and media coverage right now everything pretty much underlines what Bleszinski stated:</p>
<ul>
<li>The Top10 is ruled by Killzones, Call of Duties, Fight Night Champions, Bulletstorms, &#8230;</li>
<li>Call of Duty: Black Ops sold over 20mio units (<a href="http://vgchartz.com">vgchartz.com</a>)</li>
<li>Arkham City, Bioshock: Infinite, Guild Wars 2, Prey 2, &#8230; on gaming news sites</li>
<li>&#8230;</li>
</ul>
<p>Not much variance in what is the main source for information and &#8220;opinion&#8221; making for 90% of all gamers. I may be a developer but foremost a Gamer! And growing up in a time where every game was Indie or middle class and could get the attention it wanted, this somehow makes me sad. So why is it that there is no middle class in gaming any more?
</p>
<h3>Today&#8217;s Ratings&#8230;</h3>
<p>
<a href="http://insanitydesign.com/wp/wp-content/uploads/game_ratings1.png"><img src="http://insanitydesign.com/wp/wp-content/uploads/game_ratings1-300x39.png" alt="" title="Today&#039;s Game Ratings" align="right" width="300" height="39" class="alignright size-medium wp-image-921" /></a>You could think that gaming and game reviews follow the rules of the Highlander: <strong>There can be only one!</strong> Games seem to need a 90+ rating to be sold and they have to be the &#8220;definite&#8221; thing. Every game has to duel against the genre highlight and nothing is accepted besides. Every MMO has to compete against World of Warcraft, every Action-RPG against Mass Effect.<br />
Now, with this attitude in reviewing games, always coming back to: <em>This was a good game, but Call of Duty has more players online!</em>, how can middle class games even get the attention they deserve? How can a middle class FPS compete against billions of dollars in revenue? Only &#8220;Indie Games&#8221; seem to have that little bonus given so that even e.g. a game as <a href="http://www.magickagame.com/">Magicka</a> (great game) often just got a 7 out of 10 but is a success (a death sentence to other games). But wait? Magicka was known and well sold already before reviews with great ratings!?
</p>
<h3>&#8230;and the perception?</h3>
<p>
Reviewers and PR often argument that they have to force the 90+ and advertise the hell out of it just to provide a &#8220;deceiving perception&#8221; that it is the next great game and needs to be bought. Now, if you just read the comments below reviews and the comments to In-Game Videos that may show a little lag you could think those arguments are correct. And if sales such as Call of Duty: Black Ops pop up everything is signed that &#8220;their way&#8221; is right.<br />
Now, everyone wants to do that &#8220;one bullet&#8221;, wants to be the next Call of Duty or WoW (not even Blizzard can do another WoW!). But really besides those what sells are a Pokemon, a Mario, a Just Dance, are Kinect and their Adventures, and the many other (not only Wii) titles that everyone watches but somehow nobody really sees. These are not necessarily games that are labelled triple-A or are covered throughout the gaming sites all day long (up to the release I didn&#8217;t even know about a new Pokemon, but I like Black&#038;White ^^), but nevertheless they are sold, are in Top10 charts and are even fun to play. I will skip that in some purely economically driven stock corporations these numbers seem to not count.
</p>
<h3>Media Coverage</h3>
<p>
How games are covered in magazines and on online sites is very important nowadays. 100 Action-Adventures against 100 First-Person-Shooters against 100 whatever games compete for the money of the gamer. It is not enough any more to release some footage near release. You have to be in the gamers mind for months before the release. You need to be watched to be recognized, you need to waited for to be a &#8220;seller&#8221;. But did people really waited for the Top10 game Just Dance 2?
</p>
<p>
The recognition long before the release is produced with &#8220;unreal&#8221; information. Costly Render trailers provide a visual media entertainment over the real gaming. Produced parallel to games, sometimes from external studios they try to establish a name in the gamers mind. Games like Deus Ex: Human Revolution were noted for nearly a whole year just because of an impressive render trailer. It is just now that some people start to report from real playing sessions. If these would be anywhere near mediocre the game would be criticized prior release because of faked expectations. In this particular case even two expectations: Because of its predecessor and really incredible trailer. If I think about the Video Game Awards last year and the trailers I could start thinking that gaming is not important any more as I haven&#8217;t seen much gameplay&#8230; the important part in the end!<br />
A different game and according media coverage is <a href="http://www.limbogame.org/">Limbo</a>. Videos, Previews, Screenshots etc. always showed gameplay and people got intrigued by the game, by the art, by the style and not a &#8220;produced emotion&#8221; but what they felt themselves watching the real game. Now, I am always thinking: If they only show a render trailer the game probably isn&#8217;t that intriguing being watched&#8230; or is it?
</p>
<h3>&#8230;and the perception?</h3>
<p>
Basically you could say: <a href="http://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a>! We can only go out and buy what we know of, what we see. Therefore, PR and Marketing, the coverage in the media and the outcome as a rating is so important to be recognized and a possible subtract for the buyers money. That is limited and more and more players try to get a share out of it. Once the music industry complained that piracy is destroying the revenues. No question, piracy is bad but an important point is missing: The every growing entertainment battles for the same share! New technologies, more games, more movies, &#8230; broaden what has to be consumed and therefore fight for the right to be noticed.<br />
I remember a time where I would pick up a gaming magazine at my local store (yes, a printed one!) and would have an overview about every single game to be released in that particular month and nearly everything in development. The market was growing but manageable and you would be able to keep an overview of everything interesting. Nevertheless, we still remember the time and those &#8220;glory days&#8221; of gaming. Games such as Outcast or Might and Magic VII keep me on my machine still today (just bought them at <a href="http://www.gog.com">GOG</a>).<br />
Nowadays, such games would hardly been noticed if not covered exclusively or they would not stand comparisons against &#8220;that one&#8221; genre defining game.
</p>
<h3>The hidden Middle Class</h3>
<p>
A problem as always is the definition of &#8220;middle class&#8221; and especially &#8220;indie&#8221;. Middle class is not necessarily A- or AA-Games and Indie does not mean: One guy sitting in its room developing the next extraordinary gaming evolution.<br />
Of course, games such as <a href="http://www.braid-game.com/">Braid</a> or <a href="http://www.worldofgoo.com/">World of Goo</a> with it&#8217;s extremely small teams are top-notch productions and extremely great games. These are also often used as a definition of Indie games. Besides providing an interesting game design and gaming twist both games are extremely polished, with sometimes incredible graphics and beautiful music. So, besides an interesting game design these games also provided incredible art and music, often only related to so-called Triple-A games.<br />
But besides these two examples what about others? For example the developer of the fantastic <a href="http://www.splosionman.com/">&#8216;Splosion Man</a> <a href="http://www.twistedpixelgames.com">Twisted Pixel</a> is no &#8220;<em>Two and a half Men</em>&#8221; team but a team of about ten doing a high production value, extraordinary game with good design and a special twist. The new developer <a href="http://www.adhesivegames.com">Adhesive Games</a> just showed of their premier title <a href="http://www.hawkengame.com/">Hawken</a> which was so impressive that <a href="http://kotaku.com/#!5780912/nine-guys-giant-mechs-and-2011s-sexiest-indie-game">Kotaku</a> labelled it as the most beautiful indie game. But a giant city, mech action game with an impressive graphics style and city view, an indie game? <a href="http://www.introversion.co.uk/">Introversion</a> coming from Indie &#8220;heritage&#8221; being middle class nowadays. This is also a good example of what indie development becomes after that &#8220;one hit&#8221;: Middle class! You cannot stay &#8220;indie&#8221; if you are noticed and people follow what you are doing and especially starting building up expectations.
</p>
<p>
All these and even more such as contract developers (e.g. <a href="http://www.shinen.com">Shin&#8217;en</a>) are the middle class no one notices. This &#8220;hidden&#8221; middle class is what provides the foundation for our gaming, for our everyday entertainment. As well as a movie such as <a href="http://www.imdb.com/title/tt0499549/">Avatar</a> gaming cannot and will not consist of only triple-A high budget productions. Many try to achieve just that: A triple-A 90+ international seller every year! But from a real economic viewpoint this is nonsense. You neither plan with just one horse nor do you found on one pillar. Sometimes productions have to level each other because success cannot be planned, especially in entertainment. If you have bad luck and your extremely awesome military shooter comes out right the week after a catastrophe, your game is doomed. The movie industry knows this for years and paid for it. These errors should not be repeated.<br />
And from my own experience, another player, the browser games are not developed by some &#8220;PHP script kids&#8221; any more but productions with larger teams trying to increase the production value to a level with standalone games. Right now probably the widest middle class games everyone plays, but nobody knows.
</p>
<p>
No question, I love the so-called AAA-Titles such as Uncharted, Gears of War or Killzone. But to me the middle class definitely is not dead. It again depends on how we look at it, how we rate it (without prejudices) and how we classify &#8220;The Other Guys&#8221; in gaming such as downloadable games, &#8220;indies&#8221; and online games (as well as my infamous <a href="http://insanitydesign.com/wp/2011/01/27/there-are-no-casual-games/">Casual Games</a>). Because we have to remember even a company such as Epic started of as a middle class developer with Indie developers. &#8220;Cliffy B.&#8221; may be right for the games he intends to create, but The middle class game is not dead in general! Or would you label EVE Online as middle class? Just based on money or CUO you would have to if you think like Cliff!
</p>
<p>
<em>PS: A polemic assumption by me: If the general gamer has 100$ each month, he would buy more games if the costs are lower and therefore a wider production would be more effective and risk-less!</em>
</p>
<p><em>Written for <a href="http://altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/03/13/what-happened-to-the-middle-class-of-gaming/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>WebGL &#8211; Part 2: In the beginning there was&#8230;</title>
		<link>http://insanitydesign.com/wp/2011/02/27/webgl-part-2-in-the-beginning-there-was/</link>
		<comments>http://insanitydesign.com/wp/2011/02/27/webgl-part-2-in-the-beginning-there-was/#comments</comments>
		<pubDate>Sun, 27 Feb 2011 10:24:39 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[WebGL]]></category>
		<category><![CDATA[altdevblogaday]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[opengl]]></category>
		<category><![CDATA[webgl]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=818</guid>
		<description><![CDATA[&#8230;a Triangle! In the previous part I presented WebGL, a new competitor in the graphics programming market. You got to know some history and parallel branches in the history of 3D graphics in the browser environment. Now, in this part you will see how to get a WebGL application into your browser. The beginning Last [...]]]></description>
			<content:encoded><![CDATA[<p>
&#8230;a Triangle! In the <a href="http://insanitydesign.com/wp/2011/02/13/webgl-part-1-a-new-challenger-appears/">previous part</a> I presented WebGL, a new competitor in the graphics programming market. You got to know some history and parallel branches in the history of 3D graphics in the browser environment. Now, in this part you will see how to get a WebGL application into <strong>your</strong> browser.
</p>
<h3>The beginning</h3>
<p>
Last time was historical, this time we will get practical. In this part we will write one HTML page with embedded JavaScript code to draw a simple triangle through WebGL into an HTML5 Canvas. For that we will see how to set up a canvas, create a WebGL context, embed shaders and create a draw loop to present our triangle. Especially the shaders are an important topic regarding WebGL as WebGL is based on OpenGL ES 2.0 and OpenGL ES 2.0 does not support the fixed function transformation and fragment pipeline of OpenGL ES 1.x. Therefore, everything has to be done through shaders.
</p>
<p>
<em>Note: What I present is an overview and user guide of WebGL, not OpenGL (nor OpenGL ES Shading Language)! WebGL could be seen as a wrapper for OpenGL ES 2.0 in your browser (and in the current state programmable by JavaScript). Therefore, I will not explain every OpenGL command or speciality. What is pointed out is just how to get your OpenGL knowledge into your browser. General programming knowledge and some HTML/JavaScript expertise may help. If you need help with OpenGL please refer to the masses of great tutorials in the net, especially <a href="http://nehe.gamedev.net/">NeHe</a> and the <a href="http://opengles-book.com/">OpenGL ES 2.0 Programming Guide</a> (the main inspiration for this)</em>.
</p>
<h3>The Page</h3>
<p>
First of all we will set up our frame, our basic HTML file which we will use throughout this post. To write and develop HTML, JavaScript and therefore WebGL yourself you are pretty open to what to use. You can use a normal text editor or rely on a WebDevelopment environment but there are no distinct WebGL IDEs.<br />
For WebDevelopment you can use <a href="http://www.aptana.com/">Aptana</a> or the direct <a href="http://eclipse.org/downloads/packages/eclipse-ide-javascript-web-developers/heliossr2">Eclipse JavaScript Development Branch IDE</a>. Both are fully fledged IDEs with great support, refactoring, auto-completion etc. Always a good simple helper is also <a href="http://notepad-plus-plus.org/">Notepad++</a>.<br />
Everything shown here has been developed in Eclipse, Notepad++ and tested in <a href="http://www.google.com/chrome">Chrome 9</a>. Chrome 9 is currently the only release browser download with enabled WebGL and has very good Developer Tools. Both is recommended for JavaScript development as debugging is kind of a pain in the a** (we will come to this in later parts).
</p>
<p>
If you have everything ready, have a look at the initial HTML scaffold:
</p>
<div class="geshi no html">
<ol>
<li class="li1">
<div class="de1">&lt;!DOCTYPE html&gt;
</div>
</li>
<li class="li1">
<div class="de1">&lt;html&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;&lt;head&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;meta name=&quot;keywords&quot; content=&quot;altdev,webgl,insanitydesign&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;meta name=&quot;author&quot; content=&quot;INsanityDesign&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;title&gt;WebGL &#8211; Part 2: In the beginning there was&#8230;&lt;/title&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;style type=&quot;text/css&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;#canvas {
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; width: 640px;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; height: 480px;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;}
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;/style&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;script type=&quot;text/javascript&quot; src=&quot;webgl-utils.js&quot; /&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;script type=&quot;text/javascript&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;&#8230;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;/script&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;&lt;/head&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;&lt;body&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;canvas id=&quot;canvas&quot;&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &lt;/canvas&gt;
</div>
</li>
<li class="li1">
<div class="de1">&nbsp;&lt;/body&gt;
</div>
</li>
<li class="li1">
<div class="de1">&lt;/html&gt;</div>
</li>
</ol>
</div>
<p>
This is the scaffold we will use throughout this part to show how to embed WebGL in a HTML file. You can copy it and save it as e.g. an <em>webgl-part2.html</em> file to open it with your WebGL enabled browser. At the moment, there is nothing to see or do. We will consequently fill it up and start using WebGL to draw our triangle.
</p>
<p>
One thing you might notice immediately if you have seen or written HTML pages before is the first line: &lt;!DOCTYPE html&gt;! This is the reduced Doctype used to init a HTML 5 page. You no longer have to write these long <em>Doctype XHTML 1.0 transitional</em> etc. Just that! Afterwards comes pretty general HTML stuff and nothing very special for our test.<br />
Between lines 11 and 14 we define the width and height of our canvas we want to draw in through <a href="http://en.wikipedia.org/wiki/CSS">CSS</a>. For now and the following we will stick with a classic 640&#215;480. There are several ways to define the width and height of the canvas. As it is an HTML entity you can use everything that HTML allows. Regarding the WebGL drawing viewport we can refer to this size later on, increase or decrease the <em>glViewport</em>.<br />
At line 17 you can see how to embed external JavaScript files into the page. We already embed one <em>.js</em> file in this case: webgl-utils.js! These utils provide some common methods for creating a WebGL context on a canvas. These are cross-browser compatible and actively maintained at Khronos, therefore it is unnecessary to rewrite these by yourself. You can download the original file from the <a href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/common/webgl-utils.js">Khronos CVS</a>. Download and save the file at the same location where you put your HTML file. I will rely on these in this and the following parts.<br />
The lines 25 and 26 define the initial canvas which we will use to draw in. It is just a simple HTML entity. We identify it by the <em>id</em> attribute as &#8220;canvas&#8221; but the naming is up to you (but you would have change other occurrences).
</p>
<p>
Now, the interesting things will happen in between line 19 and 21. This is where the magic will occur. In this showcase we will fill it part by part to get our triangle in the browser. Every code shown in the following should be copied in between here (or download the full file at the end).
</p>
<h3>Global Definition</h3>
<p>
At first, we will add some global variables that we will use in the following WebGL application. In addition, we define our triangle vertices and the mandatory fragment and vertex shader (add this where the dots <em>&#8230;</em> are).
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>script type=<span class="st0">&quot;text/javascript&quot;</span><span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Some global variables</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> gl;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> width;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> height;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> canvas;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Our triangle</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> vertsTriangle = <span class="kw2">new</span> Float32Array<span class="br0">&#40;</span><span class="br0">&#91;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="nu0">0.0</span>, <span class="nu0">0.7</span>, <span class="nu0">0.0</span>, <span class="co1">//Top</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="nu0">-0.7</span>, <span class="nu0">-0.7</span>, <span class="nu0">0.0</span>,<span class="co1">//Bottom Left</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="nu0">0.7</span>, <span class="nu0">-0.7</span>, <span class="nu0">0.0</span> &nbsp;<span class="co1">//Bottom Right</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#93;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> vertsTriangleBuffer;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Fragment Shader</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> shaderFS = <span class="st0">&quot;precision highp float;<span class="es0">\n</span><span class="es0">\</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;void main() {<span class="es0">\n</span><span class="es0">\</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;gl_FragColor = vec4(1.0, 1.0, 0.2, 1.0);<span class="es0">\n</span><span class="es0">\</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<span class="es0">\n</span>&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Vertex Shader &nbsp; &nbsp; </span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> shaderVS = <span class="st0">&quot;attribute vec4 position;<span class="es0">\n</span><span class="es0">\</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;void main() {<span class="es0">\n</span><span class="es0">\</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;gl_Position = position;<span class="es0">\n</span><span class="es0">\</span></span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<span class="es0">\n</span>&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//The shader program</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> shaderProgram;</div>
</li>
</ol>
</div>
<p>
We define handles for the created GL context we want to re-use throughout this page as well as the width and height of the canvas into which we want to draw. Do not forget the canvas itself, of course. Afterwards we set up the three vertices of our triangle in <em>vertsTriangle</em>.<br />
You may have noticed that we do not type the <em>width/height</em> or <em>gl</em> handle. All variables are just noted as (mutable) <em>var</em>&#8216;s. As JavaScript is a dynamically typed language this is fine. The definition happens as soon as it assigned. But it is never strongly typed for dynamic variables and therefore can rely on different sets of types. Nevertheless, you can also type your variables.<br />
As JavaScript is required to be more and more with high performance inside your browser an initiative started to define some specific arrays to speed up the applications. These <a href="https://developer.mozilla.org/en/JavaScript_typed_arrays">Typed Arrays</a> such as the used <em>Float32Array</em> are still in a draft state as well as WebGL but will be released and supported probably in parallel to it.
</p>
<p>
After the vertices array you can see the fragment and the vertex shader code. Here, it is assigned as String to a JavaScript variable. If you would copy these and remove the special symbols you will get a normal shader as you might know. Here, we explicitly define the end of each line through <em>\n\</em>. This looks odd but is required to compile it later on as the shader source is required to be an array. Therefore, you could also write:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">var</span> shaderFS = <span class="br0">&#91;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="st0">&quot;precision highp float;&quot;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="st0">&quot;void main() {&quot;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="st0">&quot;gl_FragColor = vec4(1.0, 1.0, 0.2, 1.0);&quot;</span>,</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="st0">&quot;}&quot;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#93;</span>;</div>
</li>
</ol>
</div>
<p>
Both things would work. It may seem pretty odd to write everything directly into these arrays/variables but for now it&#8217;s enough as we only need one shader each. In a ladder part we will see how to load/reload specific shaders into your application.<br />
The last thing we already pre-define is a variable for our later assigned shader program.
</p>
<h3>Entry point</h3>
<p>
JavaScript itself and in its browser environment have no specific entry point such as a classic main method. Therefore, we have to create an entry point ourself based on the principles of the <a href="http://en.wikipedia.org/wiki/Document_Object_Model">DOM</a> loading of the WebPage. As we want to start our WebGL application as soon as the actual body of the page (with our canvas) has been loaded, we add a trigger to the body itself. The trigger is docked onto the <em>onLoad</em> delegate of the body:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>body <span class="kw3">onload</span>=<span class="st0">&quot;main();&quot;</span><span class="sy0">&gt;</span></div>
</li>
</ol>
</div>
<p>
By that we listen for the body to be loaded (the canvas has to be created in the DOM up to that) and fire our main() method where we start with our part of the application:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* The main entry point</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> main<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; canvas = document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">&quot;canvas&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl = WebGLUtils.<span class="me1">setupWebGL</span><span class="br0">&#40;</span>canvas<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Couldn&#39;t setup GL</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>gl<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;No WebGL!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; width = canvas.<span class="me1">width</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; height = canvas.<span class="me1">height</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>init<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Could not init!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; draw<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
In the first 8 lines we init our canvas and the WebGL context for it. First, we retrieve the canvas element from the DOM through its id <em>&#8220;canvas&#8221;</em>. Then we call a method from the downloaded WebGL Utils to create and enable the WebGL context of that canvas. Please have a look at <a href="http://insanitydesign.com/wp/2011/02/13/webgl-part-1-a-new-challenger-appears/">part 1</a> to see what is done in that method. Basically, we utilize the generalized <em>setupWebGL(canvas)</em> method to be cross-browser compatible as there is still no distinct method to init a WebGL context.<br />
Afterwards we retrieve the width and height from the canvas (as defined in the CSS) to reuse these in our <em>glViewport</em> later on. Then we fire a general init() method to setup everything WebGL we need:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Init our shaders, buffers and any additional setup</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> init<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>initShaders<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Could not init shaders!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">false</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>initBuffers<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Could not init buffers!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">false</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">clearColor</span><span class="br0">&#40;</span><span class="nu0">0.0</span>, <span class="nu0">0.0</span>, <span class="nu0">0.0</span>, <span class="nu0">1.0</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">viewport</span><span class="br0">&#40;</span><span class="nu0">0</span>, <span class="nu0">0</span>, width, height<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">clearDepth</span><span class="br0">&#40;</span><span class="nu0">1.0</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">return</span> <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
In general, the init method follows three steps:</p>
<ul>
<li>Init our shaders</li>
<li>Init our buffers (our triangle buffer)</li>
<li>Set up the clear color, depth and our viewport</li>
</ul>
<p>Step 3 should be self-explanatory, therefore we will continue with loading and setting up our shaders.
</p>
<h3>Load the Shaders</h3>
<p>
You already saw our two shader variables. Now, we want to compile, attach and link these. For that we require two methods: <em>initShaders()</em> and <em>createShader()</em>.
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Init our shaders, load them, create the program and attach them</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> initShaders<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> fragmentShader = createShader<span class="br0">&#40;</span>gl.<span class="me1">FRAGMENT_SHADER</span>, shaderFS<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> vertexShader = createShader<span class="br0">&#40;</span>gl.<span class="me1">VERTEX_SHADER</span>, shaderVS<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; shaderProgram = gl.<span class="me1">createProgram</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>shaderProgram == <span class="kw2">null</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;No Shader Program!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">attachShader</span><span class="br0">&#40;</span>shaderProgram, vertexShader<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">attachShader</span><span class="br0">&#40;</span>shaderProgram, fragmentShader<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">linkProgram</span><span class="br0">&#40;</span>shaderProgram<span class="br0">&#41;</span>; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>gl.<span class="me1">getProgramParameter</span><span class="br0">&#40;</span>shaderProgram, gl.<span class="me1">LINK_STATUS</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Could not link shader!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; gl.<span class="me1">deleteProgram</span><span class="br0">&#40;</span>shaderProgram<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">false</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">useProgram</span><span class="br0">&#40;</span>shaderProgram<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; shaderProgram.<span class="me1">position</span> = gl.<span class="me1">getAttribLocation</span><span class="br0">&#40;</span>shaderProgram, <span class="st0">&quot;position&quot;</span><span class="br0">&#41;</span>; &nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">enableVertexAttribArray</span><span class="br0">&#40;</span>shaderProgram.<span class="me1">position</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">return</span> <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> createShader<span class="br0">&#40;</span>shaderType, shaderSource<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Create a shader</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> shader = gl.<span class="me1">createShader</span><span class="br0">&#40;</span>shaderType<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>shader == <span class="kw2">null</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">null</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">shaderSource</span><span class="br0">&#40;</span>shader, shaderSource<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">compileShader</span><span class="br0">&#40;</span>shader<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span><span class="br0">&#40;</span><span class="sy0">!</span>gl.<span class="me1">getShaderParameter</span><span class="br0">&#40;</span>shader, gl.<span class="me1">COMPILE_STATUS</span><span class="br0">&#41;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Could not compile shader!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; gl.<span class="me1">deleteShader</span><span class="br0">&#40;</span>shader<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">null</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">return</span> shader;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
At the beginning of <em>initShaders</em> we call our <em>createShader</em> method with the type of the shader and the according shader source variable. The called method createShader does exactly what the name suggests: It creates a shader based on the given type, compiles the given source and returns the created <em>glShader</em>.<br />
Actually nothing special here as it is just a helper method. If we would hand over the shaderSource in a different format we will probably extend this method to convert the given shader source to a common format. But for now this is fine.<br />
One speciality you can find is the error handling: Throughout the page you can find alerts and empty returns. As we have no specific exit() call in JavaScript or HTML (there is a possibility, but we will not use it later on) we alert the user, firing a MessageBox and empty return. As catched in higher instances this will result in a jump out of the application which leads to a manually &#8220;stopped&#8221; application. As we entered by ourself through the main() method, we can jump out any time we want. An alert() may not be the nicest way to show errors and exit the application but it at least gives feedback. Later we will see how to combine HTML entities, CSS and WebGL and will use the normal HTML functionality to fire error messages and according to the error lead the user to a solution or mail these errors to the developer.
</p>
<p>
After we loaded and created our shader we start creating our program at line 10. Again we check for an error that may have occurred. If no error happened we attach both shader objects, link the program and if nothing happened, use it.<br />
If you know OpenGL you might say: Still nothing that special here!&#8230; and this is intended. WebGL was intended as a low-level programming opportunity without too many specialities away from the original uses of OpenGL. This was done with VRML and many other special plug-ins but never lead to what was expected as commonly used 3D in the browser.
</p>
<p>
Nevertheless, one speciality about JavaScript is being used now: The dynamic prototyping. You can see at the end that we return &#8220;the index of the generic vertex attribute that is bound to that attribute variable&#8221; and we assign it to the <em>shaderProgram</em> as <em>position</em>.
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1">shaderProgram.<span class="me1">position</span> = gl.<span class="me1">getAttribLocation</span><span class="br0">&#40;</span>shaderProgram, <span class="st0">&quot;position&quot;</span><span class="br0">&#41;</span>; &nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">gl.<span class="me1">enableVertexAttribArray</span><span class="br0">&#40;</span>shaderProgram.<span class="me1">position</span><span class="br0">&#41;</span>;</div>
</li>
</ol>
</div>
<p>
This is possible even if we haven&#8217;t predefined that variable in the shaderProgram object. We dynamically extend and create a new prototype by assigning the position without prior definition.<br />
This should never be used as <em>best practice</em> as there is no contract we can rely on, e.g. through a specifically defined class, structure or interface. In this simple case as we do not need reusable and generic objects we just assign the handle for later reuse in our own &#8220;knowledge space&#8221;. Regarding classes and interfaces for contracts, these are all possible in JavaScript and we will come to that in a later part.
</p>
<p>
But now our shaders are (hopefully) all loaded and assigned so that we can continue setting up our triangle vertices buffer.
</p>
<h3>Setup the Buffer</h3>
<p>
To set up the buffer based on our vertices we go straight forward:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Init our required buffers (in our case for our triangle)</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> initBuffers<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; vertsTriangleBuffer = gl.<span class="me1">createBuffer</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">bindBuffer</span><span class="br0">&#40;</span>gl.<span class="me1">ARRAY_BUFFER</span>, vertsTriangleBuffer<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">bufferData</span><span class="br0">&#40;</span>gl.<span class="me1">ARRAY_BUFFER</span>, vertsTriangle, gl.<span class="me1">STATIC_DRAW</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">return</span> <span class="kw2">true</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
Absolutely nothing special here! We create the buffer and assign it to our global variable, bind and set the according data. This will become more complicated in later parts, when we define structures, load models etc. But as we just want to draw one triangle this is enough.
</p>
<h3>Let&#8217;s draw</h3>
<p>
What we really want to do after all this work now is to draw. Therefore, we define our draw() method:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Our draw/render main loop method</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> draw<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">// request render to be called for the next frame.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; window.<span class="me1">requestAnimFrame</span><span class="br0">&#40;</span>draw, canvas<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">clear</span><span class="br0">&#40;</span>gl.<span class="me1">COLOR_BUFFER_BIT</span> <span class="sy0">|</span> gl.<span class="me1">GL_DEPTH_BUFFER_BIT</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">bindBuffer</span><span class="br0">&#40;</span>gl.<span class="me1">ARRAY_BUFFER</span>, vertsTriangleBuffer<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">vertexAttribPointer</span><span class="br0">&#40;</span>shaderProgram.<span class="me1">position</span>, <span class="nu0">3</span>, gl.<span class="me1">FLOAT</span>, <span class="kw2">false</span>, <span class="nu0">0</span>, <span class="nu0">0</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; gl.<span class="me1">drawArrays</span><span class="br0">&#40;</span>gl.<span class="me1">TRIANGLES</span>, <span class="nu0">0</span>, <span class="nu0">3</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
As you can see no immediate drawing here for this very simple example. This again relates to WebGL and its origin OpenGL ES 2.0: Besides no fixed-function pipeline there is no immediate drawing. We just clear, bind our buffer and draw!<br />
But wait, how do we draw? I said we have no specific entry point and created one ourself. If we have no specific entry point we probably also have no specific <em>draw() loop</em> we can rely on. Again, we have to create on our own. Here again we will rely on a method from the WebGL Utils and the according best practice from <a href="https://www.khronos.org/webgl/wiki/FAQ#What_is_the_recommended_way_to_implement_a_rendering_loop.3F">Khronos</a>.
</p>
<p>
In the end of our main method, after all initiations we call our draw() method once:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; draw<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
After the initial call, in the first line of the draw method we call up a utils method: <em>requestAnimFrame(draw, canvas)</em>! This cross-browser compatible method takes the canvas in which to draw and the according method as callback. Inside is a timeout that will recall and keep the loop running. Currently this is the recommended way to do a loop. But it has to be noted that this not final. You can see the drawbacks immediately in the timeout and in the call directly in the draw method. For now until we see a final call and the draft has been approved we will stick to that as it is nevertheless cross-browser compatible and works fine.
</p>
<p>
Now, if you copied and setup everything correctly you should see the following: <a href="http://insanitydesign.com/wp/wp-content/uploads/webgl-part2-triangle.png"><img src="http://insanitydesign.com/wp/wp-content/uploads/webgl-part2-triangle-300x224.png" alt="" title="WebGL - Part 2: Triangle" width="300" height="224" class="aligncenter size-medium wp-image-855" /></a>
</p>
<p>
<em>You can download the full source <a href='http://insanitydesign.com/wp/wp-content/uploads/webgl-part2.html'>here</a>. If you downloaded the <a href="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/common/webgl-utils.js">webgl-utils.js</a> put it at the same location as the HTML file.</em>
</p>
<p>
This is it&#8230; at least for now. There are still some &#8220;not so ideal&#8221; things here as this is neither best practice nor the only way to program JavaScript and therefore WebGL. Everything is embedded directly into the HTML page, everything is handled as one. The shaders are odd string variables and the process is very focussed around &#8220;just work&#8221;. But this was intended for now. Now, you have a page you can use as an initial foundation for further experiments. For example, try fooling around with the shaders and see what happens.
</p>
<p>
Next time we will get into User Input and show how to make the triangle move to the rhythm of our key strokes (and build up our own matrix). In the following parts afterwards I will present how to load textures, load models and operate with several shader files, dynamic loading and obfuscated JavaScript.
</p>
<p>
<em>Written for <a href="http://altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/02/27/webgl-part-2-in-the-beginning-there-was/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>WebGL &#8211; Part 1: A new challenger appears&#8230;</title>
		<link>http://insanitydesign.com/wp/2011/02/13/webgl-part-1-a-new-challenger-appears/</link>
		<comments>http://insanitydesign.com/wp/2011/02/13/webgl-part-1-a-new-challenger-appears/#comments</comments>
		<pubDate>Sun, 13 Feb 2011 22:51:53 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[WebGL]]></category>
		<category><![CDATA[altdevblogaday]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[opengl]]></category>
		<category><![CDATA[vrml]]></category>
		<category><![CDATA[webgl]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=719</guid>
		<description><![CDATA[As I did not want to be as somewhat polemic as last time I checked several different pragmatic ideas I could post about. I weighted each against the other but with the news that the final draft of WebGL was released I decided to go this route and present some information, basics and a furthermore [...]]]></description>
			<content:encoded><![CDATA[<p>
As I did not want to be as somewhat polemic as <a href="http://altdevblogaday.org/there-are-no-casual-games">last time</a> I checked several different pragmatic ideas I could post about. I weighted each against the other but with the news that the <a href="https://www.khronos.org/registry/webgl/specs/latest/">final draft</a> of WebGL was released I decided to go this route and present some information, basics and a furthermore small tutorial in the following parts about WebGL!
</p>
<h3>A new challenger appears</h3>
<p>
Twelve years after HTML4 and eleven years after XHTML1.0 the <a href="http://www.w3.org/">WorldWideWeb Consortium</a> &#8220;finally&#8221; dropped all efforts to standardize another, a different and more XML-based standard for the Web and continued where they left off to extend HTML4 to built it up to the requirements of our current time. As we are easily able to define that our current web-browsing habits are influenced by multimedia-based content with <a href="http://www.youtube.com/">YouTube</a>, <a href="http://www.facebook.com">Facebook</a>, <a href="http://www.farmville.com/">Farmville</a>, Podcasts, &#8230; the new standard would have to be more multimedia flexible. And W3C listened!
</p>
<p>
The consequent successor <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> was finally started in 2008. Now, <strong>only</strong> three years later the standard is seeing the finishing line and most released drafts have already been implemented in common browsers such as <a href="http://www.mozilla.com/en-US/firefox/">Firefox</a>, <a href="http://www.google.com/chrome">Chrome</a> or <a href="http://www.apple.com/safari/">Safari</a> through WebKit. It provides special video, audio and canvas elements, support for codecs such as <a href="http://www.theora.org/">OGG Theora</a>/Vorbis and MP4 (still a little dependent on decisions and implementation as it is still not final, possibly <a href="http://www.webmproject.org/">WebM</a>), semantic support based on RDFa, sectioning etc. and a native 3D API named WebGL!
</p>
<p><a href="http://insanitydesign.com/wp/wp-content/uploads/WebGL-Logo.png" target="_blank"><img src="http://insanitydesign.com/wp/wp-content/uploads/WebGL-Logo.png" alt="" title="WebGL" width="156" height="72" style="width: 156px; border: 0; text-decoration: none; padding-top: 10px;" align="right" class="alignright size-full wp-image-787" /></a>WebGL is a specification, independent from HTML5 but depending on the <a href="http://en.wikipedia.org/wiki/Canvas_element">Canvas element</a> of the standard. It is implemented as a context of the canvas and can be programmed (for now, actually more will be possible) through JavaScript and shaders. Speed and some specifics are dependent on the actual implementation i.e. the Browser but in general interchangeable in-between different Webengines.
</p>
<p>
Therefore, WebGL offers native in-browser support for 3D development. But actually the idea of 3D in your Browser is not a new challenge for our beloved internet&#8230;
</p>
<h3>3D on the Web</h3>
<p>
Already in the early days of the WorldWideWeb several different developers, companies and initiatives tried to establish 3D in the browser to provide a more persuasive environment for the user, correlating what was currently being established in games, that became more and more 3D focused during these years.<br />
Already released in 1995 the <a href="http://web3d.org/x3d/specifications/#vrml97">Virtual Reality Modeling Language</a> (VRML) tried to bring 3D to the Web. VRML 1.0 allowed to define the geometry, textures, materials etc. and especially scripts to visualize a 3D scene in a common textfile format. This scene was additionally able to retrieve additional data from different URLs as well as to react to events and triggers through special Java/JavaScript programs in its <em>script</em> nodes. Later it was extended to allow animations, sounds and other multimedia assets in 1997 with the VRML 2.0 standard.<br />
The problem with VRML was mainly that it required a plugin to be installed in your browser as well as much processing power. Most plugins weren&#8217;t optimized and the scenes described in a very high-level style required too much load. There were some initiatives but besides some world viewers and websites of authorities no one really jumped onto VRML.
</p>
<p>
In 2001 the <a href="http://www.web3d.org">Web3D Consortium</a> built a new high-level abstraction for 3D in the Browser: X3D. X3D extended VRML with more standards and especially profiles, shaders, gis and networking. It still requires a <a href="http://www.bitmanagement.com/en/products/interactive-3d-clients/bs-contact">plugin</a> or player and was therefore not as perceived as wished for.
</p>
<p>
As WebGL is more established and well-supported already by nearly every big browser on the market the Web3D initiative now jumps onto that train without giving up VRML and X3D. With <a href="http://www.x3dom.org/">X3DOM</a> the initial specification and implementation is now being made available on your browser without the need of plugin a but with the power of WebGL and Canvas.
</p>
<p>
Nevertheless, in this multi-part series I will only focus on WebGL directly. If you want to know more about these &#8220;historic&#8221; approaches just follow the given links.
</p>
<h3>OpenGL in the Browser</h3>
<p>
In contrast to VRML or X3DOM <a href="https://www.khronos.org/registry/webgl/specs/latest/">WebGL</a> follows a more direct (&#8220;low-level&#8221; in comparison) approach to 3D in the Browser. As the name suggests WebGL is based on OpenGL and specified by <a href="https://www.khronos.org/">The Khronos Group</a>. It is based on OpenGL ES 2.0 (nowadays good known from iOS and Android) and supports GLSL in version <a href="http://www.khronos.org/registry/gles/specs/2.0/GLSL_ES_Specification_1.0.17.pdf">ES1.0</a>. It docks onto the HTML5 <em>canvas</em> as a drawing context and with that it is fully integrated in the Document Object Model (DOM) and therefore allows full interaction with the general HTML Layout and Objects (e.g. overlaying, CSS styles, &#8230;).
</p>
<p>
As mentioned, as well as OpenGL WebGL is low-level and fully based around shaders. Therefore, things like defining simple geometry and scenes in an easy XML format as it is possible with X3D is not part of the WebGL standard itself. Possible implementations and APIs on top are nevertheless feasible (and already developed to some degree).
</p>
<p>
You can nearly cope everything you know about <a href="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES 2.0</a> into WebGL. But there are some limitations (besides what is currently still different in-between the different Browser implementations). One important difference is that WebGL has no support for non-power-of-two textures (you could disable mipmapping). You have to resize dynamically. But in general you can feel with WebGL as you do with ES2.0 in other programming languages. It even looks similar. Let&#8217;s have a look at an exemplary draw() method (taken from the <a href="http://www.amazon.com/OpenGL-ES-2-0-Programming-Guide/dp/0321502795/ref=sr_1_1?ie=UTF8&#038;qid=1297612469&#038;sr=8-1">OpenGL ES 2.0 Programming Guide</a>):
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">function</span> Draw<span class="br0">&#40;</span>esContext<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="kw2">var</span> userData = esContext.<span class="me1">userData</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Set the viewport</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">viewport</span><span class="br0">&#40;</span> <span class="nu0">0</span>, <span class="nu0">0</span>, esContext.<span class="me1">width</span>, esContext.<span class="me1">height</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Clear the color buffer</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">clear</span><span class="br0">&#40;</span> gl.<span class="me1">COLOR_BUFFER_BIT</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Use the program object</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">useProgram</span><span class="br0">&#40;</span> userData.<span class="me1">programObject</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Load the vertex position</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">bindBuffer</span><span class="br0">&#40;</span> gl.<span class="me1">ARRAY_BUFFER</span>, userData.<span class="me1">vertPosObject</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">vertexAttribPointer</span><span class="br0">&#40;</span> userData.<span class="me1">positionLoc</span>, <span class="nu0">3</span>, gl.<span class="me1">FLOAT</span>, <span class="kw2">false</span>, <span class="nu0">0</span>, <span class="nu0">0</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">enableVertexAttribArray</span><span class="br0">&#40;</span> userData.<span class="me1">positionLoc</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Load the index buffer</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">bindBuffer</span><span class="br0">&#40;</span> gl.<span class="me1">ELEMENT_ARRAY_BUFFER</span>, userData.<span class="me1">indicesObject</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Load the MVP matrix</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">uniformMatrix4fv</span><span class="br0">&#40;</span> userData.<span class="me1">mvpLoc</span>, <span class="kw2">false</span>, getAsFloat32Array<span class="br0">&#40;</span>userData.<span class="me1">mvpMatrix</span><span class="br0">&#41;</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;<span class="co1">// Draw the cube</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp;gl.<span class="me1">drawElements</span><span class="br0">&#40;</span> gl.<span class="me1">TRIANGLES</span>, userData.<span class="me1">numIndices</span>, gl.<span class="me1">UNSIGNED_SHORT</span>, <span class="nu0">0</span> <span class="br0">&#41;</span>; </div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
Looks pretty familiar, doesn&#8217;t it? A description of what this all means and how to really program it in JavaScript and embed it into a WebSite will follow in the coming parts.
</p>
<h3>Browser support</h3>
<p><strong>For the User</strong><br />
First of all you have to be able to see and test WebGL developments. Currently the easiest way to use WebGL is to install the current <a href="http://www.google.com/chrome">Chrome Browser</a>. Since version 9 it has enabled WebGL support in its stable release. If you want to use other Browsers such as Mozilla or Safari you would have to get the according nightly builds. In each case you might need to configure the according download. For a small &#8220;manual&#8221; have a look <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">here</a> or be lazy and use Chrome.
</p>
<p><strong>For the Developer</strong><br />
If you want to develop WebGL in a supporting Browser, you check for and enable WebGL through JavaScript by actually just trying and checking for success. There are two things you have to do:</p>
<ul>
<li>Check if the browser supports WebGL in general</li>
<li>Find/Get a canvas and enable the WebGL context for it</li>
</ul>
<p>
To check if your browser or more specifically the current window you are in allows WebGL you check for a specific window flag:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw1">if</span><span class="br0">&#40;</span>window.<span class="me1">WebGLRenderingContext</span><span class="br0">&#41;</span> <span class="co1">//This Window supports WebGL in general!</span></div>
</li>
</ol>
</div>
<p>
If this context returns true at least the Browser does support WebGL. Now, you need to check a canvas and enable the WebGL context in that canvas. Normally, you would specify a <em>&#60;canvas&#62;</em> element and hand this to a check and enabling function:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">function</span><span class="br0">&#40;</span>canvas<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Several names to check because of still diverse implementations</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> names = <span class="br0">&#91;</span><span class="st0">&quot;webgl&quot;</span>, <span class="st0">&quot;experimental-webgl&quot;</span>, <span class="st0">&quot;webkit-3d&quot;</span>, <span class="st0">&quot;moz-webgl&quot;</span><span class="br0">&#93;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//The context we want to fill</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw2">var</span> context = <span class="kw2">null</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="co1">//Iterate over all names and test for success</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">for</span><span class="br0">&#40;</span><span class="kw2">var</span> i = <span class="nu0">0</span>; i <span class="sy0">&lt;</span> names.<span class="me1">length</span>; ++i<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">try</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; context = canvas.<span class="me1">getContext</span><span class="br0">&#40;</span>names<span class="br0">&#91;</span>i<span class="br0">&#93;</span><span class="br0">&#41;</span>; <span class="co1">//Optional parameters can be handed to the implementation</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span> <span class="kw1">catch</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">//As soon as we got one -&gt; SUCCESS!</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>context<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="kw1">break</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">return</span> context;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>
If no context can be received but the <em>WebGLRenderingContext</em> says it may do WebGL, some other problems occurred. If the browser supports, you have enabled and retrieved the WebGL context and can start developing applications in your browser with fancy JavaScript.
</p>
<h3>The &#8220;new&#8221; power of JavaScript</h3>
<p>
Actually, nothing is &#8220;new&#8221; about JavaScript. The JavaScript used to first make a clock tick down on a Website, later to &#8220;do AJAX&#8221; or now to develop WebGL is pretty much all the same and based around the <a href="http://www.ecmascript.org/">ECMAScript</a> standard. Even if it contains <a href="http://www.oracle.com/technetwork/java/index.html">Java</a> in its name it has nothing to do with it. The former LiveScript is supposedly just named JavaScript to establish it with the already established Java&#8230; and probably because of a somehow Netscape/Sun partnership. But do not hesitate: The interpretation of JavaScript during runtime has been incredibly speeded up especially over the last years as more and more client programming is now part of normal websites and administrative interfaces reload and rebuild many things on-the-fly.
</p>
<p>
For JavaScript itself, it is first and foremost a prototyping programming language. This means that instead of developing a class-based architecture structure that is instanciated and dependent to the initial implementation and used throughout your development, in JavaScript you &#8220;re-use&#8221; the same classes for all instances with all given methods (called behaviours) that are added at first or also during runtime. These can be extended by the developer. Further the instances made from the structure are the states. In general you could say that prototyping is based on copying: It copies the &#8220;prototype&#8221; over and over again! Now, the most important thing about the prototype implementation of JavaScript is that it also holds a link to its &#8220;prototype&#8221; and therefore derives recursively through the prototyping hierarchy to find what we request.
</p>
<p>
A very simple example: We define a Blog!
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">var</span> personalBlog = <span class="br0">&#123;</span> title=<span class="st0">&quot;Personal Blog&quot;</span>, author=<span class="st0">&quot;Savas Ziplies&quot;</span> <span class="br0">&#125;</span>;</div>
</li>
</ol>
</div>
<p>
Now we define a second blog:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">var</span> altDevBlog = <span class="br0">&#123;</span> title=<span class="st0">&quot;AltDev Blog&quot;</span> <span class="br0">&#125;</span>;</div>
</li>
</ol>
</div>
<p>
and assign our personalBlog as prototype:
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="co1">//This does not work in all JavaScript implementation (as not all have the direct prototype to be settable), but for the example we rely on it!</span></div>
</li>
<li class="li1">
<div class="de1">altDevBlog.__proto__ = personalBlog;</div>
</li>
</ol>
</div>
<p>
Now we query
</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw3">alert</span><span class="br0">&#40;</span>altDevBlog.<span class="me1">author</span> + <span class="st0">&quot;@&quot;</span> + altDevBlog.<span class="me1">title</span><span class="br0">&#41;</span>;</div>
</li>
</ol>
</div>
<p>
and will get the following result: <em>Savas Ziplies@AltDev Blog</em>! As you can see, even if I have not defined &#8220;author&#8221; in <em>altDevBlog</em> I may still access it as I specifically set the prototype of <em>altDevBlog</em> to <em>personalBlog</em>, therefore the &#8220;author&#8221; not available is resolved at the prototype <em>personalBlog</em> and printed. This hierarchy can go on and on forever and can be a performance issue if not consciously developed against. But in general prototyping and JavaScript itself offers many patterns that go well with WebGL and designs in general.
</p>
<p>
Therefore, JavaScript depends on a little different &#8220;thinking&#8221; approach. But besides that JavaScript also provides &#8220;somehow&#8221; object-oriented principles, delegation, dynamic typing, closures, run-time evaluation (very helpful indeed) and <a href="http://www.google.com/search?q=javascript">much more</a>. Actually, JavaScript is a very powerful and somewhat interesting programming language but just seems awkward to most people because of its syntax, the name and because it is an interpreted language. Nevertheless, you can do practically everything with it, also relying on nearly every <a href="http://en.wikipedia.org/wiki/Design_pattern_(computer_science)">design pattern</a> described.
</p>
<h3>To be concluded&#8230;</h3>
<p>
As I do not want to write a book as I did last time (yeah, hard to believe ^^&#8217;), this is it for today. You now know some history, the basic standard and how to &#8220;use&#8221; WebGL applications. The next parts will feature of course further explanations of WebGL, an additional introduction to JavaScript (and some of the creepy stuff you can do with it), presenting already existing WebGL libraries and an exemplary tutorial game developed fully in WebGL (as well as some twists and tweaks around networking and dynamic loading). In addition we will try to clarify how WebGL stands against other 3D in the Browser such as Flash3D, Unity3D and Shiva3D.
</p>
<p>
To already give you a taste of what to come and what is possible with WebGL, have a look at these publicly available <a href="http://code.google.com/p/webglsamples/">WebGL Samples over at Googlecode</a>, the astonishing <a href="http://bodybrowser.googlelabs.com/body.html#">Google Body example</a> or the nice presentation of <a href="http://www.glge.org/">GLGE</a> in the video.
</p>
<p><iframe align="center" title="YouTube video player" width="600" height="380" src="http://www.youtube.com/embed/Vva36undIss" frameborder="0" allowfullscreen></iframe></p>
<p><em>Written for <a href="http://altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/02/13/webgl-part-1-a-new-challenger-appears/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>There are no Casual Games&#8230;</title>
		<link>http://insanitydesign.com/wp/2011/01/27/there-are-no-casual-games/</link>
		<comments>http://insanitydesign.com/wp/2011/01/27/there-are-no-casual-games/#comments</comments>
		<pubDate>Thu, 27 Jan 2011 22:44:01 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[altdev]]></category>
		<category><![CDATA[casual]]></category>
		<category><![CDATA[core]]></category>
		<category><![CDATA[flash]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=651</guid>
		<description><![CDATA[&#8230;but Casual Gaming (and Casual Gamers)! Wait, wait&#8230; Before you stop reading and ask yourself why I would make such an offensive proposition, please hear me out. My Origin I have a very tense relation to the terms Casual and Core Games that found on three things: 1) I am getting older and my best [...]]]></description>
			<content:encoded><![CDATA[<p>
&#8230;but Casual Gaming (and Casual Gamers)! Wait, wait&#8230; Before you stop reading and ask yourself why I would make such an offensive proposition, please hear me out.
</p>
<p><strong>My Origin</strong><br />
I have a very tense relation to the terms Casual and Core Games that found on three things: <strong>1)</strong> I am getting older and my best &#8220;Gamer&#8221; times are over ^^&#8217;, <strong>2)</strong> I develop Browser Games and <strong>3)</strong> I develop in Java! A very bad combination to go into a Game Developer discussion&#8230; <strong><em>trust me</em></strong>!<br />
I am a Gamer for over two decades now, started with <a href="http://en.wikipedia.org/wiki/Pong">Pong</a> and played a high percentage of every mentionable game ever made. Studying Computer Science and developing Games was a reasonable step and I like what I am doing now, I am good in what I do (<em>yes, I am ^^</em>), developing Games and I am proud of what I achieved until today. But nowadays if I mention that I develop Games, I get asked: </p>
<ul>
<li>&#8220;Oh, very cool. What Games?&#8221;</li>
<li>&#8220;Browser MMOs&#8221;</li>
<li>&#8220;Ahhh&#8230;<em>*pause*</em>&#8230; Casual Games!&#8221;</li>
</ul>
<p>Even with swallowing the bitter taste of that sentence I somehow feel unvalued for being part of one of the largest Browser Games around, over four years old, still growing and established way before Facebook. A <strong>massive simultaneous multiplayer game</strong>, relying heavy on <strong>PvP</strong>, <strong>time intensive</strong> and based on a very <strong>technical</strong> Story. All features that are normally related to so called &#8220;Core Games&#8221;. But if a Browser Game features such elements why is it that the term &#8220;Browser Game&#8221; is instantly related to &#8220;Casual Game&#8221;? And why in general is &#8220;Casual Game&#8221; leading to the idea of &#8220;not a real game&#8221;?<br />
In my specific case Browser and Casual is not the only evil term. The dialog above often continues as follows:</p>
<ul>
<li>&#8220;Why do you think I develop a Casual Game?&#8221;</li>
<li>&#8220;It&#8217;s in the Browser&#8230; probably Flash.&#8221;</li>
<li>&#8220;I am Java Developer.&#8221;</li>
<li>&#8220;I think you said you develop Games. How can you develop Games in Java?&#8221;</li>
</ul>
<p>But that is another story I will cover in another post ^^&#8217;.
</p>
<p><strong>My Problem</strong><br />
Another thing that leads me to my &#8220;<em>new</em>&#8221; thinking was the evolution of my own gaming habits. As mentioned, I am a Gamer, a Core Gamer you would say, played Games from <a href="http://www.mobygames.com/game/wolfenstein-3d">Wolfenstein 3D</a> to <a href="http://www.callofduty.com/">Call of Duty</a>: Black Ops, from <a href="http://www.valvesoftware.com/">Half-Life</a> over CS to TS2, from <a href="http://www.mobygames.com/game/zork-the-great-underground-empire">Zork</a> to <a href="http://www.the-whispered-world.com/">The Whispered World</a>. I owned and own Handhelds, Consoles and PCs. I spent ages playing through games each day after school, alone or with friends. But over time my gaming habits changed through studies and now a whole lot of work. I am still a Gamer, just tested the newest <a href="http://www.ea.com/crysis-2">Crysis 2</a> and <a href="http://www.bulletstorm.com/">Bulletstorm</a> Demos&#8230; but the actual gaming sessions changed!
</p>
<p>
I am part of the working community now. Most of the day I am sitting at my work desk and if I get home I have some commitments to do or just want to get some peace. Nevertheless, my <a href="http://www.civilization5.com/">Civilization</a> is teasing me to conquer the world, while <a href="http://en.wikipedia.org/wiki/Metal_Gear">Snake</a> is asking me to finally complete the Mission, besides <a href="http://www.kaneandlynch.com/">Kane &#038; Lynch</a> still arguing. Everything becomes a <a href="http://www.puzzle-quest.com/">Quest that Puzzles</a> me and I get <a href="http://www.rovio.com/index.php?page=angry-birds">Angry like the Birds</a> outside my Windows (couldn&#8217;t find a transition to my iPad here ^^).<br />
So, every evening I really have to decide what I do and <strong>IF</strong> I play. And even if I play, the time a playing session takes reduced a lot nowadays. For example, I played Plants vs. Zombies as well as Dead Space. I played Mirror&#8217;s Edge as well as Angry Birds. All four games would be categorized into Casual and Core Games, but the way I played them somehow did not fit the definition. I played Plants vs. Zombies for hours straight but Dead Space actually in 15-20 minutes chunks until the end (not only because it was scary). Mirror&#8217;s Edge I played through in one session but Angry Birds just 15 minutes some evenings.<br />
Now, with the advent of all this classification that somehow does not fit my overall love for games of every type that &#8220;entertains&#8221; me, I questioned myself: Am I doing something wrong? Or is the classification not practicable?
</p>
<p><strong>The Definition</strong><br />
With that many inconsistencies in my general understanding of Browser and further more Casual Games I tried to find a conclusive definition. During the search of a definition I had to notice that I never read so many different ways of defining something, especially as most definitions come down to attitudes of the writer. Because of that, let&#8217;s start with a &#8220;not so ideal&#8221; example from the <a href="http://www.urbandictionary.com/define.php?term=Casual+games">Urban Dictionary</a>:</p>
<blockquote><p>
Casual games are any kind of game that is over hyped and over rated or just the exactly same thing as a previous version that was over hyped and over rated, these games are known by gamers as &#8220;crap&#8221; because even with all the perfect scores the games still have mediocre graphics and shitty plots that casual gamers think are good. Usually the only thing that makes a casual game not-total shit is the multiplayer; otherwise these games would get ratings lower than dirt.<br />
With shitty graphics and a generally horrible campaign mode, the halo series is the indisputable king of casual games.
</p></blockquote>
<p>But all jokes aside, for a more serious definition from the <a href="http://www.igda.org">IGDA</a> <a href="http://archives.igda.org/casual/IGDA_CasualGames_Whitepaper_2006.pdf">Casual Games SIG</a> from 2005/2006:</p>
<blockquote><p>
The term &#8220;casual games&#8221; is used to describe games that are <strong>easy to learn</strong>, utilize <strong>simple controls</strong> and aspire to <strong>forgiving gameplay</strong>. Without a doubt, the term &#8220;casual games&#8221; is sometimes an awkward and ill-fitting term &#8220;“ perhaps best described as <strong>games for everyone</strong>. Additionally, the term &#8220;casual&#8221; doesn&#8217;t accurately depict that these games can be <strong>quite addictive</strong>, often delivering <strong>hours</strong> of entertainment similar to that provided by more traditional console games. To be sure, there is nothing &#8220;casual&#8221; about the level of <strong>loyalty</strong>, <strong>commitment</strong> and <strong>enjoyment</strong> displayed by many avid casual game players &#8220;“ just as there is nothing &#8220;casual&#8221; about the market opportunity and market demand for these games.
</p></blockquote>
<p>That is an interesting definition. Let&#8217;s have a look at some more. <a href="http://en.wikipedia.org/wiki/Casual_game">Wikipedia</a> describes:</p>
<blockquote><p>
Most casual games have similar basic features:</p>
<ul>
<li>Extremely <strong>simple gameplay</strong>, like a puzzle game that can be played entirely using a one-button mouse or cellphone keypad</li>
<li>Allowing <strong>gameplay in short bursts</strong>, during work breaks or, in the case of portable and cell phone games, on public transportation</li>
<li>The ability to <strong>quickly reach a final stage</strong>, or continuous play with no need to save the game</li>
<li>Some variant on a &#8220;<strong>try before you buy</strong>&#8221; business model or an advertising-based model</li>
</ul>
</blockquote>
<p>The <a href="http://www.casualgamewiki.net/wiki/index.php/Definition">CasualGameWiki</a> as well as <a href="http://vgstrategies.about.com/od/strategyglossary/g/CasualGames.htm">About.com</a> extend the definition with specifics about the price point and the platforms:</p>
<blockquote>
<ul>
<li>Style Of Play: Casual Games are now considered &#8220;<strong>games for everyone</strong>&#8221; &#8211; with a special emphasis on whether your mom can play it.</li>
<li>Distribution: Casual Games are frequently distributed with a &#8220;<strong>Try Before You Buy</strong>&#8221; model. Where a person can play for an hour for free and then decide whether to purchase or not. This model of play grew out of the Shareware distribution model.</li>
<li>Casual Games are usually sold for <strong>$19.95</strong>.</li>
<li>Platforms: Casual Games can now be found on <strong>Cell Phones and Consoles such as XBox 360 via the Xbox Live system</strong>.</li>
</ul>
</blockquote>
<p>and</p>
<blockquote><p>
Casual games are most often played via a <strong>Flash or Java based platform on a PC</strong>, but are now appearing in larger quantities on <strong>video game consoles and mobile phones</strong>.
</p></blockquote>
<p>The definitions often come with a timeframe of around the millennium or 2001.
</p>
<p><strong>An Interlude</strong><br />
Let&#8217;s move away a little from the term &#8220;Casual Games&#8221; and the definitions given and have a look at the last sentence: The Year! If we take a look on what happened and was released around that time that is somehow &#8220;defined&#8221; as the origin of the term we will find things like the <a href="http://en.wikipedia.org/wiki/PlayStation_2">Playstation 2</a> (2000) and the <a href="http://en.wikipedia.org/wiki/Xbox">Xbox</a> (2001). While the Playstation 1 was still a child of the &#8220;old&#8221; console generation especially the Playstation 2 as well as the Xbox introduced the &#8220;new&#8221; generation of consoles, away from old Entertainment Systems we adored. More important is that with the new generation the games from the &#8220;old world&#8221;, the Personal Computer, and the consoles were starting to congregate. Complexity from the PC moved to consoles and simplicity of the Consoles moved to the PC.<br />
On the PC <a href="http://www.adobe.com/software/flash/">Flash</a> was released in version 4.0 in 99 and one year later in version 5.0. These introduced and extended Flash&#8217;s own programming language ActionScript. From here on Flash was not only a way of playing frames off a timeline but introducing conditional actions onto these. More and more Flash Games started popping up. Around the same time <a href="http://www.java.com/">Java</a> 1.3 was released introducing the HotSpot VM and building the foundation for JavaME (J2ME at that time) that brought gaming very heavily to normal phones.<br />
This interlude is important to understand how Games opened up to a larger community (yes, long before the Wii) away from the nerdy PC hardware geeks that &#8220;<em>pimped</em>&#8221; their autoexec.bat to play games as of today these build a large majority of the people defining and mostly complaining about &#8220;Casual Games&#8221; (<em>no offense</em>).
</p>
<p><strong>The Ambiguity</strong><br />
If we sum up the definitions the following list could be seen as a general understanding of Casual Games:</p>
<ul>
<li>Easy to learn/simple gameplay</li>
<li>Simple controls</li>
<li>Forgiving Gameplay/quickly reach a final stage</li>
<li>Gameplay in Short Bursts</li>
<li>Games for Everyone</li>
<li>Up to 20$</li>
<li>Try before you Buy</li>
<li>Flash and Java Games on the PC side/DLGames on XBoxLive, PSN, etc.</li>
<li>Since 2000/2001</li>
</ul>
<p>This list looks pretty decent doesn&#8217;t it? As you can guess from the headline the list is not as decent as I hoped it to be. I often refer to these hand full of games that somehow should fit these rules, are named casual but do not really allow a distinct identification of what a casual game should be.
</p>
<p>
Let&#8217;s start off with <a href="http://www.popcap.com/extras/pvz/">Plants vs. Zombies</a> (one of my favourites over the last years). This modified Tower Defense game is a success on every platform. First released in 2009 it sold and sold and people rated it effusively. It&#8217;s a great game that just brings a ton of fun. If we look at our list we can see that it looks pretty good: It costs under 20$, the controls are simple and it is downloadable on PC, iOS and XBoxLive. Regarding the gameplay, it is simple and easy to learn&#8230; because of the many tutorials, and can be hard to master. This makes this game attractive to be played for just some minutes or for hours fiddling on the new strategies and therefore attracting Casual Gamers and Core Games as well as hybrids like me. It provides Casual Gaming and more, for Casual and Core Gamers. <em>So, is this a Casual Game?</em><br />
My second example would be <a href="http://supermeatboy.com/">Super Meat Boy</a> (and <a href="http://www.thewayoftheninja.org/">N/N+</a> in parallel). This 2010 hit platform game has gone through different stages of the list. It was a Flash Game first, ported, tuned and extended for the PC and Consoles. Over 300 mostly short levels (short bursts) with a very gory portion of simple gameplay. It is also cheaper then 20$ and has some very simple controls. But it is extremely hard to master forbidding the slightest error ending in a pure gore fest. And actually (as <a href="http://www.peta.org/">PETA</a> already noticed ^^&#8217;) this is no &#8220;game for everyone&#8221; anymore because of its scenario and its quickly increasing difficulty level. <em>Hardly a Casual Game, isn&#8217;t it?</em><br />
My third example is <a href="http://prince-of-persia.de.ubi.com">Prince of Persia</a> (the one before the crappy Movie Game). Not a typical Casual Game and was more expensive then 20$. But if we look at some definitions it fits as much as the previous two examples: It has forgiving gameplay (<em>yes, I mean you Elika</em>), had a Demo, was easy to learn but had not the easiest controls. The save points were pretty frequent and it had a scenario that even my casual sister was able to relate to. <em>Still Core or did it become Casual?</em><br />
My fourth example is <a href="http://www.laracroftandtheguardianoflight.com/">Lara Croft and the Guardian of Light</a>. A franchise that may have brought many women to gaming, featuring intense 3D platform gaming and 3rd Person Shooting Gameplay. With GoL it became a DLG with a strict isometric perspective. It&#8217;s on PC and Consoles, downloadable, costs under 20$ and has (in my opinion) simple controls to master the fine placed action and puzzles. Now, are Tomb Raider and Lara Croft becoming casual? Is it just that game? <em>Or does Lara Croft not count?</em><br />
My fifth example (to use the full hand) would be every Wii Game. Nearly every gaming site and every &#8220;Core Gamer&#8221; defines a Wii Game as a Casual Game. <em>Why? Because your Family got into &#8220;your hemisphere&#8221;?</em>
</p>
<p>
In general if we just take some of the bullet points, some of the definitions describe things that nearly every game, no matter if Casual or Core, wants to achieve nowadays or is a general gaming tradition:</p>
<ul>
<li>Try before you Buy</li>
</ul>
<p>Demos, Shareware, &#8230; Nothing new to the experienced Gamer and Games in general.</p>
<ul>
<li>Gameplay in Short Bursts</li>
</ul>
<p>Actually, this is something popping up more and more since the advent of consoles. PC users are used to saving games, being able to use up space on their hard disc. For console gamers this was no natural thing to use so developers very often used stages with manual and automatic save points that were not separated too far away from each other to not enrage the player if he dies. I mentioned Dead Space and my very tight gaming sessions playing through it. This was only possible because of the very &#8220;controlled&#8221; stages and their save points that I could reach in the given time frame.</p>
<ul>
<li>Forgiving Gameplay/quickly reach a final stage</li>
</ul>
<p>This as well is something that especially First-Person-Shooters nowadays provide to the user. &#8220;Old&#8221; Gamers remember a time when it was a necessity to know where the next HealthPack is. Today, we rely on a regenerative system, often presented with the argument to be more accessible to more gamers (&#8220;games for everyone&#8221;). Becoming casual? And regarding the second part, I could get heretical now but games such as Modern Warfare do not really provide that much gaming time to the user anymore. 5-6 hours are some times normal.<br />
The problem is that gaming following the definitions given is way older. This is why gameplay elements can hardly be used to define the games themselves. What is left are technical definitions, prices as well as hardware to describe the so called &#8220;Casual Games&#8221; and these obliterate more and more.<br />
So, with all this ambiguity coming from the point of defining the Game, wouldn&#8217;t it be better to define the interaction?
</p>
<p><strong>Classic Classification</strong><br />
We tend to define things based on their surroundings and the &#8220;object&#8221; using the &#8220;subject&#8221; (&#8220;People Playing a Game&#8221; in our case) because that is what we visually perceive. And as it is easy for us to define unknown things from what we know, we derive the Browser into our experience of Casual Games as the Browser was never a dedicated environment for games but so many things that so many people do, not only gamer. Therefore, it is very easy for &#8220;Core Gamers&#8221; to define games such as Plants vs. Zombies as Casual Games as their Moms or Dads are playing them.<br />
The problem with the classification and the according definitions of Casual Games is that they try to really define constraints where these games may fit in. In a time where it becomes harder and harder to &#8220;just&#8221; define the Genre of a game (e.g. Puzzle-Survival-Horror Adventure-Games) it is even harder to define an umbrella term of games in general. But my personal strongest point regarding the definition of &#8220;Casual Games&#8221; is that most of the people that play &#8220;Casual Games&#8221; do not even know that these are &#8220;Casual Games&#8221; (or did your Mother or Sister ever talked about Casual Games when playing Wii or DS?).<br />
The classification normally is given by &#8220;Core Gamers&#8221;, Developers or Game Editors that want to separate themselves from these <em>&#8220;unappreciated&#8221;</em> games (in many cases). But what we were able to see from the definitions normally used to describe Casual Games is that these do not fit the real world anymore. Especially as they evolved over the last years, away from most simplistic Flash Games to the best gaming experiences of the last decade (e.g. <a href="http://www.introversion.co.uk/">Darwinia</a>, <a href="http://www.braid-game.com/">Braid</a>, <a href="http://www.limbogame.org/">Limbo</a> and more)<br /> <br />
What is required is to divide not only Games but the interaction, the gaming. For gameplay we have genres. Now, we need a new graduation for Facebook, Flash, Indie and everything else that evolved our gaming experience (and will in the future). To what this New Classification could be, I can give you no answer. This needs a long discussion and a broad overview of everything gaming has to offer nowadays.<br />
But what all Gamers need to do is to be open minded to new possibilities and not argue with the term &#8220;Casual Game&#8221; anymore, especially those that call themselves Core Gamer. I think we all do not want to hear another: &#8220;Epic Mickey is a Casual Game. <em><strong>It&#8217;s on the Wii!</strong></em>&#8220;
</p>
<p><strong>My Conclusion</strong><br />
My intention was to make a polemic assertion, presented with my experience, many questions and concluded with my own ways of thinking. If you were looking for THE definition of Casual Gaming, this post does not deliver. It just brings up some things that do not work out in our current scheme of games classification and with the ever growing amount of releases that qualify to our current definition of Casual Games we should quickly start thinking about a new way of filtering, fitting all modern characteristics such as <a href="http://www.facebook.com">Facebook</a>, iOS and Android, <a href="http://unity3d.com/">Unity</a>/<a href="http://www.stonetrip.com/">Shiva</a>/&#8230;, <a href="http://steampowered.com/">Steam</a> and all the other new ways of developing, presenting and distributing games, challenging the &#8220;old way&#8221; of games development.<br />
I started off with arguing that there are no &#8220;Casual Games&#8221; but &#8220;Casual Gaming&#8221; and I tend to support this even if I give away no new definition because such a broad definition of games cannot be made, if the gamers that count are so broad and different themselves. I agree that I only presented arguments for my theory but as long as it is possible to oppugn the current definition that easily it is in our hands to discuss and define better definitions for our most beloved games&#8230; that are changing pretty quickly right now!
</p>
<p><em>Written for <a href="http://altdevblogaday.org/">#AltDevBlogADay</a></em></p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2011/01/27/there-are-no-casual-games/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>If you want to install Mac OS X in a VirtualBox on an Intel PC&#8230;</title>
		<link>http://insanitydesign.com/wp/2010/12/31/if-you-want-to-install-mac-os-x-in-a-virtualbox-on-an-intel-pc/</link>
		<comments>http://insanitydesign.com/wp/2010/12/31/if-you-want-to-install-mac-os-x-in-a-virtualbox-on-an-intel-pc/#comments</comments>
		<pubDate>Fri, 31 Dec 2010 16:02:10 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[macosx]]></category>
		<category><![CDATA[virtualbox]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=656</guid>
		<description><![CDATA[&#8230;maybe the following can help! For about a week now I am owner of an iPad and it is actually pretty nice. Air Video Server allows me to watch all my stuff on my couch or bed and some of the games during Christmas sale are pretty nice, especially Dungeon Defenders and Angry Birds of [...]]]></description>
			<content:encoded><![CDATA[<p>
&#8230;maybe the following can help!
</p>
<p>
For about a week now I am owner of an <a href="http://www.apple.com/ipad/">iPad</a> and it is actually pretty nice. <a href="http://www.inmethod.com">Air Video Server</a> allows me to watch all my stuff on my couch or bed and some of the games during Christmas sale are pretty nice, especially <a href="http://www.slidetoplay.com/story/dungeon-defenders-first-wave-ipad-review">Dungeon Defenders</a> and <a href="http://www.slidetoplay.com/game/angry-birds-hd">Angry Birds</a> of course.
</p>
<p>
So, as I am a Developer I just want to develop and test some stuff on my iPad, to get into the iOS environment and broaden my horizon. Just out of curiosity. But the thing with nearly all Apple products in general is: They work fine&#8230; in their controlled <em>AND</em> <strong>closed</strong> environment!
</p>
<p>
If you want to develop for iOS you actually have to own an Intel Mac (i.e. Mac Mini, Macbook etc.). At least this is the only official way. There are some other possibilities such as with the <a href="http://www.dragonfiresdk.com">Dragonfire SDK</a> that builds a whole SDK for iOS development on Windows based on &#8220;normal&#8221; C/C++ or to use engines such as <a href="http://unity3d.com/">Unity</a> and <a href="http://www.stonetrip.com/">Shiva3D</a> that deploy onto iOS (actually Flash CS5 also provides an iOS publishing profile). But this is not what I want, I just want to try some things and get into the normal iOS development with XCode and Objective-C.
</p>
<p>
So as I decided to not follow some of the other ways I needed to get hold of a Mac Machine. But I am not willing to pay at least 600€ for a <a href="http://www.apple.com/macmini/">Mac Mini</a> just to &#8220;play around&#8221; with iOS. So I had to find a way to install Mac OS X Snow Leopard on my machine. As this is not supported by Apple and a little tricky I did not want to start installing it directly to my notebook but thought about trying it in a virtual machine. <em>&#8220;Good thought&#8221;</em> you might say&#8230; but tricky as I noticed!
</p>
<p>
I chose <a href="http://www.virtualbox.org/">VirtualBox</a> as the Virtual Environment to test an installation. I did some googling and actually found many MANY resources, tutorials and board messages explaining how to do it. I am pretty sure I read nearly all of them and experimented for about 3 days to get it running&#8230; day and night (got no sleep during that time as I wanted it to run). But all the time something went wrong.<br />That one didn&#8217;t boot! The other one wouldn&#8217;t get my network card right. Audio is still a big problem&#8230; and so on and so forth. But all of a sudden, as I was already giving up (really!!!) I found two excellent WebSites and Tutorials that got it working for me.
</p>
<p>
The one that started the effort again was <a href="http://flynflip.com/Hackintoshing/WIP/W510_VB.html">flyNflip</a>. It was the first very clear and simple tutorial how to get started. That was the first easy tutorial that got me to a &#8220;just working&#8221; installation. The only thing you need is to get hold of a Snow Leopard DVD. I got an update Version, it&#8217;s not too expensive.<br /> But it wouldn&#8217;t boot! What did I do wrong? Going through the comments I found the second WebSite at <a href="http://www.sysprobs.com/install-mac-snow-leopard-1063-oracle-virtualbox-32-apple-intel-pc">Sysprobs</a>. It showed nearly the same steps how to install MacOSX in a VirtualBox but went a little further. It explains the EFI problem. It gives examples and further tutorials for getting rid of issues and more.
</p>
<p>
So now I have a running <a href="http://www.apple.com/macosx/">MacOSX Snow Leopard</a> running in my VirtualBox. It&#8217;s also up to date (10.6.5) and actually somehow smooth for a virtual machine. Currently I am installing <a href="http://developer.apple.com/devcenter/ios/index.action">XCode and the iOS SDK</a> (as you can see on the picture) and I hope everything will work out. If so, maybe I will post some stuff about iPad development&#8230;
</p>
<div id="attachment_664" class="wp-caption aligncenter" style="width: 510px"><a href="http://insanitydesign.com/wp/wp-content/uploads/macosx_virtualbox_small.png"><img src="http://insanitydesign.com/wp/wp-content/uploads/macosx_virtualbox_small-300x187.png" alt="MacOSX running in a VirtualBox" title="MacOSX running in a VirtualBox" width="500" class="size-medium wp-image-664" /></a><p class="wp-caption-text">MacOSX running in a VirtualBox</p></div>
<p>
Nevertheless, I am still very curious about why Apple does try to prevent you to explore MacOSX on other Machines (actually I am pretty sure I know why ^^&#8217;). But at least for developers that want to develop iOS Apps on a Windows or Linux Machine they should give out a possibility to do so. I would never buy a Mac Machine just to do so but I am very curious to try it and maybe develop the next #1 App ^^. They nearly lost me during the process and what I did is actually neither supported nor endorsed by Apple. I hope I won&#8217;t get into trouble but as I am owning an iPad and want to give something back I hope not.
</p>
<p>
So, I will get back to my MacOSX installation (XCode and iOS SDK installation is nearly finished) and hope I provided two good resources for others that think like me.
</p>
<p>
<strong>*UPDATE*</strong> XCode and iOS SDK installed. Works fine! But I have trouble if I want to set a widescreen display resolution. 4:3 works fine (e.g. 1280&#215;1024), widescreen has some problems (e.g. 1440&#215;900). It still boots but the redrawing of the window is somehow messed up.</p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2010/12/31/if-you-want-to-install-mac-os-x-in-a-virtualbox-on-an-intel-pc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Merry Christmas to all of you!</title>
		<link>http://insanitydesign.com/wp/2009/12/25/merry-christmas-to-all-of-you/</link>
		<comments>http://insanitydesign.com/wp/2009/12/25/merry-christmas-to-all-of-you/#comments</comments>
		<pubDate>Fri, 25 Dec 2009 19:27:46 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Stuff]]></category>
		<category><![CDATA[What troubles me...]]></category>
		<category><![CDATA[christmas]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=646</guid>
		<description><![CDATA[Just a quick Merry Christmas to all readers. Have a good time, many presents and relax! At least that is what I am trying to do.]]></description>
			<content:encoded><![CDATA[<p>
Just a <a href="http://de.wikipedia.org/wiki/Quick_%28Zeitschrift%29">quick</a> <strong><a href="http://www.icq.com/greetings/cards/66/">Merry Christmas</a></strong> to all readers. Have a good time, many presents and relax! At least that is what I am trying to do.</p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2009/12/25/merry-christmas-to-all-of-you/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>New Android OpenGL ES Port &#8211; Stencil Shadows</title>
		<link>http://insanitydesign.com/wp/2009/12/08/new-android-opengl-es-port-stencil-shadows/</link>
		<comments>http://insanitydesign.com/wp/2009/12/08/new-android-opengl-es-port-stencil-shadows/#comments</comments>
		<pubDate>Tue, 08 Dec 2009 19:24:09 +0000</pubDate>
		<dc:creator>NeA</dc:creator>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[apron]]></category>
		<category><![CDATA[opengl]]></category>
		<category><![CDATA[stencil shadows]]></category>

		<guid isPermaLink="false">http://insanitydesign.com/wp/?p=476</guid>
		<description><![CDATA[Greetings to all of you. Unfortunately long time no &#8220;port&#8221; see! I had a lot on my mind (something got posted beneath ^^) and a lot to do (many travels, many projects, new horizon). But now I am back in full glorious &#8220;in&#8221;sanity to enhance your (Android) imagination ^^# So, first let&#8217;s recapture some things [...]]]></description>
			<content:encoded><![CDATA[<p>
Greetings to all of you. Unfortunately long time no <em>&#8220;port&#8221;</em> see! I had a lot on my mind (something got posted beneath ^^) and a lot to do (many travels, many projects, new horizon). But now I am back in full glorious &#8220;in&#8221;sanity to enhance your (Android) imagination ^^#
</p>
<p>
So, first let&#8217;s recapture some things about my <a href="http://insanitydesign.com/wp/projects/nehe-android-ports/">NeHe Android Ports</a>: To my surprise they were accepted good and got some publicity. I am happy about that&#8230; not so much that I had too little time to continue the series like I hoped for. But now I am back and will continue to translate as many NeHe lessons as possible.
</p>
<p>
But first, I uploaded another port but no NeHe Lesson. The new port is based on code from Apron and his <a href="http://www.morrowland.com/apron/tut_gl.php">OpenGL tutorial codes</a> and deals with <a href="http://en.wikipedia.org/wiki/Stencil_shadows">Stencil Shadows</a>. This is definitely something interesting and missing besides what is covered by the NeHe tutorials so far. Therefore, I decided to do this first and then continue with other ports. So, head over to the new section of <a href="http://www.insanitydesign.com/wp/android-tutorials">general Android tutorials and ports</a> under <a href="http://insanitydesign.com/wp/projects/">Projects</a> and check out finest stencil shadows on your phone.
</p>
<p>
<em>PS:</em> I will continue with the NeHe lessons but I will also keep an eye open for other feature/functionality tutorials that could be interesting to know about and are relevant for 3D development on mobile phones.</p>
]]></content:encoded>
			<wfw:commentRss>http://insanitydesign.com/wp/2009/12/08/new-android-opengl-es-port-stencil-shadows/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

