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.



The result





For now it allows that 50 line demo to be achieved in just 25 lines. As then, this is the code for the entire page, take this, dump into a text file, change the extension to .html and open in a WebGL enabled browser. (with the linked scripts in the appropriate folders of course)

 1 <html><head>
 2 <link   type="text/css" rel="stylesheet" href="../example.css">
 3 <script type="text/javascript" src="../../Sylvester.src.js"></script>
 4 <script type="text/javascript" src="../../src/webglu.js"></script>
 5 </head><body onload="
 6     if (!$W.initialize()) return false;
 7
 8     $W.GL.clearColor(0.9, 0.9, 0.9, 1.0);
 9     $W.camera.setPosition(1,1,1);
10
11     var originLines = new $W.Object($W.GL.LINES);
12     originLines.vertexCount = 6;
13
14     var c = $W.constants.colors;
15     originLines.fillArray('vertex', [[-5,0,0], [5,0,0], [0,-5,0], [0,5,0], [0,0,-5], [0,0,5]]);
16     originLines.fillArray('color',  [c.RED,    c.RED,   c.GREEN,  c.GREEN, c.BLUE,   c.BLUE]);
17
18     setInterval(function() {
19             document.getElementById('overlay').innerHTML = $W.FPS;
20             $W.update();
21             $W.draw();  
22         }, 10);        
23 ">
24 <span id='overlay'</span><canvas id='canvas' width='300' height='300'></canvas>
25 </body></html>
 

Some may ask: Aren't you just moving the complexity into other files? After all it's really just as long, just all split up.

My answer is: Yes. The point being that these are the only 25 lines you, as a WebGL application developer, would need to care about.
Posted by Ben DeLillo at 8:11 PM

3 comments:

  1. AdamKJanuary 26, 2010 at 2:08 PM

    Forgive me if I am being stupid, but I don't see it?

    ReplyDelete
  2. AnonymousJanuary 28, 2010 at 8:19 AM

    AdamK: http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation

    ReplyDelete
  3. UnknownApril 5, 2011 at 10:59 AM

    I also do not see it. I'm running FF 4.0 with about:config webgl.force-enabled = true. I have your latest jscript source and I created the 25-line example locally and modified the source file references and I still do not see anything. I am able to see other WebGL demonstrations but not any using WebGLU. Any quick thoughts?

    ReplyDelete

Subscribe to: Post Comments (Atom)