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.



function updateShaders() {
    wglu.programs['default'].detachShaderByName('vs');
    wglu.programs['default'].detachShaderByName('fs');

    wglu.programs['default'].attachNewShader('vs',
            $('#vs-source').val(), wglu.GL.VERTEX_SHADER);
    wglu.programs['default'].attachNewShader('fs',
            $('#fs-source').val(), wglu.GL.FRAGMENT_SHADER);

    wglu.programs['default'].use();
}



I'm using the jQuery library to pull the text from the textboxes.

This is actually a dual example since there are two WGLUObjects, the pyramid and the axis lines, each of them use a different shader program to render. This was also quite easy to achieve using my WebGLU library. First, initialize the shader programs, then, assign the axis shader to the originLines object.


wglu.newProgram('default');
with (wglu.programs['default']{
    attachNewShader('vs', $('#vs-source').val(), wglu.GL.VERTEX_SHADER);
    attachNewShader('fs', $('#fs-source').val(), wglu.GL.FRAGMENT_SHADER);
}

wglu.newProgram('axis');
with (wglu.programs['axis']{
    attachShaderByID('axis-vs');
    attachShaderByID('axis-fs');
}

//...

var originLines = new WGLUObject(wglu.GL.LINES);
originLines.shaderProgram = 'axis';



Unfortunately, I'm rather new to OpenGL and shaders in general, so I don't know what data needs to be given to the shader to do certain things, but if you have an idea, but the data you need isn't getting sent to the shader, just let me know in the comments, in an email, or in an IM to me, I'll see what I can do to include it.

v0.2 isn't quite ready, but as soon as I finish up a couple smaller items and update the docs I'll do an official release, of course since it's javascript, if you really want to see the code, just right-click and view the source!

I'll try to get a video once I'm at my desktop with some free time, for now a picture will have to do.

I'm only getting 19 FPS because the laptop I'm doing my dev on is 5 years old and the integrated graphics don't support the necessary OpenGL so I'm forced to use software rendering.

6 comments:

  1. Holy shit! Very nice Benjamin!

    ReplyDelete
  2. Great idea! I'll have to try my mandelbrot pixel shader on it when I get back to the office and have a decent machine (I get 14fps on this laptop :-()

    ReplyDelete
  3. Very nice! I get about 35fps on my MacBook Air using Minefield. There seems to be a text escaping problem when running it on Webkit.

    ReplyDelete
  4. Could you be more specific Jim?

    ReplyDelete
  5. I'm also unable to see this demo on WebKit.

    ReplyDelete