rezonn/webgl.htm

## webgl.htm
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<script id="vshader" type="VERTEX_SHADER">
uniform mat4 position;
uniform mat4 camera;
attribute vec3 aVertexPosition;
void main() {
    gl_Position = position * camera * vec4(aVertexPosition, 0.9);
}
</script>
<script id="fshader" type="FRAGMENT_SHADER">
precision mediump float;
void main() {
    gl_FragColor = vec4(1.0, 0.8, 1.0, 1.0);
}
</script>
<script type="text/javascript">
function loadShader(shaderScript, gl) {
    var source = document.scripts[shaderScript].text;
    var type = document.scripts[shaderScript].type;
    type = gl[type];
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.log("Error 2" + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

function loop(age) {
    gl.clearColor(1.0, 1.0, 1.0, 1.0);
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT);
    j = 30*Math.sin(age/500);
    var camera = new Float32Array([
        1.0,0.0,0.0,0.0,
        0.0,1.0,0.0,0.0,
        0.0,0.0,1.0,0.0,
        0.0,0.0,0.0,1.0]);
    uniform(gl,"camera",camera);
    for (var k=0;k<2;k++) {
        var vertices = [
            0.2,  0.2,  0.0,
            -0.2,  0.2,  0.0,
            0.2, -0.2,  0.0,
            0.2, -0.2,  0.0,
            -0.2,  0.2,  0.0,
            -0.2, -0.2,  0.0
            ];
        var position = new Float32Array([
            1.0,0.0,0.0,0.0,
            0.0,1.0,0.0,0.0,
            0.0,0.0,1.0,0.0,
            (j+k*50)/100,(k==1?(j+k*50)/100:0),0.0,1.0]);
        uniform(gl,"position",position);
        var vertexPositionAttribute = gl.getAttribLocation(gl.program, "aVertexPosition");
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
        gl.enableVertexAttribArray(vertexPositionAttribute);
        gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.TRIANGLES, 0, vertices.length/3);
    }

    window.requestAnimationFrame(loop);
}

function uniform(gl,n,v) {
    if (gl && n && v) gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, n),false, v);
}

window.onload = function() {
    gl = canvas.getContext("webgl");
    gl.viewportWidth = canvas.width;
    gl.viewportHeight = canvas.height;
    gl.program = gl.createProgram();
    gl.attachShader(gl.program, loadShader("vshader",gl));
    gl.attachShader(gl.program, loadShader("fshader",gl));
    gl.linkProgram(gl.program);
    if(!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) console.log("Error 1");
    gl.useProgram(gl.program);
    loop();
}

</script>
</head>
<body>
<canvas id = "canvas" width = "500" height = "500"></canvas>
</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<script id="vshader" type="VERTEX_SHADER">
	uniform mat4 position;
	uniform mat4 camera;
	attribute vec3 aVertexPosition;
	void main() {
	gl_Position = position * camera * vec4(aVertexPosition, 0.9);
	}
	</script>
	<script id="fshader" type="FRAGMENT_SHADER">
	precision mediump float;
	void main() {
	gl_FragColor = vec4(1.0, 0.8, 1.0, 1.0);
	}
	</script>
	<script type="text/javascript">
	function loadShader(shaderScript, gl) {
	var source = document.scripts[shaderScript].text;
	var type = document.scripts[shaderScript].type;
	type = gl[type];
	var shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	console.log("Error 2" + gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	return null;
	}
	return shader;
	}

	function loop(age) {
	gl.clearColor(1.0, 1.0, 1.0, 1.0);
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT);
	j = 30*Math.sin(age/500);
	var camera = new Float32Array([
	1.0,0.0,0.0,0.0,
	0.0,1.0,0.0,0.0,
	0.0,0.0,1.0,0.0,
	0.0,0.0,0.0,1.0]);
	uniform(gl,"camera",camera);
	for (var k=0;k<2;k++) {
	var vertices = [
	0.2, 0.2, 0.0,
	-0.2, 0.2, 0.0,
	0.2, -0.2, 0.0,
	0.2, -0.2, 0.0,
	-0.2, 0.2, 0.0,
	-0.2, -0.2, 0.0
	];
	var position = new Float32Array([
	1.0,0.0,0.0,0.0,
	0.0,1.0,0.0,0.0,
	0.0,0.0,1.0,0.0,
	(j+k50)/100,(k==1?(j+k50)/100:0),0.0,1.0]);
	uniform(gl,"position",position);
	var vertexPositionAttribute = gl.getAttribLocation(gl.program, "aVertexPosition");
	var vertexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
	gl.enableVertexAttribArray(vertexPositionAttribute);
	gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
	gl.drawArrays(gl.TRIANGLES, 0, vertices.length/3);
	}

	window.requestAnimationFrame(loop);
	}

	function uniform(gl,n,v) {
	if (gl && n && v) gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, n),false, v);
	}

	window.onload = function() {
	gl = canvas.getContext("webgl");
	gl.viewportWidth = canvas.width;
	gl.viewportHeight = canvas.height;
	gl.program = gl.createProgram();
	gl.attachShader(gl.program, loadShader("vshader",gl));
	gl.attachShader(gl.program, loadShader("fshader",gl));
	gl.linkProgram(gl.program);
	if(!gl.getProgramParameter(gl.program, gl.LINK_STATUS)) console.log("Error 1");
	gl.useProgram(gl.program);
	loop();
	}

	</script>
	</head>
	<body>
	<canvas id = "canvas" width = "500" height = "500"></canvas>
	</body>
	</html>