matchbox_webgl_proto.html

<!-- filthy matchbox prototyping environment -->
<!-- lewis@lewissaunders.com -->
<canvas id="canvas" width="640" height="360"></canvas>
<textarea id="txt" style="width:640px; height:360px;">
uniform float adsk_result_w, adsk_result_h;
uniform float adsk_time;
uniform float amount;
uniform vec2 position;
uniform vec3 colour;
uniform int number;
uniform bool enable;

void main() {
 vec2 res = vec2(adsk_result_w, adsk_result_h);
 vec2 p = gl_FragCoord.xy / res;
 p *= vec2(sin(adsk_time/10.0), cos(adsk_time/10.0));
 p += position;
 vec3 o = vec3(p.x, p.y, 0.5);
 gl_FragColor = vec4(o, 1.0);
}
</textarea>
<button onClick="compile();">compile</button>
<form id="uniforms"></form>

<script>
var program;
var starttime;

// GL setup
canvas = document.getElementById("canvas");
gl = canvas.getContext('experimental-webgl');
gl.viewport(0, 0, canvas.width, canvas.height);

// Vertex array of two triangles
vbuf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0]), gl.STATIC_DRAW);

compile();
draw();

function compile() {
	vs = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vs, "attribute vec3 vposition; void main() { gl_Position = vec4(vposition, 1.0); }\n");
	gl.compileShader(vs);

	fs = gl.createShader(gl.FRAGMENT_SHADER);
	fsrc = "precision mediump float;\n" + document.getElementById("txt").value + "\n";
	gl.shaderSource(fs, fsrc);
	gl.compileShader(fs);

	program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	gl.useProgram(program);

	// Allow vertex shader to get its position attribute from our vertex array
	posattr = gl.getAttribLocation(program, "vposition");
	gl.enableVertexAttribArray(posattr);
	gl.vertexAttribPointer(posattr, 2, gl.FLOAT, false, 0, 0);

	starttime = Date.now();

	// Search for uniforms in the fragment shader and create form elements
	uniforms = document.getElementById("uniforms");
	uniforms.innerHTML = "";
	lines = fsrc.split("\n");
	for(i = 0; i < lines.length; i++) {
		line = lines[i].trim();
		line = line.replace(/\/\/.*/, "");
		line = line.replace(/;/, "");
		words = line.split(" ");
		if(words[0] == "uniform") {
			names = words.slice(2, words.length);
			names = names.join("");
			names = names.split(",");
			for(j = 0; j < names.length; j++) {
				name = names[j].replace(",", "");
				type = words[1];
				uniforms.innerHTML += name;
				u = document.createElement("input");
				u.type = "text";
				u.name = name;
				u.setAttribute("data-gltype", type);
				uniforms.appendChild(u);
				switch(type) {
					case "float":
						u.setAttribute("value", "1.0");
					break;
					case "vec2":
						u.setAttribute("value", "0.5 0.5");
					break;
					case "vec3":
						u.setAttribute("value", "1.0 0.5 0.2");
					break;
					case "int":
						u.setAttribute("value", "1");
					break;
					case "bool":
						u.setAttribute("value", "0");
					break;
					default:
					break;
				}
				if(name == "adsk_result_w") u.setAttribute("value", canvas.width);
				if(name == "adsk_result_h") u.setAttribute("value", canvas.height);
				uniforms.innerHTML += "<br />";
			}
		}
	}
}

function draw() {
	// Set uniforms from form elements
	uniforms = document.getElementById("uniforms");
	for(i = 0; i < uniforms.children.length; i++) {
		u = uniforms.children[i];
		if(u.tagName != "INPUT") continue;
		split = u.value.split(" ");

		loc = gl.getUniformLocation(program, u.name);

		switch(u.getAttribute("data-gltype")) {
			case "float":
				gl.uniform1f(loc, u.value);
				if(u.name == "adsk_time") {
					frames = (Date.now() - starttime) / 40;
					frames = Math.floor(frames);
					u.setAttribute("value", frames);
					gl.uniform1f(loc, frames);
				}
			break;
			case "vec2":
				gl.uniform2f(loc, split[0], split[1]);
			break;
			case "vec3":
				gl.uniform3f(loc, split[0], split[1], split[2]);
			break;
			case "int":
				gl.uniform1i(loc, u.value);
			break;
			case "bool":
				gl.uniform1i(loc, u.value);
			break;
			default:
			break;
		}
	}

	gl.drawArrays(gl.TRIANGLES, 0, 6);
	window.requestAnimationFrame(draw);
}
</script>