Thursday, March 17, 2011

Playing Around with WebGL

This week, I read up on WebGL and tried to play around with it. Originally, I was planning on doing a "Hello World" example with some squares, but then I realized that I actually don't know how to render text in the window frame. Don't remember doing it in 277 or 460. :( Anyhow, a quick Google search didn't help much, because most results ended up involving textures (is there an easier way to render text in the actual drawing window?).

I then realized that it had been a year and a half since I had done anything hands-on with openGL, and thus needed a refresher. What I ended up doing was following a tutorial on Learning WebGL and getting a blue square to display. Then I got two blue squares to display. This took a lot longer than expected because I wanted to type up the sample code myself and figure out how it works. I think I got it for the most part... Check out the super exciting screenshot below.
webGL is based on Javascript, for the most part (except for the shaders), so the syntax is different from what I'm used to programming graphics in. I like that it's a web-based format though, and I can also use HTML5. 

Plans for next week:
  • get text to display
  • get a skeleton to display (this involves being familiar with reading/parsing files in webGL)

3 comments:

Joe Kider said...

This is a nice first implementation step.
Next will be to continue down the path, and getting the skeleton. I will be very excited when you have that working, and will be a big step forward here.

Lu said...

So yeah, this was the demo with the smoke/particles: view-source:https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/google/particles/index.html

And from what I can see, they are creating the "letters" on the fly with stuff like:

var image =
'X.....X..XXXXXX..XXXXX....XXXX...X....',
'X.....X..X.......X....X..X.......X....',
'X..X..X..XXXXX...XXXXX...X..XXX..X....',
'X..X..X..X.......X....X..X....X..X....',
'.XX.XX...XXXXXX..XXXXX....XXXX...XXXXX';

Yiyi Zhou said...

Thanks Lu!! Really helpful, I'll check those out :)

Post a Comment