-
-
Save adam-singer/5604947 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
"""; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment