manse/webgl_sample.html

## webgl_sample.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebGL Playground</title>
</head>
<body>
<canvas id="target" width="500" height="500"></canvas>
<script type="text/vertex" id="vs">
precision highp float;

attribute vec2 aCoordinate;

uniform float uOffsetX;
uniform float uOffsetY;

varying vec2 vCoordinate;

void main(void) {
	vCoordinate = aCoordinate;

	vec2 coord = aCoordinate;
	coord = coord * 2.0 - 1.0;
	if (coord == vec2(0.0)) {
		coord.x += uOffsetX;
		coord.y += uOffsetY;
	}
	gl_Position = vec4(coord, 0.0, 1.0);
}
</script>
<script type="text/fragment" id="fs">
precision highp float;

varying vec2 vCoordinate;

uniform float uBlue;

void main(void) {
	gl_FragColor = vec4(vCoordinate.x, vCoordinate.y, uBlue, 1.0);
	// or
	gl_FragColor = vec4(vCoordinate.xy, uBlue, 1.0);
}
</script>
<script type="text/javascript">
(function() {
var
	contextNames = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"],
	canvas = document.getElementById("target"),
	ctx
;
for (var i = 0, ii = contextNames.length; i < ii && !ctx; i++) {
	ctx = canvas.getContext(contextNames[i]);
}
if (!ctx) return;


ctx.clearColor(0, 0, 0, 0);
ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
ctx.viewport(0, 0, 500, 500);


var program = ctx.createProgram();

var vertexShader = ctx.createShader(ctx.VERTEX_SHADER);
ctx.shaderSource(vertexShader, document.getElementById("vs").textContent);
ctx.compileShader(vertexShader);
ctx.attachShader(program, vertexShader);
if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
	console.error(ctx.getShaderInfoLog(vertexShader));
}

var fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER);
ctx.shaderSource(fragmentShader, document.getElementById("fs").textContent);
ctx.compileShader(fragmentShader);
ctx.attachShader(program, fragmentShader);
if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) {
	console.error(ctx.getShaderInfoLog(fragmentShader));
}

ctx.linkProgram(program);

if (!ctx.getProgramParameter(program, ctx.LINK_STATUS)) {
	console.error(ctx.getProgramInfoLog(program));
}

ctx.useProgram(program);


var coordinates = [
	0, 0,
	0, 0.5,
	0.5, 0,

	0, 0.5,
	0.5, 0,
	0.5, 0.5,

	0.5, 0.5,
	0.5, 1,
	1, 0.5,

	0.5, 1,
	1, 0.5,
	1, 1
];

var attributeBuffer = ctx.createBuffer();
ctx.bindBuffer(ctx.ARRAY_BUFFER, attributeBuffer);
ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(coordinates), ctx.STATIC_DRAW);

var attribLocation = ctx.getAttribLocation(program, "aCoordinate");
ctx.enableVertexAttribArray(attribLocation);
ctx.bindBuffer(ctx.ARRAY_BUFFER, attributeBuffer);
ctx.vertexAttribPointer(attribLocation, 2, ctx.FLOAT, false, 0, 0);


var startAt = new Date().getTime();
setInterval(function() {
	var timeSpent = new Date().getTime() - startAt;

	var uBlueLocation = ctx.getUniformLocation(program, "uBlue");
	ctx.uniform1f(uBlueLocation, (timeSpent % 1000) / 1000);

	var uOffsetXLocation = ctx.getUniformLocation(program, "uOffsetX");
	ctx.uniform1f(uOffsetXLocation, Math.sin(timeSpent / 1000) * 0.5);

	var uOffsetYLocation = ctx.getUniformLocation(program, "uOffsetY");
	ctx.uniform1f(uOffsetYLocation, Math.cos(timeSpent / 1000) * 0.5);

	ctx.drawArrays(ctx.TRIANGLES, 0, 12);
}, 10);

})();
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>WebGL Playground</title>
	</head>
	<body>
	<canvas id="target" width="500" height="500"></canvas>
	<script type="text/vertex" id="vs">
	precision highp float;

	attribute vec2 aCoordinate;

	uniform float uOffsetX;
	uniform float uOffsetY;

	varying vec2 vCoordinate;

	void main(void) {
	vCoordinate = aCoordinate;

	vec2 coord = aCoordinate;
	coord = coord * 2.0 - 1.0;
	if (coord == vec2(0.0)) {
	coord.x += uOffsetX;
	coord.y += uOffsetY;
	}
	gl_Position = vec4(coord, 0.0, 1.0);
	}
	</script>
	<script type="text/fragment" id="fs">
	precision highp float;

	varying vec2 vCoordinate;

	uniform float uBlue;

	void main(void) {
	gl_FragColor = vec4(vCoordinate.x, vCoordinate.y, uBlue, 1.0);
	// or
	gl_FragColor = vec4(vCoordinate.xy, uBlue, 1.0);
	}
	</script>
	<script type="text/javascript">
	(function() {
	var
	contextNames = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"],
	canvas = document.getElementById("target"),
	ctx
	;
	for (var i = 0, ii = contextNames.length; i < ii && !ctx; i++) {
	ctx = canvas.getContext(contextNames[i]);
	}
	if (!ctx) return;


	ctx.clearColor(0, 0, 0, 0);
	ctx.clear(ctx.COLOR_BUFFER_BIT \| ctx.DEPTH_BUFFER_BIT);
	ctx.viewport(0, 0, 500, 500);


	var program = ctx.createProgram();

	var vertexShader = ctx.createShader(ctx.VERTEX_SHADER);
	ctx.shaderSource(vertexShader, document.getElementById("vs").textContent);
	ctx.compileShader(vertexShader);
	ctx.attachShader(program, vertexShader);
	if (!ctx.getShaderParameter(vertexShader, ctx.COMPILE_STATUS)) {
	console.error(ctx.getShaderInfoLog(vertexShader));
	}

	var fragmentShader = ctx.createShader(ctx.FRAGMENT_SHADER);
	ctx.shaderSource(fragmentShader, document.getElementById("fs").textContent);
	ctx.compileShader(fragmentShader);
	ctx.attachShader(program, fragmentShader);
	if (!ctx.getShaderParameter(fragmentShader, ctx.COMPILE_STATUS)) {
	console.error(ctx.getShaderInfoLog(fragmentShader));
	}

	ctx.linkProgram(program);

	if (!ctx.getProgramParameter(program, ctx.LINK_STATUS)) {
	console.error(ctx.getProgramInfoLog(program));
	}

	ctx.useProgram(program);


	var coordinates = [
	0, 0,
	0, 0.5,
	0.5, 0,

	0, 0.5,
	0.5, 0,
	0.5, 0.5,

	0.5, 0.5,
	0.5, 1,
	1, 0.5,

	0.5, 1,
	1, 0.5,
	1, 1
	];

	var attributeBuffer = ctx.createBuffer();
	ctx.bindBuffer(ctx.ARRAY_BUFFER, attributeBuffer);
	ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(coordinates), ctx.STATIC_DRAW);

	var attribLocation = ctx.getAttribLocation(program, "aCoordinate");
	ctx.enableVertexAttribArray(attribLocation);
	ctx.bindBuffer(ctx.ARRAY_BUFFER, attributeBuffer);
	ctx.vertexAttribPointer(attribLocation, 2, ctx.FLOAT, false, 0, 0);


	var startAt = new Date().getTime();
	setInterval(function() {
	var timeSpent = new Date().getTime() - startAt;

	var uBlueLocation = ctx.getUniformLocation(program, "uBlue");
	ctx.uniform1f(uBlueLocation, (timeSpent % 1000) / 1000);

	var uOffsetXLocation = ctx.getUniformLocation(program, "uOffsetX");
	ctx.uniform1f(uOffsetXLocation, Math.sin(timeSpent / 1000) * 0.5);

	var uOffsetYLocation = ctx.getUniformLocation(program, "uOffsetY");
	ctx.uniform1f(uOffsetYLocation, Math.cos(timeSpent / 1000) * 0.5);

	ctx.drawArrays(ctx.TRIANGLES, 0, 12);
	}, 10);

	})();
	</script>
	</body>
	</html>