webgl-demo.dart

import 'dart:html';
import 'dart:web_gl';
import 'dart:typed_data';
 
/**
 * WebGL Demo made in Dart. It works in http://try.dartlang.org/
 * Updated: 2013-05-14
 * created by: http://martinsikora.com/dart-webgl-simple-demo
 * updated by: https://plus.google.com/u/0/117240004279526018872
 */
class WebGLTest {
 
  RenderingContext gl;
  Program program;
  CanvasElement canvas;
  double aspect;
  bool running = false;

  
  double foobar = 0.5;
  int itemSize = 2; // 2D space
  bool adding = true;
  
  
  WebGLTest() {
    this.canvas = document.query('#drawHere');
    this.aspect = this.canvas.width / this.canvas.height;
    this.gl = this.canvas.getContext("experimental-webgl");
  }
 
  bool init() {
    if (this.gl == null) {
      return false;
    }
    
    this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
    
    // vertex shader source code. uPosition is our variable that we'll
    // use to create animation
    String vsSource = """
    attribute vec2 aPosition;
    void main() {
      gl_Position = vec4(aPosition, 0, 1);
    }
    """;
    
    // fragment shader source code. uColor is our variable that we'll
    // use to animate color
    String fsSource = """
    precision mediump float;
    uniform vec4 uColor;
    void main() {
      gl_FragColor = uColor;
    }""";
    
    // vertex shader compilation
    Shader vs = this.gl.createShader(RenderingContext.VERTEX_SHADER);
    this.gl.shaderSource(vs, vsSource);
    this.gl.compileShader(vs);
    
    // fragment shader compilation
    Shader fs = this.gl.createShader(RenderingContext.FRAGMENT_SHADER);
    this.gl.shaderSource(fs, fsSource);
    this.gl.compileShader(fs);
    
    // attach shaders to a WebGL program
    Program p = this.gl.createProgram();
    this.gl.attachShader(p, vs);
    this.gl.attachShader(p, fs);
    this.gl.linkProgram(p);
    this.gl.useProgram(p);
    
    /**
     * Check if shaders were compiled properly. This is probably the most painful part
     * since there's no way to "debug" shader compilation
     */
    if (!this.gl.getShaderParameter(vs, RenderingContext.COMPILE_STATUS)) { 
      print(this.gl.getShaderInfoLog(vs));
    }
    
    if (!this.gl.getShaderParameter(fs, RenderingContext.COMPILE_STATUS)) { 
      print(this.gl.getShaderInfoLog(fs));
    }
    
    if (!this.gl.getProgramParameter(p, RenderingContext.LINK_STATUS)) { 
      print(this.gl.getProgramInfoLog(p));
    }
        
    this.program = p;
    
    return true;
  }
  
  /**
   * Rendering loop
   */
  void update() {
    // genereate 3 points (that's 6 items in 2D space) = 1 polygon
    
 Float32List vertices = new Float32List.fromList([
      -this.foobar, this.foobar * aspect,
      this.foobar,  this.foobar * aspect,
      this.foobar, -this.foobar * aspect
    ]);
 
    this.gl.bindBuffer(RenderingContext.ARRAY_BUFFER, this.gl.createBuffer());
    this.gl.bufferData(RenderingContext.ARRAY_BUFFER,
                       vertices, RenderingContext.STATIC_DRAW);
 
    int numItems = vertices.length ~/ this.itemSize;
 
    this.gl.clearColor(0.9, 0.9, 0.9, 1);
    this.gl.clear(RenderingContext.COLOR_BUFFER_BIT);
    
    // set color
    UniformLocation uColor = gl.getUniformLocation(program, "uColor");
    // as defined in fragment shader source code, color is vector of 4 items
    this.gl.uniform4fv(uColor, new Float32List.fromList([this.foobar, this.foobar, 0.0, 1.0]));
 
    // set position
    // WebGL knows we want to use 'vertices' for this because
    // we called bindBuffer above (it's maybe a bit unclear but)
    // For more info: http://www.netmagazine.com/tutorials/get-started-webgl-draw-square
    int aPosition = this.gl.getAttribLocation(program, "aPosition");
    this.gl.enableVertexAttribArray(aPosition);
    this.gl.vertexAttribPointer(aPosition, this.itemSize,
                                RenderingContext.FLOAT, false, 0, 0);
    
    // draw it!
    this.gl.drawArrays(RenderingContext.TRIANGLES, 0, numItems);
    
    
    // change color and move the triangle a little bit
    this.foobar += (this.adding ? 1 : -1) * this.foobar / 100;
    
    if (this.foobar > 0.9) {
      this.adding = false;
    } else if (this.foobar < 0.2) {
      this.adding = true;
    }
    
    window.requestAnimationFrame((num time) { this.update(); });
  }
 
  void run() {
    window.requestAnimationFrame((num time) { this.update(); });
//    window.setInterval(() => this.update(), 50); // that's 20 fps
    this.running = true;
  }
}
 
void main() {
  document.head.append(new StyleElement()..appendText(STYLE));
  document.body.innerHtml = BODY;
  WebGLTest demo = new WebGLTest();
  if (demo.init()) {
    document.query('body').appendHtml('<p>You should see an animated triangle now.</p>');
    demo.run();
  } else {
    document.query('body').appendHtml("""<p>Sorry, your browser probably doesn\'t support WebGL.
      For more information visit 
      <a href="http://get.webgl.org/" target="_blank">http://get.webgl.org/</a>.</p>""");
  }
}

const String BODY = """
    <h1>WebGL Demo</h1>

    <p>Foo</p>

    <div id="container">
      <canvas id="drawHere" width="300" height="300" class="center"></canvas>
      <br/>
    </div>

    <footer>
      <p id="summary"> </p>
      <p id="notes"> </p>
    </footer>
""";

const String STYLE = r"""
body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

p {
  color: #333;
}

#container {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#summary {
  float: left;
}

#notes {
  float: right;
  width: 120px;
  text-align: right;
}

.error {
  font-style: italic;
  color: red;
}

img {
  border: 1px solid #ccc;
  margin: auto;
}

.center {
  display: block;
  margin: 0px auto;
  text-align: center;
}
""";