Tips/tricks related to Computer Graphics, GPUs and other programming

(UPDATE December 29th, 2012: Comment Save is now on version 0.6.x, and has support for filters (black and whitelist), timed deletion, Disqus/LiveFyre support, Google+, etc.)

Though I focus mostly on computer graphics, I also have an (amateurish) interest in web-design and web-programming.

Late last year a friend of mine brought to my attention a problem he encountered: he wrote a bunch of text in a textbox and when he clicked submit the server responded with an error. He had lost all he wrote which was frustrating. I thought it would be useful to have an extension which records everything you type in one of those boxes so you can recover it if you lose it.

Another friend suggested it would be nice if the extension kept a history of all your posts (if you are one of those people who comment across many sites a lot). And so I came up with “Comment Save” (which has roughly 500 users as I type this).I’ll let the description describe it:

As featured on Lifehacker!

Ever written a large post or comment on a website, click submit, only to see your comment get lost in the internet wilderness? Or your tab/window closed somehow before you could submit?

Or maybe you just like to keep track of all the posts you made on different websites.

Comment Save (CS) helps you keep track of what you have been writing as you type. Icon beside the address bar brings up a window showing you the last post you wrote alongwith a link to the page. Link in the window allows you to view your post history.

You can also filter websites where you don’t want any of your posts to be tracked.

Works on sites like:
– Youtube
– Facebook/Google+
– Gawker blogs (Gawker/Gizmodo/Jezebel/Lifehacker/etc.)
– Engadget/Techcrunch/etc. (Sites which use Disqus)
– WordPress/Tumblr
– Forums of all kinds
– Digg/Reddit
– CNN/New York Times/The Guardian/other news websites
– And lots more!

* Records your post as you type so you can recover it if you lose it.
* Keeps a history of all your posts along with a link to the page and the time.
* Allows you to add filters so you can disable tracking on certain websites.
* Simple checkbox in the popup window enables/disable tracking globally

The extension helped me learn Javascript more (and also helped me deal with HTML Web Databases). The source code for the extension is open-source and has been released under the GPL v2 license. The source code can be accessed on Google Code here. Feel free to look through it.

If you have any feature requests for the extension please let me know. Some features I have thought about adding include:

  • Delete all comments after a set time. (User-specified time, for ex. 10 minutes, 1 day, 1 month, etc.) (UPDATE: Added in Version 0.5 on 9th August 2011)
  • Search Comments: Within that include searching by website, within a specific timeframe, etc.
  • Delete Comments by website

Any other suggestions would be welcome!

Deferred Shading is a rendering technique (in comparison to regular forward rendering) which has become popular over the last few years. Games like the upcoming Battlefield 3, Crysis 2 and numerous others use it, so I wanted to give it a try and implement a simple deferred renderer myself in DirectX 10.

GitHub Repository and Visual Studio 2010 files:
GitHub Repository here

Images for all the render targets/textures (Diffuse, Normals, Depth, Ambient Occlusion, Composite with Ambient Occlusion, Composite without AO):

Diffuse Texture

View-space Normals

Depth Texture

Ambient Occlusion

Composite with Ambient Occlusion

Composite without AO

What is Deferred Shading?

If you are reading this chances are you already know what deferred shading is and how it works, so I won’t go into too much detail. Wikipedia has a good overview and there are other places which can describe it better.

Basically deferred shading involves rendering your view-space normals, your depth-buffer, specular/diffuse, ambient occlusion, etc. values into different textures and then using them at a later pass to create a final composite image (by rendering a full-screen quad). There are several advantages and some disadvantages (increased memory bandwidth due to multiple render targets, inability to handle transparency, anti-aliasing, etc.)

Read the rest of this entry »

I have been meaning to get into WebGL for a while, and a few days ago I discovered this excellent WebGL library called Three.js on Github.

Someone requested an Anaglyph WebGL Renderer for it, so I thought I might give it a try. After reading up on the code I came up with an example you can find here (NOTE: Works best on latest version of Chrome and Firefox).

The author of Three.js has already fixed my version and incorporated an actual anaglyph renderer into his code. Here is an example.

If you are interested in WebGL development I would recommend checking out Three.js.

NOTE: This tutorial builds up on my previous 2 tutorials: how to setup OpenGL ES 2.0 on Android and how to render to texture.

I’ll first link to the apk, source code and the repository:
apk here.
Source code here.
Google Code Repository  here. NOTE: Branch is “shadowMapping”


