Thursday, October 22, 2009

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?




  1 <html><head>
  2 <script type="text/javascript" src="Sylvester.js"></script>
  3 <script type="text/javascript" src="webglu.js">
  4 </script>
  5 <script id="vshader" type="x-shader/x-vertex">
  6 attribute vec3 vertex;
  7 attribute vec3 color;
  8 uniform mat4 ProjectionMatrix;
  9 uniform mat4 ModelViewMatrix;
 10 void main(void) {
 11 gl_FrontColor = vec4(color,1);
 12 gl_Position = ProjectionMatrix * ModelViewMatrix * vec4(vertex, 1.0);
 13 }
 14 </script>
 15
 16 <script id="fshader" type="x-shader/x-fragment">
 17 void main(void) {
 18     gl_FragColor = gl_Color;
 19 }
 20 </script>
 21
 22 <script type="application/x-javascript">
 23 function start() {
 24     var wglu = new WGLU();
 25     with (wglu) {
 26         if (!initialize()) { return false; }
 27         newProgram('default');
 28         programs['default'].attachShaderByID('vshader');
 29         programs['default'].attachShaderByID('fshader');
 30         GL.clearColor(0.9, 0.9, 0.9, 1.0);
 31         wglu.camera.setPosition(2,2,-3);
 32     }
 33     var axisLines = new WGLUObject(wglu.GL.LINES);
 34     axisLines.vertexCount = 6;
 35     axisLines.fillArray('vertex',
 36             [[-5, 0, 0], [5,0,0],
 37             [ 0,-5, 0], [0,5,0],
 38             [ 0, 0,-5], [0,0,5]]);
 39     axisLines.fillArray('color',
 40             [wglu.red,  wglu.red,
 41             wglu.green,wglu.green,
 42             wglu.blue, wglu.blue]);
 43     setInterval(function() {
 44             wglu.update();
 45             wglu.draw();
 46             }, 10);          
 47 }
 48 </script></head><body onload='start()'>
 49 <canvas id='canvas' width='300' height='300'></canvas>
 50 </body></html>

0 comments:

Post a Comment