shallaa/hello_triangle.html

## hello_triangle.html
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Hello Triangle</title>
    <meta name="keywords" content="shallaa, webgl, bsjs"/>
    <meta name="description" content="shallaa, webgl, bsjs"/>
    <meta charset="utf-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <style>body { margin: 0; padding: 0; }</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script>
(function(){
var canvas = document.getElementById('canvas'),
    keys = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'],
    i = keys.length, gl, buffer,
    vertices = [
         0.0,  0.5, 0.0,    // x, y, z
         0.5, -0.5, 0.0,
        -0.5, -0.5, 0.0
    ],
    createBuffer = function(){
        buffer = gl.createBuffer();
        gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
        gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW );
        gl.bindBuffer( gl.ARRAY_BUFFER, null );
    },
    createShader = function(){
        var vs_source = document.getElementById('shader-vs').innerHTML,
            fs_source = document.getElementById('shader-fs').innerHTML,
            vertexShader, fragmentShader, program;

        vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource( vertexShader, vs_source );
        gl.compileShader(vertexShader);

        fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource( fragmentShader, fs_source );
        gl.compileShader(fragmentShader);

        program = gl.createProgram();
        gl.attachShader( program, vertexShader );
        gl.attachShader( program, fragmentShader );
        gl.linkProgram(program);
        gl.useProgram(program);

        program.vertexPositionAttribute = gl.getAttribLocation( program, 'aVertexPosition' );
        gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
        gl.vertexAttribPointer( program.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0 );
        gl.enableVertexAttribArray(program.vertexPositionAttribute);
    },
    drawScene = function(){
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, 3);
    };

while( i-- ) if( gl = canvas.getContext(keys[i]) ) break;

if( gl ){
    gl.clearColor(0.0, 0.4, 0.8, 1.0);

    createBuffer();
    createShader();
    drawScene();
}
})();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<title>Hello Triangle</title>
	<meta name="keywords" content="shallaa, webgl, bsjs"/>
	<meta name="description" content="shallaa, webgl, bsjs"/>
	<meta charset="utf-8"/>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta name="format-detection" content="telephone=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<style>body { margin: 0; padding: 0; }</style>
	</head>
	<body>
	<canvas id="canvas" width="500" height="500"></canvas>
	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;
	void main(void) {
	gl_Position = vec4(aVertexPosition, 1.0);
	}
	</script>
	<script id="shader-fs" type="x-shader/x-fragment">
	void main(void) {
	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
	}
	</script>
	<script>
	(function(){
	var canvas = document.getElementById('canvas'),
	keys = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl'],
	i = keys.length, gl, buffer,
	vertices = [
	0.0, 0.5, 0.0, // x, y, z
	0.5, -0.5, 0.0,
	-0.5, -0.5, 0.0
	],
	createBuffer = function(){
	buffer = gl.createBuffer();
	gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
	gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW );
	gl.bindBuffer( gl.ARRAY_BUFFER, null );
	},
	createShader = function(){
	var vs_source = document.getElementById('shader-vs').innerHTML,
	fs_source = document.getElementById('shader-fs').innerHTML,
	vertexShader, fragmentShader, program;

	vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource( vertexShader, vs_source );
	gl.compileShader(vertexShader);

	fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource( fragmentShader, fs_source );
	gl.compileShader(fragmentShader);

	program = gl.createProgram();
	gl.attachShader( program, vertexShader );
	gl.attachShader( program, fragmentShader );
	gl.linkProgram(program);
	gl.useProgram(program);

	program.vertexPositionAttribute = gl.getAttribLocation( program, 'aVertexPosition' );
	gl.bindBuffer( gl.ARRAY_BUFFER, buffer );
	gl.vertexAttribPointer( program.vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0 );
	gl.enableVertexAttribArray(program.vertexPositionAttribute);
	},
	drawScene = function(){
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	};

	while( i-- ) if( gl = canvas.getContext(keys[i]) ) break;

	if( gl ){
	gl.clearColor(0.0, 0.4, 0.8, 1.0);

	createBuffer();
	createShader();
	drawScene();
	}
	})();
	</script>
	</body>
	</html>