Alexander-0x80/minimal-glsl-shader.html

## minimal-glsl-shader.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>

    <canvas width="512" height="512"></canvas>

    <script type="x-shader/x-vertex" id="vertex-shader">
        #version 100
        void main() {
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_PointSize = 64.0;
        }
    </script>
    <script type="x-shader/x-fragment" id="fragment-shader">
        #version 100
        precision highp float;

        void main() {
            gl_FragColor = vec4(1.0, 0.54, 0.34, 1.0);
        }
    </script>

    <script>
    var gl = init_gl(document.querySelector("canvas"));

    var vs_src = document.querySelector("#vertex-shader").innerHTML;
    var vs = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vs, vs_src);
    gl.compileShader(vs);

    var fs_src = document.querySelector("#fragment-shader").innerHTML;
    var fs = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fs, fs_src);
    gl.compileShader(fs);

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

    gl.detachShader(program, vs);
    gl.detachShader(program, fs);
    gl.deleteShader(vs);
    gl.deleteShader(fs);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        // Clean
        gl.useProgram(null);
        gl.deleteProgram(program);

        console.log("Error: " + gl.getProgramInfoLog(program));
        //return;
    }

    gl.enableVertexAttribArray(0);
    var buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);

    gl.useProgram(program);
    gl.drawArrays(gl.POINTS, 0, 1);

    // Clean
    //gl.useProgram(null);
    //gl.deleteBuffer(buf);
    //gl.deleteProgram(program);


    function init_gl(c) {
        var gl = c.getContext("webgl");
        c.width = c.clientWidth;
        c.height = c.clientHeight;

        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        return gl;
    }

    </script>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	</head>
	<body>

	<canvas width="512" height="512"></canvas>

	<script type="x-shader/x-vertex" id="vertex-shader">
	#version 100
	void main() {
	gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
	gl_PointSize = 64.0;
	}
	</script>
	<script type="x-shader/x-fragment" id="fragment-shader">
	#version 100
	precision highp float;

	void main() {
	gl_FragColor = vec4(1.0, 0.54, 0.34, 1.0);
	}
	</script>

	<script>
	var gl = init_gl(document.querySelector("canvas"));

	var vs_src = document.querySelector("#vertex-shader").innerHTML;
	var vs = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vs, vs_src);
	gl.compileShader(vs);

	var fs_src = document.querySelector("#fragment-shader").innerHTML;
	var fs = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fs, fs_src);
	gl.compileShader(fs);

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

	gl.detachShader(program, vs);
	gl.detachShader(program, fs);
	gl.deleteShader(vs);
	gl.deleteShader(fs);

	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	// Clean
	gl.useProgram(null);
	gl.deleteProgram(program);

	console.log("Error: " + gl.getProgramInfoLog(program));
	//return;
	}

	gl.enableVertexAttribArray(0);
	var buf = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buf);
	gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);

	gl.useProgram(program);
	gl.drawArrays(gl.POINTS, 0, 1);

	// Clean
	//gl.useProgram(null);
	//gl.deleteBuffer(buf);
	//gl.deleteProgram(program);


	function init_gl(c) {
	var gl = c.getContext("webgl");
	c.width = c.clientWidth;
	c.height = c.clientHeight;

	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	return gl;
	}

	</script>

	</body>
	</html>