eiszfuchs · November 30, 2017 11:05
diff --git a/shader.html b/shader.html
 <!doctype html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>Shader</title>

        <style>

            [type="x-shader/x-fragment"] {
                display: block;
                white-space: pre;
                font-family: monospace;
            }

        </style>
    </head>

    <body>
        <canvas id="canvas"></canvas>

        <script id="2d-vertex-shader" type="x-shader/x-vertex">

            attribute vec2 a_position;

            void main() {
                gl_Position = vec4(a_position, 0, 1);
            }

        </script>

        <script id="2d-fragment-shader" type="x-shader/x-fragment">

            void main() {
                gl_FragColor = vec4(gl_FragCoord.x / 128.0, gl_FragCoord.y / 128.0, 0, 1);
            }

        </script>

        <script>

            'use strict';

            var canvas;
            var gl;
            var program;

            var render = function() {
                window.requestAnimationFrame(render, canvas);

                gl.clearColor(0.0, 0.0, 0.0, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);

                var positionLocation = gl.getAttribLocation(program, 'a_position');
                gl.enableVertexAttribArray(positionLocation);
                gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

                gl.drawArrays(gl.TRIANGLES, 0, 6);
            };

            var init = function() {
                canvas = document.getElementById('canvas');
                gl = canvas.getContext('experimental-webgl');

                canvas.width = 128;
                canvas.height = 128;

                gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

                var buffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    -1.0, -1.0,
                     1.0, -1.0,
                    -1.0,  1.0,
                    -1.0,  1.0,
                     1.0, -1.0,
                     1.0,  1.0,
                ]), gl.STATIC_DRAW);

                var shaderScript;
                var shaderSource;

                var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

                shaderScript = document.getElementById('2d-vertex-shader');
                shaderSource = shaderScript.textContent;
                gl.shaderSource(vertexShader, shaderSource);
                gl.compileShader(vertexShader);

                shaderScript = document.getElementById('2d-fragment-shader');
                shaderSource = shaderScript.textContent;
                gl.shaderSource(fragmentShader, shaderSource);
                gl.compileShader(fragmentShader);

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

                render();
            };

            window.onload = init;

        </script>
    </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Shader</title>

	<style>

	[type="x-shader/x-fragment"] {
	display: block;
	white-space: pre;
	font-family: monospace;
	}

	</style>
	</head>

	<body>
	<canvas id="canvas"></canvas>

	<script id="2d-vertex-shader" type="x-shader/x-vertex">

	attribute vec2 a_position;

	void main() {
	gl_Position = vec4(a_position, 0, 1);
	}

	</script>

	<script id="2d-fragment-shader" type="x-shader/x-fragment">

	void main() {
	gl_FragColor = vec4(gl_FragCoord.x / 128.0, gl_FragCoord.y / 128.0, 0, 1);
	}

	</script>

	<script>

	'use strict';

	var canvas;
	var gl;
	var program;

	var render = function() {
	window.requestAnimationFrame(render, canvas);

	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	var positionLocation = gl.getAttribLocation(program, 'a_position');
	gl.enableVertexAttribArray(positionLocation);
	gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

	gl.drawArrays(gl.TRIANGLES, 0, 6);
	};

	var init = function() {
	canvas = document.getElementById('canvas');
	gl = canvas.getContext('experimental-webgl');

	canvas.width = 128;
	canvas.height = 128;

	gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

	var buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
	-1.0, -1.0,
	1.0, -1.0,
	-1.0, 1.0,
	-1.0, 1.0,
	1.0, -1.0,
	1.0, 1.0,
	]), gl.STATIC_DRAW);

	var shaderScript;
	var shaderSource;

	var vertexShader = gl.createShader(gl.VERTEX_SHADER);
	var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

	shaderScript = document.getElementById('2d-vertex-shader');
	shaderSource = shaderScript.textContent;
	gl.shaderSource(vertexShader, shaderSource);
	gl.compileShader(vertexShader);

	shaderScript = document.getElementById('2d-fragment-shader');
	shaderSource = shaderScript.textContent;
	gl.shaderSource(fragmentShader, shaderSource);
	gl.compileShader(fragmentShader);

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

	render();
	};

	window.onload = init;

	</script>
	</body>
	</html>