September 24, 2010

Adding Color, Drawing a Tetrahedron, Cube with WebGL

Our second assignment asked us to use color when drawing a tetrahedron and cube using WebGL. Here is a screen shot of my work.

If you have a WebGl capable browser, then follow the link and you can test it yourself. Make sure you view source on the page.

Here are the three files you need to run this lesson.
lesson2.html
sylvester.js
glUtils.js

September 15, 2010

Drawing Simple Shapes – Triangle, Square in WebGL

Our first assignment asked us to draw simple shapes using WebGL. For this particular project I drew a simple square and triangle. Here is a screen shot of my work.

If you have a WebGl capable browser, then follow the link and you can test it yourself. Make sure you view source on the page. I heavily commented the code.

Here are the three files you need to run this lesson.
lesson1.html
sylvester.js
glUtils.js

September 8, 2010

Introduction to WebGL

I’m currently taking a computer graphics class and I’ll be spending this semester delving into WebGL. So, I’ll be giving some tutorials as I get new projects to work on.

Setting Up Your Browser To Support WebGL

First do a Google search for “google chrome developer build”, and it should be the first result. Here is the link it took me to.

http://www.google.com/chrome/intl/en/eula_dev.html

Once you have chrome’s developer build, click on [Start->All Programs->Google Chrome] and then right-click on ‘Google Chrome’. Select ‘properties’ and append this to the end of the [Target] string.

--enable-webgl

Here is how my target string looked like.

C:\Users\Chris\AppData\Local\Google\Chrome\Application\chrome.exe --enable-webgl

Now open up Chrome by going through [Start->All Programs->Google Chrome] and you should be ready to view WebGL webpages. Click here to test for your self.

Getting Started With WebGL

Here are the three files you need to set up your frist WebGL script.
webgl.html
sylvester.js
glUtils.js