WebGL Time!

I spent my time this week reading about and learning WebGL. I was looking at ways in which I could do my renderer on Javascript and WebGL.

I started the week by going to the guest lecture by Patric Cozzi on WebGL, and it was highly helpful. I learned about the main big ideas of WebGL, some tips and gotchas, and a handful of Javascript syntax. However, more importantly, I learned about dev tools that help such as JSLint and WebGL inspector, and I also took away names of several WebGL libraries that could be helpful.

Later in the week I started reading WebGL tutorials on learningwebgl.com.

At the same time, I also looked for libraries that I could use. I came across several:

• glMatrix.js provides fast and simple matrix class and functions
• sylvester.js offers vectors and matrices with extensive functions and flexible constructors
• Scene.js is a Javascript scene graph framework

However, there was one that clearly stood out: Three.js. Three.js is an extensive libraries that is designed to help developer draw 3D scenes that renders through WebGL. It has all the necessary classes such as mathematical functions, vectors, matrices, and scene graph objects, and various geometry classes.

I have decided that I would use Three.js to handle all non-rendering related work such as setting up a scene graph and moving the camera. This work will be done on the Javascript side. The heavy rendering work would be done on the shader level, which benefits from the hardware acceleration; Javascript too slow for rendering.

I have set up a simple WebGL application using Three.js. It has a basic scene graph and mouse controlled camera (click and drag on application.) The app can be found here: http://iamnop.co.cc/webgl/.

Next week I will spend my time setting up this WebGL framework so that everything is ready for rendering. Then I would move onto setting up the necessary shaders in order to do the rendering work.

Rendering Diagram

This week I read up on rendering with photon mapping in greater detail and was able to come up with a diagram to help understand the process. However, I left out Final Gathering, which is another method to obtain radiance from the photon map. Final Gather is a very costly process but produces more accurate results. Since I'm implementing this on WebGL and aiming for a decent level of performance, I have decided to leave it out for now and make it an optional component.

Next week, I will work on setting up initial WebGL framework, look for usable libraries, and write basic classes. There are still a lot of unknowns in the area that I will need to look into.

Anyway, here's my pretty diagram of the rendering process. Optimizations are highlighted in a brighter blue.

Senior Design - First Post!

It's been a tough process picking my topic. I originally had two ideas: 1) an Android AR app that lets you place furniture in any room, and 2) photon mapper on WebGL. In the end, I thought the AR project was a little too scary since it involves a lot of computer vision, although the prospect of playing around with Android SDK is still very attractive. So I decided I wanted to stick to basic computer graphics topics (which makes it safe because there's tons of resources out there), but taken to a new platform (I always wanted to play with WebGL), and that's how I came about my topic.

Here's the abstract:

Rendering is the process of generating a 2D image from a description of a 3D scene through a computer program, and it is one of the primary focuses of computer graphics. Years of research in the field has perfected the science of rendering such that today’s movies and films are able to produce almost perfect life-like images. With the advanced rendering methods we have today, it is difficult, sometimes impossible, to tell apart computer graphics from real-life photography. However, recently, web technology has been seeing many amazing improvements, and every day we are finding the web to be a more powerful and versatile platform.

The goal of this project is to bring realistic rendering with global illumination capabilities to the web platform through WebGL. The renderer uses regular ray tracing for direction illumination and uses photon mapping for indirect illumination. The renderer is expected to run on the latest WebGL supported browser, on any machine. The user can also modify the scene and the renderer can respond interactively. Because of these constraints, the target scene is quite simple, with only a few primitive objects.

I'll probably be spending the next week doing lots of reading, along with reading up on basic WebGL tutorials and setting up a basic framework, maybe getting a cube to show up on screen.