Thanks to Henry’s comment below I was able to fix most of the artifacts showing up. Turns out I had dithering enabled, so I had to disable it to remove the dithering effect [ GLES20.glDisable(GLES20.GL_DITHER) ]. Updated images below – it works but has very slight artifacts when it comes to the mesh’s self-shadows.


Shadow Mapping is a popular technique for rendering shadows in games and other real-time applications. Given how GPUs on mobile devices (iPhone/Android/whatever) are getting more and more powerful every day I thought I might try implementing it on my Samsung Captivate (Galaxy S).

While my implementation “works”, it does not good look at all. Shadow-mapping is prone to many artifacts , which I wasn’t able to properly fix (UPDATE: Main artifacts fixed).I am posting this without the fix in the hopes that somebody can help me out too as to what I am doing wrong.

Here are the updated images (I changed the color of the plane to get a better contrast):

Textured Cube (with proper shadows)

Dragon Head


Here are the old images:

Octahedron Mesh (.OFF) with shadows + artifacts

Dragon-head Mesh (.OFF)

Textured Cube (.OBJ)

I would like to credit Fabien Sanglard for his shadow mapping tutorials which I used as a basis for my code. I looked at his DEngine code as an example. In any case let’s begin.

What is Shadow Mapping?

If you are reading this chances are that you already know what shadow mapping is and how it works, but let me give a quick overview of the steps involved:

Read the rest of this entry »

NOTE: This tutorial builds up on my previous tutorial on how to setup OpenGL ES 2.0 on Android.

I’ll first link to the apk, source code and the repository:
apk here.
Source code here.
Google Code Repository  here. NOTE: Branch is “renderToTex”

Rendering to a texture is important when it comes to various graphics techniques and algorithms (Shadow Mapping, cube map generation, Deferred Shading, etc.) So this quick tutorial will demonstrate how to setup a texture for rendering (and then how to display that texture on screen).

What is rendered to the texture?
We are going to render the same objects as in the previous tutorial (where you can choose between gouraud/phong/normal mapping shaders). The texture is going to be a simple quad which will then be displayed on the full screen. I have a Samsung Captivate(Samsung Galaxy S) which has a screen resolution of 800 X 480, so I use those values as the height and width of my texture. Adjust accordingly to your phone (I was a tad lazy to read in the values from the system itself). Let’s begin:

Read the rest of this entry »

Tutorials on how to write shaders for the Android platform are a little difficult to come by on the Internet, so I decided to work on a small but simple program which hopefully provides a simple framework to get started writing programs for OpenGL ES 2.0.

I’ll first link to the apk, source code and the repository:
apk here.
Source code here.
Google Code Repository  here. NOTE: Branch is “default”

Here’s what my program does:

  • Mesh Loading:The program loads triangular meshes in these formats (as .txt files):
    • (.OFF): These consist of only vertex positions. My program will calculate per-vertex normals.
    • (.OBJ): Vertex positions, normals and texture coordinates are provided. Sample textured cube mesh was exported from Blender.
  • Shaders:
    • Gouraud Shading: Per-vertex lighting [with texture mapping if enabled].
    • Phong Shading: Per-pixel lighting [with texture mapping if enabled].
    • Normal Mapping: Gives a fake appearance of depth to a mesh. Sample normal map included.

NOTE: If your program is crashing with glError 1281 and you have a relatively new phone (a Samsung Galaxy S2 for example), change all dot() method calls in the shaders to dot2().

How it works:

The program will only work if your phone supports OpenGL ES 2.0. If it doesn’t my program quits without a warning.

When the program starts you will see an octahedron mesh with Gouraud shading enabled. There is a light rotating around the mesh. You can use one finger
to rotate the mesh, and two fingers (pinch-to-zoom) to scale the mesh (though it’s not *perfect* ). Clicking the menu button on your phone allows you to:

  • Toggle Light Rotation: Light rotation can be toggled through this option. A short ‘Toast’ notification pops up.
  • Shader switching: Can switch between Gouraud shading, phong shading and normal mapping.
  • Mesh switching: Can switch between an Octahedron, Tetrahedron (both .off files) and Textured Cube Mesh (.obj file).
  • Toggle Texturing: Can turn off texture mapping if there is an associated texture with the object (only the textured cube mesh).

Read the rest of this entry »

We just got a Nvidia GTX 480 in our lab. Apparently the PN Triangles example included in the Microsoft DirectX 11 SDK does not work properly, giving an “OUT OF MEMORY” error when run. (insert image)

Here I will post a modification of the code which allows it to run on Fermi