Writing a Software Rasterizer

There is an interesting post on AltDevBlogADay showing how one can write a software rasterizer:

http://www.altdevblogaday.com/2012/04/14/software-rasterizer-part-1/

 

Anyone interested in graphics should have some understanding as to how the graphics pipeline works and how the rasterizer works. Knowledge of math (especially linear algebra) helps greatly.

Advertisement

BezierView using WebGL

My lab (SurfLab) manages a program called BezierView which is used for rendering different kinds of Bezier surfaces (triangular, tensor-product, rational, etc.). BezierView has not been updated for a few years, so me and a few other colleagues decided to update the program using WebGL instead.

Now instead of downloading BezierView to your own computer and running a .exe file, you can just run it online through a webpage. You can find the still-being-updated version here. For now you can view tensor-product, triangular and rational patches along with polyhedra. It is being currently updated to include a better interface and to have support for all types.

There are some shortcomings to writing BezierView in WebGL – the most obvious one is that Javascript is much slower compared to C/C++. And the online version cannot handle huge files which the offline version can. And since WebGL is based on OpenGL ES 2.0, we cannot take advantage of the tessellator engine in modern graphics cards to evaluate parametric patches on the GPU (which results in a significant speedup). So all the evaluation is done on the CPU and the resultant vertices sent to the GPU. I guess we’ll have to wait for OpenGL ES 4.0 (or WebCL to be finalized – a Javascript implementation of OpenCL).

BezierView was developed using the excellent Three.js library. I highly recommend using it if you are developing a WebGL application.

The source code is available on GitHub.

You can find BezierView here.

Virtual Reality Projects

Back in Spring of 2009 (almost 3 years ago!), I took a very interesting Virtual Reality course offered by Dr. Benjamin Lok in my department. The course basically involves creating Virtual Reality projects. I ended up creating 4 which took a lot of work but which in the end were worth the effort. Here are the four projects I worked on (click on the links for more detailed info/video):

 

1. Using ARToolkit to demonstrate how touch-screens work:  

   We had to come up with a way to use ARToolkit (Augmented Reality). I thought of attaching some AR markers to a Nintendo DS and demonstrating how 3 different kinds of touch-screens work (resistive, capacitive and infrared). Written in C

2. Virtual Reality experience: Rescuing someone from a fire:

   Now we started getting into the heavy stuff. We had to create a Virtual Reality 3D experience using a Head-Mounted Display, object tracking and small space. At the suggestion of my teammate, colleague and friend we ended up using the Ogre 3D Engine for the project. We also used Google SketchUp models and wrote the program in C++.

3. VR experience: Target practice on a military base:

   This was my favorite project. We (me and my colleague Aritra Nath) created “virtual” shooting, where we attached a marker to a Nintendo Wiimote (which was in a gun shell, and you pressed the trigger to shoot). We had an actual barrier in the real-world which was nearly pixel-accurate in the virtual world (well, not quite). Used Ogreand Sketchup again.

4. New VR Interface for doing 3D landscaping around a house:

   The 4th project involved creating a VR experience where the user could “create” new content. My team ended up creating a way to do 3D landscaping only using fingers and a wiimote. Used the same tools as before.

I consider myself lucky that I was able to take such a course. Though it was kind of grueling at times (especially since all the teams had to share the virtual reality hardware), it was also fun and rewarding at the end.

WebGL Anaglyph 3D using Three.js

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.