Obj Loader and WebGL Render - Demo 2

Here is an improved demo of WebGL rendering out the OBJs that I throw at it.

The updates include:

• Textures
• Wireframe
• Detailed Key and Mouse controls
• Page Layout improvements, including separate texture view

I have also developed a simple interface for user-uploading of an OBJ and Texture. Once uploaded you are  redirected to the GLWindow to play with it... but more on this another time.

For now, if you want to check out the demo live, make sure you have a WebGL browser. (Chrome, Firefox Beta, Webkit Nightly etc)

If you're interested in this stuff please follow the blog and leave your thoughts and comments.

Questions and feedback are always welcome.

Technical Stuff:


I did a re-factor for this version in an attempt to separate the GL logic from the frontend canvas. Given the limited capabilities of Javascript to represent Objects, this was difficult. I am positive my JS could be more effective, but I am happy with the progress I made on this front.

As hinted at above, I also tweaked the OBJ loader. Significantly, I am now calculating Bounding Volume information, which gets included in the JSON format. This still needs a little testing, but my initial tests seem to be ok. My next step with the OBJ loader is to make it more generic and accept varying meshes. I also have a form and handler that automates the Obj Loading process.

In terms of rendering, I am setting flags in my key events that allow the user interactivity. These simply toggle the binding and drawing of certain buffers. For transformations, I am calculating values based on the difference in mouse position and setting up matrices accordingly.

The PHP ObjLoader can be found here

The WebGL can be read through "view source" on the demo.

As always, feedback is welcome

PHP ObjLoader - Demo

I wrote yesterday about the PHP Obj Loader I had written, and today I prepared a simple demo!

Model by Elliot Spence for NCCA group project - Terminus

The WebGL code has been adapted from http://learningwebgl.com/blog/

The model has been imported using the Obj Loader, converted to JSON and rendered in WebGL. To see a live demo of this in action go to my site to check it out. (You will need a WebGL enabled browser for this, I've been using Google Chrome but Webkit Nightly or Mozilla Beta should do)

Note: this link is now for demo 2

The demo is a proof of concept for the backend of a WebGL project I am working on at the NCCA. It shows the importing of complex, triangulated model, into Javascript for use with HTML5.

My plan is too extend the module to accomodate .obj files that contain exclusively Quads. These two functions will be sufficient for many of the tasks I want to complete. I will also incorporate FTP functions later on.

The code is open source and hosted on Google Code. That repository also contains examples on how to use the loader. (bear in mind, it will only work locally with full file paths for the moment)

On another topic: the video for Coin Sweeper, the game I made for my last assignment is now available for viewing, along with the report which can be found on my website.

If there are any questions or comments, please let me know :-)

PHP ObjLoader

Just finished writing a PHP Obj Loader for WebGL.

The basic requirement of the loader was to read in an .obj file, and turn it into something useful for use with WebGL. In order to do this, I wanted to write a PHP backend that could parse the information into JSON.

Also, I chose to format the dataset into Triangles, with no merged verts so I could tell GL to draw in GL_TRIANGLE mode with no worries.

The current version of the loader allows three lines to be called in order to output a .js version of the geometry:

$objLoader = new ObjLoader("geo/test.obj");
$objLoader->unpackForGl();
$objLoader->writeUnpackedToJson("geo/test.obj.js");

These lines will output a file in the following format.

var vertices = [
 -0.500000,-0.500000,0.500000,
 0.500000,-0.500000,0.500000,
 -0.500000,0.500000,0.500000
]

var texCoords = [
 -0.500000,-0.500000,0.500000,
 0.500000,-0.500000,0.500000,
 -0.500000,0.500000,0.500000
]

var normals = [
 -0.500000,-0.500000,0.500000,
 0.500000,-0.500000,0.500000,
 -0.500000,0.500000,0.500000
]

Now when setting up my buffers, I can simply include the script in the <head> tag and refer to these values  to send on for shading.


I have begun to learn WebGL using the tutorials at http://learningwebgl.com/blog/?p=28

So to test this loader, I used the first tutorial (with some tweaks) and have rendered an obj successfully.

Coin Sweeper, first indie game

I recently completed a project for an NCCA module. The focus of the assignment was software design and I chose to make a simple, enjoyable game.



Coin Sweeper - NCCA first project from Peter Smith on Vimeo.

NB: for now, this video will remain private for assessment reasons

The focus of the game was too create something accessible and fun. As such, the focus was on gameplay more than graphical style or audio.

Details of the implementation can be found in my report at www.pj-smith.co.uk