Thursday, March 7, 2013

Computer Graphics: Coding Experience - Done!

I've been trying to complete this post for a while. Well, now that you are reading these lines it is clear that I finally found the time to do it.


In my previous post I presented the Computer Graphics: Coding Experience event. I am happy to say that it was a huge success. Big thanks to organizers, participants and everyone who lent a hand along the way.

About the event


Follow this link to get the presentation slides and the Visual Studio 2010 solution project. The code is in C++ and uses Irrlicht Engine.

The goal of the event was to present 3D Rendering concepts in as layman terms as possible. The elements discussed where:
  1. The Scene
  2. The Camera
  3. Geometry, Triangles and Vertices
  4. Texture Mapping (UV coordingates)
  5. VertexBuffer & IndexBuffer
  6. Draw Primitives (Lines, Triangles)
  7. Transformations with Matrices
  8. Framebuffer (color buffer, depth buffer, stencil buffer)
  9. Concept of Fixed and Programmable pipelines



Some things that I missed or could have improved were:
  1. Might have presented some of the items too fast and with not enough depth
  2. Did not mention anything about the application's main loop (also known as the game loop)
  3. Better implementation for the terrain below the city. 
  4. Got helped from two awesome 3d artists that provided assets that I could not manage to put into the demo/presentation. Big mistake on my part. Huge thanks to Manuel Machado and Javier Fernández for their (unused) collaboration!
Anyways, live and learn.

After the presentation was done, participants were invited to continue with the programming section of the event: The Hackathon.

The idea was to start with a base code that rendered the following scene.


 ... and modify it to make it look like this:


Some of the elements to program were:
  1. Buildings to populate the city.
  2. Streets and blocks for the buildings
  3. A Skybox.
  4. The terrain bellow the city.

The idea behind the fourth item was to give the impression that the city was floating in the sky. Like a chunk of earth had been ripped of the planet and had flown up to the sky.

I think that my original idea for the implementation was good, but I was not able to make Irrlicht Engine render it correctly. After the event happened, I decided to change the inverted terrain implementation and coded some blocks positioned in an inverted pyramid-like shape. Like this:


The change was made to make the overall solution more coherent with the presented topics. Because the proposed idea was that each building would use its own Vertex and Index buffers, the brown squares would be objects that would all reuse the same Vertex and Index buffer data.

About the inverted pyramid, special effort was put to make it empty on the inside. I took this decision for performance reasons. The framerate would drop hard when I instantiated all the inner cubes. Reason being that even though the cubes were not visible, they would still be sent to the rendering pipeline, consuming precious processing resources. Not good.



Issues like this remind me of games like Minecraft. There, the amount of cubes present on stage is much much bigger. It makes me wonder how Markus Persson managed to render them all while maintaining a solid 60 fps. What kind of optimizations did he make? 

Btw, Markus is Minecraft's creator. He also goes by the name of 'Notch' as in his twitter account.

Fun fact: the texture used by the blocks on the inverted pyramid was taken from a Minecraft tileset I googled. Thanks, Internet people.


The Theme

While the Minecraft textured cubes were coded in after the event happened, there were other thoughts in my mind that helped me shape the event. Though I was not entirely clear on it until the last week of preparation. Typical.

After the topics were selected, I still had the urge of choosing a theme for the programming part of the event. In hindsight, I'm not sure I did a well enough job of transmitting the event's theme to all participants.
Now I have the chance to redeem myself.


The event's theme was Procedural City Generation.

I got inspiration from this Pixel City video. The video shows the results of the programming effort carried out by Shamus Young. His aim was to explore the generation of a city by using nothing else but code. No other assets should be loaded in. All geometry and textures should be generated at start up. It should also run in older PCs (he did it back in 2009). No shaders were used in his demo.

Shamus wrote in detail about the development process in his blog and has even made the code available at Google Code. You can even download a Windows executable file and run the demo. Just make sure you don't move your mouse nor press any keys or the simulation will exit.


I would like to give a special thanks to Federico Rocha for pointing me towards the Pixel City video. Though the idea of generating a city with code was bouncing in my head, Federico brought the necessary cherry to put on the presentation cake.

Worst. Metaphor. Ever.

More about generated cities

I don't know exactly why but I find the subject of city generation very interesting. In addition, just looking at city-like scenarios is quite pleasant.

One example of this is the art project created by Peter Root named 'Staple City'. Peter managed to represent a city just by using staples. It's strange how our brains (at least mine) process those piled staples and somehow concludes that it's looking at city buildings.

This is 'Staple City' by Peter Root. Kinda related.

In my youth I remember playing through games like SimCity 2000. I sure invested quite some time in this game, though I must admit that I preferred games with more action, like the Age of Empires series. Interestingly enough, it looks like Microsoft Studio is releasing an HD version of that game.

In related news, I just got my hands on the newest SimCity game. The video footage available looks terrific. I specially like all the data visualization stuff they put in there. Data visualization is a topic that I would love to explore in more depth. I have a hunch that there is huge potential there. Specially with 3D visualizations. Maybe in browsers. Using WebGL. That kinda stuff.


If SimCity's DRM is holding you back from getting the game, I would like to give a shout-out to another game in a similar vein: Tropico 4, a city building simulation game created by Haemimont Games. It was released to the market in 2011. You can get a Special Edition on Steam.

More about procedural generation


During my research for the event's content I came across several procedural generated projects. One that really caught my attention was this procedural generated racing game track, made in Unity. I'm still amazed every time I watch that video. Really.

I also bumped into this other video entitled Procedural Generation of Parcels in Urban Modeling. It shows how an irregular block gets populated with buildings while the area gets changed in real time. Loved it. It has this I-don't-know-what that makes is so appealing. Maybe its because it feels like a game? I mean, it does resemble games like SimCity.

Well, that sums up pretty much all I wanted to say about the event. Again, thanks to everyone involved!

Global Game Jam 2013 legacy



Before I close this post I would like to go back to a news related to the Global Game Jam.

Remember Surgeon Simulator 2013? Well, they just happened to get Greenlight on Steam. What that means is that the game is candidate to be purchasable through Steam Store.

That is an awesome achievement. Just think about it, with two days of work the developers created a game that really got the attention of the gaming community. With that, they now have the potential to cash in some big bucks. That is no small feat.

When available, I'll be sure to get a copy.