kioku-systemk/inlineshader.html

## inlineshader.html
<html><body></body><script>
(function(){
var c = document.createElement("canvas");
document.body.appendChild(c);
c.setAttribute("style", "position:absolute;left:0px;top:0px");
var g = c.getContext("webgl")||c.getContext("experimental-webgl");
if (!g) {
	alert("This demo requires WebGL");
	return;
}

var vsshader = (function () {/*
	// vertex shader
	attribute vec4 p;
	void main(){
		gl_Position = p;
	}
*/}).toString().match(/\n([\s\S]*)\n/)[1];
var fsshader = (function () {/*
	// fragment shader
 	precision highp float;
 	void main(){
		gl_FragColor = vec4(0.1,0.2,0.3,1.0);
 	}
*/}).toString().match(/\n([\s\S]*)\n/)[1];

var fs = g.createShader(g.FRAGMENT_SHADER);
var vs = g.createShader(g.VERTEX_SHADER);
g.shaderSource(vs, vsshader);
g.shaderSource(fs, fsshader);

g.compileShader(vs);
g.compileShader(fs);
var pr = g.createProgram();
g.attachShader(pr, vs);
g.attachShader(pr, fs);
g.linkProgram(pr);
g.bindBuffer(g.ARRAY_BUFFER, g.createBuffer());
g.bufferData(g.ARRAY_BUFFER, new Float32Array([1,1,1,-3,-3,1]), g.STATIC_DRAW);

var stm = new Date().getTime();
var mW,mH;
function draw(){
	var w = window.innerWidth,
	    h = window.innerHeight;
	if (w != mW || h != mH) {
		mW = c.width = w;
		mH = c.height = h;
		g.viewport(0, 0, w, h);
	}
	g.useProgram(pr);
	g.uniform2fv(g.getUniformLocation(pr, "resolution"),[mW,mH]);
	g.uniform1f(g.getUniformLocation(pr, "time"),(new Date().getTime() - stm) / 1000.0);
	g.enableVertexAttribArray(0);
	g.vertexAttribPointer(0, 2, g.FLOAT, false, 0, 0);
	g.drawArrays(g.TRIANGLES, 0, 3);
}
setInterval(draw,16);
})();
</script></html>
	<html><body></body><script>
	(function(){
	var c = document.createElement("canvas");
	document.body.appendChild(c);
	c.setAttribute("style", "position:absolute;left:0px;top:0px");
	var g = c.getContext("webgl")\|\|c.getContext("experimental-webgl");
	if (!g) {
	alert("This demo requires WebGL");
	return;
	}

	var vsshader = (function () {/*
	// vertex shader
	attribute vec4 p;
	void main(){
	gl_Position = p;
	}
	/}).toString().match(/\n([\s\S])\n/)[1];
	var fsshader = (function () {/*
	// fragment shader
	precision highp float;
	void main(){
	gl_FragColor = vec4(0.1,0.2,0.3,1.0);
	}
	/}).toString().match(/\n([\s\S])\n/)[1];

	var fs = g.createShader(g.FRAGMENT_SHADER);
	var vs = g.createShader(g.VERTEX_SHADER);
	g.shaderSource(vs, vsshader);
	g.shaderSource(fs, fsshader);

	g.compileShader(vs);
	g.compileShader(fs);
	var pr = g.createProgram();
	g.attachShader(pr, vs);
	g.attachShader(pr, fs);
	g.linkProgram(pr);
	g.bindBuffer(g.ARRAY_BUFFER, g.createBuffer());
	g.bufferData(g.ARRAY_BUFFER, new Float32Array([1,1,1,-3,-3,1]), g.STATIC_DRAW);

	var stm = new Date().getTime();
	var mW,mH;
	function draw(){
	var w = window.innerWidth,
	h = window.innerHeight;
	if (w != mW \|\| h != mH) {
	mW = c.width = w;
	mH = c.height = h;
	g.viewport(0, 0, w, h);
	}
	g.useProgram(pr);
	g.uniform2fv(g.getUniformLocation(pr, "resolution"),[mW,mH]);
	g.uniform1f(g.getUniformLocation(pr, "time"),(new Date().getTime() - stm) / 1000.0);
	g.enableVertexAttribArray(0);
	g.vertexAttribPointer(0, 2, g.FLOAT, false, 0, 0);
	g.drawArrays(g.TRIANGLES, 0, 3);
	}
	setInterval(draw,16);
	})();
	</script></html>