Saturday, October 24, 2009

Google Wave

UPDATE: Thanks to aperson pointing out that it wasn't working, fixed now!

Now that I've gotten Waves embedding properly there will a wave below each post's comments from now on!

Thursday, October 22, 2009

WebGLU, the Open Source WebGL Utility library hits v0.2

I've just wrapped up v0.2 of WebGLU. I'm working on updating the full documentation, I hope to be done with it later today, or some time tomorrow. v0.2 is already in the SVN repository on WebGLU's SourceForge project page, or you can just download it directly.

To see how useful WebGLU can be, check out my 50 line demo.

I need feedback. If you want to do something with WebGL and WebGLU can't help, or using it hurts performance, please let me know!

A WebGL / WebGLU Demo in 50 Lines!

Here's the updated code from the tutorial, by using my WebGLU v0.2 library the entire thing, including the necessary HTML for the page, is just 50 lines. Here's the demo itself. I've put together a new, 25 line, demo Neat, right?

Monday, October 19, 2009

WebGLU on SourceForge

The WebGLU library is now a project on SourceForge! Check it out at

Friday, October 16, 2009

Interactive Shader Editing with WebGL and the WebGLU Library

Here's the demo, you can even share what you do!

You will need a very recent browser which supports WebGL like Firefox 3.7 trunk builds.

WebGLU is approaching v0.2 and with it it's now possible to easily change the shader being used to render a given object. It's actually really simple now! One five line function, called when you click a link, is all it took.

Sunday, October 4, 2009

WebGL, What is it and How Can I Use it?

I'm putting these links at the top for easy access, click here to skip directly to the content.
Documentation for my work-in-progress library, WebGLU, is availible here.
The current version of WebGLU, v0.1, is available as a single file, webglu.v0.1.js.
Sylvester is available from here.
Copies of the files used in the tutorial below are available individually tutorial.html, tutorialPage.js; or as an archive.
Update: Thanks to Ademan for pointing out that GLSL is not exactly c, but a c-like language, corrected.
Update 2: Thanks to Kumar for pointing out that Fragment shaders operate on pixels, not polygons.

So what is WebGL anyway? WebGL is a standard created by Khronos (the creators/maintainers of OpenGL standard) for web browsers to use OpenGL. (Specifically OpenGL ES 2.0, which is a somewhat limited version originally developed for embedded devices, I've provided some code below that adds back a small portion of what's in OpenGL but not explicitly in OpenGL ES)

Friday, October 2, 2009

More WebGL progress, now with video!

Since my last post I've managed to improve the demo. I've also consolidated a lot of the code and learned to love prototypal inheritance, it's great stuff. I've embedded both a video and the application itself. Hopefully you'll be able to see at least one. The demo can be controlled with click and drag to look around and WASD keys to move in absolute directions (not view dependent). As usual the code is available to see how its done. webglPage.js webglu.js

Demo and video after the jump.

Saturday, September 26, 2009

Pyramid in WebGL

To view the demo you will need a browser with WebGL enabled, such as a Firefox nightly build

I figured out how to use multiple verticies and multiple array objects to give each face color. WebGL is interesting to work with, but I'm getting a better grip on how vertex attribute arrays work and how to work with them. Things like the vertexAttribPointer call are a little odd, in my opinion, because you don't give it anything significant, and you don't get anything back, but it's really important. It makes me realize why people advocate functional programming.

In any case, the result is this pyramid, you can control its rotation with your mouse. As usual you can check the source out to see how its done.

Demo after the jump

Friday, September 25, 2009

Black Triangle Redux, Now With More Spinning!

To view the demo you will need a browser with WebGL enabled, such as a Firefox nightly build

Another day, progress made. I'm slowly getting my head around OpenGL, or rather the OpenGL subset that is the current state of WebGL in FireFox. Nevertheless, I've managed to make the black triangle from the other day spin and user input (click and drag) see it on its own here. As usual, since WebGL is javascript, you can right-click view source to see exactly how it's done.

Demo is after the jump.

Wednesday, September 23, 2009

WebGL and One Black Triangle

Since WebGL started getting some recent press I have been interested in giving it a try. Although I've never done anything past a hello world in either OpenGL or Javascript this seemed like a good way to do both (I taught myself raytracing and c++ in a similar, though larger in scope, mutual method a year or so back). The past week and a half has consisted of me trying to get WebGL up and running any way I could. First through Webkit by way of building from source, on Windows. Unfortunately I could not get it working. However, as I started looked for alternatives Vladimir Vukićević posted about how WebGL was now in Firefox 3.7 nightlies(you'll have to go to about:config and toggle webgl.enable_for_all_sites). After some touch and go, and with the help of his Spore example I have prevailed. 

Ladies and gentlemen, I present a black triangle

[What is a black triangle?] The linked triangle will (read: should) appear if you are using a Firefox nightly and, theoretically, if you are using a Webkit build with WebGL enabled.

NOTE: Interestingly enough, If I am not mistaken, as of 9/23/2009 I am the second person to have a Firefox WebGL demo on the internet (the first being Vlad, who put it in Firefox in the first place) I feel special :D

Friday, September 11, 2009

On HMDs and Augmented Reality

With the help of professor Reynold Bailey of the RIT Computer Science department I was able to find a Head Mounted Display (HMD) that I could use to do some development with. The HMD in question were a pair of I-glasses SVGA 3D. I then took a small webcam I had laying around and jerry-rigged it to the front of the display facing out. I haven't done any work with augmented reality before, however, with the use of Processing and the Simple AR ToolKit coupled with JMyron I was able to get two proof-of-concepts up and running. The first used Sobel edge detection to process the webcam's stream and display that into the HMD. The second displayed a spinning green cube on the surface of a registration mark I had printed out.

Now that I know it's doable I'm going to look into OpenCV and the full ARToolKit libraries to create my own application. Some ideas I've had are an augmented reality tour around campus combining GPS data with the visual stream to determine which building is being looked at and displaying information about it to the viewer. Another thing that I think would be great fun would be great fun would be to determine the layout (walls, floor, and ceiling) of a room and one's position inside it and to run a fluid simulation within the room to simulate it filling with water. Although this will take far more processing power than my little Eee PC can provide.