Thursday, November 18, 2010

Building the VideoSphere - Going Further with WebGLU

In this blog post I will pick apart how my videosphere demo is put together. I suspect the simplicity will surprise some. Once again, viewing these demos requires a WebGL enabled web browser, instructions on how to get one are available on the Khronos site.

Here's a video of the same demo
In addition to exploring how the demo is put together we'll look at some of the different ways to get your data into WebGLU, hopefully now matter how you want to organize your page you'll be able to fit WebGLU into that. First I'll show the most concise version, great if you don't mind WebGLU making XHRs to load its modules, shaders, and material definitions.


Monday, November 15, 2010

Getting Started with WebGLU

This blog post will cover the basics of creating a WebGL page using WebGLU, here's what the final result will look like
 
A live demo is available, but first and foremost you need a browser capable of WebGL, check out the Khronos wiki for more on that.


Monday, August 2, 2010

Getting Started With Materials in WebGLU


For those who do not know, WebGLU is  a development framework for building applications with WebGL.

For the past several months I have been working on various internal improvements to WebGLU. One of the most significant improvements I've made is the introduction of a materials system. This system allows shaders and textures to be associated with one another and for them to all be loaded and initialized with a single line of code.

A material can be created in a declarative manner using a JSON formatted file, or procedurally at runtime. In either case the Material constructor is given an object literal containing either the path to the file or the complete material definition.

Here's an example material file we'll call example.json:
{
 name: 'myMaterial',
 program: {
   name: 'textured',
   shaders:[
     {name:'texVS', path:$W.paths.shaders + 'tex.vert'},
     {name:'texFS', path:$W.paths.shaders + 'tex.frag'}
   ]
 },
 textures: [
   {name:'check', type:'Image', 
    path:'$W.paths.textures + 'check.png'}
 ]
}

As can be seen here, there is support for multiple shaders and multiple textures. WebGLU automatically generates the appropriate callbacks to setup the textures each frame, though this can be modified should you wish to change it at runtime.

It's worth noting that material definitions will have access to the $W object when the material is created so the constant paths can be used as shown above. This is not necessary, but allows shaders to not only be shared between programs, but to do so without relocating textures or shaders in the process. If the material files are also stored on the $W.paths.materials path then all programs will simply have access to them. That means no more mucking about with shaders at all unless you want to!

To use this material in a WebGLU program it's as simple as creating it and assigning it to an object:

new $W.Material({path:$W.paths.materials+'example.json'});
myObject.setMaterial('myMaterial');

In a future post I will go into more detail about the improvements to the Object type, but I just want to show here that creating the object, setting its geometry, and setting its material can all be done with a single call. Although whether the createObject() call will remain independent or be folded into the $W.Object constructor is a decision I still have to make that will also affect how other classes are instantiated in the future. It's not a decision I'm taking lightly and any opinions or advice would be greatly appreciated because I want WebGLU to have a consistent API, so any decision I make for Object will be propagated to the other types and their constructors.

sphere = $W.createObject({
  type:$W.GL.TRIANGLES,
  model:$W.util.genSphere(20, 20, 8),
  material:'myMaterial'
});

If people are interested I could do an entire post on exactly the changes to the API I am considering.


Monday, April 19, 2010

JQuery Podcast Interview

As part of BarCamp Rochester I gave a talk on WebGLU. Ralph Whitbeck of the JQuery Podcast was in attendance for my talk and proposed an interview to explain some of the details of WebGLU. The podcast is available here and my interview starts about 13 minutes in.

Friday, March 12, 2010

New Address

I've finally finagled the DNS settings for my domain to get a subdomain set up correctly. From now on the URL for this blog will be blog.one-geek.com. I'm also going to be updating more frequently, although not every post is going to be about WebGLU, just thought I'd give people a heads up there.

Monday, March 8, 2010

CrazyGLU is for the Boids


Hey you! Think WebGLU isn't up to snuff? Let me know why so I can improve it!

As I’ve done work on WebGLU I’ve implemented a variety of neat features, but in doing so a couple problems have arisen. The first is that I sometimes have something semi-working, but not entirely done. The second is that some features don’t really need to be loaded into every page. The solution, for now at least, is CrazyGLU, which is where I will put any experimental, incomplete, or niche features until such time it is appropriate to relocate them to WebGLU proper.

Monday, January 25, 2010

Remember that 50 line WebGL demo? Now it's 25 lines

So a while back I did a 50 line demo to show how little code it takes to make WebGL content when using the WebGLU library. Since then I've simplified and consolidated WebGLU in addition to adding new features. One of the biggest (code length wise) was to load shaders from a file and add a default shader as well as a couple other simple shaders. Hopefully WebGLU will grow to include many cool and useful shaders.